@taiga-ui/core 3.0.0-rc.5 → 3.0.1

package/bundles/taiga-ui-core-directives-hint.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/core/abstract'), require('@taiga-ui/core/animations'), require('@taiga-ui/core/directives/mode'), require('@taiga-ui/core/services'), require('@taiga-ui/core/tokens'), require('@tinkoff/ng-polymorpheus'), require('rxjs/operators'), require('rxjs'), require('@taiga-ui/core/constants'), require('@angular/common'), require('@ng-web-apis/common')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/core/directives/hint', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/core/abstract', '@taiga-ui/core/animations', '@taiga-ui/core/directives/mode', '@taiga-ui/core/services', '@taiga-ui/core/tokens', '@tinkoff/ng-polymorpheus', 'rxjs/operators', 'rxjs', '@taiga-ui/core/constants', '@angular/common', '@ng-web-apis/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].core = global["taiga-ui"].core || {}, global["taiga-ui"].core.directives = global["taiga-ui"].core.directives || {}, global["taiga-ui"].core.directives.hint = {}), global.ng.core, global.i3$1, global["taiga-ui"].core.abstract, global["taiga-ui"].core.animations, global["taiga-ui"].core.directives.mode, global["taiga-ui"].core.services, global["taiga-ui"].core.tokens, global.i1, global.rxjs.operators, global.rxjs, global["taiga-ui"].core.constants, global.ng.common, global.common));
-})(this, (function (exports, i0, i3$1, i3, animations, i4, i2$1, tokens, i1, operators, i2, constants, common$1, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/core/abstract'), require('@taiga-ui/core/animations'), require('@taiga-ui/core/directives/mode'), require('@taiga-ui/core/services'), require('@taiga-ui/core/tokens'), require('@tinkoff/ng-polymorpheus'), require('rxjs/operators'), require('rxjs'), require('@angular/common'), require('@ng-web-apis/common'), require('@taiga-ui/core/constants')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/core/directives/hint', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/core/abstract', '@taiga-ui/core/animations', '@taiga-ui/core/directives/mode', '@taiga-ui/core/services', '@taiga-ui/core/tokens', '@tinkoff/ng-polymorpheus', 'rxjs/operators', 'rxjs', '@angular/common', '@ng-web-apis/common', '@taiga-ui/core/constants'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].core = global["taiga-ui"].core || {}, global["taiga-ui"].core.directives = global["taiga-ui"].core.directives || {}, global["taiga-ui"].core.directives.hint = {}), global.ng.core, global.i3$1, global["taiga-ui"].core.abstract, global["taiga-ui"].core.animations, global["taiga-ui"].core.directives.mode, global["taiga-ui"].core.services, global["taiga-ui"].core.tokens, global.i1, global.rxjs.operators, global.rxjs, global.ng.common, global.common$1, global["taiga-ui"].core.constants));
+})(this, (function (exports, i0, i3$1, i3, animations, i5, i2$1, tokens, i1, operators, i2, common, common$1, constants) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -25,7 +25,7 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
@@ -391,7 +391,7 @@
         return TuiHintHoverDirective;
     }(i3.TuiDriver));
     TuiHintHoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintHoverDirective, deps: [{ token: i3$1.TuiHoveredService }, { token: TUI_HINT_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiHintHoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: { showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, providers: [i3.tuiAsDriver(TuiHintHoverDirective), i3$1.TuiHoveredService], usesInheritance: true, ngImport: i0__namespace });
+    TuiHintHoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: { showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, host: { listeners: { "click": "toggle(true)" } }, providers: [i3.tuiAsDriver(TuiHintHoverDirective), i3$1.TuiHoveredService], usesInheritance: true, ngImport: i0__namespace });
     __decorate([
         i3$1.tuiDefaultProp()
     ], TuiHintHoverDirective.prototype, "showDelay", void 0);
@@ -418,6 +418,9 @@
                 }], hideDelay: [{
                     type: i0.Input,
                     args: ["tuiHintHideDelay"]
+                }], toggle: [{
+                    type: i0.HostListener,
+                    args: ["click", ["true"]]
                 }] } });
 
     var TuiHintPointerDirective = /** @class */ (function (_super) {
@@ -456,25 +459,24 @@
                 }] } });
 
     var TuiHintComponent = /** @class */ (function () {
-        function TuiHintComponent(hovered$, position$, destroy$, accessor, elementRef, options, polymorpheus, driver, mode) {
+        function TuiHintComponent(hovered$, position$, destroy$, accessor, elementRef, options, polymorpheus, hover, pointer, mode) {
             var _this = this;
             var _a;
             this.accessor = accessor;
             this.elementRef = elementRef;
             this.options = options;
             this.polymorpheus = polymorpheus;
-            this.driver = driver;
+            this.hover = hover;
+            this.pointer = pointer;
             this.mode = mode;
             this.animation = Object.assign({ value: "" }, this.options);
             this.appearance = this.polymorpheus.$implicit.appearance || ((_a = this.mode) === null || _a === void 0 ? void 0 : _a.mode);
-            this.untouchable = this.driver instanceof TuiHintPointerDirective;
+            this.untouchable = !!this.pointer;
             position$.pipe(operators.takeUntil(destroy$)).subscribe(function (_b) {
                 var _c = __read(_b, 2), top = _c[0], left = _c[1];
                 _this.update(top, left);
             });
-            if (driver instanceof TuiHintHoverDirective) {
-                hovered$.pipe(operators.takeUntil(destroy$)).subscribe(function (hover) { return driver.toggle(hover); });
-            }
+            hovered$.pipe(operators.takeUntil(destroy$)).subscribe(function (hover) { return _this.hover.toggle(hover); });
         }
         Object.defineProperty(TuiHintComponent.prototype, "content", {
             get: function () {
@@ -490,6 +492,11 @@
             enumerable: false,
             configurable: true
         });
+        TuiHintComponent.prototype.onClick = function (target) {
+            if (!this.elementRef.nativeElement.contains(target)) {
+                this.hover.toggle(false);
+            }
+        };
         TuiHintComponent.prototype.update = function (top, left) {
             var nativeElement = this.elementRef.nativeElement;
             var _b = nativeElement.getBoundingClientRect(), height = _b.height, width = _b.width;
@@ -504,8 +511,8 @@
         };
         return TuiHintComponent;
     }());
-    TuiHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintComponent, deps: [{ token: i3$1.TuiHoveredService }, { token: i2$1.TuiPositionService }, { token: i3$1.TuiDestroyService }, { token: i3.TuiRectAccessor }, { token: i0.ElementRef }, { token: tokens.TUI_ANIMATION_OPTIONS }, { token: i1.POLYMORPHEUS_CONTEXT }, { token: i3.TuiDriver }, { token: i4.TuiModeDirective, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiHintComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintComponent, selector: "tui-hint", host: { properties: { "@tuiFadeIn": "this.animation", "attr.data-appearance": "this.appearance", "class._untouchable": "this.untouchable" } }, providers: [i3$1.TuiDestroyService, i2$1.TuiPositionService, i3$1.TuiHoveredService], ngImport: i0__namespace, template: "\n        <ng-container *polymorpheusOutlet=\"content as text; context: context\">\n            {{ text }}\n        </ng-container>\n    ", 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-color:inherit;transform:translate(-50%,-50%) rotate(45deg)}:host[data-appearance=error]{background-color:var(--tui-error-fill)}:host[data-appearance=onDark]{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);border:1px solid var(--tui-base-03);background-color:var(--tui-base-01);color:var(--tui-text-01)}:host[data-appearance=onDark]:before{box-shadow:inset 0 0 0 1px var(--tui-base-03)}:host[data-appearance=onDark]:after{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .5rem var(--tui-base-01)}:host._untouchable{pointer-events:none}\n"], directives: [{ type: i1__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [animations.tuiFadeIn], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintComponent, deps: [{ token: i3$1.TuiHoveredService }, { token: i2$1.TuiPositionService }, { token: i3$1.TuiDestroyService }, { token: i3.TuiRectAccessor }, { token: i0.ElementRef }, { token: tokens.TUI_ANIMATION_OPTIONS }, { token: i1.POLYMORPHEUS_CONTEXT }, { token: TuiHintHoverDirective }, { token: TuiHintPointerDirective, optional: true }, { token: i5.TuiModeDirective, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiHintComponent.ɵcmp = i0__namespace.ɵɵ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: [i3$1.TuiDestroyService, i2$1.TuiPositionService, i3$1.TuiHoveredService], ngImport: i0__namespace, template: "\n        <ng-container *polymorpheusOutlet=\"content as text; context: context\">\n            {{ text }}\n        </ng-container>\n    ", 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-color:inherit;transform:translate(-50%,-50%) rotate(45deg)}:host[data-appearance=error]{background-color:var(--tui-error-fill)}:host[data-appearance=onDark]{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);border:1px solid var(--tui-base-03);background-color:var(--tui-base-01);color:var(--tui-text-01)}:host[data-appearance=onDark]:before{box-shadow:inset 0 0 0 1px var(--tui-base-03)}:host[data-appearance=onDark]:after{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .5rem var(--tui-base-01)}:host._untouchable{pointer-events:none}\n"], directives: [{ type: i1__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [animations.tuiFadeIn], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i3$1.tuiPure
     ], TuiHintComponent.prototype, "update", null);
