refactor(kit)!: remove deprecated TUI_MOBILE_AWARE (#2099)

projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts

@@ -26,14 +26,14 @@ import {
 } from '@taiga-ui/addon-commerce/utils';
 import {
     AbstractTuiNullableControl,
-    isNativeFocused,
     isNativeFocusedIn,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     tuiAssertIsHTMLElement,
     TuiBooleanHandler,
     TuiCreditCardAutofillName,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
+    tuiIsNativeFocused,
     tuiPure,
     tuiRequiredSetter,
 } from '@taiga-ui/cdk';
@@ -432,7 +432,7 @@ export class TuiInputCardGroupedComponent
     }
 
     private get cardFocused(): boolean {
-        return !!this.inputCard && isNativeFocused(this.inputCard.nativeElement);
+        return !!this.inputCard && tuiIsNativeFocused(this.inputCard.nativeElement);
     }
 
     private get paymentSystem(): TuiPaymentSystem | null {

projects/addon-doc/src/components/demo/demo.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@angular/core';
 import {AbstractControl, FormControl, FormGroup} from '@angular/forms';
 import {UrlSerializer} from '@angular/router';
-import {px, TUI_IS_MOBILE, TuiDestroyService} from '@taiga-ui/cdk';
+import {TUI_IS_MOBILE, TuiDestroyService, tuiPx} from '@taiga-ui/cdk';
 import {TuiBrightness, TuiModeDirective} from '@taiga-ui/core';
 import {Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
@@ -176,7 +176,7 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
         this.renderer.setStyle(
             this.wrapper.nativeElement,
             'width',
-            px(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)),
+            tuiPx(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)),
         );
     }
 }

projects/addon-editor/directives/design-mode/design-mode.directive.ts

@@ -22,7 +22,6 @@ import {
     EMPTY_FUNCTION,
     getClipboardDataText,
     getClosestFocusable,
-    isNativeFocused,
     preventDefault,
     setNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
@@ -31,6 +30,7 @@ import {
     TuiEventWith,
     TuiFocusableElementAccessor,
     TuiHandler,
+    tuiIsNativeFocused,
     tuiRequiredSetter,
     typedFromEvent,
 } from '@taiga-ui/cdk';
@@ -103,7 +103,7 @@ export class TuiDesignModeDirective
     }
 
     get focused(): boolean {
-        return isNativeFocused(this.elementRef.nativeElement);
+        return tuiIsNativeFocused(this.elementRef.nativeElement);
     }
 
     // Typesafe version until iframe is initialized

projects/addon-preview/components/preview/preview.component.ts

@@ -9,11 +9,11 @@ import {TUI_PREVIEW_TEXTS} from '@taiga-ui/addon-preview/tokens';
 import {
     clamp,
     dragAndDropFrom,
-    px,
     round,
     tuiDefaultProp,
     TuiDestroyService,
     TuiDragStage,
+    tuiPx,
     TuiZoom,
     typedFromEvent,
 } from '@taiga-ui/cdk';
