@taiga-ui/core 3.58.0 → 3.59.0-canary.10da730

package/fesm2020/taiga-ui-core-directives-hint.mjs

@@ -0,0 +1,740 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { Optional, SkipSelf, forwardRef, Directive, Inject, Input, ElementRef, INJECTOR, HostListener, Component, ChangeDetectionStrategy, Self, HostBinding, NgZone, TemplateRef, NgModule } from '@angular/core';
+import * as i3 from '@taiga-ui/cdk';
+import { tuiCreateTokenFromFactory, tuiCreateToken, AbstractTuiController, TuiActiveZoneDirective, TuiHoveredService, EMPTY_CLIENT_RECT, tuiPointToClientRect, tuiClamp, tuiPx, TuiDestroyService, tuiPure, tuiIfMap, tuiTypedFromEvent, tuiIsPresent, tuiZoneOptimized, tuiIsNativeFocused, TUI_PARENT_ANIMATION } from '@taiga-ui/cdk';
+import * as i3$1 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 from '@taiga-ui/core/services';
+import { TuiHintService, TuiPositionService, TuiVisualViewportService } from '@taiga-ui/core/services';
+import { TUI_ANIMATION_OPTIONS, TUI_VIEWPORT } from '@taiga-ui/core/tokens';
+import { tuiOverrideOptions, tuiIsObscured } from '@taiga-ui/core/utils';
+import * as i1 from '@tinkoff/ng-polymorpheus';
+import { PolymorpheusComponent, POLYMORPHEUS_CONTEXT, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import * as i2$1 from 'rxjs';
+import { Subject, merge, switchMap, of, delay, takeUntil, repeat, filter, map, tap, ReplaySubject, debounce, timer, startWith, distinctUntilChanged, skip, BehaviorSubject } from 'rxjs';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { TUI_HINT_DIRECTIONS } from '@taiga-ui/core/constants';
+
+/**
+ * A component to display a hint
+ */
+const TUI_HINT_COMPONENT = tuiCreateTokenFromFactory(() => TuiHintComponent);
+
+/** Default values for hint options */
+const TUI_HINT_DEFAULT_OPTIONS = {
+    direction: 'bottom-left',
+    showDelay: 500,
+    hideDelay: 200,
+    appearance: '',
+    icon: 'tuiIconHelpCircle',
+};
+/**
+ * Default parameters for hint directive
+ */
+const TUI_HINT_OPTIONS = tuiCreateToken(TUI_HINT_DEFAULT_OPTIONS);
+const tuiHintOptionsProvider = (override) => ({
+    provide: TUI_HINT_OPTIONS,
+    deps: [
+        [new Optional(), TuiHintOptionsDirective],
+        [new Optional(), new SkipSelf(), TUI_HINT_OPTIONS],
+    ],
+    useFactory: tuiOverrideOptions(override, TUI_HINT_DEFAULT_OPTIONS),
+});
+class TuiHintOptionsDirective extends AbstractTuiController {
+    constructor(options) {
+        super();
+        this.options = options;
+        this.direction = this.options.direction;
+        this.appearance = this.options.appearance;
+        this.showDelay = this.options.showDelay;
+        this.hideDelay = this.options.hideDelay;
+        this.icon = this.options.icon;
+    }
+}
+TuiHintOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintOptionsDirective, deps: [{ token: TUI_HINT_OPTIONS, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintOptionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHintContent]',
+                    providers: [
+                        {
+                            provide: TUI_HINT_OPTIONS,
+                            useExisting: forwardRef(() => TuiHintOptionsDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Inject,
+                    args: [TUI_HINT_OPTIONS]
+                }] }]; }, propDecorators: { content: [{
+                type: Input,
+                args: ['tuiHintContent']
+            }], direction: [{
+                type: Input,
+                args: ['tuiHintDirection']
+            }], appearance: [{
+                type: Input,
+                args: ['tuiHintAppearance']
+            }], showDelay: [{
+                type: Input,
+                args: ['tuiHintShowDelay']
+            }], hideDelay: [{
+                type: Input,
+                args: ['tuiHintHideDelay']
+            }] } });
+
+class TuiHintDirective {
+    constructor(el, component, hintService, options, activeZone) {
+        this.el = el;
+        this.component = component;
+        this.hintService = hintService;
+        this.options = options;
+        this.activeZone = activeZone;
+        this.tuiHintAppearance = null;
+        this.type = 'hint';
+    }
+    get appearance() {
+        return this.tuiHintAppearance ?? this.options.appearance;
+    }
+    ngOnChanges() {
+        if (!this.content) {
+            this.toggle(false);
+        }
+    }
+    ngOnDestroy() {
+        this.toggle(false);
+    }
+    getClientRect() {
+        return this.el.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: "15.2.10", 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: "14.0.0", version: "15.2.10", type: TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint]:not(ng-container):not(ng-template)',
+                    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
+            }] } });
+
+/* eslint-disable rxjs/no-unsafe-takeuntil */
+class TuiHintHoverDirective extends TuiDriver {
+    constructor(hovered$, options, el) {
+        super(subscriber => this.stream$.subscribe(subscriber));
+        this.hovered$ = hovered$;
+        this.options = options;
+        this.el = el;
+        this.visible = false;
+        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())).pipe(filter(() => this.enabled), map(value => value && !tuiIsObscured(this.el.nativeElement)), tap(visible => {
+            this.visible = visible;
+        }));
+        this.showDelay = this.options.showDelay;
+        this.hideDelay = this.options.hideDelay;
+        this.type = 'hint';
+        this.enabled = true;
+    }
+    toggle(visible = !this.visible) {
+        this.toggle$.next(visible);
+    }
+}
+TuiHintHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintHoverDirective, deps: [{ token: TuiHoveredService }, { token: TUI_HINT_OPTIONS }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: { showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, providers: [tuiAsDriver(TuiHintHoverDirective), TuiHoveredService], exportAs: ["tuiHintHover"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint]:not(ng-container):not(ng-template)',
+                    providers: [tuiAsDriver(TuiHintHoverDirective), TuiHoveredService],
+                    exportAs: 'tuiHintHover',
+                }]
+        }], ctorParameters: function () { return [{ type: i2$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TuiHoveredService]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_HINT_OPTIONS]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }]; }, propDecorators: { showDelay: [{
+                type: Input,
+                args: ['tuiHintShowDelay']
+            }], hideDelay: [{
+                type: Input,
+                args: ['tuiHintHideDelay']
+            }] } });
+
+class TuiHintPointerDirective extends TuiHintHoverDirective {
+    constructor() {
+        super(...arguments);
+        this.currentRect = EMPTY_CLIENT_RECT;
+    }
+    onMove({ clientX, clientY }) {
+        this.currentRect = tuiPointToClientRect(clientX, clientY);
+    }
+    getClientRect() {
+        return this.currentRect;
+    }
+}
+TuiHintPointerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintPointerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiHintPointerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: TuiHintPointerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint][tuiHintPointer]',
+                    providers: [
+                        tuiAsRectAccessor(TuiHintPointerDirective),
+                        tuiAsDriver(TuiHintPointerDirective),
+                    ],
+                }]
+        }], propDecorators: { onMove: [{
+                type: HostListener,
+                args: ['mousemove.silent', ['$event']]
+            }] } });
+
+const GAP = 4;
+class TuiHintComponent {
+    constructor(hovered$, position$, destroy$, animation, pointer, accessor, el, polymorpheus, hover, mode, visualViewportService, viewport) {
+        this.animation = animation;
+        this.pointer = pointer;
+        this.accessor = accessor;
+        this.el = el;
+        this.polymorpheus = polymorpheus;
+        this.hover = hover;
+        this.mode = mode;
+        this.visualViewportService = visualViewportService;
+        this.viewport = viewport;
+        this.appearance = this.polymorpheus.$implicit.appearance || this.mode?.mode;
+        position$
+            .pipe(map(point => this.visualViewportService.correct(point)), takeUntil(destroy$))
+            .subscribe(([top, left]) => {
+            this.update(top, left);
+        });
+        hovered$.pipe(takeUntil(destroy$)).subscribe(hover => this.hover.toggle(hover));
+    }
+    get content() {
+        return this.polymorpheus.$implicit.content;
+    }
+    get context() {
+        return this.polymorpheus.$implicit.context;
+    }
+    onClick(target) {
+        if ((!this.el.nativeElement.contains(target) &&
+            !this.hover.el.nativeElement.contains(target)) ||
+            tuiIsObscured(this.hover.el.nativeElement)) {
+            this.hover.toggle(false);
+        }
+    }
+    update(top, left) {
+        const { height, width } = this.el.nativeElement.getBoundingClientRect();
+        const { style } = this.el.nativeElement;
+        const rect = this.accessor.getClientRect();
+        const viewport = this.viewport.getClientRect();
+        if (rect === EMPTY_CLIENT_RECT) {
+            return;
+        }
+        const safeLeft = tuiClamp(left, GAP, viewport.width - width - GAP);
+        const [beakTop, beakLeft] = this.visualViewportService.correct([
+            rect.top + rect.height / 2 - top,
+            rect.left + rect.width / 2 - safeLeft,
+        ]);
+        style.top = tuiPx(top);
+        style.left = tuiPx(safeLeft);
+        style.setProperty('--top', tuiPx(tuiClamp(beakTop, 0.5, height - 1)));
+        style.setProperty('--left', tuiPx(tuiClamp(beakLeft, 0.5, width - 1)));
+    }
+}
+TuiHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintComponent, deps: [{ token: TuiHoveredService }, { token: TuiPositionService }, { token: TuiDestroyService, self: true }, { token: TUI_ANIMATION_OPTIONS }, { token: TuiHintPointerDirective, optional: true }, { token: TuiRectAccessor }, { token: ElementRef }, { token: POLYMORPHEUS_CONTEXT }, { token: TuiHintHoverDirective }, { token: TuiModeDirective, optional: true }, { token: TuiVisualViewportService }, { token: TUI_VIEWPORT }], target: i0.ɵɵFactoryTarget.Component });
+TuiHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintComponent, selector: "tui-hint", host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "@tuiFadeIn": "animation", "class._untouchable": "pointer", "attr.data-appearance": "this.appearance" } }, providers: [
+        TuiDestroyService,
+        TuiPositionService,
+        TuiHoveredService,
+        tuiPositionAccessorFor('hint'),
+        tuiRectAccessorFor('hint', TuiHintDirective),
+    ], ngImport: i0, template: `
+        <ng-content></ng-content>
+        <span
+            *polymorpheusOutlet="content as text; context: context"
+            [innerHTML]="text"
+        ></span>
+    `, isInline: true, styles: [":host{position:absolute;max-width:18rem;min-height:var(--tui-height-m);padding:.75rem 1rem;background:var(--tui-primary);border-radius:var(--tui-radius-l);color:var(--tui-primary-text);box-sizing:border-box;font:var(--tui-font-text-s);white-space:pre-line;word-wrap:break-word}:host:before{content:\"\";position:absolute;top:var(--top);left:var(--left);width:.5rem;height:.5rem;border-radius:.125rem;box-sizing:border-box;background:inherit;transform:translate(-50%,-50%) rotate(45deg)}:host[data-appearance=error]{background:var(--tui-error-fill)}:host[data-appearance=onDark]{background:var(--tui-elevation-02);color:var(--tui-text-01);filter:drop-shadow(0 0 .125rem rgba(0,0,0,.16)) drop-shadow(0 1.5rem 1rem rgba(0,0,0,.03)) drop-shadow(0 .75rem .75rem rgba(0,0,0,.04)) drop-shadow(0 .25rem .375rem rgba(0,0,0,.05))}:host:not([style*=\"top\"]){visibility:hidden}:host._untouchable{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    tuiPure
+], TuiHintComponent.prototype, "update", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-hint', template: `
+        <ng-content></ng-content>
+        <span
+            *polymorpheusOutlet="content as text; context: context"
+            [innerHTML]="text"
+        ></span>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        TuiDestroyService,
+                        TuiPositionService,
+                        TuiHoveredService,
+                        tuiPositionAccessorFor('hint'),
+                        tuiRectAccessorFor('hint', TuiHintDirective),
+                    ], animations: [tuiFadeIn], host: {
+                        '[@tuiFadeIn]': 'animation',
+                        '[class._untouchable]': 'pointer',
+                    }, styles: [":host{position:absolute;max-width:18rem;min-height:var(--tui-height-m);padding:.75rem 1rem;background:var(--tui-primary);border-radius:var(--tui-radius-l);color:var(--tui-primary-text);box-sizing:border-box;font:var(--tui-font-text-s);white-space:pre-line;word-wrap:break-word}:host:before{content:\"\";position:absolute;top:var(--top);left:var(--left);width:.5rem;height:.5rem;border-radius:.125rem;box-sizing:border-box;background:inherit;transform:translate(-50%,-50%) rotate(45deg)}:host[data-appearance=error]{background:var(--tui-error-fill)}:host[data-appearance=onDark]{background:var(--tui-elevation-02);color:var(--tui-text-01);filter:drop-shadow(0 0 .125rem rgba(0,0,0,.16)) drop-shadow(0 1.5rem 1rem rgba(0,0,0,.03)) drop-shadow(0 .75rem .75rem rgba(0,0,0,.04)) drop-shadow(0 .25rem .375rem rgba(0,0,0,.05))}:host:not([style*=\"top\"]){visibility:hidden}:host._untouchable{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TuiHoveredService]
+                }] }, { type: i2$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TuiPositionService]
+                }] }, { type: i2$1.Observable, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_ANIMATION_OPTIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TuiHintPointerDirective]
+                }] }, { type: i3$1.TuiRectAccessor, decorators: [{
+                    type: Inject,
+                    args: [TuiRectAccessor]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [POLYMORPHEUS_CONTEXT]
+                }] }, { type: TuiHintHoverDirective, decorators: [{
+                    type: Inject,
+                    args: [TuiHintHoverDirective]
+                }] }, { type: i5.TuiModeDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TuiModeDirective]
+                }] }, { type: i2.TuiVisualViewportService, decorators: [{
+                    type: Inject,
+                    args: [TuiVisualViewportService]
+                }] }, { type: i3$1.TuiRectAccessor, decorators: [{
+                    type: Inject,
+                    args: [TUI_VIEWPORT]
+                }] }]; }, propDecorators: { appearance: [{
+                type: HostBinding,
+                args: ['attr.data-appearance']
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }], update: [] } });
+
+class TuiHintDescribeDirective extends TuiDriver {
+    constructor(zone, doc, el) {
+        super(subscriber => this.stream$.subscribe(subscriber));
+        this.zone = zone;
+        this.doc = doc;
+        this.el = el;
+        this.id$ = new ReplaySubject(1);
+        this.stream$ = this.id$.pipe(tuiIfMap(() => tuiTypedFromEvent(this.doc, 'keydown', {
+            capture: true,
+        }), tuiIsPresent), switchMap(() => this.focused
+            ? of(false)
+            : merge(tuiTypedFromEvent(this.doc, 'keyup'), tuiTypedFromEvent(this.element, 'blur')).pipe(map(() => this.focused))), debounce(visible => (visible ? timer(1000) : of(null))), startWith(false), distinctUntilChanged(), skip(1), tuiZoneOptimized(this.zone));
+        this.tuiHintDescribe = '';
+        this.type = 'hint';
+    }
+    ngOnChanges() {
+        this.id$.next(this.tuiHintDescribe);
+    }
+    get focused() {
+        return tuiIsNativeFocused(this.element);
+    }
+    get element() {
+        return (this.doc.getElementById(this.tuiHintDescribe || '') || this.el.nativeElement);
+    }
+}
+TuiHintDescribeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintDescribeDirective, deps: [{ token: NgZone }, { token: DOCUMENT }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintDescribeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintDescribeDirective, selector: "[tuiHintDescribe]", inputs: { tuiHintDescribe: "tuiHintDescribe" }, providers: [tuiAsDriver(TuiHintDescribeDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+__decorate([
+    tuiPure
+], TuiHintDescribeDirective.prototype, "element", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintDescribeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHintDescribe]',
+                    providers: [tuiAsDriver(TuiHintDescribeDirective)],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone, decorators: [{
+                    type: Inject,
+                    args: [NgZone]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }]; }, propDecorators: { tuiHintDescribe: [{
+                type: Input
+            }], 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: "15.2.10", ngImport: i0, type: TuiHintDriverDirective, deps: [{ token: TuiDestroyService, self: true }, { token: TuiDriver }, { token: TuiVehicle }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintDriverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintDriverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", providers: [TuiDestroyService], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintDriverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint]:not(ng-container):not(ng-template)',
+                    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() {
+        return this.tuiHintHost?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
+    }
+}
+TuiHintHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintHostDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiHintHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintHostDirective, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: "tuiHintHost" }, providers: [tuiAsRectAccessor(TuiHintHostDirective)], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint][tuiHintHost]',
+                    providers: [tuiAsRectAccessor(TuiHintHostDirective)],
+                }]
+        }], propDecorators: { tuiHintHost: [{
+                type: Input
+            }] } });
+
+class TuiHintManualDirective extends TuiDriver {
+    constructor(hover) {
+        super(subscriber => this.stream$.subscribe(subscriber));
+        this.stream$ = new BehaviorSubject(false);
+        this.tuiHintManual = false;
+        this.type = 'hint';
+        hover.enabled = false;
+    }
+    ngOnChanges() {
+        this.stream$.next(this.tuiHintManual);
+    }
+}
+TuiHintManualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintManualDirective, deps: [{ token: TuiHintHoverDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintManualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintManualDirective, selector: "[tuiHint][tuiHintManual]", inputs: { tuiHintManual: "tuiHintManual" }, providers: [tuiAsDriver(TuiHintManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintManualDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint][tuiHintManual]',
+                    providers: [tuiAsDriver(TuiHintManualDirective)],
+                }]
+        }], ctorParameters: function () { return [{ type: TuiHintHoverDirective, decorators: [{
+                    type: Inject,
+                    args: [TuiHintHoverDirective]
+                }] }]; }, propDecorators: { tuiHintManual: [{
+                type: Input
+            }] } });
+
+const OFFSET = 8;
+const ARROW_OFFSET = 22;
+const TOP = 0;
+const LEFT = 1;
+class TuiHintPositionDirective extends TuiPositionAccessor {
+    constructor(options, viewport, directive, accessors) {
+        super();
+        this.options = options;
+        this.viewport = viewport;
+        this.directive = directive;
+        this.accessors = accessors;
+        this.points = TUI_HINT_DIRECTIONS.reduce((acc, direction) => ({ ...acc, [direction]: [0, 0] }), {});
+        this.direction = this.options.direction;
+        this.type = 'hint';
+    }
+    getPosition({ width, height }) {
+        const hostRect = this.accessor?.getClientRect() ?? 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;
+        this.points['top-left'][LEFT] = leftCenter - width + ARROW_OFFSET;
+        this.points.top[TOP] = this.points['top-left'][TOP];
+        this.points.top[LEFT] = leftCenter - width / 2;
+        this.points['top-right'][TOP] = this.points['top-left'][TOP];
+        this.points['top-right'][LEFT] = leftCenter - ARROW_OFFSET;
+        this.points['bottom-left'][TOP] = hostRect.bottom + OFFSET;
+        this.points['bottom-left'][LEFT] = this.points['top-left'][LEFT];
+        this.points.bottom[TOP] = this.points['bottom-left'][TOP];
+        this.points.bottom[LEFT] = this.points.top[LEFT];
+        this.points['bottom-right'][TOP] = this.points['bottom-left'][TOP];
+        this.points['bottom-right'][LEFT] = this.points['top-right'][LEFT];
+        this.points['left-top'][TOP] = topCenter - height + ARROW_OFFSET;
+        this.points['left-top'][LEFT] = hostRect.left - width - OFFSET;
+        this.points.left[TOP] = topCenter - height / 2;
+        this.points.left[LEFT] = this.points['left-top'][LEFT];
+        this.points['left-bottom'][TOP] = topCenter - ARROW_OFFSET;
+        this.points['left-bottom'][LEFT] = this.points['left-top'][LEFT];
+        this.points['right-top'][TOP] = this.points['left-top'][TOP];
+        this.points['right-top'][LEFT] = hostRect.right + OFFSET;
+        this.points.right[TOP] = this.points.left[TOP];
+        this.points.right[LEFT] = this.points['right-top'][LEFT];
+        this.points['right-bottom'][TOP] = this.points['left-bottom'][TOP];
+        this.points['right-bottom'][LEFT] = this.points['right-top'][LEFT];
+        if (this.checkPosition(this.points[this.direction], width, height)) {
+            return this.points[this.direction];
+        }
+        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]
+            ? 'top'
+            : 'bottom';
+    }
+    checkPosition([top, left], width, height) {
+        const viewport = this.viewport.getClientRect();
+        return (top > OFFSET &&
+            left > OFFSET &&
+            top + height < viewport.bottom - OFFSET &&
+            left + width < viewport.right - OFFSET);
+    }
+}
+TuiHintPositionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition]):not(ng-container):not(ng-template)", inputs: { direction: ["tuiHintDirection", "direction"] }, providers: [tuiAsPositionAccessor(TuiHintPositionDirective)], usesInheritance: true, ngImport: i0 });
+__decorate([
+    tuiPure
+], TuiHintPositionDirective.prototype, "accessor", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintPositionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHint]:not([tuiHintCustomPosition]):not(ng-container):not(ng-template)',
+                    providers: [tuiAsPositionAccessor(TuiHintPositionDirective)],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_HINT_OPTIONS]
+                }] }, { type: i3$1.TuiRectAccessor, decorators: [{
+                    type: Inject,
+                    args: [TUI_VIEWPORT]
+                }] }, { type: i3$1.TuiRectAccessor, decorators: [{
+                    type: Inject,
+                    args: [TuiHintDirective]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TuiRectAccessor]
+                }] }]; }, propDecorators: { direction: [{
+                type: Input,
+                args: ['tuiHintDirection']
+            }], accessor: [] } });
+
+class TuiHintUnstyledComponent {
+    constructor(context) {
+        this.context = context;
+    }
+}
+TuiHintUnstyledComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintUnstyledComponent, deps: [{ token: POLYMORPHEUS_CONTEXT }], target: i0.ɵɵFactoryTarget.Component });
+TuiHintUnstyledComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintUnstyledComponent, selector: "ng-component", host: { properties: { "@tuiParentAnimation": "" } }, ngImport: i0, template: `
+        <ng-container
+            *polymorpheusOutlet="context.$implicit.content; context: context"
+        ></ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [TUI_PARENT_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintUnstyledComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <ng-container
+            *polymorpheusOutlet="context.$implicit.content; context: context"
+        ></ng-container>
+    `,
+                    host: { '[@tuiParentAnimation]': '' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [TUI_PARENT_ANIMATION],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [POLYMORPHEUS_CONTEXT]
+                }] }]; } });
+class TuiHintUnstyledDirective {
+    constructor(templateRef, hint) {
+        hint.component = new PolymorpheusComponent(TuiHintUnstyledComponent);
+        hint.content = templateRef;
+    }
+}
+TuiHintUnstyledDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintUnstyledDirective, deps: [{ token: TemplateRef }, { token: TuiHintDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHintUnstyledDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiHintUnstyledDirective, selector: "ng-template[tuiHint]", providers: [
+        {
+            provide: POLYMORPHEUS_CONTEXT,
+            useValue: { $implicit: {} },
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintUnstyledDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[tuiHint]',
+                    providers: [
+                        {
+                            provide: POLYMORPHEUS_CONTEXT,
+                            useValue: { $implicit: {} },
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }, { type: TuiHintDirective, decorators: [{
+                    type: Inject,
+                    args: [TuiHintDirective]
+                }] }]; } });
+
+class TuiHintModule {
+}
+TuiHintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiHintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TuiHintModule, declarations: [TuiHintComponent,
+        TuiHintDirective,
+        TuiHintDriverDirective,
+        TuiHintHostDirective,
+        TuiHintHoverDirective,
+        TuiHintManualDirective,
+        TuiHintPointerDirective,
+        TuiHintDescribeDirective,
+        TuiHintPositionDirective,
+        TuiHintOptionsDirective,
+        TuiHintUnstyledComponent,
+        TuiHintUnstyledDirective], imports: [CommonModule, PolymorpheusModule], exports: [TuiHintComponent,
+        TuiHintDirective,
+        TuiHintDriverDirective,
+        TuiHintHostDirective,
+        TuiHintHoverDirective,
+        TuiHintManualDirective,
+        TuiHintPointerDirective,
+        TuiHintDescribeDirective,
+        TuiHintPositionDirective,
+        TuiHintOptionsDirective,
+        TuiHintUnstyledDirective] });
+TuiHintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintModule, imports: [CommonModule, PolymorpheusModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHintModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PolymorpheusModule],
+                    declarations: [
+                        TuiHintComponent,
+                        TuiHintDirective,
+                        TuiHintDriverDirective,
+                        TuiHintHostDirective,
+                        TuiHintHoverDirective,
+                        TuiHintManualDirective,
+                        TuiHintPointerDirective,
+                        TuiHintDescribeDirective,
+                        TuiHintPositionDirective,
+                        TuiHintOptionsDirective,
+                        TuiHintUnstyledComponent,
+                        TuiHintUnstyledDirective,
+                    ],
+                    exports: [
+                        TuiHintComponent,
+                        TuiHintDirective,
+                        TuiHintDriverDirective,
+                        TuiHintHostDirective,
+                        TuiHintHoverDirective,
+                        TuiHintManualDirective,
+                        TuiHintPointerDirective,
+                        TuiHintDescribeDirective,
+                        TuiHintPositionDirective,
+                        TuiHintOptionsDirective,
+                        TuiHintUnstyledDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TUI_HINT_COMPONENT, TUI_HINT_DEFAULT_OPTIONS, TUI_HINT_OPTIONS, TuiHintComponent, TuiHintDescribeDirective, TuiHintDirective, TuiHintDriverDirective, TuiHintHostDirective, TuiHintHoverDirective, TuiHintManualDirective, TuiHintModule, TuiHintOptionsDirective, TuiHintPointerDirective, TuiHintPositionDirective, TuiHintUnstyledComponent, TuiHintUnstyledDirective, tuiHintOptionsProvider };
+//# sourceMappingURL=taiga-ui-core-directives-hint.mjs.map