@@ -541,14 +548,19 @@
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [i1.POLYMORPHEUS_CONTEXT]
-                        }] }, { type: i3__namespace.TuiDriver, decorators: [{
+                        }] }, { type: TuiHintHoverDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [TuiHintHoverDirective]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Optional
+                        }, {
                             type: i0.Inject,
-                            args: [i3.TuiDriver]
-                        }] }, { type: i4__namespace.TuiModeDirective, decorators: [{
+                            args: [TuiHintPointerDirective]
+                        }] }, { type: i5__namespace.TuiModeDirective, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Inject,
-                            args: [i4.TuiModeDirective]
+                            args: [i5.TuiModeDirective]
                         }] }];
         }, propDecorators: { animation: [{
                     type: i0.HostBinding,
@@ -559,6 +571,9 @@
                 }], untouchable: [{
                     type: i0.HostBinding,
                     args: ["class._untouchable"]
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ["document:click", ["$event.target"]]
                 }], update: [] } });
 
     var TUI_HINT_COMPONENT = new i0.InjectionToken("[TUI_HINT_COMPONENT] A component to display a hint", {
@@ -572,18 +587,9 @@
             this.hintService = hintService;
             this.options = options;
             this.activeZone = activeZone;
-            this.tuiHintId = "";
             this.content = "";
             this.appearance = this.options.appearance;
-            this.hintService.register(this);
         }
-        Object.defineProperty(TuiHintDirective.prototype, "id", {
-            get: function () {
-                return this.tuiHintId ? this.tuiHintId + constants.DESCRIBED_BY : undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
         TuiHintDirective.prototype.ngOnChanges = function () {
             if (!this.content) {
                 this.toggle(false);
@@ -591,7 +597,6 @@
         };
         TuiHintDirective.prototype.ngOnDestroy = function () {
             this.toggle(false);
-            this.hintService.unregister(this);
         };
         TuiHintDirective.prototype.getClientRect = function () {
             return this.elementRef.nativeElement.getBoundingClientRect();
@@ -607,7 +612,7 @@
         return TuiHintDirective;
     }());
     TuiHintDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintDirective, deps: [{ token: i0.ElementRef }, { token: i1.PolymorpheusComponent }, { token: i2$1.TuiHintService }, { token: TUI_HINT_OPTIONS }, { token: i3$1.TuiActiveZoneDirective, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiHintDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: { tuiHintId: "tuiHintId", content: ["tuiHint", "content"], context: ["tuiHintContext", "context"], appearance: ["tuiHintAppearance", "appearance"] }, providers: [
+    TuiHintDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: { content: ["tuiHint", "content"], context: ["tuiHintContext", "context"], appearance: ["tuiHintAppearance", "appearance"] }, providers: [
             i3.tuiAsRectAccessor(TuiHintDirective),
             i3.tuiAsVehicle(TuiHintDirective),
             {
@@ -616,9 +621,6 @@
                 useClass: i1.PolymorpheusComponent,
             },
         ], usesOnChanges: true, ngImport: i0__namespace });
-    __decorate([
-        i3$1.tuiDefaultProp()
-    ], TuiHintDirective.prototype, "tuiHintId", void 0);
     __decorate([
         i3$1.tuiDefaultProp()
     ], TuiHintDirective.prototype, "content", void 0);
@@ -658,9 +660,7 @@
                             type: i0.Inject,
                             args: [i3$1.TuiActiveZoneDirective]
                         }] }];
-        }, propDecorators: { tuiHintId: [{
-                    type: i0.Input
-                }], content: [{
+        }, propDecorators: { content: [{
                     type: i0.Input,
                     args: ["tuiHint"]
                 }], context: [{
@@ -671,6 +671,69 @@
                     args: ["tuiHintAppearance"]
                 }] } });
 
