refactor(legacy): move all deprecated stuff in it (#7711)

Signed-off-by: waterplea <[email protected]>

projects/addon-doc/components/demo/index.ts

@@ -18,10 +18,9 @@ import {UrlSerializer} from '@angular/router';
 import {TuiThemeDarkService} from '@taiga-ui/addon-doc/services';
 import {TUI_DOC_DEMO_TEXTS, TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
 import type {TuiDemoParams} from '@taiga-ui/addon-doc/types';
-import {tuiCoerceValueIsTrue} from '@taiga-ui/addon-doc/utils';
+import {tuiCleanObject, tuiCoerceValueIsTrue} from '@taiga-ui/addon-doc/utils';
 import {
     tuiClamp,
-    tuiCleanObject,
     tuiInjectElement,
     tuiPure,
     tuiPx,

projects/cdk/utils/miscellaneous/clean-object.ts → projects/addon-doc/utils/clean-object.ts

@@ -1,11 +1,12 @@
-import type {TuiDeepPartial} from '@taiga-ui/cdk/types';
-
-import {tuiIsString} from './is-string';
+export type TuiDeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? TuiDeepPartial<T[K]> : T[K];
+};
 
 type EmptyValue = '' | null | undefined;
 
 function checkValueIsEmpty<T>(value: EmptyValue | T): value is EmptyValue {
-    const nextValue: any = tuiIsString(value) ? value.trim() : value;
+    // eslint-disable-next-line
+    const nextValue: any = typeof value === 'string' ? value.trim() : value;
 
     return [undefined, null, NaN, ''].includes(nextValue);
 }

projects/addon-doc/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './clean-object';
 export * from './coerce-boolean';
 export * from './coerce-value';
 export * from './inspect';

projects/cdk/constants/empty.ts

@@ -21,7 +21,5 @@ export const EMPTY_ARRAY: [] = [];
 export const EMPTY_FUNCTION: (...args: any[]) => void = () => {};
 export const EMPTY_CLIENT_RECT: DOMRect = {
     ...rect,
-    toJSON() {
-        return rect;
-    },
+    toJSON: () => rect,
 };

projects/cdk/constants/index.ts

@@ -1,7 +1,6 @@
 export * from './empty';
 export * from './handlers';
 export * from './matchers';
-export * from './polling-time';
 export * from './regexp';
 export * from './svg-node-filter';
 export * from './unicode-chars';

projects/cdk/directives/auto-focus/autofocus.options.ts

@@ -1,15 +1,7 @@
 import type {Provider} from '@angular/core';
-import {
-    ElementRef,
-    InjectionToken,
-    NgZone,
-    Optional,
-    Renderer2,
-    Self,
-} from '@angular/core';
+import {ElementRef, InjectionToken, NgZone, Renderer2} from '@angular/core';
 import {ANIMATION_FRAME, WINDOW} from '@ng-web-apis/common';
-import {TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_IS_IOS} from '@taiga-ui/cdk/tokens';
-import type {TuiFocusableElementAccessor} from '@taiga-ui/cdk/types';
+import {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {Observable} from 'rxjs';
 
@@ -48,7 +40,6 @@ export const TUI_AUTOFOCUS_PROVIDERS = [
     {
         provide: TUI_AUTOFOCUS_HANDLER,
         useFactory: (
-            focusable: TuiFocusableElementAccessor | null,
             el: ElementRef<HTMLElement>,
             animationFrame$: Observable<number>,
             renderer: Renderer2,
@@ -57,16 +48,8 @@ export const TUI_AUTOFOCUS_PROVIDERS = [
             isIos: boolean,
         ) =>
             isIos
-                ? new TuiIosAutofocusHandler(focusable, el, renderer, zone, win)
-                : new TuiDefaultAutofocusHandler(focusable, el, animationFrame$),
-        deps: [
-            [new Optional(), new Self(), TUI_FOCUSABLE_ITEM_ACCESSOR],
-            ElementRef,
-            ANIMATION_FRAME,
-            Renderer2,
-            NgZone,
-            WINDOW,
-            TUI_IS_IOS,
-        ],
+                ? new TuiIosAutofocusHandler(el, renderer, zone, win)
+                : new TuiDefaultAutofocusHandler(el, animationFrame$),
+        deps: [ElementRef, ANIMATION_FRAME, Renderer2, NgZone, WINDOW, TUI_IS_IOS],
     },
 ];

projects/cdk/directives/auto-focus/handlers/abstract.handler.ts

@@ -1,21 +1,19 @@
 import type {ElementRef} from '@angular/core';
-import type {
-    TuiFocusableElementAccessor,
-    TuiNativeFocusableElement,
-} from '@taiga-ui/cdk/types';
 
 import type {TuiAutofocusHandler} from '../autofocus.options';
 
 export abstract class AbstractTuiAutofocusHandler implements TuiAutofocusHandler {
-    constructor(
-        protected readonly focusable: TuiFocusableElementAccessor | null,
-        protected readonly el: ElementRef<HTMLElement>,
-    ) {}
+    constructor(protected readonly el: ElementRef<HTMLElement>) {}
 
     public abstract setFocus(): void;
 
-    protected get element(): TuiNativeFocusableElement {
-        return this.focusable?.nativeFocusableElement || this.el.nativeElement;
+    protected get element(): HTMLElement {
+        // TODO: Remove when legacy controls are dropped
+        const el = this.el.nativeElement.tagName.includes('-')
+            ? this.el.nativeElement.querySelector<HTMLElement>('input,textarea')
+            : this.el.nativeElement;
+
+        return el || this.el.nativeElement;
     }
 
     protected get isTextFieldElement(): boolean {

projects/cdk/directives/auto-focus/handlers/default.handler.ts

@@ -1,6 +1,4 @@
 import type {ElementRef} from '@angular/core';
-import {POLLING_TIME} from '@taiga-ui/cdk/constants';
-import type {TuiFocusableElementAccessor} from '@taiga-ui/cdk/types';
 import type {Observable} from 'rxjs';
 import {map, race, skipWhile, take, throttleTime, timer} from 'rxjs';
 
@@ -11,19 +9,18 @@ const NG_ANIMATION_SELECTOR = '.ng-animating';
 
 export class TuiDefaultAutofocusHandler extends AbstractTuiAutofocusHandler {
     constructor(
-        focusable: TuiFocusableElementAccessor | null,
         el: ElementRef<HTMLElement>,
         private readonly animationFrame$: Observable<number>,
     ) {
-        super(focusable, el);
+        super(el);
     }
 
     public setFocus(): void {
         if (this.isTextFieldElement) {
             race(
                 timer(TIMEOUT),
                 this.animationFrame$.pipe(
-                    throttleTime(POLLING_TIME),
+                    throttleTime(100),
                     map(() => this.element.closest(NG_ANIMATION_SELECTOR)),
                     skipWhile(Boolean),
                     take(1),

projects/cdk/directives/auto-focus/handlers/ios.handler.ts

@@ -1,5 +1,4 @@
 import type {ElementRef, NgZone, Renderer2} from '@angular/core';
-import type {TuiFocusableElementAccessor} from '@taiga-ui/cdk/types';
 import {tuiIsPresent, tuiPx} from '@taiga-ui/cdk/utils';
 
 import {AbstractTuiAutofocusHandler} from './abstract.handler';
@@ -19,13 +18,12 @@ const TEXTFIELD_ATTRS = [
 
 export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
     constructor(
-        focusable: TuiFocusableElementAccessor | null,
         el: ElementRef<HTMLElement>,
         private readonly renderer: Renderer2,
         private readonly zone: NgZone,
         private readonly win: Window,
     ) {
-        super(focusable, el);
+        super(el);
         this.patchCssStyles();
     }
 

projects/cdk/directives/auto-focus/test/auto-focus.directive.spec.ts

@@ -3,25 +3,19 @@ import {
     Component,
     ElementRef,
     NgZone,
-    Optional,
     Renderer2,
-    Self,
     ViewChild,
 } from '@angular/core';
 import type {ComponentFixture} from '@angular/core/testing';
 import {fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {WINDOW} from '@ng-web-apis/common';
-import type {TuiFocusableElementAccessor} from '@taiga-ui/cdk';
 import {
     TUI_AUTOFOCUS_HANDLER,
-    TUI_FOCUSABLE_ITEM_ACCESSOR,
-    tuiAsFocusableItemAccessor,
     TuiAutoFocusDirective,
     TuiIosAutofocusHandler,
     tuiIsNativeFocused,
 } from '@taiga-ui/cdk';
 import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins';
-import {EMPTY} from 'rxjs';
 
 describe('TuiAutoFocus directive', () => {
     describe('works for focusable HTML element', () => {
@@ -61,74 +55,6 @@ describe('TuiAutoFocus directive', () => {
         }));
     });
 
-    describe('works for TUI_FOCUSABLE_ITEM_ACCESSOR', () => {
-        @Component({
-            standalone: true,
-            selector: 'focusable-component',
-            template: `
-                <p>
-                    <input
-                        #input
-                        value="test"
-                    />
-                </p>
-            `,
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            providers: [tuiAsFocusableItemAccessor(TestFocusableComponent)],
-        })
-        class TestFocusableComponent implements TuiFocusableElementAccessor {
-            @ViewChild('input')
-            public input?: ElementRef<HTMLInputElement>;
-
-            public focusedChange = EMPTY;
-
-            public get nativeFocusableElement(): HTMLInputElement | null {
-                return this.input?.nativeElement ?? null;
-            }
-
-            public get focused(): boolean {
-                return this.input
-                    ? document.activeElement === this.input.nativeElement
-                    : false;
-            }
-        }
-
-        @Component({
-            standalone: true,
-            imports: [TestFocusableComponent, TuiAutoFocusDirective],
-            template: `
-                <focusable-component tuiAutoFocus></focusable-component>
-            `,
-            changeDetection: ChangeDetectionStrategy.OnPush,
-        })
-        class TestComponentWithTuiButton {
-            @ViewChild(TestFocusableComponent)
-            public focusable!: TestFocusableComponent;
-        }
-
-        let fixture: ComponentFixture<TestComponentWithTuiButton>;
-        let testComponent: TestComponentWithTuiButton;
-
-        beforeEach(() => {
-            TestBed.configureTestingModule({
-                imports: [TestComponentWithTuiButton, TestFocusableComponent],
-                providers: [NG_EVENT_PLUGINS],
-            });
-
-            fixture = TestBed.createComponent(TestComponentWithTuiButton);
-            testComponent = fixture.componentInstance;
-        });
-
-        it('Focuses native element of a TUI_FOCUSABLE_ITEM_ACCESSOR', fakeAsync(() => {
-            fixture.detectChanges();
-            tick(100);
-            expect(testComponent.focusable.focused).toBe(true);
-            expect(document.activeElement).toBe(
-                testComponent.focusable.nativeFocusableElement,
-            );
-        }));
-    });
-
     describe('works for iOS decoy method', () => {
         @Component({
             standalone: true,
@@ -155,26 +81,12 @@ describe('TuiAutoFocus directive', () => {
                         provide: TUI_AUTOFOCUS_HANDLER,
                         useClass: TuiIosAutofocusHandler,
                         useFactory: (
-                            focusable: TuiFocusableElementAccessor | null,
                             el: ElementRef<HTMLElement>,
                             renderer: Renderer2,
                             zone: NgZone,
                             win: Window,
-                        ) =>
-                            new TuiIosAutofocusHandler(
-                                focusable,
-                                el,
-                                renderer,
-                                zone,
-                                win,
-                            ),
-                        deps: [
-                            [new Optional(), new Self(), TUI_FOCUSABLE_ITEM_ACCESSOR],
-                            ElementRef,
-                            Renderer2,
-                            NgZone,
-                            WINDOW,
-                        ],
+                        ) => new TuiIosAutofocusHandler(el, renderer, zone, win),
+                        deps: [ElementRef, Renderer2, NgZone, WINDOW],
                     },
                 ],
             });

projects/cdk/directives/media/media.directive.ts

@@ -12,6 +12,7 @@ import {tuiInjectElement} from '@taiga-ui/cdk/utils';
     standalone: true,
     selector: 'video[tuiMedia], audio[tuiMedia]',
     exportAs: 'tuiMedia',
+    host: {'(durationchange)': '0'},
 })
 export class TuiMediaDirective {
     private readonly el = tuiInjectElement<HTMLMediaElement>();
@@ -61,7 +62,6 @@ export class TuiMediaDirective {
         return Boolean(this.el.paused);
     }
 
-    // @bad TODO: Make sure no other events can affect this like network issues etc.
     @HostListener('ended', ['true'])
     @HostListener('pause', ['true'])
     @HostListener('play', ['false'])
@@ -83,11 +83,6 @@ export class TuiMediaDirective {
         this.currentTimeChange.emit(this.currentTime);
     }
 
-    @HostListener('durationchange')
-    protected changeDetectionTrigger(): void {
-        // @bad TODO: consider if other events need to trigger CD
-    }
-
     private updatePlaybackRate(playbackRate: number): void {
         this.playbackRate = playbackRate;
         this.el.playbackRate = this.playbackRate;

projects/cdk/directives/obscured/obscured.service.ts

@@ -1,11 +1,9 @@
 import {inject, Injectable, NgZone} from '@angular/core';
 import {ANIMATION_FRAME} from '@ng-web-apis/common';
-import {POLLING_TIME} from '@taiga-ui/cdk/constants';
 import {tuiZoneOptimized} from '@taiga-ui/cdk/observables';
 import {tuiGetElementObscures, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {distinctUntilChanged, map, Observable, startWith, throttleTime} from 'rxjs';
 
-// @bad TODO: Consider Intersection Observer with fallback to current implementation
 /**
  * Service that monitors element visibility by polling and returning
  * either null or an array of elements that overlap given element edges
@@ -14,7 +12,7 @@ import {distinctUntilChanged, map, Observable, startWith, throttleTime} from 'rx
 export class TuiObscuredService extends Observable<readonly Element[] | null> {
     private readonly el = tuiInjectElement();
     private readonly obscured$ = inject(ANIMATION_FRAME).pipe(
-        throttleTime(POLLING_TIME),
+        throttleTime(100),
         map(() => tuiGetElementObscures(this.el)),
         startWith(null),
         distinctUntilChanged(),

projects/cdk/observables/typed-from-event.ts

@@ -1,7 +1,26 @@
-import type {TuiEventWith, TuiTypedEventTarget} from '@taiga-ui/cdk/types';
 import type {Observable} from 'rxjs';
 import {fromEvent} from 'rxjs';
 
+export interface TuiTypedEventTarget<E> {
+    addEventListener(
+        type: string,
+        listener: ((evt: E) => void) | null,
+        options?: AddEventListenerOptions | boolean,
+    ): void;
+    removeEventListener(
+        type: string,
+        listener?: ((evt: E) => void) | null,
+        options?: EventListenerOptions | boolean,
+    ): void;
+}
+
+/**
+ * Wrapper around {@link Event} to add typings to target and currentTarget.
+ */
+export type TuiEventWith<G extends Event, T extends TuiTypedEventTarget<G>> = G & {
+    readonly currentTarget: T;
+};
+
 export function tuiTypedFromEvent<E extends keyof WindowEventMap>(
     target: Window,
     event: E,