@@ -72,7 +72,7 @@ export class TuiPreviewComponent {
     );
 
     readonly wrapperTransform$ = combineLatest([
-        this.coordinates$.pipe(map(([x, y]) => `${px(x)}, ${px(y)}`)),
+        this.coordinates$.pipe(map(([x, y]) => `${tuiPx(x)}, ${tuiPx(y)}`)),
         this.zoom$,
         this.rotation$,
     ]).pipe(

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

@@ -10,7 +10,7 @@ import {
 import {WINDOW} from '@ng-web-apis/common';
 import {TuiFocusableElementAccessor} from '@taiga-ui/cdk/interfaces';
 import {TUI_FOCUSABLE_ITEM_ACCESSOR} from '@taiga-ui/cdk/tokens';
-import {px} from '@taiga-ui/cdk/utils';
+import {tuiPx} from '@taiga-ui/cdk/utils';
 
 import {AbstractTuiAutofocusHandler} from './abstract.handler';
 
@@ -83,16 +83,16 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
         const fakeInput: HTMLInputElement = this.renderer.createElement('input');
         const rect: DOMRect = this.element.getBoundingClientRect();
 
-        fakeInput.style.height = px(rect.height);
-        fakeInput.style.width = px(rect.width / 2);
+        fakeInput.style.height = tuiPx(rect.height);
+        fakeInput.style.width = tuiPx(rect.width / 2);
         fakeInput.style.position = 'fixed';
         fakeInput.style.opacity = '0';
-        fakeInput.style.fontSize = px(16); // disable possible auto zoom
+        fakeInput.style.fontSize = tuiPx(16); // disable possible auto zoom
         fakeInput.readOnly = true; // prevent keyboard for fake input
 
         // @note: emulate position cursor before focus to real textfield element
-        fakeInput.style.top = px(rect.top);
-        fakeInput.style.left = px(rect.left);
+        fakeInput.style.top = tuiPx(rect.top);
+        fakeInput.style.left = tuiPx(rect.left);
 
         return fakeInput;
     }

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

@@ -7,13 +7,13 @@ import {
 } from '@angular/core';
 import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {
-    isNativeFocused,
     TUI_AUTOFOCUS_HANDLER,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
     TuiAutoFocusDirective,
     TuiAutoFocusModule,
     TuiFocusableElementAccessor,
     TuiIosAutofocusHandler,
+    tuiIsNativeFocused,
 } from '@taiga-ui/cdk';
 import {configureTestSuite} from '@taiga-ui/testing';
 import {EMPTY} from 'rxjs';
@@ -52,7 +52,7 @@ describe('TuiAutoFocus directive', () => {
         it('focuses', fakeAsync(() => {
             fixture.detectChanges();
             tick(100);
-            expect(isNativeFocused(testComponent.element.nativeElement)).toBe(true);
+            expect(tuiIsNativeFocused(testComponent.element.nativeElement)).toBe(true);
         }));
     });
 
@@ -162,7 +162,7 @@ describe('TuiAutoFocus directive', () => {
         it('focuses', fakeAsync(() => {
             fixture.detectChanges();
             tick(100);
-            expect(isNativeFocused(testComponent.element.nativeElement)).toBe(true);
+            expect(tuiIsNativeFocused(testComponent.element.nativeElement)).toBe(true);
         }));
     });
 
@@ -200,7 +200,7 @@ describe('TuiAutoFocus directive', () => {
         it('does not focus element', fakeAsync(() => {
             fixture.detectChanges();
             tick(100);
-            expect(isNativeFocused(testComponent.element.nativeElement)).toBe(false);
+            expect(tuiIsNativeFocused(testComponent.element.nativeElement)).toBe(false);
         }));
     });
 });

projects/cdk/directives/focus-trap/focus-trap.directive.ts

@@ -11,8 +11,8 @@ import {containsOrAfter} from '@taiga-ui/cdk/utils/dom';
 import {
     blurNativeFocused,
     getClosestFocusable,
-    getNativeFocused,
     setNativeFocused,
+    tuiGetNativeFocused,
 } from '@taiga-ui/cdk/utils/focus';
 
 // @dynamic