+    var TuiHintDescribeDirective = /** @class */ (function (_super) {
+        __extends(TuiHintDescribeDirective, _super);
+        function TuiHintDescribeDirective(ngZone, hover$, documentRef, elementRef) {
+            var _this = _super.call(this, function (subscriber) { return _this.stream$.subscribe(subscriber); }) || this;
+            _this.ngZone = ngZone;
+            _this.hover$ = hover$;
+            _this.documentRef = documentRef;
+            _this.elementRef = elementRef;
+            _this.focus$ = i3$1.tuiTypedFromEvent(_this.documentRef, "keydown", {
+                capture: true,
+            }).pipe(operators.switchMap(function () { return _this.focused
+                ? i2.of(false)
+                : i2.merge(i3$1.tuiTypedFromEvent(_this.documentRef, "keyup"), i3$1.tuiTypedFromEvent(_this.element, "blur")).pipe(operators.map(function () { return _this.focused; })); }), operators.debounce(function (visible) { return (visible ? i2.timer(1000) : i2.of(null)); }), operators.startWith(false), operators.distinctUntilChanged(), operators.skip(1), i3$1.tuiZoneOptimized(_this.ngZone));
+            _this.stream$ = i2.merge(_this.hover$, _this.focus$);
+            _this.tuiHintDescribe = "";
+            return _this;
+        }
+        Object.defineProperty(TuiHintDescribeDirective.prototype, "focused", {
+            get: function () {
+                return i3$1.tuiIsNativeFocused(this.element);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiHintDescribeDirective.prototype, "element", {
+            get: function () {
+                return (this.documentRef.getElementById(this.tuiHintDescribe) ||
+                    this.elementRef.nativeElement);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TuiHintDescribeDirective;
+    }(i3.TuiDriver));
+    TuiHintDescribeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintDescribeDirective, deps: [{ token: i0.NgZone }, { token: TuiHintHoverDirective }, { token: common.DOCUMENT }, { token: i0.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiHintDescribeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDescribeDirective, selector: "[tuiHintDescribe]", inputs: { tuiHintDescribe: "tuiHintDescribe" }, providers: [i3.tuiAsDriver(TuiHintDescribeDirective)], usesInheritance: true, ngImport: i0__namespace });
+    __decorate([
+        i3$1.tuiPure
+    ], TuiHintDescribeDirective.prototype, "element", null);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintDescribeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[tuiHintDescribe]",
+                        providers: [i3.tuiAsDriver(TuiHintDescribeDirective)],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.NgZone, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.NgZone]
+                        }] }, { type: i2__namespace.Observable, decorators: [{
+                            type: i0.Inject,
+                            args: [TuiHintHoverDirective]
+                        }] }, { type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [common.DOCUMENT]
+                        }] }, { type: i0__namespace.ElementRef, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.ElementRef]
+                        }] }];
+        }, propDecorators: { tuiHintDescribe: [{
+                    type: i0.Input
+                }], element: [] } });
+
     var TuiHintDriverDirective = /** @class */ (function (_super) {
         __extends(TuiHintDriverDirective, _super);
         function TuiHintDriverDirective() {
@@ -736,6 +799,78 @@
                     type: i0.Input
                 }] } });
 
