Skip to content

Commit dffebd6

Browse files
hakimiohakimio
committed
chore: signal input() migration
1 parent e45229b commit dffebd6

File tree

57 files changed

+939
-839
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+939
-839
lines changed

‎apps/virtual-table-demo/src/samples/sample-five/sample-five.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<span>
33
Example resizing
44
@if (table.isRendered) {
5-
<span>({{ table.source?.length }}x{{ table.displayedColumns.length }})</span>
5+
<span>({{ table.source()?.length }}x{{ table.displayedColumns.length }})</span>
66
}
77
</span>
88
<button

‎apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
<mat-form-field appearance="outline">
33
<mat-label>Find options</mat-label>
44
<mat-select
5-
[value]="$any(table.filterable.filterTypeDefinition)[state.key!]"
5+
[value]="$any(table().filterable.filterTypeDefinition)[state().key!]"
66
(valueChange)="updateFilterType($event)"
77
>
8-
@for (type of table.filterable.types | keyvalue; track type.key) {
8+
@for (type of table().filterable.types | keyvalue; track type.key) {
99
<mat-option [value]="type.value">
1010
{{ type.key }}
1111
</mat-option>
1212
}
1313
</mat-select>
1414
</mat-form-field>
15-
@switch ($any(table.filterable.filterTypeDefinition)[state.key!]) {
15+
@switch ($any(table().filterable.filterTypeDefinition)[state().key!]) {
1616
@case (TableFilterType.IS_FILLED) {
1717
<mat-button-toggle-group
18-
[ngModel]="$any(table.filterable.definition)[state.key!]"
19-
(ngModelChange)="table.filterable.updateFilterValueBy($event, state.key); table.filter()"
18+
[ngModel]="$any(table().filterable.definition)[state().key!]"
19+
(ngModelChange)="table().filterable.updateFilterValueBy($event, state().key); table().filter()"
2020
>
2121
<mat-button-toggle [value]="true">Filled</mat-button-toggle>
2222
<mat-button-toggle [value]="false">Empty</mat-button-toggle>
@@ -57,8 +57,8 @@
5757
<input
5858
matInput
5959
[matDatepicker]="picker"
60-
[ngModel]="$any(table.filterable.definition)[state.key!]"
61-
(ngModelChange)="table.filterable.updateFilterValueBy($event, state.key); table.filter()"
60+
[ngModel]="$any(table().filterable.definition)[state().key!]"
61+
(ngModelChange)="table().filterable.updateFilterValueBy($event, state().key); table().filter()"
6262
/>
6363
<mat-datepicker-toggle
6464
matIconSuffix
@@ -69,13 +69,13 @@
6969
}
7070
@default {
7171
<mat-form-field appearance="outline">
72-
<mat-label>Filter by {{ state.key! | uppercase }}</mat-label>
72+
<mat-label>Filter by {{ state().key! | uppercase }}</mat-label>
7373
<input
7474
autocomplete="off"
7575
matInput
7676
name="width"
77-
[ngModel]="$any(table.filterable.definition)[state.key!]"
78-
(ngModelChange)="table.filterable.updateFilterValueBy($event, state.key); table.filter()"
77+
[ngModel]="$any(table().filterable.definition)[state().key!]"
78+
(ngModelChange)="table().filterable.updateFilterValueBy($event, state().key); table().filter()"
7979
/>
8080
<mat-icon matSuffix>search</mat-icon>
8181
</mat-form-field>

‎apps/virtual-table-demo/src/samples/sample-fourteen/context-menu-sample/context-menu-sample.component.ts‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {KeyValuePipe, UpperCasePipe} from '@angular/common';
22
import {
33
ChangeDetectionStrategy,
44
Component,
5-
Input,
5+
input,
66
ViewEncapsulation,
77
} from '@angular/core';
88
import {FormsModule} from '@angular/forms';
@@ -61,27 +61,24 @@ import {
6161
changeDetection: ChangeDetectionStrategy.OnPush,
6262
})
6363
export class ContextMenuSampleComponent<T> {
64-
@Input()
65-
public table!: TableBuilder<T>;
66-
67-
@Input()
68-
public state!: Partial<FilterStateEvent>;
64+
public readonly table = input.required<TableBuilder<T>>();
65+
public readonly state = input.required<Partial<FilterStateEvent>>();
6966

7067
public TableFilterType: typeof TableFilterType = TableFilterType;
7168
public dateRange: Array<Nullable<Date>> = [null, null];
7269

7370
public changeDateRange(): void {
7471
if (this.dateRange[0] || this.dateRange[1]) {
75-
this.table.filterable.updateFilterValueBy(this.dateRange, this.state.key);
72+
this.table().filterable.updateFilterValueBy(this.dateRange, this.state().key);
7673
} else {
77-
this.table.filterable.updateFilterValueBy(null, this.state.key);
74+
this.table().filterable.updateFilterValueBy(null, this.state().key);
7875
}
7976

80-
this.table.filter();
77+
this.table().filter();
8178
}
8279

8380
public updateFilterType(event: unknown): void {
84-
this.table.filterable.updateFilterTypeBy(event as any, this.state.key);
85-
this.table.filter();
81+
this.table().filterable.updateFilterTypeBy(event as any, this.state().key);
82+
this.table().filter();
8683
}
8784
}

‎apps/virtual-table-demo/src/samples/sample-fourteen/sample-fourteen.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
<ngx-footer>
154154
<p style="padding: 3px 0 0 20px">
155155
<b>Size</b>
156-
: {{ table.source?.length }} x {{ table?.displayedColumns?.length }}
156+
: {{ table.source()?.length }} x {{ table?.displayedColumns?.length }}
157157
</p>
158158
</ngx-footer>
159159
</ngx-table-builder>

‎apps/virtual-table-demo/src/samples/sample-third/sample-third.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<span>
33
Example selection
44
@if (table.isRendered) {
5-
<span>({{ table.source?.length }}x{{ table.displayedColumns.length }})</span>
5+
<span>({{ table.source()?.length }}x{{ table.displayedColumns.length }})</span>
66
}
77
<span style="margin-left: 5px">Selected: {{ table.selection.selectionModel.size }}</span>
88
</span>

‎libs/cdk/directives/amount-format/amount-format.directive.ts‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import {
22
AfterViewInit,
33
ChangeDetectorRef,
44
Directive,
5+
effect,
56
ElementRef,
67
inject,
7-
Input,
8+
model,
89
NgZone,
910
OnDestroy,
1011
OnInit,
@@ -42,9 +43,20 @@ export class AmountFormat implements OnInit, AfterViewInit, OnDestroy {
4243
constructor() {
4344
const globalOptions = inject<AmountOptions>(AMOUNT_FORMAT_OPTIONS);
4445

46+
this.listenToOptionInputChanges();
4547
this.setFirstLocalOptionsByGlobal(globalOptions);
4648
}
4749

50+
private listenToOptionInputChanges() {
51+
effect(() => {
52+
const options: Partial<AmountOptions> = this.amountFormatOptions();
53+
54+
this.options = {...this.options, ...(options ?? {})};
55+
56+
this.recalculateOnOptionChange();
57+
});
58+
}
59+
4860
public get isInAngularZone(): boolean {
4961
return this.isInsideAngularZone;
5062
}
@@ -57,19 +69,11 @@ export class AmountFormat implements OnInit, AfterViewInit, OnDestroy {
5769
return this.elementRef.nativeElement;
5870
}
5971

60-
public get amountFormatOptions(): Partial<AmountOptions> {
61-
return this.options;
62-
}
63-
64-
@Input()
65-
public set amountFormatOptions(options: Partial<AmountOptions>) {
66-
this.options = {...this.options, ...(options ?? {})};
67-
this.recalculateWhenChangesOptions();
68-
}
72+
public readonly amountFormatOptions = model<Partial<AmountOptions>>(this.options);
6973

7074
public setLang(lang: string): void {
7175
this.options.lang = lang;
72-
this.recalculateWhenChangesOptions();
76+
this.recalculateOnOptionChange();
7377
}
7478

7579
public getCursorPosition(): number {
@@ -322,9 +326,10 @@ export class AmountFormat implements OnInit, AfterViewInit, OnDestroy {
322326
private setFirstLocalOptionsByGlobal(options: AmountOptions): void {
323327
this.options = deepClone(options);
324328
this.previousLang = this.options.lang;
329+
this.amountFormatOptions.set(this.options);
325330
}
326331

327-
private recalculateWhenChangesOptions(): void {
332+
private recalculateOnOptionChange(): void {
328333
const value: number = toNumber(
329334
this.element.value,
330335
this.previousLang ?? this.options.lang,

‎libs/cdk/directives/convert-case/convert-case.directive.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
ElementRef,
55
HostListener,
66
inject,
7-
Input,
7+
input,
88
} from '@angular/core';
99
import {NgControl} from '@angular/forms';
1010
import {toStringValue} from '@angular-ru/cdk/string';
@@ -14,11 +14,8 @@ export class ConvertCase implements AfterViewInit {
1414
private readonly elementRef = inject<ElementRef>(ElementRef);
1515
private readonly ngControl = inject<NgControl>(NgControl, {optional: true});
1616

17-
@Input()
18-
public toUpperCase = true;
19-
20-
@Input()
21-
public toLowerCase = false;
17+
public readonly toUpperCase = input(true);
18+
public readonly toLowerCase = input(false);
2219

2320
private get element(): HTMLInputElement {
2421
return this.elementRef.nativeElement;
@@ -28,7 +25,7 @@ export class ConvertCase implements AfterViewInit {
2825
public onInput(): void {
2926
const dirtyValue: string = toStringValue(this.element.value);
3027

31-
this.element.value = this.toLowerCase
28+
this.element.value = this.toLowerCase()
3229
? dirtyValue.toLowerCase()
3330
: dirtyValue.toUpperCase();
3431
this.ngControl?.reset(this.element.value);

‎libs/cdk/directives/disable-control/disable-control.directive.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
import {Directive, inject, Input} from '@angular/core';
1+
import {Directive, effect, inject, input} from '@angular/core';
22
import {NgControl} from '@angular/forms';
33
import {PlainObject} from '@angular-ru/cdk/typings';
44

55
@Directive({selector: '[disableControl]'})
66
export class DisableControl {
77
private readonly ngControl = inject<NgControl>(NgControl, {optional: true})!;
88

9-
@Input()
10-
public set disableControl(condition: boolean) {
11-
const action: string = condition ? 'disable' : 'enable';
9+
constructor() {
10+
this.setControlStateOnInputChange();
11+
}
12+
13+
private setControlStateOnInputChange() {
14+
effect(() => {
15+
const disable = this.disableControl();
16+
const action: string = disable ? 'disable' : 'enable';
1217

13-
(this.ngControl?.control as PlainObject)?.[action]?.();
18+
(this.ngControl?.control as PlainObject)?.[action]?.();
19+
});
1420
}
21+
22+
public readonly disableControl = input(false);
1523
}

‎libs/cdk/directives/initial-focus/initial-focus.directive.ts‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Directive,
44
ElementRef,
55
inject,
6-
Input,
6+
input,
77
NgZone,
88
OnDestroy,
99
} from '@angular/core';
@@ -19,14 +19,10 @@ export class InitialFocus implements AfterViewInit, OnDestroy {
1919

2020
private readonly className: string = 'initial-focused';
2121
private readonly unsubscribe$: Subject<boolean> = new Subject<boolean>();
22-
@Input()
23-
public focusDelay: number = MIN_DELAY;
2422

25-
@Input()
26-
public focusDisabled = false;
27-
28-
@Input()
29-
public type?: string;
23+
public readonly focusDelay = input<number>(MIN_DELAY);
24+
public readonly focusDisabled = input(false);
25+
public readonly type = input<string>();
3026

3127
private get el(): HTMLInputElement {
3228
return this.element.nativeElement;
@@ -41,9 +37,9 @@ export class InitialFocus implements AfterViewInit, OnDestroy {
4137
}
4238

4339
private decideAndTryToFocus(): void {
44-
if (!this.focusDisabled && !this.isFocused()) {
40+
if (!this.focusDisabled() && !this.isFocused()) {
4541
this.ngZone.runOutsideAngular((): void => {
46-
timer(this.focusDelay)
42+
timer(this.focusDelay())
4743
.pipe(takeUntil(this.unsubscribe$))
4844
.subscribe((_value: number): void => {
4945
this.focus();
@@ -64,13 +60,15 @@ export class InitialFocus implements AfterViewInit, OnDestroy {
6460
this.el.focus();
6561

6662
// selection range doesn't work with number type
67-
if (this.type === 'number') {
63+
const type = this.type();
64+
65+
if (type === 'number') {
6866
this.el.type = 'text';
6967
}
7068

7169
this.el.setSelectionRange(this.el.value.length, this.el.value.length);
7270

73-
if (this.type === 'number') {
71+
if (type === 'number') {
7472
this.el.type = 'number';
7573
}
7674

‎libs/cdk/directives/input-filter/input-filter.directive.ts‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Directive, ElementRef, HostListener, inject, Input} from '@angular/core';
1+
import {Directive, ElementRef, HostListener, inject, input} from '@angular/core';
22
import {hasItems} from '@angular-ru/cdk/array';
33
import {ControlValueInterceptor} from '@angular-ru/cdk/forms';
44
import {filter, FilterPredicate} from '@angular-ru/cdk/string';
@@ -18,15 +18,13 @@ export class InputFilter {
1818
})!;
1919

2020
private manualEvent: Nullable<InputEvent> = null;
21-
@Input()
22-
declare public inputFilter: FilterPredicate | '';
2321

24-
@Input()
25-
public filterDisabled = false;
22+
public readonly inputFilter = input<FilterPredicate | ''>('');
23+
public readonly filterDisabled = input(false);
2624

2725
@HostListener('input', ['$event'])
2826
public onInput(baseEvent: InputEvent): void {
29-
if (this.filterDisabled || this.manualEvent === baseEvent) {
27+
if (this.filterDisabled() || this.manualEvent === baseEvent) {
3028
return;
3129
}
3230

@@ -44,10 +42,11 @@ export class InputFilter {
4442
}
4543

4644
private getPredicate(): FilterPredicate | '' {
47-
const isInputPredicate: boolean = Array.isArray(this.inputFilter)
48-
? hasItems(this.inputFilter)
49-
: checkValueIsFilled(this.inputFilter);
45+
const inputFilter = this.inputFilter();
46+
const isInputPredicate: boolean = Array.isArray(inputFilter)
47+
? hasItems(inputFilter)
48+
: checkValueIsFilled(inputFilter);
5049

51-
return isInputPredicate ? this.inputFilter : (this.config?.default ?? []);
50+
return isInputPredicate ? inputFilter : (this.config?.default ?? []);
5251
}
5352
}

0 commit comments

Comments
 (0)