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

taiga-family · Aug 6, 2022 · 1c7418d · 1c7418d
1 parent de3f6a8
commit 1c7418d
Show file tree

Hide file tree

Showing 67 changed files with 316 additions and 407 deletions.
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts b/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 {

diff --git a/projects/addon-doc/src/components/demo/demo.component.ts b/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';
@@ -28,9 +28,9 @@ const MIN_COMPONENT_WIDTH = 104;
 
 // @dynamic
 @Component({
-    selector: `tui-doc-demo`,
-    templateUrl: `./demo.template.html`,
-    styleUrls: [`./demo.style.less`],
+    selector: 'tui-doc-demo',
+    templateUrl: './demo.template.html',
+    styleUrls: ['./demo.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         TuiDestroyService,
@@ -41,13 +41,13 @@ const MIN_COMPONENT_WIDTH = 104;
     ],
 })
 export class TuiDocDemoComponent implements OnInit, AfterViewInit {
-    @ViewChild(`content`)
+    @ViewChild('content')
     private readonly content?: ElementRef<HTMLElement>;
 
-    @ViewChild(`wrapper`)
+    @ViewChild('wrapper')
     private readonly wrapper?: ElementRef<HTMLElement>;
 
-    @ViewChild(`resizerText`)
+    @ViewChild('resizerText')
     private readonly resizerText?: ElementRef<HTMLElement>;
 
     private readonly isBrowser: boolean;
@@ -61,14 +61,14 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
     readonly template: TemplateRef<Record<string, unknown>> | null = null;
 
     testForm?: FormGroup;
-    updateOnVariants = [`change`, `blur`, `submit`];
-    updateOn: 'change' | 'blur' | 'submit' = `change`;
+    updateOnVariants = ['change', 'blur', 'submit'];
+    updateOn: 'change' | 'blur' | 'submit' = 'change';
     expanded = false;
     opaque = true;
     modeControl = new FormControl();
     mode: TuiBrightness | null = null;
     readonly change$ = new Subject<void>();
-    readonly items: readonly TuiBrightness[] = [`onLight`, `onDark`];
+    readonly items: readonly TuiBrightness[] = ['onLight', 'onDark'];
 
     constructor(
         @Inject(TUI_IS_MOBILE) readonly isMobile: boolean,
@@ -104,7 +104,7 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
             });
     }
 
-    @HostListener(`window:resize`)
+    @HostListener('window:resize')
     onResize(): void {
         this.setResizerTextContent();
     }
@@ -124,11 +124,11 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
 
         const paddingLeft = this.isBrowser
             ? getComputedStyle(this.content.nativeElement).paddingLeft
-            : `0`;
+            : '0';
         const {offsetWidth} = this.content.nativeElement;
 
         this.resizerText.nativeElement.textContent = String(
-            offsetWidth - parseInt(paddingLeft || `0`, 10) * 2,
+            offsetWidth - parseInt(paddingLeft || '0', 10) * 2,
         );
     }
 
@@ -175,8 +175,8 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
 
         this.renderer.setStyle(
             this.wrapper.nativeElement,
-            `width`,
-            px(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)),
+            'width',
+            tuiPx(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)),
         );
     }
 }
diff --git a/projects/addon-editor/directives/design-mode/design-mode.directive.ts b/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

diff --git a/projects/addon-preview/components/preview/preview.component.ts b/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(

diff --git a/projects/cdk/directives/auto-focus/handlers/ios.handler.ts b/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';
 
@@ -52,8 +52,8 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
             fakeFocusTimeoutId = this.windowRef.setTimeout(() => {
                 clearTimeout(elementFocusTimeoutId);
 
-                fakeInput.removeEventListener(`blur`, blurHandler);
-                fakeInput.removeEventListener(`focus`, focusHandler);
+                fakeInput.removeEventListener('blur', blurHandler);
+                fakeInput.removeEventListener('focus', focusHandler);
 
                 elementFocusTimeoutId = this.windowRef.setTimeout(() => {
                     this.element.focus({preventScroll: false});
@@ -62,8 +62,8 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
             });
         };
 
-        fakeInput.addEventListener(`blur`, blurHandler, {once: true});
-        fakeInput.addEventListener(`focus`, focusHandler);
+        fakeInput.addEventListener('blur', blurHandler, {once: true});
+        fakeInput.addEventListener('focus', focusHandler);
 
         if (this.insideDialog()) {
             this.windowRef.document.body.appendChild(fakeInput);
@@ -80,19 +80,19 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
      * before focus to real textfield element
      */
     private makeFakeInput(): HTMLInputElement {
-        const fakeInput: HTMLInputElement = this.renderer.createElement(`input`);
+        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.position = `fixed`;
-        fakeInput.style.opacity = `0`;
-        fakeInput.style.fontSize = px(16); // disable possible auto zoom
+        fakeInput.style.height = tuiPx(rect.height);
+        fakeInput.style.width = tuiPx(rect.width / 2);
+        fakeInput.style.position = 'fixed';
+        fakeInput.style.opacity = '0';
+        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;
     }
@@ -102,7 +102,7 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
             parseFloat(
                 this.windowRef
                     .getComputedStyle(this.element)
-                    .getPropertyValue(`--tui-duration`),
+                    .getPropertyValue('--tui-duration'),
             ) || 0
         );
     }
@@ -115,7 +115,7 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
      * and then that dialog will be shaking
      */
     private insideDialog(): boolean {
-        return !!this.element.closest(`tui-dialog`);
+        return !!this.element.closest('tui-dialog');
     }
 
     /**
@@ -130,8 +130,8 @@ export class TuiIosAutofocusHandler extends AbstractTuiAutofocusHandler {
         const documentRef = this.windowRef.document;
 
         for (const element of [documentRef.documentElement, documentRef.body]) {
-            element.style.setProperty(`overflow`, `auto`);
-            element.style.setProperty(`height`, `100%`);
+            element.style.setProperty('overflow', 'auto');
+            element.style.setProperty('height', '100%');
         }
     }
 }
diff --git a/projects/cdk/directives/auto-focus/test/auto-focus.directive.spec.ts b/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);
         }));
     });
 });
diff --git a/projects/cdk/directives/focus-trap/focus-trap.directive.ts b/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,

diff --git a/projects/cdk/directives/focused/focused.directive.ts b/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),

diff --git a/projects/cdk/observables/focus-visible-observable.ts b/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(),
             ),

diff --git a/projects/cdk/utils/focus/blur-native-focused.ts b/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) {

diff --git a/projects/cdk/utils/focus/get-native-focused.ts b/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;
diff --git a/projects/cdk/utils/focus/is-native-focused-in.ts b/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);
 }