+    var TuiHintOptionsDirective = /** @class */ (function (_super) {
+        __extends(TuiHintOptionsDirective, _super);
+        function TuiHintOptionsDirective(options) {
+            var _this = _super.call(this) || this;
+            _this.options = options;
+            _this.content = "";
+            _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;
+            return _this;
+        }
+        return TuiHintOptionsDirective;
+    }(i3$1.AbstractTuiController));
+    TuiHintOptionsDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintOptionsDirective, deps: [{ token: TUI_HINT_OPTIONS, skipSelf: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiHintOptionsDirective.ɵdir = i0__namespace.ɵɵ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: [
+            {
+                provide: TUI_HINT_OPTIONS,
+                useExisting: i0.forwardRef(function () { return TuiHintOptionsDirective; }),
+            },
+        ], usesInheritance: true, ngImport: i0__namespace });
+    __decorate([
+        i3$1.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "content", void 0);
+    __decorate([
+        i3$1.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "direction", void 0);
+    __decorate([
+        i3$1.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "appearance", void 0);
+    __decorate([
+        i3$1.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "showDelay", void 0);
+    __decorate([
+        i3$1.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "hideDelay", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintOptionsDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[tuiHintContent]",
+                        providers: [
+                            {
+                                provide: TUI_HINT_OPTIONS,
+                                useExisting: i0.forwardRef(function () { return TuiHintOptionsDirective; }),
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.SkipSelf
+                        }, {
+                            type: i0.Inject,
+                            args: [TUI_HINT_OPTIONS]
+                        }] }];
+        }, propDecorators: { content: [{
+                    type: i0.Input,
+                    args: ["tuiHintContent"]
+                }], direction: [{
+                    type: i0.Input,
+                    args: ["tuiHintDirection"]
+                }], appearance: [{
+                    type: i0.Input,
+                    args: ["tuiHintAppearance"]
+                }], showDelay: [{
+                    type: i0.Input,
+                    args: ["tuiHintShowDelay"]
+                }], hideDelay: [{
+                    type: i0.Input,
+                    args: ["tuiHintHideDelay"]
+                }] } });
+
     var OFFSET = 8;
     var ARROW_OFFSET = 22;
     var TOP = 0;
@@ -797,7 +932,7 @@
         };
         return TuiHintPositionDirective;
     }());
