From 2e43f07f6b8d46c1400265dd350423dbcf8e523f Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Tue, 12 Jul 2022 16:37:45 +0300 Subject: [PATCH] Some stuff (#2102) * chore: some stuff * chore: fix tests * chore: fix tests --- .../input-card-grouped.component.ts | 6 +-- .../components/editor/editor.component.ts | 4 +- projects/cdk/classes/assert.ts | 20 +++---- .../directives/hovered/hovered.directive.ts | 32 +++-------- .../cdk/directives/hovered/hovered.service.ts | 32 +++++++++++ projects/cdk/directives/hovered/index.ts | 1 + projects/cdk/services/hovered.service.ts | 54 ------------------- projects/cdk/services/index.ts | 1 - .../focus/get-closest-keyboard-focusable.ts | 5 +- .../components/button/button.component.ts | 2 +- .../data-list/data-list.component.ts | 8 ++- .../dropdown-box/dropdown-box.component.ts | 4 +- .../hints-host/hints-host.style.less | 2 +- .../test/hosted-dropdown.component.spec.ts | 16 +++--- projects/core/constants/described-by.ts | 1 + projects/core/constants/index.ts | 1 + .../described-by/described-by.directive.ts | 3 +- .../core/directives/hint/hint.directive.ts | 14 ++--- .../hint/test/hint.directive.spec.ts | 8 +-- .../pointer-hint/pointer-hint.directive.ts | 4 +- projects/core/interfaces/hint.ts | 3 +- projects/kit/abstract/slider/slider.ts | 4 +- .../test/multi-select.component.spec.ts | 11 ++-- .../components/stepper/stepper.component.ts | 7 +-- .../tabs-with-more.component.ts | 4 +- .../test/highlight.directive.spec.ts | 13 ++--- .../test/field-error-content-pipe.spec.ts | 6 +-- 27 files changed, 106 insertions(+), 160 deletions(-) create mode 100644 projects/cdk/directives/hovered/hovered.service.ts delete mode 100644 projects/cdk/services/hovered.service.ts create mode 100644 projects/core/constants/described-by.ts 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 975f89e0b79b..1bee75e395f4 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 @@ -28,7 +28,7 @@ import { AbstractTuiNullableControl, isNativeFocusedIn, TUI_FOCUSABLE_ITEM_ACCESSOR, - tuiAssertIsHTMLElement, + tuiAssertIsElement, TuiBooleanHandler, TuiCreditCardAutofillName, tuiDefaultProp, @@ -385,7 +385,7 @@ export class TuiInputCardGroupedComponent } onMouseDown(event: MouseEvent): void { - tuiAssertIsHTMLElement(event.target); + tuiAssertIsElement(event.target); if (event.target.matches('input')) { return; @@ -396,7 +396,7 @@ export class TuiInputCardGroupedComponent } onScroll({currentTarget}: Event): void { - tuiAssertIsHTMLElement(currentTarget); + tuiAssertIsElement(currentTarget); currentTarget.scrollLeft = 0; } diff --git a/projects/addon-editor/components/editor/editor.component.ts b/projects/addon-editor/components/editor/editor.component.ts index d7d1b42b143a..31c15f4ae575 100644 --- a/projects/addon-editor/components/editor/editor.component.ts +++ b/projects/addon-editor/components/editor/editor.component.ts @@ -28,7 +28,7 @@ import { setNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiAssert, - tuiAssertIsHTMLElement, + tuiAssertIsElement, TuiBooleanHandler, tuiDefaultProp, TuiDestroyService, @@ -290,7 +290,7 @@ export class TuiEditorComponent extends AbstractTuiControl implements On return; } - tuiAssertIsHTMLElement(suitableNode); + tuiAssertIsElement(suitableNode); const element = suitableNode.closest(selector); diff --git a/projects/cdk/classes/assert.ts b/projects/cdk/classes/assert.ts index c646b3fcbc41..7b7cc7c95de2 100644 --- a/projects/cdk/classes/assert.ts +++ b/projects/cdk/classes/assert.ts @@ -11,19 +11,11 @@ export const tuiAssert = { type PossibleNode = Node | Element | EventTarget | null; -interface DefaultView { - Element: typeof Node; - HTMLElement: typeof Node; - HTMLDocument: typeof Node; -} - -export function tuiAssertIsHTMLElement(node?: PossibleNode): asserts node is HTMLElement { - const document = (node as Node)?.ownerDocument; - const defaultView = document?.defaultView as unknown as DefaultView; - const isHTMLElement = - node instanceof defaultView?.HTMLElement || - node instanceof defaultView?.Element || - node instanceof defaultView?.HTMLDocument; +export function tuiAssertIsElement(node?: PossibleNode): asserts node is Element { + const defaultView = (node as Node)?.ownerDocument?.defaultView; + const isElement = + !!defaultView && + (node instanceof defaultView.Element || node instanceof defaultView.HTMLDocument); - tuiAssert.assert(isHTMLElement, 'Node is not an Element'); + tuiAssert.assert(isElement, 'Node is not an Element'); } diff --git a/projects/cdk/directives/hovered/hovered.directive.ts b/projects/cdk/directives/hovered/hovered.directive.ts index bf7cf991a436..0b3a9288a43c 100644 --- a/projects/cdk/directives/hovered/hovered.directive.ts +++ b/projects/cdk/directives/hovered/hovered.directive.ts @@ -1,31 +1,15 @@ -import {Directive, EventEmitter, HostListener, Output} from '@angular/core'; -import {tuiAssertIsHTMLElement} from '@taiga-ui/cdk/classes'; -import {shouldCall} from '@tinkoff/ng-event-plugins'; +import {Directive, Inject} from '@angular/core'; +import {Observable} from 'rxjs'; -// eslint-disable-next-line @typescript-eslint/naming-convention -export function movedOut({currentTarget, relatedTarget}: MouseEvent): boolean { - tuiAssertIsHTMLElement(currentTarget); - tuiAssertIsHTMLElement(relatedTarget); - - return !currentTarget.contains(relatedTarget); -} +import {TuiHoveredService} from './hovered.service'; @Directive({ selector: '[tuiHoveredChange]', + outputs: ['tuiHoveredChange'], + providers: [TuiHoveredService], }) export class TuiHoveredDirective { - @Output() - readonly tuiHoveredChange = new EventEmitter(); - - @HostListener('mouseenter') - onHover(): void { - this.tuiHoveredChange.emit(true); - } - - @shouldCall(movedOut) - @HostListener('mouseout.init', ['$event']) - @HostListener('mouseout.silent', ['$event']) - onOut(_: MouseEvent): void { - this.tuiHoveredChange.emit(false); - } + constructor( + @Inject(TuiHoveredService) readonly tuiHoveredChange: Observable, + ) {} } diff --git a/projects/cdk/directives/hovered/hovered.service.ts b/projects/cdk/directives/hovered/hovered.service.ts new file mode 100644 index 000000000000..10022172771a --- /dev/null +++ b/projects/cdk/directives/hovered/hovered.service.ts @@ -0,0 +1,32 @@ +import {ElementRef, Inject, Injectable, NgZone} from '@angular/core'; +import {tuiAssertIsElement} from '@taiga-ui/cdk/classes'; +import {tuiTypedFromEvent, tuiZoneOptimized} from '@taiga-ui/cdk/observables'; +import {merge, Observable} from 'rxjs'; +import {distinctUntilChanged, filter, mapTo} from 'rxjs/operators'; + +function movedOut({currentTarget, relatedTarget}: MouseEvent): boolean { + tuiAssertIsElement(currentTarget); + tuiAssertIsElement(relatedTarget); + + return !currentTarget.contains(relatedTarget); +} + +@Injectable() +export class TuiHoveredService extends Observable { + private readonly stream$ = merge( + tuiTypedFromEvent(this.elementRef.nativeElement, 'mouseenter').pipe(mapTo(true)), + tuiTypedFromEvent(this.elementRef.nativeElement, 'mouseleave').pipe(mapTo(false)), + // Hello, Safari + tuiTypedFromEvent(this.elementRef.nativeElement, 'mouseout').pipe( + filter(movedOut), + mapTo(false), + ), + ).pipe(distinctUntilChanged(), tuiZoneOptimized(this.ngZone)); + + constructor( + @Inject(ElementRef) private readonly elementRef: ElementRef, + @Inject(NgZone) private readonly ngZone: NgZone, + ) { + super(subscriber => this.stream$.subscribe(subscriber)); + } +} diff --git a/projects/cdk/directives/hovered/index.ts b/projects/cdk/directives/hovered/index.ts index 4263d6a78a8a..498b9b463123 100644 --- a/projects/cdk/directives/hovered/index.ts +++ b/projects/cdk/directives/hovered/index.ts @@ -1,2 +1,3 @@ export * from './hovered.directive'; export * from './hovered.module'; +export * from './hovered.service'; diff --git a/projects/cdk/services/hovered.service.ts b/projects/cdk/services/hovered.service.ts deleted file mode 100644 index be6ea60a6f51..000000000000 --- a/projects/cdk/services/hovered.service.ts +++ /dev/null @@ -1,54 +0,0 @@ -import {DOCUMENT} from '@angular/common'; -import {Inject, Injectable, NgZone} from '@angular/core'; -import {tuiZoneOptimized, typedFromEvent} from '@taiga-ui/cdk/observables'; -import {getActualTarget} from '@taiga-ui/cdk/utils/dom'; -import {merge, Observable} from 'rxjs'; -import { - distinctUntilChanged, - filter, - mapTo, - startWith, - switchMap, - take, -} from 'rxjs/operators'; - -/** @deprecated TODO remove in v3.0 */ -// @dynamic -@Injectable({ - providedIn: 'root', -}) -export class TuiHoveredService { - private readonly documentEvents$: Observable; - - constructor( - @Inject(DOCUMENT) documentRef: Document, - @Inject(NgZone) private readonly ngZone: NgZone, - ) { - this.documentEvents$ = merge( - typedFromEvent(documentRef, 'mousemove'), - typedFromEvent(documentRef, 'touchstart', {capture: true}), - ); - } - - createHovered$( - target: Element, - options: AddEventListenerOptions = {passive: true}, - ): Observable { - return merge( - typedFromEvent(target, 'mouseenter', options), - typedFromEvent(target, 'touchstart', options), - ).pipe( - switchMap(() => - merge( - typedFromEvent(target, 'mouseleave', options), - this.documentEvents$.pipe( - filter(event => !target.contains(getActualTarget(event))), - tuiZoneOptimized(this.ngZone), - take(1), - ), - ).pipe(mapTo(false), startWith(true)), - ), - distinctUntilChanged(), - ); - } -} diff --git a/projects/cdk/services/index.ts b/projects/cdk/services/index.ts index fb70d457f40f..fcc458e03a9a 100644 --- a/projects/cdk/services/index.ts +++ b/projects/cdk/services/index.ts @@ -1,7 +1,6 @@ export * from './destroy.service'; export * from './directive-styles.service'; export * from './focus-visible.service'; -export * from './hovered.service'; export * from './id.service'; export * from './obscured.service'; export * from './pan.service'; diff --git a/projects/cdk/utils/focus/get-closest-keyboard-focusable.ts b/projects/cdk/utils/focus/get-closest-keyboard-focusable.ts index 292aab830868..78f1487db5ea 100644 --- a/projects/cdk/utils/focus/get-closest-keyboard-focusable.ts +++ b/projects/cdk/utils/focus/get-closest-keyboard-focusable.ts @@ -15,7 +15,7 @@ import {isNativeMouseFocusable} from './is-native-mouse-focusable'; */ // eslint-disable-next-line @typescript-eslint/naming-convention export function getClosestFocusable( - initial: HTMLElement, + initial: Element, prev: boolean = false, root: Node, keyboard: boolean = true, @@ -43,7 +43,8 @@ export function getClosestFocusable( initial = treeWalker.currentNode; } - if (check(initial)) { + // TODO: iframe warning + if (check(initial) && initial instanceof HTMLElement) { return initial; } } diff --git a/projects/core/components/button/button.component.ts b/projects/core/components/button/button.component.ts index 006eba2644ba..025e08878348 100644 --- a/projects/core/components/button/button.component.ts +++ b/projects/core/components/button/button.component.ts @@ -40,6 +40,7 @@ import {TUI_BUTTON_OPTIONS, TuiButtonOptions} from './button-options'; useExisting: forwardRef(() => TuiButtonComponent), }, TuiDestroyService, + TuiHoveredService, TuiFocusVisibleService, ], }) @@ -92,7 +93,6 @@ export class TuiButtonComponent super(); hoveredService - .createHovered$(elementRef.nativeElement) .pipe(watch(changeDetectorRef), takeUntil(destroy$)) .subscribe(hovered => { this.updateHovered(hovered); diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts index eb79bf8095a8..b095179f74f1 100644 --- a/projects/core/components/data-list/data-list.component.ts +++ b/projects/core/components/data-list/data-list.component.ts @@ -17,7 +17,7 @@ import { isPresent, itemsQueryListObservable, setNativeMouseFocused, - tuiAssertIsHTMLElement, + tuiAssertIsElement, tuiDefaultProp, tuiMoveFocus, tuiPure, @@ -93,9 +93,7 @@ export class TuiDataListComponent implements TuiDataListAccessor { // TODO: Consider aria-activedescendant for proper accessibility implementation @HostListener('wheel.silent.passive') @HostListener('mouseleave', ['$event.target']) - handleFocusLossIfNecessary( - element: HTMLElement = this.elementRef.nativeElement, - ): void { + handleFocusLossIfNecessary(element: Element = this.elementRef.nativeElement): void { if (this.origin && isNativeFocusedIn(element)) { setNativeMouseFocused(this.origin, true, true); } @@ -110,7 +108,7 @@ export class TuiDataListComponent implements TuiDataListAccessor { } onFocus({target}: Event, top: boolean): void { - tuiAssertIsHTMLElement(target); + tuiAssertIsElement(target); const {elements} = this; diff --git a/projects/core/components/dropdown-box/dropdown-box.component.ts b/projects/core/components/dropdown-box/dropdown-box.component.ts index d5c8595c7f4e..3b38bcbec875 100644 --- a/projects/core/components/dropdown-box/dropdown-box.component.ts +++ b/projects/core/components/dropdown-box/dropdown-box.component.ts @@ -16,7 +16,7 @@ import { inRange, POLLING_TIME, TuiActiveZoneDirective, - tuiAssertIsHTMLElement, + tuiAssertIsElement, TuiDestroyService, TuiDropdownHostComponent, TuiOverscrollMode, @@ -380,7 +380,7 @@ export class TuiDropdownBoxComponent implements AfterViewChecked { const {ownerDocument} = host; const root = ownerDocument ? ownerDocument.body : host; - tuiAssertIsHTMLElement(host); + tuiAssertIsElement(host); let focusable = getClosestFocusable(host, previous, root); diff --git a/projects/core/components/hints-host/hints-host.style.less b/projects/core/components/hints-host/hints-host.style.less index 112f02a45db5..ded1f69cb0fa 100644 --- a/projects/core/components/hints-host/hints-host.style.less +++ b/projects/core/components/hints-host/hints-host.style.less @@ -2,7 +2,7 @@ :host { position: fixed; - bottom: 0; + top: 0; left: 0; width: 100%; height: 0; diff --git a/projects/core/components/hosted-dropdown/test/hosted-dropdown.component.spec.ts b/projects/core/components/hosted-dropdown/test/hosted-dropdown.component.spec.ts index 104f0cd4e6c8..4fe39d46b6ea 100644 --- a/projects/core/components/hosted-dropdown/test/hosted-dropdown.component.spec.ts +++ b/projects/core/components/hosted-dropdown/test/hosted-dropdown.component.spec.ts @@ -1,7 +1,7 @@ import {Component, DebugElement, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {tuiAssertIsHTMLElement} from '@taiga-ui/cdk'; +import {tuiAssertIsElement} from '@taiga-ui/cdk'; import {configureTestSuite, tuiDispatchOnActive, TuiPageObject} from '@taiga-ui/testing'; import {TuiTextfieldControllerModule} from '../../../directives'; @@ -134,11 +134,7 @@ describe('TuiHostedDropdown', () => { pageObject = new TuiPageObject(fixture); fixture.detectChanges(); - const element = document.querySelector('#native-button'); - - tuiAssertIsHTMLElement(element); - - nativeButton = element; + nativeButton = document.querySelector('#native-button') as HTMLElement; }); describe('Buttons', () => { @@ -152,7 +148,7 @@ describe('TuiHostedDropdown', () => { it('Clicking on another button does not open the dropdown', () => { const element = testComponent.tuiButton.nativeFocusableElement; - tuiAssertIsHTMLElement(element); + tuiAssertIsElement(element); element.click(); fixture.detectChanges(); @@ -238,7 +234,7 @@ describe('TuiHostedDropdown', () => { it('Clicking on the host does not open the dropdown', () => { const element = testComponent.tuiTextfield.nativeFocusableElement; - tuiAssertIsHTMLElement(element); + tuiAssertIsElement(element); element.click(); fixture.detectChanges(); @@ -292,7 +288,7 @@ describe('TuiHostedDropdown', () => { it('Clicking on the first focused element does not open the dropdown', () => { const element = testComponent.tuiButton.nativeFocusableElement; - tuiAssertIsHTMLElement(element); + tuiAssertIsElement(element); element.click(); fixture.detectChanges(); @@ -303,7 +299,7 @@ describe('TuiHostedDropdown', () => { it('An element with tuiHostedDropdownHost is used as a host, clicking on it opens a dropdown', () => { const element = testComponent.target.nativeFocusableElement; - tuiAssertIsHTMLElement(element); + tuiAssertIsElement(element); element.click(); fixture.detectChanges(); diff --git a/projects/core/constants/described-by.ts b/projects/core/constants/described-by.ts new file mode 100644 index 000000000000..7aef6c14ee2f --- /dev/null +++ b/projects/core/constants/described-by.ts @@ -0,0 +1 @@ +export const DESCRIBED_BY = '_described-by'; diff --git a/projects/core/constants/index.ts b/projects/core/constants/index.ts index 364bccd0d98a..2cd7f50bcb18 100644 --- a/projects/core/constants/index.ts +++ b/projects/core/constants/index.ts @@ -2,6 +2,7 @@ export * from './absolute-box-sizes'; export * from './decimal-symbols'; export * from './default-icons-path'; export * from './default-marker-handler'; +export * from './described-by'; export * from './editing-keys'; export * from './events'; export * from './mask-caret-trap'; diff --git a/projects/core/directives/described-by/described-by.directive.ts b/projects/core/directives/described-by/described-by.directive.ts index 6af85948fd4d..62a880e5e59c 100644 --- a/projects/core/directives/described-by/described-by.directive.ts +++ b/projects/core/directives/described-by/described-by.directive.ts @@ -1,5 +1,6 @@ import {Directive, HostBinding, Inject, Input} from '@angular/core'; import {tuiDefaultProp} from '@taiga-ui/cdk'; +import {DESCRIBED_BY} from '@taiga-ui/core/constants'; import {TuiHintService} from '@taiga-ui/core/services'; import {Observable} from 'rxjs'; @@ -8,8 +9,6 @@ import { TUI_DESCRIBED_BY_SHOW, } from './described-by.providers'; -export const DESCRIBED_BY = '_described-by'; - /** * A directive linking focusable elements and hints for accessibility */ diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts index 03e2dd449a21..c618778b3d44 100644 --- a/projects/core/directives/hint/hint.directive.ts +++ b/projects/core/directives/hint/hint.directive.ts @@ -18,7 +18,7 @@ import { tuiRequiredSetter, } from '@taiga-ui/cdk'; import {AbstractTuiHint} from '@taiga-ui/core/abstract'; -import {DESCRIBED_BY} from '@taiga-ui/core/directives/described-by'; +import {DESCRIBED_BY} from '@taiga-ui/core/constants'; import {TuiHintService} from '@taiga-ui/core/services'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {combineLatest, of, Subject} from 'rxjs'; @@ -38,7 +38,12 @@ export const HINT_HOVERED_CLASS = '_hint_hovered'; @Directive({ selector: '[tuiHint]:not(ng-container)', - providers: [TuiObscuredService, TuiParentsScrollService, TuiDestroyService], + providers: [ + TuiObscuredService, + TuiParentsScrollService, + TuiDestroyService, + TuiHoveredService, + ], }) export class TuiHintDirective extends AbstractTuiHint implements OnDestroy { @Input() @@ -90,10 +95,7 @@ export class TuiHintDirective extends AbstractTuiHint implements OnDestroy { super(elementRef, hintService, activeZone, options); // @bad TODO: Use private provider - combineLatest( - hoveredService.createHovered$(elementRef.nativeElement), - this.componentHovered$.pipe(startWith(false)), - ) + combineLatest(hoveredService, this.componentHovered$.pipe(startWith(false))) .pipe( map( ([directiveHovered, componentHovered]) => diff --git a/projects/core/directives/hint/test/hint.directive.spec.ts b/projects/core/directives/hint/test/hint.directive.spec.ts index 1ac294547f4e..7cbc70b4fcfe 100644 --- a/projects/core/directives/hint/test/hint.directive.spec.ts +++ b/projects/core/directives/hint/test/hint.directive.spec.ts @@ -7,7 +7,7 @@ import { tick, } from '@angular/core/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {tuiAssertIsHTMLElement} from '@taiga-ui/cdk'; +import {tuiAssertIsElement} from '@taiga-ui/cdk'; import {TuiRootModule} from '@taiga-ui/core'; import {configureTestSuite} from '@taiga-ui/testing'; @@ -95,7 +95,7 @@ describe('Hint', () => { }); it('is hidden after pointer left host with 200ms delay', fakeAsync(async () => { - getHost().dispatchEvent(new Event('mouseleave')); + getHost().dispatchEvent(new Event('mouseout')); fixture.detectChanges(); tick(200); fixture.detectChanges(); @@ -133,10 +133,10 @@ describe('Hint', () => { } }); - function getHost(): HTMLElement { + function getHost(): Element { const element = document.querySelector('#hint-host'); - tuiAssertIsHTMLElement(element); + tuiAssertIsElement(element); return element; } diff --git a/projects/core/directives/pointer-hint/pointer-hint.directive.ts b/projects/core/directives/pointer-hint/pointer-hint.directive.ts index 68642ef73688..a73282239b92 100644 --- a/projects/core/directives/pointer-hint/pointer-hint.directive.ts +++ b/projects/core/directives/pointer-hint/pointer-hint.directive.ts @@ -23,7 +23,7 @@ import {TUI_POINTER_HINT_OPTIONS, TuiPointerHintOptions} from './pointer-hint-op @Directive({ selector: '[tuiPointerHint]:not(ng-container)', - providers: [TuiDestroyService], + providers: [TuiDestroyService, TuiHoveredService], }) export class TuiPointerHintDirective extends AbstractTuiHint { private currentMouseRect = this.mousePositionToClientRect(); @@ -65,7 +65,7 @@ export class TuiPointerHintDirective extends AbstractTuiHint { ) { super(elementRef, hintService, null, options); - const hint$ = hoveredService.createHovered$(this.elementRef.nativeElement).pipe( + const hint$ = hoveredService.pipe( filter(() => !!this.content), startWith(false), distinctUntilChanged(), diff --git a/projects/core/interfaces/hint.ts b/projects/core/interfaces/hint.ts index 9e2996e729f0..0aa9deb0a4a5 100644 --- a/projects/core/interfaces/hint.ts +++ b/projects/core/interfaces/hint.ts @@ -1,8 +1,9 @@ import {TuiActiveZoneDirective} from '@taiga-ui/cdk'; -import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; +import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; export interface TuiHint { readonly id: string | null; readonly component: PolymorpheusComponent; + readonly content: PolymorpheusContent; readonly activeZone: TuiActiveZoneDirective | null; } diff --git a/projects/kit/abstract/slider/slider.ts b/projects/kit/abstract/slider/slider.ts index 5a937dd2ec6a..86e2e7edec43 100644 --- a/projects/kit/abstract/slider/slider.ts +++ b/projects/kit/abstract/slider/slider.ts @@ -15,7 +15,7 @@ import { quantize, round, setNativeFocused, - tuiAssertIsHTMLElement, + tuiAssertIsElement, tuiDefaultProp, TuiEventWith, TuiNativeFocusableElement, @@ -159,7 +159,7 @@ export abstract class AbstractTuiSlider this.pointerDown$ .pipe( map((event: MouseEvent | TouchEvent) => { - tuiAssertIsHTMLElement(event.currentTarget); + tuiAssertIsElement(event.currentTarget); const rect = event.currentTarget.getBoundingClientRect(); const clientX = diff --git a/projects/kit/components/multi-select/test/multi-select.component.spec.ts b/projects/kit/components/multi-select/test/multi-select.component.spec.ts index 1aa4119cc91a..d310265a7a6c 100644 --- a/projects/kit/components/multi-select/test/multi-select.component.spec.ts +++ b/projects/kit/components/multi-select/test/multi-select.component.spec.ts @@ -2,7 +2,6 @@ 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 {tuiAssertIsHTMLElement} from '@taiga-ui/cdk'; import { TuiDataListModule, TuiHintControllerModule, @@ -202,8 +201,8 @@ describe('MultiSelect', () => { it('Click to remove the selected item', () => { inputPO.sendKeydown('ArrowDown'); inputPO.sendKeydown('ArrowDown'); - tuiAssertIsHTMLElement(document.activeElement); - document.activeElement.click(); + + (document.activeElement as HTMLElement).click(); expect(testComponent.control.value).toEqual([]); }); @@ -211,9 +210,9 @@ describe('MultiSelect', () => { it('Click to select an unselected item', () => { inputPO.sendKeydown('ArrowDown'); inputPO.sendKeydown('ArrowDown'); - tuiAssertIsHTMLElement(document.activeElement); - document.activeElement.click(); - document.activeElement.click(); + + (document.activeElement as HTMLElement).click(); + (document.activeElement as HTMLElement).click(); expect(testComponent.control.value).toEqual([items[0]]); }); diff --git a/projects/kit/components/stepper/stepper.component.ts b/projects/kit/components/stepper/stepper.component.ts index eaeea7325d77..3ee83dac5202 100644 --- a/projects/kit/components/stepper/stepper.component.ts +++ b/projects/kit/components/stepper/stepper.component.ts @@ -15,7 +15,7 @@ import { EMPTY_QUERY, getOriginalArrayFromQueryList, itemsQueryListObservable, - tuiAssertIsHTMLElement, + tuiAssertIsElement, tuiDefaultProp, tuiMoveFocus, tuiPure, @@ -115,11 +115,12 @@ export class TuiStepperComponent { } private moveFocus(current: EventTarget, step: number): void { - tuiAssertIsHTMLElement(current); + tuiAssertIsElement(current); const stepElements = this.getNativeElements(this.steps); + const index = stepElements.findIndex(item => item === current); - tuiMoveFocus(stepElements.indexOf(current), stepElements, step); + tuiMoveFocus(index, stepElements, step); } private scrollIntoView(targetStepIndex: number): void { 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 241f37dc2034..86ef585a2b2c 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 @@ -20,7 +20,7 @@ import { setNativeFocused, toInt, TuiActiveZoneDirective, - tuiAssertIsHTMLElement, + tuiAssertIsElement, TuiContextWithImplicit, tuiDefaultProp, tuiIsNativeFocused, @@ -152,7 +152,7 @@ export class TuiTabsWithMoreComponent implements AfterViewInit { } onArrowRight(event: Event): void { - tuiAssertIsHTMLElement(event.target); + tuiAssertIsElement(event.target); if (tuiIsNativeFocused(event.target)) { this.focusMore(); diff --git a/projects/kit/directives/highlight/test/highlight.directive.spec.ts b/projects/kit/directives/highlight/test/highlight.directive.spec.ts index 12ef905241b9..f7ba53721380 100644 --- a/projects/kit/directives/highlight/test/highlight.directive.spec.ts +++ b/projects/kit/directives/highlight/test/highlight.directive.spec.ts @@ -1,6 +1,5 @@ import {Component} from '@angular/core'; import {TestBed} from '@angular/core/testing'; -import {tuiAssertIsHTMLElement} from '@taiga-ui/cdk'; import {configureTestSuite} from '@taiga-ui/testing'; import {TuiHighlightModule} from '../highlight.module'; @@ -45,25 +44,19 @@ describe('TuiHighlight directive', () => { }); it('Highlight is shown', () => { - const element = document.querySelector('#ica')?.firstElementChild; - - tuiAssertIsHTMLElement(element); + const element = document.querySelector('#ica')?.firstElementChild as HTMLElement; expect(element.style.display).toBe('block'); }); it('Highlight is not shown', () => { - const element = document.querySelector('#dong')?.firstElementChild; - - tuiAssertIsHTMLElement(element); + const element = document.querySelector('#dong')?.firstElementChild as HTMLElement; expect(element.style.display).toBe('none'); }); it('Highlight color is yellow', () => { - const element = document.querySelector('#aaa')?.firstElementChild; - - tuiAssertIsHTMLElement(element); + const element = document.querySelector('#aaa')?.firstElementChild as HTMLElement; expect(element.style.background).toBe('yellow'); }); diff --git a/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts b/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts index 399bd7ea1486..c61811d7c9a0 100644 --- a/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts +++ b/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts @@ -8,7 +8,7 @@ import { } from '@angular/core/testing'; import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {tuiAssertIsHTMLElement} from '@taiga-ui/cdk'; +import {tuiAssertIsElement} from '@taiga-ui/cdk'; import {TuiHintModule, TuiRootModule} from '@taiga-ui/core'; import {TuiInputModule} from '@taiga-ui/kit/components'; import {TuiFieldErrorPipeModule} from '@taiga-ui/kit/pipes'; @@ -106,10 +106,10 @@ describe('TuiFieldErrorContentPipe', () => { discardPeriodicTasks(); } - function getHost(): HTMLElement { + function getHost(): Element { const element = document.querySelector('#hint-host'); - tuiAssertIsHTMLElement(element); + tuiAssertIsElement(element); return element; }