Some stuff (#2102)

* chore: some stuff

* chore: fix tests

* chore: fix tests

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;
     }

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<string> implements On
             return;
         }
 
-        tuiAssertIsHTMLElement(suitableNode);
+        tuiAssertIsElement(suitableNode);
 
         const element = suitableNode.closest(selector);
 

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');
 }

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<boolean>();
-
-    @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<boolean>,
+    ) {}
 }

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<boolean> {
+    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<Element>,
+        @Inject(NgZone) private readonly ngZone: NgZone,
+    ) {
+        super(subscriber => this.stream$.subscribe(subscriber));
+    }
+}

projects/cdk/directives/hovered/index.ts

@@ -1,2 +1,3 @@
 export * from './hovered.directive';
 export * from './hovered.module';
+export * from './hovered.service';

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';

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;
         }
     }

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);

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<T> implements TuiDataListAccessor<T> {
     // 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<T> implements TuiDataListAccessor<T> {
     }
 
     onFocus({target}: Event, top: boolean): void {
-        tuiAssertIsHTMLElement(target);
+        tuiAssertIsElement(target);
 
         const {elements} = this;
 

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);
 

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;

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();

projects/core/constants/described-by.ts

@@ -0,0 +1 @@
+export const DESCRIBED_BY = '_described-by';

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';

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
  */