-    TuiHintPositionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintPositionDirective, deps: [{ token: TUI_HINT_OPTIONS }, { token: common.WINDOW }, { token: i3.TuiRectAccessor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiHintPositionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintPositionDirective, deps: [{ token: TUI_HINT_OPTIONS }, { token: common$1.WINDOW }, { token: i3.TuiRectAccessor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiHintPositionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: { direction: ["tuiHintDirection", "direction"] }, providers: [i3.tuiAsPositionAccessor(TuiHintPositionDirective)], ngImport: i0__namespace });
     __decorate([
         i3$1.tuiDefaultProp()
@@ -814,7 +949,7 @@
                             args: [TUI_HINT_OPTIONS]
                         }] }, { type: Window, decorators: [{
                             type: i0.Inject,
-                            args: [common.WINDOW]
+                            args: [common$1.WINDOW]
                         }] }, { type: i3__namespace.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
                             args: [i3.TuiRectAccessor]
@@ -837,19 +972,23 @@
             TuiHintHoverDirective,
             TuiHintManualDirective,
             TuiHintPointerDirective,
-            TuiHintPositionDirective], imports: [common$1.CommonModule, i1.PolymorpheusModule], exports: [TuiHintComponent,
+            TuiHintDescribeDirective,
+            TuiHintPositionDirective,
+            TuiHintOptionsDirective], imports: [common.CommonModule, i1.PolymorpheusModule], exports: [TuiHintComponent,
             TuiHintDirective,
             TuiHintDriverDirective,
             TuiHintHostDirective,
             TuiHintHoverDirective,
             TuiHintManualDirective,
             TuiHintPointerDirective,
-            TuiHintPositionDirective] });
-    TuiHintModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintModule, imports: [[common$1.CommonModule, i1.PolymorpheusModule]] });
+            TuiHintDescribeDirective,
+            TuiHintPositionDirective,
+            TuiHintOptionsDirective] });
+    TuiHintModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintModule, imports: [[common.CommonModule, i1.PolymorpheusModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [common$1.CommonModule, i1.PolymorpheusModule],
+                        imports: [common.CommonModule, i1.PolymorpheusModule],
                         declarations: [
                             TuiHintComponent,
                             TuiHintDirective,
@@ -858,7 +997,9 @@
                             TuiHintHoverDirective,
                             TuiHintManualDirective,
                             TuiHintPointerDirective,
+                            TuiHintDescribeDirective,
                             TuiHintPositionDirective,
+                            TuiHintOptionsDirective,
                         ],
                         exports: [
                             TuiHintComponent,
@@ -868,7 +1009,9 @@
                             TuiHintHoverDirective,
                             TuiHintManualDirective,
                             TuiHintPointerDirective,
+                            TuiHintDescribeDirective,
                             TuiHintPositionDirective,
+                            TuiHintOptionsDirective,
                         ],
                         entryComponents: [TuiHintComponent],
                     }]
@@ -882,12 +1025,14 @@
     exports.TUI_HINT_DEFAULT_OPTIONS = TUI_HINT_DEFAULT_OPTIONS;
     exports.TUI_HINT_OPTIONS = TUI_HINT_OPTIONS;
     exports.TuiHintComponent = TuiHintComponent;
+    exports.TuiHintDescribeDirective = TuiHintDescribeDirective;
     exports.TuiHintDirective = TuiHintDirective;
     exports.TuiHintDriverDirective = TuiHintDriverDirective;
     exports.TuiHintHostDirective = TuiHintHostDirective;
     exports.TuiHintHoverDirective = TuiHintHoverDirective;
     exports.TuiHintManualDirective = TuiHintManualDirective;
     exports.TuiHintModule = TuiHintModule;
+    exports.TuiHintOptionsDirective = TuiHintOptionsDirective;
     exports.TuiHintPointerDirective = TuiHintPointerDirective;
     exports.TuiHintPositionDirective = TuiHintPositionDirective;
     exports.tuiHintOptionsProvider = tuiHintOptionsProvider;