@taiga-ui/core 3.18.0 → 3.19.0-dev.main-9e6bc23

package/fesm2015/taiga-ui-core-directives-hint.js

@@ -1,25 +1,29 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Optional, SkipSelf, forwardRef, Directive, Inject, Input, ElementRef, HostListener, Component, ChangeDetectionStrategy, Self, HostBinding, INJECTOR, NgZone, NgModule } from '@angular/core';
+import { InjectionToken, Optional, SkipSelf, forwardRef, Directive, Inject, Input, ElementRef, INJECTOR, HostListener, Component, ChangeDetectionStrategy, Self, HostBinding, NgZone, NgModule } from '@angular/core';
 import * as i3 from '@taiga-ui/cdk';
-import { AbstractTuiController, tuiDefaultProp, TuiHoveredService, EMPTY_CLIENT_RECT, tuiPointToClientRect, tuiPx, tuiClamp, TuiDestroyService, tuiPure, TuiActiveZoneDirective, tuiTypedFromEvent, tuiZoneOptimized, tuiIsNativeFocused } from '@taiga-ui/cdk';
+import { AbstractTuiController, tuiDefaultProp, TuiActiveZoneDirective, TuiHoveredService, EMPTY_CLIENT_RECT, tuiPointToClientRect, tuiPx, tuiClamp, TuiDestroyService, tuiPure, tuiTypedFromEvent, tuiZoneOptimized, tuiIsNativeFocused } from '@taiga-ui/cdk';
 import * as i1$1 from '@taiga-ui/core/abstract';
-import { TuiDriver, tuiAsDriver, tuiAsRectAccessor, TuiRectAccessor, tuiAsVehicle, AbstractTuiDriverDirective, tuiAsPositionAccessor } from '@taiga-ui/core/abstract';
+import { tuiAsRectAccessor, tuiAsVehicle, TuiDriver, tuiAsDriver, TuiRectAccessor, tuiPositionAccessorFor, tuiRectAccessorFor, AbstractTuiDriverDirective, TuiVehicle, TuiPositionAccessor, tuiFallbackRectAccessor, tuiAsPositionAccessor } from '@taiga-ui/core/abstract';
 import { tuiFadeIn } from '@taiga-ui/core/animations';
 import * as i5 from '@taiga-ui/core/directives/mode';
 import { TuiModeDirective } from '@taiga-ui/core/directives/mode';
-import * as i2$1 from '@taiga-ui/core/services';
-import { TuiPositionService, TuiHintService } from '@taiga-ui/core/services';
+import * as i2 from '@taiga-ui/core/services';
+import { TuiHintService, TuiPositionService } from '@taiga-ui/core/services';
 import { TUI_ANIMATION_OPTIONS, TUI_VIEWPORT } from '@taiga-ui/core/tokens';
 import * as i1 from '@tinkoff/ng-polymorpheus';
