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 index af1d33507d83..975f89e0b79b 100644 --- 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,7 +26,6 @@ import { } from '@taiga-ui/addon-commerce/utils'; import { AbstractTuiNullableControl, - isNativeFocused, isNativeFocusedIn, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiAssertIsHTMLElement, @@ -34,6 +33,7 @@ import { 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 index 6c64d4c7ec46..0a0c43260639 100644 --- 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'; @@ -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)), ); } } diff --git a/projects/addon-editor/directives/design-mode/design-mode.directive.ts b/projects/addon-editor/directives/design-mode/design-mode.directive.ts index 248693d8963a..8d5e86622cec 100644 --- 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 index da6db441c27a..18b1b54d68ee 100644 --- 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 index ef6c09b26775..67b476dc136e 100644 --- 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'; @@ -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; } 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 index 800bb5793550..bc274b46805a 100644 --- 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 index 2beb4460017e..e1654bce780e 100644 --- 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 index 56a42599bca1..2ee120be178e 100644 --- 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 index 824e6899f5c4..5542ab99a01e 100644 --- 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 { 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 index 245972dec560..ab8b141450d0 100644 --- 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 index 20b61e07cdf4..ba3800c1980b 100644 --- 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 index f440eef97fa4..1018cd37d769 100644 --- 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); } diff --git a/projects/cdk/utils/focus/is-native-focused.ts b/projects/cdk/utils/focus/is-native-focused.ts index 3cc04430ce6c..697f75351539 100644 --- a/projects/cdk/utils/focus/is-native-focused.ts +++ b/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,8 @@ 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 { +export function tuiIsNativeFocused(node: Node | null): boolean { return ( - !!node && !!node.ownerDocument && getNativeFocused(node.ownerDocument) === node + !!node && !!node.ownerDocument && tuiGetNativeFocused(node.ownerDocument) === node ); } - -export const tuiIsNativeFocused = isNativeFocused; diff --git a/projects/cdk/utils/focus/move-focus.ts b/projects/cdk/utils/focus/move-focus.ts index cd62d99febae..5882903f5b6e 100644 --- a/projects/cdk/utils/focus/move-focus.ts +++ b/projects/cdk/utils/focus/move-focus.ts @@ -1,8 +1,7 @@ -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 @@ -10,7 +9,7 @@ import {setNativeFocused} from './set-native-focused'; * @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; diff --git a/projects/cdk/utils/focus/tests/get-native-focused.spec.ts b/projects/cdk/utils/focus/tests/get-native-focused.spec.ts index 34f474d52792..dbdb27f6bdbe 100644 --- a/projects/cdk/utils/focus/tests/get-native-focused.spec.ts +++ b/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); }); diff --git a/projects/cdk/utils/focus/tests/move-focus.spec.ts b/projects/cdk/utils/focus/tests/move-focus.spec.ts index b6aba85299b2..8978d453276d 100644 --- a/projects/cdk/utils/focus/tests/move-focus.spec.ts +++ b/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); diff --git a/projects/cdk/utils/format/px.ts b/projects/cdk/utils/format/px.ts index d016741dde17..a9ab7dc07b71 100644 --- a/projects/cdk/utils/format/px.ts +++ b/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; diff --git a/projects/cdk/utils/format/test/px.spec.ts b/projects/cdk/utils/format/test/px.spec.ts index a5d77b456b40..d9d40a62c8b3 100644 --- a/projects/cdk/utils/format/test/px.spec.ts +++ b/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'); }); }); diff --git a/projects/core/components/button/button.component.ts b/projects/core/components/button/button.component.ts index 719423f7aef2..006eba2644ba 100644 --- a/projects/core/components/button/button.component.ts +++ b/projects/core/components/button/button.component.ts @@ -11,7 +11,6 @@ import { } from '@angular/core'; import { AbstractTuiInteractive, - isNativeFocused, pressedObservable, TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_TAKE_ONLY_TRUSTED_EVENTS, @@ -20,6 +19,7 @@ import { TuiFocusableElementAccessor, TuiFocusVisibleService, TuiHoveredService, + tuiIsNativeFocused, watch, } from '@taiga-ui/cdk'; import {TuiSizeS} from '@taiga-ui/core/types'; @@ -114,7 +114,7 @@ export class TuiButtonComponent } get focused(): boolean { - return !this.showLoader && isNativeFocused(this.elementRef.nativeElement); + return !this.showLoader && tuiIsNativeFocused(this.elementRef.nativeElement); } get loaderSize(): TuiSizeS { diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts index 9da56a46feb6..eb79bf8095a8 100644 --- a/projects/core/components/data-list/data-list.component.ts +++ b/projects/core/components/data-list/data-list.component.ts @@ -16,10 +16,10 @@ import { isNativeFocusedIn, isPresent, itemsQueryListObservable, - moveFocus, setNativeMouseFocused, tuiAssertIsHTMLElement, tuiDefaultProp, + tuiMoveFocus, tuiPure, } from '@taiga-ui/cdk'; import {TuiDataListAccessor} from '@taiga-ui/core/interfaces'; @@ -87,7 +87,7 @@ export class TuiDataListComponent implements TuiDataListAccessor { onKeyDownArrow(current: HTMLElement, step: number): void { const {elements} = this; - moveFocus(elements.indexOf(current), elements, step); + tuiMoveFocus(elements.indexOf(current), elements, step); } // TODO: Consider aria-activedescendant for proper accessibility implementation @@ -114,7 +114,7 @@ export class TuiDataListComponent implements TuiDataListAccessor { const {elements} = this; - moveFocus(top ? -1 : elements.length, elements, top ? 1 : -1); + tuiMoveFocus(top ? -1 : elements.length, elements, top ? 1 : -1); this.handleFocusLossIfNecessary(target); } diff --git a/projects/core/components/data-list/option/option.component.ts b/projects/core/components/data-list/option/option.component.ts index 4f5ea75ec954..2498fe87a262 100644 --- a/projects/core/components/data-list/option/option.component.ts +++ b/projects/core/components/data-list/option/option.component.ts @@ -13,11 +13,11 @@ import { TemplateRef, } from '@angular/core'; import { - isNativeFocused, setNativeFocused, TuiContextWithImplicit, tuiDefaultProp, TuiEventWith, + tuiIsNativeFocused, } from '@taiga-ui/cdk'; import {TuiDropdownDirective} from '@taiga-ui/core/directives/dropdown'; import {TuiDataListHost} from '@taiga-ui/core/interfaces'; @@ -32,7 +32,7 @@ import {TuiDataListComponent} from '../data-list.component'; export function shouldFocus({ currentTarget, }: TuiEventWith): boolean { - return !isNativeFocused(currentTarget); + return !tuiIsNativeFocused(currentTarget); } // TODO: Consider all use cases for aria roles diff --git a/projects/core/components/dropdown-box/dropdown-box.component.ts b/projects/core/components/dropdown-box/dropdown-box.component.ts index c09c92bed235..d5c8595c7f4e 100644 --- a/projects/core/components/dropdown-box/dropdown-box.component.ts +++ b/projects/core/components/dropdown-box/dropdown-box.component.ts @@ -15,13 +15,13 @@ import { getClosestFocusable, inRange, POLLING_TIME, - px, TuiActiveZoneDirective, tuiAssertIsHTMLElement, TuiDestroyService, TuiDropdownHostComponent, TuiOverscrollMode, tuiPure, + tuiPx, tuiZonefree, } from '@taiga-ui/cdk'; import {tuiDropdownAnimation} from '@taiga-ui/core/animations'; @@ -213,11 +213,11 @@ export class TuiDropdownBoxComponent implements AfterViewChecked { right + DEFAULT_MARGIN > viewportWidth || inRange(left + DEFAULT_MARGIN, 0, viewportWidth) ) { - style.left = px(left); + style.left = tuiPx(left); style.right = 'auto'; } else { style.left = 'auto'; - style.right = px(right); + style.right = tuiPx(right); } break; @@ -227,9 +227,9 @@ export class TuiDropdownBoxComponent implements AfterViewChecked { left + DEFAULT_MARGIN > viewportWidth ) { style.left = 'auto'; - style.right = px(right); + style.right = tuiPx(right); } else { - style.left = px(left); + style.left = tuiPx(left); style.right = 'auto'; } @@ -268,9 +268,9 @@ export class TuiDropdownBoxComponent implements AfterViewChecked { if (finalDirection === 'top') { this.dropdownAnimation = this.animationBottom; - style.maxHeight = px(Math.min(boxHeightLimit, topAvailableHeight)); + style.maxHeight = tuiPx(Math.min(boxHeightLimit, topAvailableHeight)); style.top = 'auto'; - style.bottom = px( + style.bottom = tuiPx( hostRect.bottom - directiveRect.top - DEFAULT_MARGIN + @@ -280,8 +280,8 @@ export class TuiDropdownBoxComponent implements AfterViewChecked { } else { this.dropdownAnimation = this.animationTop; - style.maxHeight = px(Math.min(boxHeightLimit, bottomAvailableHeight)); - style.top = px( + style.maxHeight = tuiPx(Math.min(boxHeightLimit, bottomAvailableHeight)); + style.top = tuiPx( directiveRect.bottom - hostRect.top - DEFAULT_MARGIN + @@ -361,12 +361,12 @@ export class TuiDropdownBoxComponent implements AfterViewChecked { private calculateWidth(style: CSSStyleDeclaration, directiveRect: ClientRect): void { style.width = this.directive.limitMinWidth === 'fixed' && !this.directive.sided - ? px(directiveRect.width) + ? tuiPx(directiveRect.width) : ''; if (this.directive.limitMinWidth === 'min' && !this.directive.sided) { - style.minWidth = px(directiveRect.width); - style.maxWidth = px(DEFAULT_MAX_WIDTH); + style.minWidth = tuiPx(directiveRect.width); + style.maxWidth = tuiPx(DEFAULT_MAX_WIDTH); return; } diff --git a/projects/core/components/hints-host/hint-box/hint-box.component.ts b/projects/core/components/hints-host/hint-box/hint-box.component.ts index 50771bd040ad..9895ef03686c 100644 --- a/projects/core/components/hints-host/hint-box/hint-box.component.ts +++ b/projects/core/components/hints-host/hint-box/hint-box.component.ts @@ -11,10 +11,10 @@ import { } from '@angular/core'; import {ANIMATION_FRAME, WINDOW} from '@ng-web-apis/common'; import { - px, TuiContextWithImplicit, TuiDestroyService, tuiPure, + tuiPx, tuiZonefree, } from '@taiga-ui/cdk'; import {AbstractTuiHint} from '@taiga-ui/core/abstract'; @@ -238,8 +238,8 @@ export class TuiHintBoxComponent { directions.splice(directions.indexOf(direction), 1)[0] || direction; } - style.top = px(top); - style.left = px(left); + style.top = tuiPx(top); + style.left = tuiPx(left); tooltip.setAttribute('data-tui-host-direction', direction); } @@ -271,11 +271,11 @@ export class TuiHintBoxComponent { SPACE * 2, ); - style.left = px(left); - style.top = direction === 'top' ? px(verticalTop) : px(verticalBottom); + style.left = tuiPx(left); + style.top = direction === 'top' ? tuiPx(verticalTop) : tuiPx(verticalBottom); if (this.arrow) { - this.arrow.nativeElement.style.left = px( + this.arrow.nativeElement.style.left = tuiPx( hostRect.left <= SPACE * 2 && hostRect.width > ARROW_OFFSET * 2 ? ARROW_OFFSET : hostRect.left + hostRect.width / 2 - left - ARROW_SIZE / 2, @@ -289,8 +289,8 @@ export class TuiHintBoxComponent { const hostRect = this.hint.getElementClientRect(); const {style} = this.elementRef.nativeElement; - style.top = px(hostRect.top - window.innerHeight - TOP_PADDING - BORDER_WIDTH); - style.left = px(hostRect.left - LEFT_PADDING - BORDER_WIDTH); - style.width = px(hostRect.width + LEFT_PADDING * 2 + BORDER_WIDTH * 2); + style.top = tuiPx(hostRect.top - window.innerHeight - TOP_PADDING - BORDER_WIDTH); + style.left = tuiPx(hostRect.left - LEFT_PADDING - BORDER_WIDTH); + style.width = tuiPx(hostRect.width + LEFT_PADDING * 2 + BORDER_WIDTH * 2); } } diff --git a/projects/core/components/link/link.component.ts b/projects/core/components/link/link.component.ts index 7bc8d6410c31..bb467d1a5bdc 100644 --- a/projects/core/components/link/link.component.ts +++ b/projects/core/components/link/link.component.ts @@ -8,12 +8,12 @@ import { Input, } from '@angular/core'; import { - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiDestroyService, TuiFocusableElementAccessor, TuiFocusVisibleService, + tuiIsNativeFocused, TuiNativeFocusableElement, typedFromEvent, } from '@taiga-ui/cdk'; @@ -93,7 +93,7 @@ export class TuiLinkComponent implements TuiFocusableElementAccessor { } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get hasIcon(): boolean { diff --git a/projects/core/components/primitive-spin-button/primitive-spin-button.component.ts b/projects/core/components/primitive-spin-button/primitive-spin-button.component.ts index 93bd069f81cc..7a135bc44783 100644 --- a/projects/core/components/primitive-spin-button/primitive-spin-button.component.ts +++ b/projects/core/components/primitive-spin-button/primitive-spin-button.component.ts @@ -8,7 +8,7 @@ import { Output, ViewChild, } from '@angular/core'; -import {AbstractTuiInteractive, isNativeFocused, tuiDefaultProp} from '@taiga-ui/cdk'; +import {AbstractTuiInteractive, tuiDefaultProp, tuiIsNativeFocused} from '@taiga-ui/cdk'; import {TuiAppearance} from '@taiga-ui/core/enums'; import {TUI_SPIN_TEXTS} from '@taiga-ui/core/tokens'; import {Observable} from 'rxjs'; @@ -53,7 +53,7 @@ export class TuiPrimitiveSpinButtonComponent extends AbstractTuiInteractive { } get focused(): boolean { - return !!this.wrapper && isNativeFocused(this.wrapper.nativeElement); + return !!this.wrapper && tuiIsNativeFocused(this.wrapper.nativeElement); } get leftComputedDisabled(): boolean { diff --git a/projects/core/utils/mask/create-auto-corrected-money-pipe.ts b/projects/core/utils/mask/create-auto-corrected-money-pipe.ts index 0e340c6e0fc4..9427b8104354 100644 --- a/projects/core/utils/mask/create-auto-corrected-money-pipe.ts +++ b/projects/core/utils/mask/create-auto-corrected-money-pipe.ts @@ -2,9 +2,9 @@ import { CHAR_HYPHEN, CHAR_NO_BREAK_SPACE, getDocumentOrShadowRoot, - isNativeFocused, isSafari, tuiAssert, + tuiIsNativeFocused, } from '@taiga-ui/cdk'; import {TuiTextMaskPipeHandler} from '@taiga-ui/core/mask'; import {TuiDecimalSymbol} from '@taiga-ui/core/types'; @@ -40,7 +40,7 @@ export function tuiCreateAutoCorrectedNumberPipe( } // remove these hacks after text mask library has changed - if (nativeInput && unlucky && isNativeFocused(nativeInput)) { + if (nativeInput && unlucky && tuiIsNativeFocused(nativeInput)) { const caret = calculateSafariCaret( config.previousConformedValue, conformedValue, @@ -55,7 +55,7 @@ export function tuiCreateAutoCorrectedNumberPipe( if ( nativeInput && nativeInput.ownerDocument !== getDocumentOrShadowRoot(nativeInput) && - isNativeFocused(nativeInput) && + tuiIsNativeFocused(nativeInput) && config.currentCaretPosition ) { const realCaretPosition = diff --git a/projects/demo/src/modules/app/customization/customization.component.ts b/projects/demo/src/modules/app/customization/customization.component.ts index 6983681e82c7..83733a20c957 100644 --- a/projects/demo/src/modules/app/customization/customization.component.ts +++ b/projects/demo/src/modules/app/customization/customization.component.ts @@ -3,7 +3,7 @@ import {DomSanitizer, SafeStyle} from '@angular/platform-browser'; import {changeDetection} from '@demo/emulate/change-detection'; import {USER_AGENT} from '@ng-web-apis/common'; import {TuiDocDemoComponent} from '@taiga-ui/addon-doc'; -import {isIE, px, TuiDestroyService, tuiPure} from '@taiga-ui/cdk'; +import {isIE, TuiDestroyService, tuiPure, tuiPx} from '@taiga-ui/cdk'; import {TuiBrightness} from '@taiga-ui/core'; import {Subject} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; @@ -81,7 +81,7 @@ export class TuiCustomizationComponent implements AfterViewInit { onModelChange(variable: string, value: string | number): void { this.variables = { ...this.variables, - [variable]: typeof value === 'string' ? value : px(value), + [variable]: typeof value === 'string' ? value : tuiPx(value), }; } diff --git a/projects/demo/src/modules/utils/format/examples/1/index.ts b/projects/demo/src/modules/utils/format/examples/1/index.ts index 785d839986c1..bad50ad87959 100644 --- a/projects/demo/src/modules/utils/format/examples/1/index.ts +++ b/projects/demo/src/modules/utils/format/examples/1/index.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {FormControl, FormGroup} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {px} from '@taiga-ui/cdk'; +import {tuiPx} from '@taiga-ui/cdk'; @Component({ selector: 'tui-format-example-1', @@ -19,6 +19,6 @@ export class TuiFormatExample1 { get px(): string { const {value} = this.parametersForm.value; - return px(value); + return tuiPx(value); } } diff --git a/projects/kit/components/accordion/accordion-item/accordion-item.component.ts b/projects/kit/components/accordion/accordion-item/accordion-item.component.ts index e5cd4d422552..ed0ed9c77dc0 100644 --- a/projects/kit/components/accordion/accordion-item/accordion-item.component.ts +++ b/projects/kit/components/accordion/accordion-item/accordion-item.component.ts @@ -14,10 +14,10 @@ import { } from '@angular/core'; import { AbstractTuiInteractive, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import {MODE_PROVIDER, TUI_MODE, TuiBrightness, TuiSizeS} from '@taiga-ui/core'; @@ -109,7 +109,7 @@ export class TuiAccordionItemComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } onHovered(hovered: boolean): void { diff --git a/projects/kit/components/action/action.component.ts b/projects/kit/components/action/action.component.ts index 2566efbfef29..0554ec6304a3 100644 --- a/projects/kit/components/action/action.component.ts +++ b/projects/kit/components/action/action.component.ts @@ -10,11 +10,11 @@ import { } from '@angular/core'; import { AbstractTuiInteractive, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiDestroyService, TuiFocusVisibleService, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; @@ -69,7 +69,7 @@ export class TuiActionComponent extends AbstractTuiInteractive { } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } @HostListener('focusin', ['true']) diff --git a/projects/kit/components/badged-content/badged-content.component.ts b/projects/kit/components/badged-content/badged-content.component.ts index 8f891fd6b4cb..23d84799cf26 100644 --- a/projects/kit/components/badged-content/badged-content.component.ts +++ b/projects/kit/components/badged-content/badged-content.component.ts @@ -1,5 +1,5 @@ import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core'; -import {isNumber, px, tuiDefaultProp} from '@taiga-ui/cdk'; +import {isNumber, tuiDefaultProp, tuiPx} from '@taiga-ui/cdk'; import {sizeBigger, TuiSizeL, TuiSizeS, TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; import {TuiStatus} from '@taiga-ui/kit/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @@ -74,7 +74,7 @@ export class TuiBadgedContentComponent { get boxShadow(): string { const borderWidth = this.sizeBig ? 3 : 2; - return `0 0 0 ${px(borderWidth)}`; + return `0 0 0 ${tuiPx(borderWidth)}`; } contentIsNumber(content: PolymorpheusContent): boolean { diff --git a/projects/kit/components/checkbox-block/checkbox-block.component.ts b/projects/kit/components/checkbox-block/checkbox-block.component.ts index 298de517a6fc..00d1a7ff918c 100644 --- a/projects/kit/components/checkbox-block/checkbox-block.component.ts +++ b/projects/kit/components/checkbox-block/checkbox-block.component.ts @@ -13,10 +13,10 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import { @@ -89,7 +89,7 @@ export class TuiCheckboxBlockComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get appearance(): TuiAppearance { diff --git a/projects/kit/components/checkbox-labeled/checkbox-labeled.component.ts b/projects/kit/components/checkbox-labeled/checkbox-labeled.component.ts index c2f4957ee7e4..e416493e95b7 100644 --- a/projects/kit/components/checkbox-labeled/checkbox-labeled.component.ts +++ b/projects/kit/components/checkbox-labeled/checkbox-labeled.component.ts @@ -13,10 +13,10 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import {TuiBrightness, TuiModeDirective, TuiSizeL} from '@taiga-ui/core'; @@ -60,7 +60,7 @@ export class TuiCheckboxLabeledComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get nativeFocusableElement(): TuiNativeFocusableElement | null { diff --git a/projects/kit/components/checkbox/checkbox.component.ts b/projects/kit/components/checkbox/checkbox.component.ts index bda6b0864a95..a66d86cfa68d 100644 --- a/projects/kit/components/checkbox/checkbox.component.ts +++ b/projects/kit/components/checkbox/checkbox.component.ts @@ -14,10 +14,10 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, } from '@taiga-ui/cdk'; import {TUI_CHECKBOX_OPTIONS, TuiCheckboxOptions, TuiSizeL} from '@taiga-ui/core'; @@ -64,7 +64,7 @@ export class TuiCheckboxComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get computedFocusable(): boolean { diff --git a/projects/kit/components/combo-box/combo-box.component.ts b/projects/kit/components/combo-box/combo-box.component.ts index 25aa1d3c95f7..b4cf189f8585 100644 --- a/projects/kit/components/combo-box/combo-box.component.ts +++ b/projects/kit/components/combo-box/combo-box.component.ts @@ -15,7 +15,6 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, - isNativeFocused, isPresent, setNativeFocused, TUI_STRICT_MATCHER, @@ -23,6 +22,7 @@ import { TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiStringMatcher, } from '@taiga-ui/cdk'; import { @@ -124,7 +124,7 @@ export class TuiComboBoxComponent get focused(): boolean { return ( - isNativeFocused(this.nativeFocusableElement) || + tuiIsNativeFocused(this.nativeFocusableElement) || (!!this.hostedDropdown && this.hostedDropdown.focused) ); } diff --git a/projects/kit/components/data-list-wrapper/data-list-wrapper.ts b/projects/kit/components/data-list-wrapper/data-list-wrapper.ts index bae6aae7abe5..28509f6fbcc0 100644 --- a/projects/kit/components/data-list-wrapper/data-list-wrapper.ts +++ b/projects/kit/components/data-list-wrapper/data-list-wrapper.ts @@ -6,7 +6,7 @@ import { QueryList, ViewChildren, } from '@angular/core'; -import {EMPTY_QUERY, isNativeFocused, isPresent, tuiDefaultProp} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, isPresent, tuiDefaultProp, tuiIsNativeFocused} from '@taiga-ui/cdk'; import { TuiOptionComponent, TuiSizeL, @@ -45,7 +45,7 @@ export abstract class AbstractTuiDataListWrapper { $implicit: T, {nativeElement}: ElementRef, ): TuiValueContentContext { - return {$implicit, active: isNativeFocused(nativeElement)}; + return {$implicit, active: tuiIsNativeFocused(nativeElement)}; } getOptions(includeDisabled: boolean = false): readonly T[] { diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts index 36d479903249..04c93138177e 100644 --- a/projects/kit/components/input-count/input-count.component.ts +++ b/projects/kit/components/input-count/input-count.component.ts @@ -14,13 +14,13 @@ import {NgControl} from '@angular/forms'; import { AbstractTuiControl, clamp, - isNativeFocused, isPresent, setNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_IS_MOBILE, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, tuiPure, } from '@taiga-ui/cdk'; import { @@ -151,7 +151,7 @@ export class TuiInputCountComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get exampleText(): string { diff --git a/projects/kit/components/input-files/input-files.component.ts b/projects/kit/components/input-files/input-files.component.ts index ec7b430072d4..02952b7e9a1d 100644 --- a/projects/kit/components/input-files/input-files.component.ts +++ b/projects/kit/components/input-files/input-files.component.ts @@ -17,11 +17,11 @@ import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, EMPTY_ARRAY, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_IS_MOBILE, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, tuiPure, } from '@taiga-ui/cdk'; @@ -120,7 +120,7 @@ export class TuiInputFilesComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get computedPseudoHovered(): boolean | null { diff --git a/projects/kit/components/input-inline/input-inline.component.ts b/projects/kit/components/input-inline/input-inline.component.ts index 1d853e52aaa6..5d58f0105bfc 100644 --- a/projects/kit/components/input-inline/input-inline.component.ts +++ b/projects/kit/components/input-inline/input-inline.component.ts @@ -13,10 +13,10 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiControl, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import {TUI_VALUE_ACCESSOR_PROVIDER} from '@taiga-ui/kit/providers'; @@ -60,7 +60,7 @@ export class TuiInputInlineComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get hasValue(): boolean { diff --git a/projects/kit/components/input-phone/input-phone.component.ts b/projects/kit/components/input-phone/input-phone.component.ts index da8edd5141a4..f9b7ea817108 100644 --- a/projects/kit/components/input-phone/input-phone.component.ts +++ b/projects/kit/components/input-phone/input-phone.component.ts @@ -16,13 +16,13 @@ import {NgControl} from '@angular/forms'; import { AbstractTuiControl, getClipboardDataText, - isNativeFocused, setNativeFocused, TuiActiveZoneDirective, TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, TuiInputMode, + tuiIsNativeFocused, tuiRequiredSetter, } from '@taiga-ui/cdk'; import { @@ -141,7 +141,7 @@ export class TuiInputPhoneComponent get focused(): boolean { return ( - isNativeFocused(this.nativeFocusableElement) || + tuiIsNativeFocused(this.nativeFocusableElement) || (!!this.dropdown && this.dropdown.focused) ); } @@ -251,7 +251,7 @@ export class TuiInputPhoneComponent const {selectionStart, selectionEnd} = nativeFocusableElement; return ( - isNativeFocused(nativeFocusableElement) && + tuiIsNativeFocused(nativeFocusableElement) && selectionStart !== null && selectionStart < this.nonRemovableLength && selectionStart === selectionEnd diff --git a/projects/kit/components/input-range/input-range.component.ts b/projects/kit/components/input-range/input-range.component.ts index 3419263affeb..e545becb37cb 100644 --- a/projects/kit/components/input-range/input-range.component.ts +++ b/projects/kit/components/input-range/input-range.component.ts @@ -18,7 +18,6 @@ import {NgControl} from '@angular/forms'; import { clamp, EMPTY_QUERY, - isNativeFocused, isNativeFocusedIn, round, TUI_FOCUSABLE_ITEM_ACCESSOR, @@ -26,6 +25,7 @@ import { TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import { @@ -155,7 +155,7 @@ export class TuiInputRangeComponent get showLeftValueContent(): boolean { return Boolean( (this.minLabel || this.leftValueContent) && - !isNativeFocused(this.leftFocusableElement) && + !tuiIsNativeFocused(this.leftFocusableElement) && !(this.rangeRef?.focused && this.lastActiveSide === 'left'), ); } @@ -163,7 +163,7 @@ export class TuiInputRangeComponent get showRightValueContent(): boolean { return Boolean( (this.maxLabel || this.rightValueContent) && - !isNativeFocused(this.rightFocusableElement) && + !tuiIsNativeFocused(this.rightFocusableElement) && !(this.rangeRef?.focused && this.lastActiveSide === 'right'), ); } diff --git a/projects/kit/components/input-slider/input-slider.component.ts b/projects/kit/components/input-slider/input-slider.component.ts index 422c42891c76..383da82ad288 100644 --- a/projects/kit/components/input-slider/input-slider.component.ts +++ b/projects/kit/components/input-slider/input-slider.component.ts @@ -14,7 +14,6 @@ import { import {NgControl} from '@angular/forms'; import { clamp, - isNativeFocused, round, setNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, @@ -22,6 +21,7 @@ import { TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import { @@ -160,8 +160,8 @@ export class TuiInputSliderComponent get focused(): boolean { return ( - isNativeFocused(this.nativeFocusableElement) || - isNativeFocused(this.sliderRef?.nativeElement || null) + tuiIsNativeFocused(this.nativeFocusableElement) || + tuiIsNativeFocused(this.sliderRef?.nativeElement || null) ); } diff --git a/projects/kit/components/input-time/input-time.component.ts b/projects/kit/components/input-time/input-time.component.ts index 5867491c9630..5eb7e6fdf048 100644 --- a/projects/kit/components/input-time/input-time.component.ts +++ b/projects/kit/components/input-time/input-time.component.ts @@ -14,13 +14,13 @@ import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, ALWAYS_FALSE_HANDLER, - isNativeFocused, setNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_STRICT_MATCHER, TuiBooleanHandler, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, tuiPure, TuiTime, TuiTimeLike, @@ -105,7 +105,7 @@ export class TuiInputTimeComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get filtered(): readonly TuiTime[] { diff --git a/projects/kit/components/input/input.component.ts b/projects/kit/components/input/input.component.ts index 1443f43962c5..05880ccd4797 100644 --- a/projects/kit/components/input/input.component.ts +++ b/projects/kit/components/input/input.component.ts @@ -12,11 +12,11 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiControl, - isNativeFocused, setNativeFocused, TuiActiveZoneDirective, TuiContextWithImplicit, TuiFocusableElementAccessor, + tuiIsNativeFocused, } from '@taiga-ui/cdk'; import { TuiDataListDirective, @@ -70,7 +70,7 @@ export class TuiInputComponent get focused(): boolean { return ( - isNativeFocused(this.nativeFocusableElement) || + tuiIsNativeFocused(this.nativeFocusableElement) || (!!this.hostedDropdown && this.hostedDropdown.focused) ); } diff --git a/projects/kit/components/multi-select/multi-select.component.ts b/projects/kit/components/multi-select/multi-select.component.ts index 957427dacb02..5ca2a18cfac1 100644 --- a/projects/kit/components/multi-select/multi-select.component.ts +++ b/projects/kit/components/multi-select/multi-select.component.ts @@ -18,7 +18,6 @@ import {NgControl} from '@angular/forms'; import { AbstractTuiMultipleControl, EMPTY_ARRAY, - isNativeFocused, setNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiActiveZoneDirective, @@ -26,6 +25,7 @@ import { TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiMapper, tuiPure, TuiStringHandler, @@ -276,7 +276,7 @@ export class TuiMultiSelectComponent this.editable && this.interactive && nativeFocusableElement && - isNativeFocused(nativeFocusableElement) + tuiIsNativeFocused(nativeFocusableElement) ) { this.hostedDropdown?.updateOpen(!this.open); } diff --git a/projects/kit/components/progress/utils/calculate-color-segments.ts b/projects/kit/components/progress/utils/calculate-color-segments.ts index 1a28decde6f4..6234b906938f 100644 --- a/projects/kit/components/progress/utils/calculate-color-segments.ts +++ b/projects/kit/components/progress/utils/calculate-color-segments.ts @@ -2,7 +2,7 @@ * TODO: 3.0 move inside {@link TuiProgressColorSegmentsDirective} (as a private method) * (after deletion of {@link TuiProgressColorSegmentsPipe} and {@link TuiProgressColorSegmentsAsyncPipe}) */ -import {px} from '@taiga-ui/cdk'; +import {tuiPx} from '@taiga-ui/cdk'; export const calculateColorSegments = ( colors: string[], @@ -11,7 +11,9 @@ export const calculateColorSegments = ( const segmentWidth = Math.ceil(progressWidth / colors.length); const colorsString = colors.reduce( (acc, color, i) => - `${acc}, ${color} ${px(i * segmentWidth)} ${px((i + 1) * segmentWidth)}`, + `${acc}, ${color} ${tuiPx(i * segmentWidth)} ${tuiPx( + (i + 1) * segmentWidth, + )}`, '', ); diff --git a/projects/kit/components/radio/radio.component.ts b/projects/kit/components/radio/radio.component.ts index a5e8cac3a065..3d73ddee9296 100644 --- a/projects/kit/components/radio/radio.component.ts +++ b/projects/kit/components/radio/radio.component.ts @@ -15,12 +15,12 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, - isNativeFocused, TUI_DEFAULT_IDENTITY_MATCHER, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiFocusableElementAccessor, TuiIdentityMatcher, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import {TUI_ANIMATION_OPTIONS, tuiScaleIn, TuiSizeL} from '@taiga-ui/core'; @@ -106,7 +106,7 @@ export class TuiRadioComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get checked(): boolean { diff --git a/projects/kit/components/rating/rating.component.ts b/projects/kit/components/rating/rating.component.ts index 8ffc724ce840..6d0bdd8b0392 100644 --- a/projects/kit/components/rating/rating.component.ts +++ b/projects/kit/components/rating/rating.component.ts @@ -14,10 +14,10 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiControl, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, } from '@taiga-ui/cdk'; import {TUI_RATING_OPTIONS, TuiRatingOptions} from './rating-options'; @@ -77,7 +77,7 @@ export class TuiRatingComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get isFocusable(): boolean { diff --git a/projects/kit/components/select/select.component.ts b/projects/kit/components/select/select.component.ts index 89f0f27d4abf..5f48495dfe3e 100644 --- a/projects/kit/components/select/select.component.ts +++ b/projects/kit/components/select/select.component.ts @@ -13,12 +13,12 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiNullableControl, - isNativeFocused, setNativeFocused, TuiActiveZoneDirective, TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, } from '@taiga-ui/cdk'; import { TUI_TEXTFIELD_CLEANER, @@ -104,7 +104,7 @@ export class TuiSelectComponent get focused(): boolean { return ( - isNativeFocused(this.nativeFocusableElement) || + tuiIsNativeFocused(this.nativeFocusableElement) || (!!this.hostedDropdown && this.hostedDropdown.focused) ); } diff --git a/projects/kit/components/slider/slider-key-steps.directive.ts b/projects/kit/components/slider/slider-key-steps.directive.ts index 126234eca60b..cc645bf0a10c 100644 --- a/projects/kit/components/slider/slider-key-steps.directive.ts +++ b/projects/kit/components/slider/slider-key-steps.directive.ts @@ -15,10 +15,10 @@ import {NgControl} from '@angular/forms'; import { AbstractTuiControl, clamp, - isNativeFocused, tuiAssert, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, typedFromEvent, } from '@taiga-ui/cdk'; import {TuiKeySteps} from '@taiga-ui/kit/types'; @@ -61,7 +61,7 @@ export class TuiSliderKeyStepsDirective } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get min(): number { diff --git a/projects/kit/components/slider/slider-old.component.ts b/projects/kit/components/slider/slider-old.component.ts index 7e12a3aa67b5..c02703f6f96e 100644 --- a/projects/kit/components/slider/slider-old.component.ts +++ b/projects/kit/components/slider/slider-old.component.ts @@ -10,9 +10,9 @@ import { } from '@angular/core'; import {NgControl} from '@angular/forms'; import { - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import {AbstractTuiSlider} from '@taiga-ui/kit/abstract'; @@ -60,7 +60,7 @@ export class TuiSliderOldComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get left(): number { diff --git a/projects/kit/components/stepper/stepper.component.ts b/projects/kit/components/stepper/stepper.component.ts index 9079fea1f49c..eaeea7325d77 100644 --- a/projects/kit/components/stepper/stepper.component.ts +++ b/projects/kit/components/stepper/stepper.component.ts @@ -15,9 +15,9 @@ import { EMPTY_QUERY, getOriginalArrayFromQueryList, itemsQueryListObservable, - moveFocus, tuiAssertIsHTMLElement, tuiDefaultProp, + tuiMoveFocus, tuiPure, } from '@taiga-ui/cdk'; import {TuiOrientationT} from '@taiga-ui/core'; @@ -119,7 +119,7 @@ export class TuiStepperComponent { const stepElements = this.getNativeElements(this.steps); - moveFocus(stepElements.indexOf(current), stepElements, step); + tuiMoveFocus(stepElements.indexOf(current), stepElements, step); } private scrollIntoView(targetStepIndex: number): void { diff --git a/projects/kit/components/tabs/tab/tab.component.ts b/projects/kit/components/tabs/tab/tab.component.ts index ffd96ca88a8d..ca75ad00a917 100644 --- a/projects/kit/components/tabs/tab/tab.component.ts +++ b/projects/kit/components/tabs/tab/tab.component.ts @@ -8,15 +8,9 @@ import { Optional, } from '@angular/core'; import {RouterLinkActive} from '@angular/router'; -import { - isNativeFocused, - setNativeFocused, - TUI_IS_ANDROID, - TUI_IS_IOS, - TuiFocusVisibleService, -} from '@taiga-ui/cdk'; +import {TuiFocusVisibleService, tuiIsNativeFocused} from '@taiga-ui/cdk'; import {TUI_MODE, TuiBrightness} from '@taiga-ui/core'; -import {TUI_MOBILE_AWARE, TUI_TAB_MARGIN} from '@taiga-ui/kit/tokens'; +import {TUI_TAB_MARGIN} from '@taiga-ui/kit/tokens'; import {Observable} from 'rxjs'; import {TUI_TAB_EVENT, TUI_TAB_PROVIDERS} from './tab.providers'; @@ -34,12 +28,6 @@ import {TUI_TAB_EVENT, TUI_TAB_PROVIDERS} from './tab.providers'; }, }) export class TuiTabComponent implements OnDestroy { - @HostBinding('class._ios') - readonly isIos: boolean; - - @HostBinding('class._android') - readonly isAndroid: boolean; - @HostBinding('class._focus-visible') focusVisible = false; @@ -51,14 +39,8 @@ export class TuiTabComponent implements OnDestroy { @Inject(TUI_MODE) readonly mode$: Observable, @Inject(TUI_TAB_EVENT) readonly event$: Observable, @Inject(TUI_TAB_MARGIN) readonly margin: number, - @Inject(TUI_MOBILE_AWARE) mobileAware: boolean, - @Inject(TUI_IS_IOS) isIos: boolean, - @Inject(TUI_IS_ANDROID) isAndroid: boolean, @Inject(TuiFocusVisibleService) focusVisible$: TuiFocusVisibleService, ) { - this.isIos = mobileAware && isIos; - this.isAndroid = mobileAware && isAndroid; - focusVisible$.subscribe(visible => { this.focusVisible = visible; }); @@ -70,8 +52,8 @@ export class TuiTabComponent implements OnDestroy { } ngOnDestroy(): void { - if (isNativeFocused(this.elementRef.nativeElement)) { - setNativeFocused(this.elementRef.nativeElement, false); + if (tuiIsNativeFocused(this.elementRef.nativeElement)) { + this.elementRef.nativeElement.blur(); } } } diff --git a/projects/kit/components/tabs/tabs-with-more/tabs-with-more.component.ts b/projects/kit/components/tabs/tabs-with-more/tabs-with-more.component.ts index 40613c1b9c52..241f37dc2034 100644 --- a/projects/kit/components/tabs/tabs-with-more/tabs-with-more.component.ts +++ b/projects/kit/components/tabs/tabs-with-more/tabs-with-more.component.ts @@ -17,13 +17,13 @@ import { import { EMPTY_QUERY, getClosestFocusable, - isNativeFocused, setNativeFocused, toInt, TuiActiveZoneDirective, tuiAssertIsHTMLElement, TuiContextWithImplicit, tuiDefaultProp, + tuiIsNativeFocused, TuiItemDirective, } from '@taiga-ui/cdk'; import {TUI_MORE_WORD, TUI_TAB_MARGIN} from '@taiga-ui/kit/tokens'; @@ -106,7 +106,7 @@ export class TuiTabsWithMoreComponent implements AfterViewInit { } get isMoreFocusable(): boolean { - return !!this.moreButton && isNativeFocused(this.moreButton.nativeElement); + return !!this.moreButton && tuiIsNativeFocused(this.moreButton.nativeElement); } get isMoreActive(): boolean { @@ -154,7 +154,7 @@ export class TuiTabsWithMoreComponent implements AfterViewInit { onArrowRight(event: Event): void { tuiAssertIsHTMLElement(event.target); - if (isNativeFocused(event.target)) { + if (tuiIsNativeFocused(event.target)) { this.focusMore(); } } @@ -166,7 +166,7 @@ export class TuiTabsWithMoreComponent implements AfterViewInit { while (index >= 0) { setNativeFocused(tabs[index]); - if (isNativeFocused(tabs[index])) { + if (tuiIsNativeFocused(tabs[index])) { return; } diff --git a/projects/kit/components/tabs/tabs/tabs.component.ts b/projects/kit/components/tabs/tabs/tabs.component.ts index cc0889ccbd94..56abf41be8f5 100644 --- a/projects/kit/components/tabs/tabs/tabs.component.ts +++ b/projects/kit/components/tabs/tabs/tabs.component.ts @@ -21,14 +21,11 @@ import { } from '@ng-web-apis/mutation-observer'; import { EMPTY_QUERY, - moveFocus, - TUI_IS_ANDROID, - TUI_IS_IOS, tuiDefaultProp, TuiDestroyService, + tuiMoveFocus, TuiResizeService, } from '@taiga-ui/cdk'; -import {TUI_MOBILE_AWARE} from '@taiga-ui/kit/tokens'; import {Observable} from 'rxjs'; import {filter} from 'rxjs/operators'; @@ -77,12 +74,6 @@ export class TuiTabsComponent implements AfterViewChecked { @Output() readonly activeItemIndexChange = new EventEmitter(); - @HostBinding('class._ios') - readonly isIos: boolean; - - @HostBinding('class._android') - readonly isAndroid: boolean; - activeItemIndex = 0; constructor( @@ -91,13 +82,7 @@ export class TuiTabsComponent implements AfterViewChecked { @Inject(Renderer2) private readonly renderer: Renderer2, @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef, @Inject(TuiResizeService) resize$: Observable, - @Inject(TUI_IS_IOS) isIos: boolean, - @Inject(TUI_IS_ANDROID) isAndroid: boolean, - @Inject(TUI_MOBILE_AWARE) mobileAware: boolean, ) { - this.isIos = mobileAware && isIos; - this.isAndroid = mobileAware && isAndroid; - resize$.pipe(filter(() => this.underline)).subscribe(() => { changeDetectorRef.detectChanges(); }); @@ -130,7 +115,7 @@ export class TuiTabsComponent implements AfterViewChecked { onKeyDownArrow(current: HTMLElement, step: number): void { const {tabs} = this; - moveFocus(tabs.indexOf(current), tabs, step); + tuiMoveFocus(tabs.indexOf(current), tabs, step); } ngAfterViewChecked(): void { diff --git a/projects/kit/components/tabs/tabs/tabs.style.less b/projects/kit/components/tabs/tabs/tabs.style.less index 3020ec4d3be8..977a47e8bf86 100644 --- a/projects/kit/components/tabs/tabs/tabs.style.less +++ b/projects/kit/components/tabs/tabs/tabs.style.less @@ -9,18 +9,6 @@ color: var(--tui-text-02); box-shadow: inset 0 -1px var(--tui-base-03); overflow: auto; - - &._android { - height: auto; - } - - &._ios { - height: auto; - border: 2px solid transparent; - border-radius: 0.5625rem; - background: var(--tui-link); - box-shadow: none; - } } .t-underline { diff --git a/projects/kit/components/tabs/test/tabs.component.spec.ts b/projects/kit/components/tabs/test/tabs.component.spec.ts index 3adcaf2352dd..970e7b2355a5 100644 --- a/projects/kit/components/tabs/test/tabs.component.spec.ts +++ b/projects/kit/components/tabs/test/tabs.component.spec.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {isNativeFocused} from '@taiga-ui/cdk'; +import {tuiIsNativeFocused} from '@taiga-ui/cdk'; import {configureTestSuite, tuiDispatchOnActive} from '@taiga-ui/testing'; import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins'; @@ -71,28 +71,28 @@ describe('Tabs', () => { tuiDispatchOnActive('arrowRight'); fixture.detectChanges(); - expect(isNativeFocused(buttons[1])).toBe(true); + expect(tuiIsNativeFocused(buttons[1])).toBe(true); }); it('Navigation by arrows works when going left', () => { buttons[1].focus(); tuiDispatchOnActive('arrowLeft'); - expect(isNativeFocused(buttons[0])).toBe(true); + expect(tuiIsNativeFocused(buttons[0])).toBe(true); }); it('Navigation by arrows skips disabled when going right', () => { buttons[1].focus(); tuiDispatchOnActive('arrowRight'); - expect(isNativeFocused(buttons[3])).toBe(true); + expect(tuiIsNativeFocused(buttons[3])).toBe(true); }); it('Navigation by arrows skips disabled when going left', () => { buttons[3].focus(); tuiDispatchOnActive('arrowLeft'); - expect(isNativeFocused(buttons[1])).toBe(true); + expect(tuiIsNativeFocused(buttons[1])).toBe(true); }); it('Updates activeItemIndex', () => { diff --git a/projects/kit/components/tabs/underline/underline.component.ts b/projects/kit/components/tabs/underline/underline.component.ts index 2b8fb62d44a3..f7421d1e27f2 100644 --- a/projects/kit/components/tabs/underline/underline.component.ts +++ b/projects/kit/components/tabs/underline/underline.component.ts @@ -2,16 +2,14 @@ import { ChangeDetectionStrategy, Component, ElementRef, - HostBinding, HostListener, Inject, Input, NgZone, } from '@angular/core'; import {ANIMATION_FRAME} from '@ng-web-apis/common'; -import {px, TUI_IS_ANDROID, TUI_IS_IOS, tuiDefaultProp, tuiZonefree} from '@taiga-ui/cdk'; +import {tuiDefaultProp, tuiPx, tuiZonefree} from '@taiga-ui/cdk'; import {MODE_PROVIDER, TUI_MODE, TuiBrightness} from '@taiga-ui/core'; -import {TUI_MOBILE_AWARE} from '@taiga-ui/kit/tokens'; import {asCallable} from '@tinkoff/ng-event-plugins'; import {Observable, of, ReplaySubject} from 'rxjs'; import {debounceTime, map, mapTo, share, switchMap} from 'rxjs/operators'; @@ -44,12 +42,6 @@ export class TuiUnderlineComponent { this.element$.next(element); } - @HostBinding('class._ios') - readonly isIos = this.mobileAware && this.ios; - - @HostBinding('class._android') - readonly isAndroid = this.mobileAware && this.android; - @HostListener('$.style.transitionProperty') readonly transition$ = asCallable( this.element$.pipe( @@ -62,7 +54,7 @@ export class TuiUnderlineComponent { readonly transform$ = asCallable( this.refresh$.pipe( map(element => - element ? `translate3d(${px(element.offsetLeft)}, 0, 0)` : null, + element ? `translate3d(${tuiPx(element.offsetLeft)}, 0, 0)` : null, ), ), ); @@ -76,9 +68,6 @@ export class TuiUnderlineComponent { @Inject(ElementRef) {nativeElement}: ElementRef, @Inject(NgZone) private readonly ngZone: NgZone, @Inject(ANIMATION_FRAME) private readonly animationFrame$: Observable, - @Inject(TUI_MOBILE_AWARE) private readonly mobileAware: boolean, - @Inject(TUI_IS_IOS) private readonly ios: boolean, - @Inject(TUI_IS_ANDROID) private readonly android: boolean, @Inject(TUI_MODE) readonly mode$: Observable, ) { nativeElement['$.style.transitionProperty'] = this.transition$; diff --git a/projects/kit/components/tabs/underline/underline.style.less b/projects/kit/components/tabs/underline/underline.style.less index c44a048eb049..ef846cdbef72 100644 --- a/projects/kit/components/tabs/underline/underline.style.less +++ b/projects/kit/components/tabs/underline/underline.style.less @@ -11,16 +11,6 @@ transition-property: none; pointer-events: none; - &._ios { - border-radius: 0.4375rem; - background: var(--tui-base-01); - box-shadow: 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04), 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12); - } - - &._android { - box-shadow: inset 0 -0.1875rem var(--tui-link); - } - &[data-mode='onDark'] { color: var(--tui-text-01-night); } diff --git a/projects/kit/components/text-area/test/text-area.component.spec.ts b/projects/kit/components/text-area/test/text-area.component.spec.ts index 55d0ce68680c..1cbd1b2cfaae 100644 --- a/projects/kit/components/text-area/test/text-area.component.spec.ts +++ b/projects/kit/components/text-area/test/text-area.component.spec.ts @@ -2,7 +2,7 @@ import {Component, DebugElement, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {px} from '@taiga-ui/cdk'; +import {tuiPx} from '@taiga-ui/cdk'; import {TuiHintControllerModule, TuiTextfieldControllerModule} from '@taiga-ui/core'; import { configureTestSuite, @@ -135,7 +135,7 @@ describe('TextArea', () => { const maxHeight = component.rows * LINE_HEIGHT_L; - expect(getScrollbar().style.maxHeight).toEqual(px(maxHeight)); + expect(getScrollbar().style.maxHeight).toEqual(tuiPx(maxHeight)); }); it('when rows change, MaxHeight is calculated correctly', () => { @@ -145,7 +145,7 @@ describe('TextArea', () => { const maxHeight = component.rows * LINE_HEIGHT_L; - expect(getScrollbar().style.maxHeight).toEqual(px(maxHeight)); + expect(getScrollbar().style.maxHeight).toEqual(tuiPx(maxHeight)); }); it('when rows change, MaxHeight is calculated correctly', () => { @@ -155,7 +155,7 @@ describe('TextArea', () => { const maxHeight = component.rows * LINE_HEIGHT_L; - expect(getScrollbar().style.maxHeight).toEqual(px(maxHeight)); + expect(getScrollbar().style.maxHeight).toEqual(tuiPx(maxHeight)); }); it('when expandable is true and the content size increases, the tui-outline height increases', () => { diff --git a/projects/kit/components/text-area/text-area.component.ts b/projects/kit/components/text-area/text-area.component.ts index dda54f21ccfa..3f225d2094a8 100644 --- a/projects/kit/components/text-area/text-area.component.ts +++ b/projects/kit/components/text-area/text-area.component.ts @@ -15,11 +15,11 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiControl, - isNativeFocused, setNativeFocused, TUI_IS_IOS, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, } from '@taiga-ui/cdk'; import { getBorder, @@ -105,7 +105,7 @@ export class TuiTextAreaComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } @HostBinding('attr.data-size') diff --git a/projects/kit/components/toggle/toggle.component.ts b/projects/kit/components/toggle/toggle.component.ts index bf783895dac8..eb308c25f7c0 100644 --- a/projects/kit/components/toggle/toggle.component.ts +++ b/projects/kit/components/toggle/toggle.component.ts @@ -14,11 +14,11 @@ import { import {NgControl} from '@angular/forms'; import { AbstractTuiControl, - isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, + tuiIsNativeFocused, TuiNativeFocusableElement, } from '@taiga-ui/cdk'; import { @@ -96,7 +96,7 @@ export class TuiToggleComponent } get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); + return tuiIsNativeFocused(this.nativeFocusableElement); } get appearance(): TuiAppearance { diff --git a/projects/kit/directives/dropdown-context/dropdown-context.directive.ts b/projects/kit/directives/dropdown-context/dropdown-context.directive.ts index c4bf03b7cd7c..9e2d44a7b74c 100644 --- a/projects/kit/directives/dropdown-context/dropdown-context.directive.ts +++ b/projects/kit/directives/dropdown-context/dropdown-context.directive.ts @@ -12,12 +12,12 @@ import { import { EMPTY_CLIENT_RECT, getClosestFocusable, - getNativeFocused, setNativeFocused, TuiActiveZoneDirective, tuiDefaultProp, TuiDestroyService, TuiDropdownPortalService, + tuiGetNativeFocused, tuiPointToClientRect, } from '@taiga-ui/cdk'; import {AbstractTuiDropdown, TUI_DROPDOWN_DIRECTIVE, TuiDropdown} from '@taiga-ui/core'; @@ -106,7 +106,7 @@ export class TuiDropdownContextDirective @HostListener('document:keydown.arrowDown', ['$event', 'true']) @HostListener('document:keydown.arrowUp', ['$event', 'false']) onArrow(event: KeyboardEvent, down: boolean): void { - const activeElement = getNativeFocused(this.documentRef); + const activeElement = tuiGetNativeFocused(this.documentRef); const focusInside = activeElement && this.activeZone.contains(activeElement); if (!this.dropdownContent || focusInside) { diff --git a/projects/kit/directives/dropdown-selection/dropdown-selection.directive.ts b/projects/kit/directives/dropdown-selection/dropdown-selection.directive.ts index 3747bd632fb5..a0cfeae9a169 100644 --- a/projects/kit/directives/dropdown-selection/dropdown-selection.directive.ts +++ b/projects/kit/directives/dropdown-selection/dropdown-selection.directive.ts @@ -20,13 +20,13 @@ import { CHAR_NO_BREAK_SPACE, CHAR_ZERO_WIDTH_SPACE, EMPTY_CLIENT_RECT, - getNativeFocused, - px, TuiActiveZoneDirective, TuiBooleanHandler, TuiDestroyService, TuiDropdownPortalService, + tuiGetNativeFocused, TuiParentsScrollService, + tuiPx, typedFromEvent, } from '@taiga-ui/cdk'; import { @@ -133,7 +133,7 @@ export class TuiDropdownSelectionDirective ) .pipe( map(() => { - const active = getNativeFocused(this.documentRef); + const active = tuiGetNativeFocused(this.documentRef); const selection = this.documentRef.getSelection(); // TODO: iframe warning @@ -273,10 +273,10 @@ export class TuiDropdownSelectionDirective const range = this.documentRef.createRange(); const hostRect = this.elementRef.nativeElement.getBoundingClientRect(); - ghost.style.top = px(top - hostRect.top); - ghost.style.left = px(left - hostRect.left); - ghost.style.width = px(width); - ghost.style.height = px(height); + ghost.style.top = tuiPx(top - hostRect.top); + ghost.style.left = tuiPx(left - hostRect.left); + ghost.style.width = tuiPx(width); + ghost.style.height = tuiPx(height); ghost.textContent = CHAR_ZERO_WIDTH_SPACE + element.value + CHAR_NO_BREAK_SPACE; range.setStart(ghost.firstChild!, selectionStart || 0); diff --git a/projects/kit/directives/highlight/highlight.directive.ts b/projects/kit/directives/highlight/highlight.directive.ts index 7a7bf0acfeb0..30e65ea4abbe 100644 --- a/projects/kit/directives/highlight/highlight.directive.ts +++ b/projects/kit/directives/highlight/highlight.directive.ts @@ -1,10 +1,10 @@ import {DOCUMENT} from '@angular/common'; import {Directive, ElementRef, Inject, Input, OnChanges, Renderer2} from '@angular/core'; import { - px, svgNodeFilter, tuiDefaultProp, TuiDestroyService, + tuiPx, TuiResizeService, } from '@taiga-ui/cdk'; import {Observable} from 'rxjs'; @@ -80,10 +80,10 @@ export class TuiHighlightDirective implements OnChanges { const {style} = this.highlight; style.background = this.tuiHighlightColor; - style.left = px(left - hostRect.left); - style.top = px(top - hostRect.top); - style.width = px(width); - style.height = px(height); + style.left = tuiPx(left - hostRect.left); + style.top = tuiPx(top - hostRect.top); + style.width = tuiPx(width); + style.height = tuiPx(height); style.display = 'block'; return; diff --git a/projects/kit/tokens/index.ts b/projects/kit/tokens/index.ts index 7f3bf2b5ded5..3f868a5fedd8 100644 --- a/projects/kit/tokens/index.ts +++ b/projects/kit/tokens/index.ts @@ -2,7 +2,6 @@ export * from './calendar-data-stream'; export * from './date-inputs-value-transformers'; export * from './i18n'; export * from './items-handlers'; -export * from './mobile-aware'; export * from './mobile-calendar'; export * from './month-formatter'; export * from './tab-margin'; diff --git a/projects/kit/tokens/mobile-aware.ts b/projects/kit/tokens/mobile-aware.ts deleted file mode 100644 index b756777e8286..000000000000 --- a/projects/kit/tokens/mobile-aware.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {InjectionToken} from '@angular/core'; - -/** @deprecated use {@link TuiMobileTabsDirective} from @taiga-ui/addon-mobile */ -export const TUI_MOBILE_AWARE = new InjectionToken( - 'A flag enabling mobile-specific behavior for supporting components', - { - factory: () => false, - }, -);