refactor(legacy): drop constructor (#9027)

projects/legacy/classes/interactive.ts

@@ -21,7 +21,7 @@ export abstract class AbstractTuiInteractive {
 
     public abstract focused: boolean;
 
-    private readonly autoIdString: string;
+    private readonly autoIdString: string = `${TUI}${AbstractTuiInteractive.autoId++}${Date.now()}`;
 
     protected focusVisible = false;
 
@@ -52,10 +52,6 @@ export abstract class AbstractTuiInteractive {
     @Output()
     public readonly focusVisibleChange = new EventEmitter<boolean>();
 
-    constructor() {
-        this.autoIdString = `${TUI}${AbstractTuiInteractive.autoId++}${Date.now()}`;
-    }
-
     public get computedDisabled(): boolean {
         return this.disabled;
     }

projects/legacy/components/color-selector/flat-picker/flat-picker.component.ts

@@ -20,21 +20,19 @@ import {TuiPickerService} from '../services/picker.service';
     providers: [TuiPickerService],
 })
 export class TuiFlatPickerComponent {
+    protected readonly $ = inject(TuiPickerService)
+        .pipe(takeUntilDestroyed())
+        .subscribe((point) => {
+            this.value = point;
+            this.valueChange.emit([point[0], point[1]]);
+        });
+
     @Input()
     public value: TuiPoint = [0, 0];
 
     @Output()
     public readonly valueChange = new EventEmitter<[number, number]>();
 
-    constructor() {
-        inject(TuiPickerService)
-            .pipe(takeUntilDestroyed())
-            .subscribe((point) => {
-                this.value = point;
-                this.valueChange.emit([point[0], point[1]]);
-            });
-    }
-
     public get left(): number {
         return this.value[0] * 100;
     }

projects/legacy/components/color-selector/linear-multi-picker/linear-multi-picker.component.ts

@@ -22,6 +22,10 @@ import {TuiPickerService} from '../services/picker.service';
     },
 })
 export class TuiLinearMultiPickerComponent {
+    protected readonly $ = inject(TuiPickerService)
+        .pipe(takeUntilDestroyed())
+        .subscribe(([x]) => this.onPicker(x));
+
     @Input()
     public value = [0, 1];
 
@@ -33,12 +37,6 @@ export class TuiLinearMultiPickerComponent {
 
     public index = NaN;
 
-    constructor() {
-        inject(TuiPickerService)
-            .pipe(takeUntilDestroyed())
-            .subscribe(([x]) => this.onPicker(x));
-    }
-
     public onMouseUp(): void {
         this.index = NaN;
     }

projects/legacy/components/color-selector/linear-picker/linear-picker.component.ts

@@ -19,21 +19,19 @@ import {TuiPickerService} from '../services/picker.service';
     providers: [TuiPickerService],
 })
 export class TuiLinearPickerComponent {
+    protected readonly $ = inject(TuiPickerService)
+        .pipe(takeUntilDestroyed())
+        .subscribe(([x]) => {
+            this.value = x;
+            this.valueChange.emit(x);
+        });
+
     @Input()
     public value = 0;
 
     @Output()
     public readonly valueChange = new EventEmitter<number>();
 
-    constructor() {
-        inject(TuiPickerService)
-            .pipe(takeUntilDestroyed())
-            .subscribe(([x]) => {
-                this.value = x;
-                this.valueChange.emit(x);
-            });
-    }
-
     public get left(): number {
         return this.value * 100;
     }

projects/legacy/components/color-selector/services/picker.service.ts

@@ -8,35 +8,30 @@ import {map, Observable, startWith, switchMap, takeUntil} from 'rxjs';
 
 @Injectable()
 export class TuiPickerService extends Observable<TuiPoint> {
-    constructor() {
-        const nativeElement = tuiInjectElement();
-        const doc = inject(DOCUMENT);
-
-        const point$ = tuiTypedFromEvent(nativeElement, 'mousedown').pipe(
-            tuiPreventDefault(),
-            switchMap((event) => {
-                const mouseMove$ = tuiTypedFromEvent(doc, 'mousemove').pipe(
-                    map(({clientX, clientY}) =>
-                        tuiGetElementPoint(clientX, clientY, nativeElement),
-                    ),
-                    takeUntil(tuiTypedFromEvent(doc, 'mouseup')),
-                );
+    private readonly el = tuiInjectElement();
+    private readonly doc = inject(DOCUMENT);
+    private readonly point$ = tuiTypedFromEvent(this.el, 'mousedown').pipe(
+        tuiPreventDefault(),
+        switchMap((event) => {
+            const mouseMove$ = tuiTypedFromEvent(this.doc, 'mousemove').pipe(
+                map(({clientX, clientY}) =>
+                    tuiGetElementPoint(clientX, clientY, this.el),
+                ),
+                takeUntil(tuiTypedFromEvent(this.doc, 'mouseup')),
+            );
 
-                return event.target === nativeElement
-                    ? mouseMove$.pipe(
-                          startWith(
-                              tuiGetElementPoint(
-                                  event.clientX,
-                                  event.clientY,
-                                  nativeElement,
-                              ),
-                          ),
-                      )
-                    : mouseMove$;
-            }),
-            takeUntilDestroyed(),
-        );
+            return event.target === this.el
+                ? mouseMove$.pipe(
+                      startWith(
+                          tuiGetElementPoint(event.clientX, event.clientY, this.el),
+                      ),
+                  )
+                : mouseMove$;
+        }),
+        takeUntilDestroyed(),
+    );
 
-        super((subscriber) => point$.subscribe(subscriber));
+    constructor() {
+        super((subscriber) => this.point$.subscribe(subscriber));
     }
 }

projects/legacy/components/input-month-range/input-month-range.directive.ts

@@ -1,10 +1,17 @@
 import type {DoCheck} from '@angular/core';
 import {Directive, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import type {TuiMonthRange} from '@taiga-ui/cdk/date-time';
+import type {TuiMonth, TuiMonthRange} from '@taiga-ui/cdk/date-time';
+import type {TuiHandler} from '@taiga-ui/cdk/types';
 import {AbstractTuiTextfieldHost} from '@taiga-ui/legacy/classes';
 import {TUI_MONTH_FORMATTER, tuiAsTextfieldHost} from '@taiga-ui/legacy/tokens';
-import {combineLatest, distinctUntilChanged, Subject, switchMap} from 'rxjs';
+import {
+    combineLatest,
+    distinctUntilChanged,
+    type Observable,
+    Subject,
+    switchMap,
+} from 'rxjs';
 
 import type {TuiInputMonthRangeComponent} from './input-month-range.component';
 
@@ -21,26 +28,23 @@ export class TuiInputMonthRangeDirective
 
     private localizedValue: [string, string] = ['', ''];
 
-    constructor() {
-        super();
-
-        const formatter = inject(TUI_MONTH_FORMATTER);
-
-        this.value$
-            .pipe(
-                distinctUntilChanged(),
-                switchMap((value: TuiMonthRange | null) =>
-                    combineLatest([
-                        formatter(value?.from || null),
-                        formatter(value?.to || null),
-                    ]),
-                ),
-                takeUntilDestroyed(),
-            )
-            .subscribe((localizedValue) => {
-                this.localizedValue = localizedValue;
-            });
-    }
+    protected readonly formatter: TuiHandler<TuiMonth | null, Observable<string>> =
+        inject(TUI_MONTH_FORMATTER);
+
+    protected readonly $ = this.value$
+        .pipe(
+            distinctUntilChanged(),
+            switchMap((value: TuiMonthRange | null) =>
+                combineLatest([
+                    this.formatter(value?.from || null),
+                    this.formatter(value?.to || null),
+                ]),
+            ),
+            takeUntilDestroyed(),
+        )
+        .subscribe((localizedValue) => {
+            this.localizedValue = localizedValue;
+        });
 
     public override get readOnly(): boolean {
         return true;

projects/legacy/components/input-month/input-month.directive.ts

@@ -21,19 +21,15 @@ export class TuiInputMonthDirective
 
     private localizedValue = '';
 
-    constructor() {
-        super();
-
-        this.value$
-            .pipe(
-                distinctUntilChanged(),
-                switchMap(inject(TUI_MONTH_FORMATTER)),
-                takeUntilDestroyed(),
-            )
-            .subscribe((localizedValue) => {
-                this.localizedValue = localizedValue;
-            });
-    }
+    protected readonly $ = this.value$
+        .pipe(
+            distinctUntilChanged(),
+            switchMap(inject(TUI_MONTH_FORMATTER)),
+            takeUntilDestroyed(),
+        )
+        .subscribe((localizedValue) => {
+            this.localizedValue = localizedValue;
+        });
 
     public override get readOnly(): boolean {
         return true;

projects/legacy/components/sheet/directives/sheet-stop/sheet-stop.directive.ts

@@ -18,32 +18,30 @@ import {TUI_SHEET_DRAGGED, TUI_SHEET_SCROLL} from '../../sheet-tokens';
     selector: '[tuiSheetStop]',
 })
 export class TuiSheetStopDirective {
-    constructor() {
-        const scrollRef = inject(TUI_SCROLL_REF).nativeElement;
-        const destroyRef = inject(DestroyRef);
-        const el = tuiInjectElement();
+    private readonly scrollRef = inject(TUI_SCROLL_REF).nativeElement;
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly el = tuiInjectElement();
 
-        inject(TUI_SHEET_SCROLL)
-            .pipe(
-                map((y) => Math.floor(y) > el.offsetTop),
-                distinctUntilChanged(),
-                withLatestFrom(inject(TUI_SHEET_DRAGGED)),
-                map(([above, dragged]) => !above && !dragged),
-                filter(Boolean),
-                throttleTime(100),
-                takeUntilDestroyed(destroyRef),
-            )
-            .subscribe(() => {
-                scrollRef.style.overflow = 'hidden';
-                scrollRef.classList.remove('_stuck'); // iOS
-                scrollRef.scrollTop = el.offsetTop;
+    protected readonly $ = inject(TUI_SHEET_SCROLL)
+        .pipe(
+            map((y) => Math.floor(y) > this.el.offsetTop),
+            distinctUntilChanged(),
+            withLatestFrom(inject(TUI_SHEET_DRAGGED)),
+            map(([above, dragged]) => !above && !dragged),
+            filter(Boolean),
+            throttleTime(100),
+            takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe(() => {
+            this.scrollRef.style.overflow = 'hidden';
+            this.scrollRef.classList.remove('_stuck'); // iOS
+            this.scrollRef.scrollTop = this.el.offsetTop;
 
-                timer(100)
-                    .pipe(takeUntilDestroyed(destroyRef))
-                    // eslint-disable-next-line rxjs/no-nested-subscribe
-                    .subscribe(() => {
-                        scrollRef.style.overflow = '';
-                    });
-            });
-    }
+            timer(100)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                // eslint-disable-next-line rxjs/no-nested-subscribe
+                .subscribe(() => {
+                    this.scrollRef.style.overflow = '';
+                });
+        });
 }

projects/legacy/components/svg/svg.component.ts

@@ -66,22 +66,18 @@ export class TuiSvgComponent {
         optional: true,
     }) as readonly TuiSvgInterceptorHandler[] | null;
 
-    protected readonly innerHTML$: Observable<SafeHtml>;
-
-    constructor() {
-        this.innerHTML$ = this.src$.pipe(
-            switchMap(() => {
-                if (tuiIsString(this.icon)) {
-                    return this.isExternal
-                        ? this.getExternalIcon(this.icon)
-                        : of(this.getSafeHtml(this.icon));
-                }
-
-                return of(this.icon);
-            }),
-            startWith(''),
-        );
-    }
+    protected readonly innerHTML$: Observable<SafeHtml> = this.src$.pipe(
+        switchMap(() => {
+            if (tuiIsString(this.icon)) {
+                return this.isExternal
+                    ? this.getExternalIcon(this.icon)
+                    : of(this.getSafeHtml(this.icon));
+            }
+
+            return of(this.icon);
+        }),
+        startWith(''),
+    );
 
     @Input()
     public set src(src: TuiSafeHtml | null | undefined) {

projects/legacy/directives/legacy-dropdown-open-monitor/legacy-dropdown-open-monitor.ts

@@ -16,22 +16,20 @@ export class TuiLegacyDropdownOpenMonitorDirective {
         optional: true,
     });
 
-    constructor() {
-        this.host.driver
-            .pipe(distinctUntilChanged(), takeUntilDestroyed())
-            .subscribe((open) => this.external?.tuiDropdownOpenChange.next(open));
+    protected readonly $ = this.host.driver
+        .pipe(distinctUntilChanged(), takeUntilDestroyed())
+        .subscribe((open) => this.external?.tuiDropdownOpenChange.next(open));
 
-        this.external?.tuiDropdownOpenChange
-            .pipe(distinctUntilChanged(), takeUntilDestroyed())
-            .subscribe((open) => {
-                if (open) {
-                    tuiGetClosestFocusable({
-                        initial: this.el,
-                        root: this.el,
-                    })?.focus();
-                }
+    protected readonly $1 = this.external?.tuiDropdownOpenChange
+        .pipe(distinctUntilChanged(), takeUntilDestroyed())
+        .subscribe((open) => {
+            if (open) {
+                tuiGetClosestFocusable({
+                    initial: this.el,
+                    root: this.el,
+                })?.focus();
+            }
 
-                this.host.toggle(open);
-            });
-    }
+            this.host.toggle(open);
+        });
 }