-import { POLYMORPHEUS_CONTEXT, PolymorpheusComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
-import { switchMap, delay, takeUntil, repeat, map, debounce, startWith, distinctUntilChanged, skip } from 'rxjs/operators';
-import * as i2 from 'rxjs';
-import { Subject, merge, of, timer } from 'rxjs';
+import { PolymorpheusComponent, POLYMORPHEUS_CONTEXT, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import { switchMap, delay, takeUntil, repeat, filter, map, debounce, startWith, distinctUntilChanged, skip } from 'rxjs/operators';
 import { tuiOverrideOptions } from '@taiga-ui/core/utils';
+import * as i2$1 from 'rxjs';
+import { Subject, merge, of, timer } from 'rxjs';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { TUI_HINT_DIRECTIONS } from '@taiga-ui/core/constants';
 
+const TUI_HINT_COMPONENT = new InjectionToken(`[TUI_HINT_COMPONENT] A component to display a hint`, {
+    factory: () => TuiHintComponent,
+});
+
 /** Default values for hint options */
 const TUI_HINT_DEFAULT_OPTIONS = {
     direction: 'bottom-left',
@@ -51,8 +55,8 @@ class TuiHintOptionsDirective extends AbstractTuiController {
         this.icon = this.options.icon;
     }
 }
-TuiHintOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintOptionsDirective, deps: [{ token: TUI_HINT_OPTIONS, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-TuiHintOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: { content: ["tuiHintContent", "content"], direction: ["tuiHintDirection", "direction"], appearance: ["tuiHintAppearance", "appearance"], showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, providers: [
+TuiHintOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintOptionsDirective, deps: [{ token: TUI_HINT_OPTIONS, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: { content: ["tuiHintContent", "content"], direction: ["tuiHintDirection", "direction"], appearance: ["tuiHintAppearance", "appearance"], showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, providers: [
         {
             provide: TUI_HINT_OPTIONS,
             useExisting: forwardRef(() => TuiHintOptionsDirective),
@@ -73,7 +77,7 @@ __decorate([
 __decorate([
     tuiDefaultProp()
 ], TuiHintOptionsDirective.prototype, "hideDelay", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintOptionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintOptionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHintContent]',
@@ -106,6 +110,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['tuiHintHideDelay']
             }] } });
 
+class TuiHintDirective {
+    constructor(elementRef, component, hintService, options, activeZone) {
+        this.elementRef = elementRef;
+        this.component = component;
+        this.hintService = hintService;
+        this.options = options;
+        this.activeZone = activeZone;
+        this.content = '';
+        this.tuiHintAppearance = null;
+        this.type = 'hint';
+    }
+    get appearance() {
+        var _a;
+        return (_a = this.tuiHintAppearance) !== null && _a !== void 0 ? _a : this.options.appearance;
+    }
+    ngOnChanges() {
+        if (!this.content) {
+            this.toggle(false);
+        }
+    }
+    ngOnDestroy() {
+        this.toggle(false);
+    }
+    getClientRect() {
+        return this.elementRef.nativeElement.getBoundingClientRect();
+    }
+    toggle(show) {
+        if (show && this.content) {
+            this.hintService.add(this);
+        }
+        else {
+            this.hintService.remove(this);
+        }
+    }
+}
+TuiHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintDirective, deps: [{ token: ElementRef }, { token: PolymorpheusComponent }, { token: TuiHintService }, { token: TUI_HINT_OPTIONS }, { token: TuiActiveZoneDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: { content: ["tuiHint", "content"], context: ["tuiHintContext", "context"], tuiHintAppearance: "tuiHintAppearance" }, providers: [
+        tuiAsRectAccessor(TuiHintDirective),
+        tuiAsVehicle(TuiHintDirective),
+        {
+            provide: PolymorpheusComponent,
+            deps: [TUI_HINT_COMPONENT, INJECTOR],
+            useClass: PolymorpheusComponent,
+        },
+    ], usesOnChanges: true, ngImport: i0 });
+__decorate([
+    tuiDefaultProp()
+], TuiHintDirective.prototype, "content", void 0);
+__decorate([
+    tuiDefaultProp()
+], TuiHintDirective.prototype, "tuiHintAppearance", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint]:not(ng-container)',
+                    providers: [
+                        tuiAsRectAccessor(TuiHintDirective),
+                        tuiAsVehicle(TuiHintDirective),
+                        {
+                            provide: PolymorpheusComponent,
+                            deps: [TUI_HINT_COMPONENT, INJECTOR],
+                            useClass: PolymorpheusComponent,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i1.PolymorpheusComponent, decorators: [{
+                    type: Inject,
+                    args: [PolymorpheusComponent]
+                }] }, { type: i2.TuiHintService, decorators: [{
+                    type: Inject,
+                    args: [TuiHintService]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_HINT_OPTIONS]
+                }] }, { type: i3.TuiActiveZoneDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TuiActiveZoneDirective]
+                }] }]; }, propDecorators: { content: [{
+                type: Input,
+                args: ['tuiHint']
+            }], context: [{
+                type: Input,
+                args: ['tuiHintContext']
+            }], tuiHintAppearance: [{
+                type: Input
+            }] } });
+
 class TuiHintHoverDirective extends TuiDriver {
     constructor(hovered$, options, elementRef) {
         super(subscriber => this.stream$.subscribe(subscriber));
@@ -113,30 +209,32 @@ class TuiHintHoverDirective extends TuiDriver {
         this.options = options;
         this.elementRef = elementRef;
         this.toggle$ = new Subject();
-        this.stream$ = merge(this.toggle$.pipe(switchMap(visible => of(visible).pipe(delay(visible ? 0 : this.hideDelay))), takeUntil(this.hovered$), repeat()), this.hovered$.pipe(switchMap(visible => of(visible).pipe(delay(visible ? this.showDelay : this.hideDelay))), takeUntil(this.toggle$), repeat()));
+        this.stream$ = merge(this.toggle$.pipe(switchMap(visible => of(visible).pipe(delay(visible ? 0 : this.hideDelay))), takeUntil(this.hovered$), repeat()), this.hovered$.pipe(switchMap(visible => of(visible).pipe(delay(visible ? this.showDelay : this.hideDelay))), takeUntil(this.toggle$), repeat())).pipe(filter(() => this.enabled));
         this.showDelay = this.options.showDelay;
         this.hideDelay = this.options.hideDelay;
+        this.type = 'hint';
+        this.enabled = true;
     }
     toggle(visible) {
         this.toggle$.next(visible);
     }
 }
-TuiHintHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintHoverDirective, deps: [{ token: TuiHoveredService }, { token: TUI_HINT_OPTIONS }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TuiHintHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: { showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, providers: [tuiAsDriver(TuiHintHoverDirective), TuiHoveredService], exportAs: ["tuiHintHover"], usesInheritance: true, ngImport: i0 });
+TuiHintHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintHoverDirective, deps: [{ token: TuiHoveredService }, { token: TUI_HINT_OPTIONS }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: { showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, providers: [tuiAsDriver(TuiHintHoverDirective), TuiHoveredService], exportAs: ["tuiHintHover"], usesInheritance: true, ngImport: i0 });
 __decorate([
     tuiDefaultProp()
 ], TuiHintHoverDirective.prototype, "showDelay", void 0);
 __decorate([
     tuiDefaultProp()
 ], TuiHintHoverDirective.prototype, "hideDelay", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintHoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintHoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint]:not(ng-container)',
                     exportAs: 'tuiHintHover',
                     providers: [tuiAsDriver(TuiHintHoverDirective), TuiHoveredService],
                 }]