@@ -23,7 +23,7 @@ import {
     },
 })
 export class TuiFocusTrapDirective implements OnDestroy {
-    private readonly activeElement = getNativeFocused(this.documentRef);
+    private readonly activeElement = tuiGetNativeFocused(this.documentRef);
 
     constructor(
         @Inject(DOCUMENT) private readonly documentRef: Document,

projects/cdk/directives/focused/focused.directive.ts

@@ -1,6 +1,6 @@
 import {Directive, ElementRef, Inject, NgZone, Output} from '@angular/core';
 import {tuiZoneOptimized, typedFromEvent} from '@taiga-ui/cdk/observables';
-import {isNativeFocused} from '@taiga-ui/cdk/utils/focus';
+import {tuiIsNativeFocused} from '@taiga-ui/cdk/utils/focus';
 import {merge, Observable} from 'rxjs';
 import {distinctUntilChanged, map, skip, startWith} from 'rxjs/operators';
 
@@ -25,7 +25,7 @@ export class TuiFocusedDirective {
             typedFromEvent(nativeElement, 'focusin'),
             typedFromEvent(nativeElement, 'focusout'),
         ).pipe(
-            map(() => isNativeFocused(nativeElement)),
+            map(() => tuiIsNativeFocused(nativeElement)),
             startWith(false),
             distinctUntilChanged(),
             skip(1),

projects/cdk/observables/focus-visible-observable.ts

@@ -1,5 +1,5 @@
 import {TuiOwnerDocumentException} from '@taiga-ui/cdk/exceptions';
-import {isNativeFocused} from '@taiga-ui/cdk/utils/focus';
+import {tuiIsNativeFocused} from '@taiga-ui/cdk/utils/focus';
 import {concat, merge, Observable} from 'rxjs';
 import {
     distinctUntilChanged,
@@ -55,7 +55,7 @@ export function focusVisibleObservable(element: Element): Observable<boolean> {
             typedFromEvent(element, 'focus').pipe(take(1)),
             // filtering out blur events when element remains focused so that we ignore browser tab focus loss
             elementBlur$.pipe(
-                filter(() => !isNativeFocused(element)),
+                filter(() => !tuiIsNativeFocused(element)),
                 take(1),
                 ignoreElements(),
             ),

projects/cdk/utils/focus/blur-native-focused.ts

@@ -1,4 +1,4 @@
-import {getNativeFocused} from './get-native-focused';
+import {tuiGetNativeFocused} from './get-native-focused';
 import {setNativeFocused} from './set-native-focused';
 
 /**
@@ -7,7 +7,7 @@ import {setNativeFocused} from './set-native-focused';
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function blurNativeFocused(documentRef: Document): void {
-    const activeElement = getNativeFocused(documentRef);
+    const activeElement = tuiGetNativeFocused(documentRef);
 
     // TODO: iframe warning
     if (activeElement instanceof HTMLElement) {

projects/cdk/utils/focus/get-native-focused.ts

@@ -1,11 +1,10 @@
 /**
- * @deprecated: use {@link tuiGetNativeFocused} instead
  * Returns current active element, including shadow dom
  *
  * @return element or null
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function getNativeFocused(documentRef: Document): Element | null {
+export function tuiGetNativeFocused(documentRef: Document): Element | null {
     if (!documentRef.activeElement || !documentRef.activeElement.shadowRoot) {
         return documentRef.activeElement;
     }
@@ -18,5 +17,3 @@ export function getNativeFocused(documentRef: Document): Element | null {
 
     return element;
 }
-
-export const tuiGetNativeFocused = getNativeFocused;

projects/cdk/utils/focus/is-native-focused-in.ts

@@ -1,4 +1,4 @@
-import {getNativeFocused} from './get-native-focused';
+import {tuiGetNativeFocused} from './get-native-focused';
 
 /**
  * @deprecated: use {@link tuiIsNativeFocusedIn} instead
@@ -14,7 +14,7 @@ export function isNativeFocusedIn(node: Node): boolean {
         return false;
     }
 
-    const nativeFocused = getNativeFocused(node.ownerDocument);
+    const nativeFocused = tuiGetNativeFocused(node.ownerDocument);
 
     return nativeFocused !== null && node.contains(nativeFocused);
 }

projects/cdk/utils/focus/is-native-focused.ts

@@ -1,7 +1,6 @@
-import {getNativeFocused} from './get-native-focused';
+import {tuiGetNativeFocused} from './get-native-focused';
 
 /**
- * @deprecated: use {@link tuiIsNativeFocused} instead
  * Checks if element is focused.
  *
  * Could return true even after blur since element remains focused if you switch away from a browser tab.
@@ -10,10 +9,6 @@ import {getNativeFocused} from './get-native-focused';
  * @return true if focused
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function isNativeFocused(node: Node | null): boolean {
-    return (
-        !!node && !!node.ownerDocument && getNativeFocused(node.ownerDocument) === node
-    );
+export function tuiIsNativeFocused(node: Node | null): boolean {
+    return !!node?.ownerDocument && tuiGetNativeFocused(node.ownerDocument) === node;
 }
-
-export const tuiIsNativeFocused = isNativeFocused;

projects/cdk/utils/focus/move-focus.ts

@@ -1,16 +1,15 @@
-import {isNativeFocused} from './is-native-focused';
+import {tuiIsNativeFocused} from './is-native-focused';
 import {setNativeFocused} from './set-native-focused';
 
 /**
- * @deprecated: use {@link tuiMoveFocus} instead
  * Utility method for moving focus in a list of elements
  *
  * @param currentIndex currently focused index
  * @param elements array of focusable elements
  * @param step a step to move focus by, typically -1 or 1
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function moveFocus(
+export function tuiMoveFocus(
     currentIndex: number,
     elements: readonly HTMLElement[],
     step: number,
@@ -20,12 +19,10 @@ export function moveFocus(
     while (currentIndex >= 0 && currentIndex < elements.length) {
         setNativeFocused(elements[currentIndex]);
 
-        if (isNativeFocused(elements[currentIndex])) {
+        if (tuiIsNativeFocused(elements[currentIndex])) {
             return;
         }
 
         currentIndex += step;
     }
 }
-
-export const tuiMoveFocus = moveFocus;

projects/cdk/utils/focus/tests/get-native-focused.spec.ts

@@ -1,4 +1,4 @@
-import {getNativeFocused} from '../get-native-focused';
+import {tuiGetNativeFocused} from '../get-native-focused';
 
 describe('getNativeFocused', () => {
     it('returns active focused element in document', () => {
@@ -7,7 +7,7 @@ describe('getNativeFocused', () => {
         document.body.appendChild(buttonElement);
         buttonElement.focus();
 
-        expect(getNativeFocused(document)).toBe(buttonElement);
+        expect(tuiGetNativeFocused(document)).toBe(buttonElement);
 
         document.body.removeChild(buttonElement);
     });
@@ -23,7 +23,7 @@ describe('getNativeFocused', () => {
         root.appendChild(buttonElement);
         buttonElement.focus();
 
-        expect(getNativeFocused(document)).toBe(buttonElement);
+        expect(tuiGetNativeFocused(document)).toBe(buttonElement);
 
         document.body.removeChild(div);
     });

projects/cdk/utils/focus/tests/move-focus.spec.ts

@@ -1,4 +1,4 @@
-import {moveFocus} from '../move-focus';
+import {tuiMoveFocus} from '../move-focus';
 
 describe('move focus', () => {
     it('   ', () => {
@@ -10,7 +10,7 @@ describe('move focus', () => {
 
         const arr = [first, second];
 
-        moveFocus(0, arr, 1);
+        tuiMoveFocus(0, arr, 1);
 
         expect(document.activeElement).toEqual(second);
 

projects/cdk/utils/format/px.ts

@@ -1,14 +1,11 @@
 import {tuiAssert} from '@taiga-ui/cdk/classes';
 
 /**
- * @deprecated: use {@link tuiPx} instead
  * Adds 'px' to the number and turns it into a string
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function px(value: number): string {
+export function tuiPx(value: number): string {
     tuiAssert.assert(Number.isFinite(value), 'Value must be finite number');
 
     return `${value}px`;
 }
-
-export const tuiPx = px;

projects/cdk/utils/format/test/px.spec.ts

@@ -1,7 +1,7 @@
-import {px} from '../px';
+import {tuiPx} from '../px';
 
 describe('px', () => {
     it('returns number with px', () => {
-        expect(px(42)).toBe('42px');
+        expect(tuiPx(42)).toBe('42px');
     });
 });