Skip to content

Commit 2f77a67

Browse files
HarpushHarpush
authored
feat: support angular compiler strict templates (#353)
1 parent cf59ead commit 2f77a67

13 files changed

Lines changed: 140 additions & 116 deletions

File tree

‎angular.json‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"assets": ["src/favicon.ico", "src/assets"],
2626
"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],
2727
"scripts": [],
28-
"aot": false,
28+
"aot": true,
2929
"vendorChunk": true,
3030
"extractLicenses": false,
3131
"buildOptimizer": false,
@@ -35,13 +35,7 @@
3535
},
3636
"configurations": {
3737
"production": {
38-
"budgets": [
39-
{
40-
"type": "anyComponentStyle",
41-
"maximumWarning": "2kb",
42-
"maximumError": "4kb"
43-
}
44-
],
38+
"budgets": [],
4539
"outputHashing": "all"
4640
},
4741
"development": {

‎projects/angular-split/src/lib/component/split.component.ts‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
} from '@angular/core'
1919
import { Observable, Subscriber, Subject } from 'rxjs'
2020
import { debounceTime } from 'rxjs/operators'
21-
2221
import {
2322
IArea,
2423
IPoint,
@@ -27,6 +26,10 @@ import {
2726
IOutputData,
2827
IOutputAreaSizes,
2928
IDefaultOptions,
29+
IAreaSize,
30+
ISplitDirection,
31+
ISplitDir,
32+
ISplitUnit,
3033
} from '../interface'
3134
import { SplitAreaDirective } from '../directive/split-area.directive'
3235
import {
@@ -107,7 +110,7 @@ import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from '../angular-split-config.token'
107110
encapsulation: ViewEncapsulation.Emulated,
108111
})
109112
export class SplitComponent implements AfterViewInit, OnDestroy {
110-
@Input() set direction(v: 'horizontal' | 'vertical') {
113+
@Input() set direction(v: ISplitDirection) {
111114
this._direction = v === 'vertical' ? 'vertical' : 'horizontal'
112115

113116
this.renderer.addClass(this.elRef.nativeElement, `as-${this._direction}`)
@@ -119,11 +122,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
119122
this.build(false, false)
120123
}
121124

122-
get direction(): 'horizontal' | 'vertical' {
125+
get direction(): ISplitDirection {
123126
return this._direction
124127
}
125128

126-
@Input() set unit(v: 'percent' | 'pixel') {
129+
@Input() set unit(v: ISplitUnit) {
127130
this._unit = v === 'pixel' ? 'pixel' : 'percent'
128131

129132
this.renderer.addClass(this.elRef.nativeElement, `as-${this._unit}`)
@@ -132,37 +135,37 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
132135
this.build(false, true)
133136
}
134137

135-
get unit(): 'percent' | 'pixel' {
138+
get unit(): ISplitUnit {
136139
return this._unit
137140
}
138141

139-
@Input() set gutterSize(v: number | null) {
142+
@Input() set gutterSize(v: number | `${number}` | null | undefined) {
140143
this._gutterSize = getInputPositiveNumber(v, 11)
141144

142145
this.build(false, false)
143146
}
144147

145-
get gutterSize(): number | null {
148+
get gutterSize(): number {
146149
return this._gutterSize
147150
}
148151

149-
@Input() set gutterStep(v: number) {
152+
@Input() set gutterStep(v: number | `${number}`) {
150153
this._gutterStep = getInputPositiveNumber(v, 1)
151154
}
152155

153156
get gutterStep(): number {
154157
return this._gutterStep
155158
}
156159

157-
@Input() set restrictMove(v: boolean) {
160+
@Input() set restrictMove(v: boolean | `${boolean}`) {
158161
this._restrictMove = getInputBoolean(v)
159162
}
160163

161164
get restrictMove(): boolean {
162165
return this._restrictMove
163166
}
164167

165-
@Input() set useTransition(v: boolean) {
168+
@Input() set useTransition(v: boolean | `${boolean}`) {
166169
this._useTransition = getInputBoolean(v)
167170

168171
if (this._useTransition) {
@@ -176,7 +179,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
176179
return this._useTransition
177180
}
178181

179-
@Input() set disabled(v: boolean) {
182+
@Input() set disabled(v: boolean | `${boolean}`) {
180183
this._disabled = getInputBoolean(v)
181184

182185
if (this._disabled) {
@@ -190,17 +193,17 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
190193
return this._disabled
191194
}
192195

193-
@Input() set dir(v: 'ltr' | 'rtl') {
196+
@Input() set dir(v: ISplitDir) {
194197
this._dir = v === 'rtl' ? 'rtl' : 'ltr'
195198

196199
this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir)
197200
}
198201

199-
get dir(): 'ltr' | 'rtl' {
202+
get dir(): ISplitDir {
200203
return this._dir
201204
}
202205

203-
@Input() set gutterDblClickDuration(v: number) {
206+
@Input() set gutterDblClickDuration(v: number | `${number}`) {
204207
this._gutterDblClickDuration = getInputPositiveNumber(v, 0)
205208
}
206209

@@ -243,11 +246,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
243246
this[property] = this._config[property]
244247
})
245248
}
246-
private _direction: 'horizontal' | 'vertical'
249+
private _direction: ISplitDirection
247250

248-
private _unit: 'percent' | 'pixel'
251+
private _unit: ISplitUnit
249252

250-
private _gutterSize: number | null
253+
private _gutterSize: number
251254

252255
private _gutterStep: number
253256

@@ -257,7 +260,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
257260

258261
private _disabled: boolean
259262

260-
private _dir: 'ltr' | 'rtl'
263+
private _dir: ISplitDir
261264

262265
private _gutterDblClickDuration: number
263266

@@ -268,8 +271,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
268271

269272
private transitionEndSubscriber: Subscriber<IOutputAreaSizes>
270273

271-
private dragProgressSubject: Subject<IOutputData> = new Subject()
272-
dragProgress$: Observable<IOutputData> = this.dragProgressSubject.asObservable()
274+
private dragProgressSubject = new Subject<IOutputData>()
275+
dragProgress$ = this.dragProgressSubject.asObservable()
273276

274277
private isDragging = false
275278
private isWaitingClear = false
@@ -364,15 +367,15 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
364367
}
365368

366369
public getVisibleAreaSizes(): IOutputAreaSizes {
367-
return this.displayedAreas.map((a) => (a.size === null ? '*' : a.size))
370+
return this.displayedAreas.map((a) => a.size)
368371
}
369372

370373
public setVisibleAreaSizes(sizes: IOutputAreaSizes): boolean {
371374
if (sizes.length !== this.displayedAreas.length) {
372375
return false
373376
}
374377

375-
const formattedSizes = sizes.map((s) => getInputPositiveNumber(s, null))
378+
const formattedSizes = sizes.map((s) => getInputPositiveNumber(s, '*'))
376379
const isValid = isUserSizesValid(this.unit, formattedSizes)
377380

378381
if (isValid === false) {
@@ -394,7 +397,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
394397
if (resetOrders === true) {
395398
// If user provided 'order' for each area, use it to sort them.
396399
if (this.displayedAreas.every((a) => a.component.order !== null)) {
397-
this.displayedAreas.sort((a, b) => <number>a.component.order - <number>b.component.order)
400+
this.displayedAreas.sort((a, b) => a.component.order - b.component.order)
398401
}
399402

400403
// Then set real order with multiples of 2, numbers between will be used by gutters.
@@ -417,7 +420,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
417420
const defaultSize = 100 / this.displayedAreas.length
418421

419422
this.displayedAreas.forEach((area) => {
420-
area.size = useUserSizes ? <number>area.component.size : defaultSize
423+
area.size = useUserSizes ? area.component.size : defaultSize
421424
area.minSize = getAreaMinSize(area)
422425
area.maxSize = getAreaMaxSize(area)
423426
})
@@ -431,22 +434,22 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
431434
area.maxSize = getAreaMaxSize(area)
432435
})
433436
} else {
434-
const wildcardSizeAreas = this.displayedAreas.filter((a) => a.component.size === null)
437+
const wildcardSizeAreas = this.displayedAreas.filter((a) => a.component.size === '*')
435438

436439
// No wildcard area > Need to select one arbitrarily > first
437440
if (wildcardSizeAreas.length === 0 && this.displayedAreas.length > 0) {
438441
this.displayedAreas.forEach((area, i) => {
439-
area.size = i === 0 ? null : area.component.size
442+
area.size = i === 0 ? '*' : area.component.size
440443
area.minSize = i === 0 ? null : getAreaMinSize(area)
441444
area.maxSize = i === 0 ? null : getAreaMaxSize(area)
442445
})
443446
} else if (wildcardSizeAreas.length > 1) {
444447
// More than one wildcard area > Need to keep only one arbitrarily > first
445448
let alreadyGotOne = false
446449
this.displayedAreas.forEach((area) => {
447-
if (area.component.size === null) {
450+
if (area.component.size === '*') {
448451
if (alreadyGotOne === false) {
449-
area.size = null
452+
area.size = '*'
450453
area.minSize = null
451454
area.maxSize = null
452455
alreadyGotOne = true
@@ -485,7 +488,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
485488

486489
this.displayedAreas.forEach((area) => {
487490
// Area with wildcard size
488-
if (area.size === null) {
491+
if (area.size === '*') {
489492
if (this.displayedAreas.length === 1) {
490493
area.component.setStyleFlex(1, 1, `100%`, false, false)
491494
} else {
@@ -495,7 +498,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
495498
area.component.setStyleFlex(
496499
0,
497500
0,
498-
`calc( ${area.size}% - ${(<number>area.size / 100) * sumGutterSize}px )`,
501+
`calc( ${area.size}% - ${(area.size / 100) * sumGutterSize}px )`,
499502
area.minSize !== null && area.minSize === area.size,
500503
area.maxSize !== null && area.maxSize === area.size,
501504
)
@@ -507,7 +510,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
507510
// PIXEL MODE
508511
this.displayedAreas.forEach((area) => {
509512
// Area with wildcard size
510-
if (area.size === null) {
513+
if (area.size === '*') {
511514
if (this.displayedAreas.length === 1) {
512515
area.component.setStyleFlex(1, 1, `100%`, false, false)
513516
} else {
@@ -646,10 +649,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
646649

647650
// We have a wildcard size area beside the dragged gutter.
648651
// In this case we can only calculate the size based on the move restricted areas.
649-
if (areaSnapshotBefore.area.size === null || areaSnapshotAfter.area.size === null) {
652+
if (areaSnapshotBefore.area.size === '*' || areaSnapshotAfter.area.size === '*') {
650653
const notInvolvedAreasSizesPercent = this.displayedAreas.reduce((accum, area) => {
651654
if (areaSnapshotBefore.area !== area && areaSnapshotAfter.area !== area) {
652-
return accum + area.size
655+
return accum + (area.size as number)
653656
}
654657

655658
return accum
@@ -661,7 +664,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
661664
this.snapshot.allInvolvedAreasSizePercent = [
662665
...this.snapshot.areasBeforeGutter,
663666
...this.snapshot.areasAfterGutter,
664-
].reduce((t, a) => t + a.sizePercentAtStart, 0)
667+
].reduce((t, a) => t + (a.sizePercentAtStart as number), 0)
665668
}
666669
}
667670

@@ -789,7 +792,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
789792
// Hack because of browser messing up with sizes using calc(X% - Ypx) -> el.getBoundingClientRect()
790793
// If not there, playing with gutters makes total going down to 99.99875% then 99.99286%, 99.98986%,..
791794
const all = [...areasBefore.list, ...areasAfter.list]
792-
const wildcardArea = all.find((a) => a.percentAfterAbsorption == null)
795+
const wildcardArea = all.find((a) => a.percentAfterAbsorption == '*')
793796
// In case we have a wildcard area - always align the percents on the wildcard area.
794797
const areaToReset =
795798
wildcardArea ??
@@ -803,7 +806,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
803806
if (areaToReset) {
804807
areaToReset.percentAfterAbsorption =
805808
this.snapshot.allInvolvedAreasSizePercent -
806-
all.filter((a) => a !== areaToReset).reduce((total, a) => total + a.percentAfterAbsorption, 0)
809+
all.filter((a) => a !== areaToReset).reduce((total, a) => total + (a.percentAfterAbsorption as number), 0)
807810
}
808811
}
809812

@@ -919,8 +922,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
919922
this.updateArea(comp, false, false)
920923
}
921924

922-
public getAriaAreaSizeText(size: number | null): string {
923-
if (size === null) {
925+
public getAriaAreaSizeText(size: IAreaSize): string {
926+
if (size === '*') {
924927
return null
925928
}
926929

‎projects/angular-split/src/lib/directive/split-area.directive.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit, Renderer2 } fr
22
import { Subscription } from 'rxjs'
33
import { SplitComponent } from '../component/split.component'
44
import { getInputBoolean, getInputPositiveNumber } from '../utils'
5+
import { IAreaSize } from '../interface'
56

67
@Directive({
78
selector: 'as-split-area, [as-split-area]',
@@ -10,7 +11,7 @@ import { getInputBoolean, getInputPositiveNumber } from '../utils'
1011
export class SplitAreaDirective implements OnInit, OnDestroy {
1112
private _order: number | null = null
1213

13-
@Input() set order(v: number | null) {
14+
@Input() set order(v: number | `${number}` | null | undefined) {
1415
this._order = getInputPositiveNumber(v, null)
1516

1617
this.split.updateArea(this, true, false)
@@ -20,21 +21,21 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
2021
return this._order
2122
}
2223

23-
private _size: number | null = null
24+
private _size: IAreaSize = null
2425

25-
@Input() set size(v: number | null) {
26-
this._size = getInputPositiveNumber(v, null)
26+
@Input() set size(v: IAreaSize | `${number}` | null | undefined) {
27+
this._size = getInputPositiveNumber(v, '*')
2728

2829
this.split.updateArea(this, false, true)
2930
}
3031

31-
get size(): number | null {
32+
get size(): IAreaSize {
3233
return this._size
3334
}
3435

3536
private _minSize: number | null = null
3637

37-
@Input() set minSize(v: number | null) {
38+
@Input() set minSize(v: number | `${number}` | null | undefined) {
3839
this._minSize = getInputPositiveNumber(v, null)
3940

4041
this.split.updateArea(this, false, true)
@@ -46,7 +47,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
4647

4748
private _maxSize: number | null = null
4849

49-
@Input() set maxSize(v: number | null) {
50+
@Input() set maxSize(v: number | `${number}` | null | undefined) {
5051
this._maxSize = getInputPositiveNumber(v, null)
5152

5253
this.split.updateArea(this, false, true)
@@ -58,7 +59,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
5859

5960
private _lockSize = false
6061

61-
@Input() set lockSize(v: boolean) {
62+
@Input() set lockSize(v: boolean | `${boolean}`) {
6263
this._lockSize = getInputBoolean(v)
6364

6465
this.split.updateArea(this, false, true)
@@ -70,7 +71,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
7071

7172
private _visible = true
7273

73-
@Input() set visible(v: boolean) {
74+
@Input() set visible(v: boolean | `${boolean}`) {
7475
this._visible = getInputBoolean(v)
7576

7677
if (this._visible) {

0 commit comments

Comments
 (0)