-        }], ctorParameters: function () { return [{ type: i2.Observable, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.Observable, decorators: [{
                     type: Inject,
                     args: [TuiHoveredService]
                 }] }, { type: undefined, decorators: [{
@@ -165,12 +263,12 @@ class TuiHintPointerDirective extends TuiHintHoverDirective {
         return this.currentRect;
     }
 }
-TuiHintPointerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintPointerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TuiHintPointerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintPointerDirective, selector: "[tuiHint][tuiHintPointer]", host: { listeners: { "mousemove.silent": "onMove($event)" } }, providers: [
+TuiHintPointerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintPointerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiHintPointerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintPointerDirective, selector: "[tuiHint][tuiHintPointer]", host: { listeners: { "mousemove.silent": "onMove($event)" } }, providers: [
         tuiAsRectAccessor(TuiHintPointerDirective),
         tuiAsDriver(TuiHintPointerDirective),
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintPointerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintPointerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintPointer]',
@@ -228,8 +326,14 @@ class TuiHintComponent {
         style.setProperty('--left', tuiPx(tuiClamp(beakLeft, 0.5, width - 1)));
     }
 }
-TuiHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintComponent, deps: [{ token: TuiHoveredService }, { token: TuiPositionService }, { token: TuiDestroyService, self: true }, { token: TuiRectAccessor }, { token: ElementRef }, { token: TUI_ANIMATION_OPTIONS }, { token: POLYMORPHEUS_CONTEXT }, { token: TuiHintHoverDirective }, { token: TuiHintPointerDirective, optional: true }, { token: TuiModeDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TuiHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintComponent, selector: "tui-hint", host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "@tuiFadeIn": "this.animation", "attr.data-appearance": "this.appearance", "class._untouchable": "this.untouchable" } }, providers: [TuiDestroyService, TuiPositionService, TuiHoveredService], ngImport: i0, template: `
+TuiHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintComponent, deps: [{ token: TuiHoveredService }, { token: TuiPositionService }, { token: TuiDestroyService, self: true }, { token: TuiRectAccessor }, { token: ElementRef }, { token: TUI_ANIMATION_OPTIONS }, { token: POLYMORPHEUS_CONTEXT }, { token: TuiHintHoverDirective }, { token: TuiHintPointerDirective, optional: true }, { token: TuiModeDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TuiHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintComponent, selector: "tui-hint", host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "@tuiFadeIn": "this.animation", "attr.data-appearance": "this.appearance", "class._untouchable": "this.untouchable" } }, providers: [
+        TuiDestroyService,
+        TuiPositionService,
+        TuiHoveredService,
+        tuiPositionAccessorFor('hint'),
+        tuiRectAccessorFor('hint', TuiHintDirective),
+    ], ngImport: i0, template: `
         <ng-container *polymorpheusOutlet="content as text; context: context">
             {{ text }}
         </ng-container>
@@ -237,7 +341,7 @@ TuiHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
 __decorate([
     tuiPure
 ], TuiHintComponent.prototype, "update", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-hint',
@@ -248,16 +352,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     `,
                     styleUrls: ['./hint.style.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [TuiDestroyService, TuiPositionService, TuiHoveredService],
+                    providers: [
+                        TuiDestroyService,
+                        TuiPositionService,
+                        TuiHoveredService,
+                        tuiPositionAccessorFor('hint'),
+                        tuiRectAccessorFor('hint', TuiHintDirective),
+                    ],
                     animations: [tuiFadeIn],
                 }]
-        }], ctorParameters: function () { return [{ type: i2.Observable, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.Observable, decorators: [{
                     type: Inject,
                     args: [TuiHoveredService]
-                }] }, { type: i2.Observable, decorators: [{
+                }] }, { type: i2$1.Observable, decorators: [{
                     type: Inject,
                     args: [TuiPositionService]
-                }] }, { type: i2.Observable, decorators: [{
+                }] }, { type: i2$1.Observable, decorators: [{
                     type: Self
                 }, {
                     type: Inject,
@@ -301,115 +411,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['document:click', ['$event.target']]
             }], update: [] } });
 
-const TUI_HINT_COMPONENT = new InjectionToken(`[TUI_HINT_COMPONENT] A component to display a hint`, {
-    factory: () => TuiHintComponent,
-});
-
-class TuiHintDirective {
-    constructor(elementRef, component, hintService, options, activeZone) {
-        this.elementRef = elementRef;
-        this.component = component;
-        this.hintService = hintService;
-        this.options = options;
-        this.activeZone = activeZone;
-        this.content = '';
-        this.tuiHintAppearance = null;
-    }
-    get appearance() {
-        var _a;
-        return (_a = this.tuiHintAppearance) !== null && _a !== void 0 ? _a : this.options.appearance;
-    }
-    ngOnChanges() {
-        if (!this.content) {
-            this.toggle(false);
-        }
-    }
-    ngOnDestroy() {
-        this.toggle(false);
-    }
-    getClientRect() {
-        return this.elementRef.nativeElement.getBoundingClientRect();
-    }
-    toggle(show) {
-        if (show && this.content) {
-            this.hintService.add(this);
-        }
-        else {
-            this.hintService.remove(this);
-        }
-    }
-}
-TuiHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintDirective, deps: [{ token: ElementRef }, { token: PolymorpheusComponent }, { token: TuiHintService }, { token: TUI_HINT_OPTIONS }, { token: TuiActiveZoneDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TuiHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: { content: ["tuiHint", "content"], context: ["tuiHintContext", "context"], tuiHintAppearance: "tuiHintAppearance" }, providers: [
-        tuiAsRectAccessor(TuiHintDirective),
-        tuiAsVehicle(TuiHintDirective),
-        {
-            provide: PolymorpheusComponent,
-            deps: [TUI_HINT_COMPONENT, INJECTOR],
-            useClass: PolymorpheusComponent,
-        },
-    ], usesOnChanges: true, ngImport: i0 });
-__decorate([
-    tuiDefaultProp()
-], TuiHintDirective.prototype, "content", void 0);
-__decorate([
-    tuiDefaultProp()
-], TuiHintDirective.prototype, "tuiHintAppearance", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tuiHint]:not(ng-container)',
-                    providers: [
-                        tuiAsRectAccessor(TuiHintDirective),
-                        tuiAsVehicle(TuiHintDirective),
-                        {
-                            provide: PolymorpheusComponent,
-                            deps: [TUI_HINT_COMPONENT, INJECTOR],
-                            useClass: PolymorpheusComponent,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i1.PolymorpheusComponent, decorators: [{
-                    type: Inject,
-                    args: [PolymorpheusComponent]
-                }] }, { type: i2$1.TuiHintService, decorators: [{
-                    type: Inject,
-                    args: [TuiHintService]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TUI_HINT_OPTIONS]
-                }] }, { type: i3.TuiActiveZoneDirective, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TuiActiveZoneDirective]
-                }] }]; }, propDecorators: { content: [{
-                type: Input,
-                args: ['tuiHint']
-            }], context: [{
-                type: Input,
-                args: ['tuiHintContext']
-            }], tuiHintAppearance: [{
-                type: Input
-            }] } });
-
 class TuiHintDescribeDirective extends TuiDriver {
-    constructor(ngZone, hover$, documentRef, elementRef) {
+    constructor(ngZone, documentRef, elementRef) {
         super(subscriber => this.stream$.subscribe(subscriber));
         this.ngZone = ngZone;
-        this.hover$ = hover$;
         this.documentRef = documentRef;
         this.elementRef = elementRef;
-        this.focus$ = tuiTypedFromEvent(this.documentRef, 'keydown', {
+        this.stream$ = tuiTypedFromEvent(this.documentRef, 'keydown', {
             capture: true,
         }).pipe(switchMap(() => this.focused
             ? of(false)
             : merge(tuiTypedFromEvent(this.documentRef, 'keyup'), tuiTypedFromEvent(this.element, 'blur')).pipe(map(() => this.focused))), debounce(visible => (visible ? timer(1000) : of(null))), startWith(false), distinctUntilChanged(), skip(1), tuiZoneOptimized(this.ngZone));
-        this.stream$ = merge(this.hover$, this.focus$);
         this.tuiHintDescribe = '';
+        this.type = 'hint';
     }
     get focused() {
         return tuiIsNativeFocused(this.element);
@@ -419,12 +433,12 @@ class TuiHintDescribeDirective extends TuiDriver {
             this.elementRef.nativeElement);
     }
 }
-TuiHintDescribeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintDescribeDirective, deps: [{ token: NgZone }, { token: TuiHintHoverDirective }, { token: DOCUMENT }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TuiHintDescribeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDescribeDirective, selector: "[tuiHintDescribe]", inputs: { tuiHintDescribe: "tuiHintDescribe" }, providers: [tuiAsDriver(TuiHintDescribeDirective)], usesInheritance: true, ngImport: i0 });
+TuiHintDescribeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintDescribeDirective, deps: [{ token: NgZone }, { token: DOCUMENT }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintDescribeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintDescribeDirective, selector: "[tuiHintDescribe]", inputs: { tuiHintDescribe: "tuiHintDescribe" }, providers: [tuiAsDriver(TuiHintDescribeDirective)], usesInheritance: true, ngImport: i0 });
 __decorate([
     tuiPure
 ], TuiHintDescribeDirective.prototype, "element", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintDescribeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintDescribeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHintDescribe]',
@@ -433,9 +447,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i0.NgZone, decorators: [{
                     type: Inject,
                     args: [NgZone]
-                }] }, { type: i2.Observable, decorators: [{
-                    type: Inject,
-                    args: [TuiHintHoverDirective]
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -447,26 +458,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], element: [] } });
 
 class TuiHintDriverDirective extends AbstractTuiDriverDirective {
+    // TODO: Figure out why this is necessary under nx test runner
+    constructor(destroy$, drivers, vehicles) {
+        super(destroy$, drivers, vehicles);
+        this.type = 'hint';
+    }
 }
-TuiHintDriverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TuiHintDriverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDriverDirective, selector: "[tuiHint]", providers: [TuiDestroyService], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintDriverDirective, decorators: [{
+TuiHintDriverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintDriverDirective, deps: [{ token: TuiDestroyService, self: true }, { token: TuiDriver }, { token: TuiVehicle }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintDriverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintDriverDirective, selector: "[tuiHint]", providers: [TuiDestroyService], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintDriverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint]',
                     providers: [TuiDestroyService],
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i2$1.Observable, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TuiDriver]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TuiVehicle]
+                }] }]; } });
 
 class TuiHintHostDirective extends TuiRectAccessor {
+    constructor() {
+        super(...arguments);
+        this.type = 'hint';
+    }
     getClientRect() {
         var _a;
         return ((_a = this.tuiHintHost) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || EMPTY_CLIENT_RECT;
     }
 }
-TuiHintHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintHostDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TuiHintHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintHostDirective, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: "tuiHintHost" }, providers: [tuiAsRectAccessor(TuiHintHostDirective)], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintHostDirective, decorators: [{
+TuiHintHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintHostDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiHintHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintHostDirective, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: "tuiHintHost" }, providers: [tuiAsRectAccessor(TuiHintHostDirective)], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintHostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintHost]',
@@ -477,24 +508,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class TuiHintManualDirective extends TuiDriver {
-    constructor() {
+    constructor(hover) {
         super(subscriber => this.stream$.subscribe(subscriber));
         this.stream$ = new Subject();
         this.tuiHintManual = false;
+        this.type = 'hint';
+        hover.enabled = false;
     }
     ngOnChanges() {
         this.stream$.next(this.tuiHintManual);
     }
 }
-TuiHintManualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintManualDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TuiHintManualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintManualDirective, selector: "[tuiHint][tuiHintManual]", inputs: { tuiHintManual: "tuiHintManual" }, providers: [tuiAsDriver(TuiHintManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintManualDirective, decorators: [{
+TuiHintManualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintManualDirective, deps: [{ token: TuiHintHoverDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintManualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintManualDirective, selector: "[tuiHint][tuiHintManual]", inputs: { tuiHintManual: "tuiHintManual" }, providers: [tuiAsDriver(TuiHintManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintManualDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintManual]',
                     providers: [tuiAsDriver(TuiHintManualDirective)],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tuiHintManual: [{
+        }], ctorParameters: function () { return [{ type: TuiHintHoverDirective, decorators: [{
+                    type: Inject,
+                    args: [TuiHintHoverDirective]
+                }] }]; }, propDecorators: { tuiHintManual: [{
                 type: Input
             }] } });
 
@@ -502,17 +538,21 @@ const OFFSET = 8;
 const ARROW_OFFSET = 22;
 const TOP = 0;
 const LEFT = 1;
-class TuiHintPositionDirective {
-    constructor(options, viewport, accessor) {
+class TuiHintPositionDirective extends TuiPositionAccessor {
+    constructor(options, viewport, directive, accessors) {
+        super();
         this.options = options;
         this.viewport = viewport;
-        this.accessor = accessor;
+        this.directive = directive;
+        this.accessors = accessors;
         this.points = TUI_HINT_DIRECTIONS.reduce((acc, direction) => (Object.assign(Object.assign({}, acc), { [direction]: [0, 0] })), {});
         this.direction = this.options.direction;
+        this.type = 'hint';
     }
     // eslint-disable-next-line max-statements
     getPosition({ width, height }) {
-        const hostRect = this.accessor.getClientRect();
+        var _a, _b;
+        const hostRect = (_b = (_a = this.accessor) === null || _a === void 0 ? void 0 : _a.getClientRect()) !== null && _b !== void 0 ? _b : EMPTY_CLIENT_RECT;
         const leftCenter = hostRect.left + hostRect.width / 2;
         const topCenter = hostRect.top + hostRect.height / 2;
         this.points['top-left'][TOP] = hostRect.top - height - OFFSET;
@@ -545,6 +585,9 @@ class TuiHintPositionDirective {
         const direction = TUI_HINT_DIRECTIONS.find(direction => this.checkPosition(this.points[direction], width, height));
         return this.points[direction || this.fallback];
     }
+    get accessor() {
+        return tuiFallbackRectAccessor('hint')(this.accessors, this.directive);
+    }
     get fallback() {
         return this.points.top[TOP] >
             this.viewport.getClientRect().bottom - this.points.bottom[TOP]
@@ -559,12 +602,15 @@ class TuiHintPositionDirective {
             left + width < viewport.right - OFFSET);
     }
 }
-TuiHintPositionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintPositionDirective, deps: [{ token: TUI_HINT_OPTIONS }, { token: TUI_VIEWPORT }, { token: TuiRectAccessor }], target: i0.ɵɵFactoryTarget.Directive });
-TuiHintPositionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: { direction: ["tuiHintDirection", "direction"] }, providers: [tuiAsPositionAccessor(TuiHintPositionDirective)], ngImport: i0 });
+TuiHintPositionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintPositionDirective, deps: [{ token: TUI_HINT_OPTIONS }, { token: TUI_VIEWPORT }, { token: TuiHintDirective }, { token: TuiRectAccessor }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintPositionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: { direction: ["tuiHintDirection", "direction"] }, providers: [tuiAsPositionAccessor(TuiHintPositionDirective)], usesInheritance: true, ngImport: i0 });
 __decorate([
     tuiDefaultProp()
 ], TuiHintPositionDirective.prototype, "direction", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintPositionDirective, decorators: [{
+__decorate([
+    tuiPure
+], TuiHintPositionDirective.prototype, "accessor", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintPositionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint]:not([tuiHintCustomPosition])',
@@ -577,17 +623,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Inject,
                     args: [TUI_VIEWPORT]
                 }] }, { type: i1$1.TuiRectAccessor, decorators: [{
+                    type: Inject,
+                    args: [TuiHintDirective]
+                }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TuiRectAccessor]
                 }] }]; }, propDecorators: { direction: [{
                 type: Input,
                 args: ['tuiHintDirection']
-            }] } });
+            }], accessor: [] } });
 
 class TuiHintModule {
 }
-TuiHintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiHintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintModule, declarations: [TuiHintComponent,
+TuiHintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiHintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintModule, declarations: [TuiHintComponent,
         TuiHintDirective,
         TuiHintDriverDirective,
         TuiHintHostDirective,
@@ -606,8 +655,8 @@ TuiHintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TuiHintDescribeDirective,
         TuiHintPositionDirective,
         TuiHintOptionsDirective] });
-TuiHintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintModule, imports: [[CommonModule, PolymorpheusModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHintModule, decorators: [{
+TuiHintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintModule, imports: [[CommonModule, PolymorpheusModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiHintModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PolymorpheusModule],