@taiga-ui/core 3.3.0 → 3.5.0

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('@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';
+    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/utils'), 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', '@taiga-ui/core/utils', '@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, 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.utils, global.ng.common, global.common$1, global["taiga-ui"].core.constants));
+})(this, (function (exports, i0, i3, i3$1, animations, i5, i2$1, tokens, i1, operators, i2, utils, common, common$1, constants) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,8 +23,8 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
@@ -368,10 +368,85 @@
     var TUI_HINT_OPTIONS = new i0.InjectionToken("[TUI_HINT_OPTIONS] Default parameters for hint directive", {
         factory: function () { return TUI_HINT_DEFAULT_OPTIONS; },
     });
-    var tuiHintOptionsProvider = function (options) { return ({
+    var tuiHintOptionsProvider = function (override) { return ({
         provide: TUI_HINT_OPTIONS,
-        useValue: Object.assign(Object.assign({}, TUI_HINT_DEFAULT_OPTIONS), options),
+        deps: [
+            [new i0.Optional(), TuiHintOptionsDirective],
+            [new i0.SkipSelf(), TUI_HINT_OPTIONS],
+        ],
+        useFactory: utils.tuiOverrideOptions(override),
     }); };
+    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.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.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "content", void 0);
+    __decorate([
+        i3.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "direction", void 0);
+    __decorate([
+        i3.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "appearance", void 0);
+    __decorate([
+        i3.tuiDefaultProp()
+    ], TuiHintOptionsDirective.prototype, "showDelay", void 0);
+    __decorate([
+        i3.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 TuiHintHoverDirective = /** @class */ (function (_super) {
         __extends(TuiHintHoverDirective, _super);
@@ -389,25 +464,25 @@
             this.toggle$.next(visible);
         };
         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"] }, host: { listeners: { "click": "toggle(true)" } }, providers: [i3.tuiAsDriver(TuiHintHoverDirective), i3$1.TuiHoveredService], usesInheritance: true, ngImport: i0__namespace });
+    }(i3$1.TuiDriver));
+    TuiHintHoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintHoverDirective, deps: [{ token: i3.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"] }, host: { listeners: { "click": "toggle(true)" } }, providers: [i3$1.tuiAsDriver(TuiHintHoverDirective), i3.TuiHoveredService], usesInheritance: true, ngImport: i0__namespace });
     __decorate([
-        i3$1.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiHintHoverDirective.prototype, "showDelay", void 0);
     __decorate([
-        i3$1.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiHintHoverDirective.prototype, "hideDelay", void 0);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintHoverDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[tuiHint]:not(ng-container)",
-                        providers: [i3.tuiAsDriver(TuiHintHoverDirective), i3$1.TuiHoveredService],
+                        providers: [i3$1.tuiAsDriver(TuiHintHoverDirective), i3.TuiHoveredService],
                     }]
             }], ctorParameters: function () {
             return [{ type: i2__namespace.Observable, decorators: [{
                             type: i0.Inject,
-                            args: [i3$1.TuiHoveredService]
+                            args: [i3.TuiHoveredService]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_HINT_OPTIONS]
@@ -427,12 +502,12 @@
         __extends(TuiHintPointerDirective, _super);
         function TuiHintPointerDirective() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.currentRect = i3$1.EMPTY_CLIENT_RECT;
+            _this.currentRect = i3.EMPTY_CLIENT_RECT;
             return _this;
         }
         TuiHintPointerDirective.prototype.onMove = function (_a) {
             var clientX = _a.clientX, clientY = _a.clientY;
-            this.currentRect = i3$1.tuiPointToClientRect(clientX, clientY);
+            this.currentRect = i3.tuiPointToClientRect(clientX, clientY);
         };
         TuiHintPointerDirective.prototype.getClientRect = function () {
             return this.currentRect;
@@ -441,16 +516,16 @@
     }(TuiHintHoverDirective));
     TuiHintPointerDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintPointerDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiHintPointerDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintPointerDirective, selector: "[tuiHint][tuiHintPointer]", host: { listeners: { "mousemove.silent": "onMove($event)" } }, providers: [
-            i3.tuiAsRectAccessor(TuiHintPointerDirective),
-            i3.tuiAsDriver(TuiHintPointerDirective),
+            i3$1.tuiAsRectAccessor(TuiHintPointerDirective),
+            i3$1.tuiAsDriver(TuiHintPointerDirective),
         ], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintPointerDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[tuiHint][tuiHintPointer]",
                         providers: [
-                            i3.tuiAsRectAccessor(TuiHintPointerDirective),
-                            i3.tuiAsDriver(TuiHintPointerDirective),
+                            i3$1.tuiAsRectAccessor(TuiHintPointerDirective),
+                            i3$1.tuiAsDriver(TuiHintPointerDirective),
                         ],
                     }]
             }], propDecorators: { onMove: [{
@@ -502,19 +577,20 @@
             var _b = nativeElement.getBoundingClientRect(), height = _b.height, width = _b.width;
             var style = nativeElement.style;
             var rect = this.accessor.getClientRect();
+            var safeLeft = Math.max(left, 4);
             var beakTop = rect.top + rect.height / 2 - top;
-            var beakLeft = rect.left + rect.width / 2 - left;
-            style.top = i3$1.tuiPx(top);
-            style.left = i3$1.tuiPx(left);
-            style.setProperty("--top", i3$1.tuiPx(i3$1.tuiClamp(beakTop, 0, height - 1)));
-            style.setProperty("--left", i3$1.tuiPx(i3$1.tuiClamp(beakLeft, 0, width - 1)));
+            var beakLeft = rect.left + rect.width / 2 - safeLeft;
+            style.top = i3.tuiPx(top);
+            style.left = i3.tuiPx(safeLeft);
+            style.setProperty("--top", i3.tuiPx(i3.tuiClamp(beakTop, 0.5, height - 1)));
+            style.setProperty("--left", i3.tuiPx(i3.tuiClamp(beakLeft, 0.5, width - 1)));
         };
         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: 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 });
+    TuiHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintComponent, deps: [{ token: i3.TuiHoveredService }, { token: i2$1.TuiPositionService }, { token: i3.TuiDestroyService }, { token: i3$1.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.TuiDestroyService, i2$1.TuiPositionService, i3.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
+        i3.tuiPure
     ], TuiHintComponent.prototype, "update", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintComponent, decorators: [{
                 type: i0.Component,
@@ -523,22 +599,22 @@
                         template: "\n        <ng-container *polymorpheusOutlet=\"content as text; context: context\">\n            {{ text }}\n        </ng-container>\n    ",
                         styleUrls: ["./hint.style.less"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [i3$1.TuiDestroyService, i2$1.TuiPositionService, i3$1.TuiHoveredService],
+                        providers: [i3.TuiDestroyService, i2$1.TuiPositionService, i3.TuiHoveredService],
                         animations: [animations.tuiFadeIn],
                     }]
             }], ctorParameters: function () {
             return [{ type: i2__namespace.Observable, decorators: [{
                             type: i0.Inject,
-                            args: [i3$1.TuiHoveredService]
+                            args: [i3.TuiHoveredService]
                         }] }, { type: i2__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [i2$1.TuiPositionService]
                         }] }, { type: i2__namespace.Observable, decorators: [{
                             type: i0.Inject,
-                            args: [i3$1.TuiDestroyService]
+                            args: [i3.TuiDestroyService]
                         }] }, { type: i3__namespace.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
-                            args: [i3.TuiRectAccessor]
+                            args: [i3$1.TuiRectAccessor]
                         }] }, { type: i0__namespace.ElementRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ElementRef]
@@ -588,8 +664,16 @@
             this.options = options;
             this.activeZone = activeZone;
             this.content = "";
-            this.appearance = this.options.appearance;
+            this.tuiHintAppearance = null;
         }
+        Object.defineProperty(TuiHintDirective.prototype, "appearance", {
+            get: function () {
+                var _a;
+                return (_a = this.tuiHintAppearance) !== null && _a !== void 0 ? _a : this.options.appearance;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TuiHintDirective.prototype.ngOnChanges = function () {
             if (!this.content) {
                 this.toggle(false);
@@ -611,10 +695,10 @@
         };
         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: { content: ["tuiHint", "content"], context: ["tuiHintContext", "context"], appearance: ["tuiHintAppearance", "appearance"] }, providers: [
-            i3.tuiAsRectAccessor(TuiHintDirective),
-            i3.tuiAsVehicle(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.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: { content: ["tuiHint", "content"], context: ["tuiHintContext", "context"], tuiHintAppearance: "tuiHintAppearance" }, providers: [
+            i3$1.tuiAsRectAccessor(TuiHintDirective),
+            i3$1.tuiAsVehicle(TuiHintDirective),
             {
                 provide: i1.PolymorpheusComponent,
                 deps: [TUI_HINT_COMPONENT, i0.INJECTOR],
@@ -622,18 +706,18 @@
             },
         ], usesOnChanges: true, ngImport: i0__namespace });
     __decorate([
-        i3$1.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiHintDirective.prototype, "content", void 0);
     __decorate([
-        i3$1.tuiDefaultProp()
-    ], TuiHintDirective.prototype, "appearance", void 0);
+        i3.tuiDefaultProp()
+    ], TuiHintDirective.prototype, "tuiHintAppearance", void 0);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[tuiHint]:not(ng-container)",
                         providers: [
-                            i3.tuiAsRectAccessor(TuiHintDirective),
-                            i3.tuiAsVehicle(TuiHintDirective),
+                            i3$1.tuiAsRectAccessor(TuiHintDirective),
+                            i3$1.tuiAsVehicle(TuiHintDirective),
                             {
                                 provide: i1.PolymorpheusComponent,
                                 deps: [TUI_HINT_COMPONENT, i0.INJECTOR],
@@ -658,7 +742,7 @@
                             type: i0.Optional
                         }, {
                             type: i0.Inject,
-                            args: [i3$1.TuiActiveZoneDirective]
+                            args: [i3.TuiActiveZoneDirective]
                         }] }];
         }, propDecorators: { content: [{
                     type: i0.Input,
@@ -666,9 +750,8 @@
                 }], context: [{
                     type: i0.Input,
                     args: ["tuiHintContext"]
-                }], appearance: [{
-                    type: i0.Input,
-                    args: ["tuiHintAppearance"]
+                }], tuiHintAppearance: [{
+                    type: i0.Input
                 }] } });
 
     var TuiHintDescribeDirective = /** @class */ (function (_super) {
@@ -679,18 +762,18 @@
             _this.hover$ = hover$;
             _this.documentRef = documentRef;
             _this.elementRef = elementRef;
-            _this.focus$ = i3$1.tuiTypedFromEvent(_this.documentRef, "keydown", {
+            _this.focus$ = i3.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));
+                : i2.merge(i3.tuiTypedFromEvent(_this.documentRef, "keyup"), i3.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.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);
+                return i3.tuiIsNativeFocused(this.element);
             },
             enumerable: false,
             configurable: true
@@ -704,17 +787,17 @@
             configurable: true
         });
         return TuiHintDescribeDirective;
-    }(i3.TuiDriver));
+    }(i3$1.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 });
+    TuiHintDescribeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDescribeDirective, selector: "[tuiHintDescribe]", inputs: { tuiHintDescribe: "tuiHintDescribe" }, providers: [i3$1.tuiAsDriver(TuiHintDescribeDirective)], usesInheritance: true, ngImport: i0__namespace });
     __decorate([
-        i3$1.tuiPure
+        i3.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)],
+                        providers: [i3$1.tuiAsDriver(TuiHintDescribeDirective)],
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.NgZone, decorators: [{
@@ -740,14 +823,14 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return TuiHintDriverDirective;
-    }(i3.AbstractTuiDriverDirective));
+    }(i3$1.AbstractTuiDriverDirective));
     TuiHintDriverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintDriverDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiHintDriverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDriverDirective, selector: "[tuiHint]", providers: [i3$1.TuiDestroyService], usesInheritance: true, ngImport: i0__namespace });
+    TuiHintDriverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintDriverDirective, selector: "[tuiHint]", providers: [i3.TuiDestroyService], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintDriverDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[tuiHint]",
-                        providers: [i3$1.TuiDestroyService],
+                        providers: [i3.TuiDestroyService],
                     }]
             }] });
 
@@ -758,17 +841,17 @@
         }
         TuiHintHostDirective.prototype.getClientRect = function () {
             var _a;
-            return ((_a = this.tuiHintHost) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || i3$1.EMPTY_CLIENT_RECT;
+            return ((_a = this.tuiHintHost) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || i3.EMPTY_CLIENT_RECT;
         };
         return TuiHintHostDirective;
-    }(i3.TuiRectAccessor));
+    }(i3$1.TuiRectAccessor));
     TuiHintHostDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintHostDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiHintHostDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintHostDirective, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: "tuiHintHost" }, providers: [i3.tuiAsRectAccessor(TuiHintHostDirective)], usesInheritance: true, ngImport: i0__namespace });
+    TuiHintHostDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintHostDirective, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: "tuiHintHost" }, providers: [i3$1.tuiAsRectAccessor(TuiHintHostDirective)], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintHostDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[tuiHint][tuiHintHost]",
-                        providers: [i3.tuiAsRectAccessor(TuiHintHostDirective)],
+                        providers: [i3$1.tuiAsRectAccessor(TuiHintHostDirective)],
                     }]
             }], propDecorators: { tuiHintHost: [{
                     type: i0.Input
@@ -786,91 +869,19 @@
             this.stream$.next(this.tuiHintManual);
         };
         return TuiHintManualDirective;
-    }(i3.TuiDriver));
+    }(i3$1.TuiDriver));
     TuiHintManualDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintManualDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiHintManualDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintManualDirective, selector: "[tuiHint][tuiHintManual]", inputs: { tuiHintManual: "tuiHintManual" }, providers: [i3.tuiAsDriver(TuiHintManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace });
+    TuiHintManualDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHintManualDirective, selector: "[tuiHint][tuiHintManual]", inputs: { tuiHintManual: "tuiHintManual" }, providers: [i3$1.tuiAsDriver(TuiHintManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintManualDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[tuiHint][tuiHintManual]",
-                        providers: [i3.tuiAsDriver(TuiHintManualDirective)],
+                        providers: [i3$1.tuiAsDriver(TuiHintManualDirective)],
                     }]
             }], ctorParameters: function () { return []; }, propDecorators: { tuiHintManual: [{
                     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;
@@ -932,16 +943,16 @@
         };
         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$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 });
+    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$1.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$1.tuiAsPositionAccessor(TuiHintPositionDirective)], ngImport: i0__namespace });
     __decorate([
-        i3$1.tuiDefaultProp()
+        i3.tuiDefaultProp()
     ], TuiHintPositionDirective.prototype, "direction", void 0);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiHintPositionDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[tuiHint]:not([tuiHintCustomPosition])",
-                        providers: [i3.tuiAsPositionAccessor(TuiHintPositionDirective)],
+                        providers: [i3$1.tuiAsPositionAccessor(TuiHintPositionDirective)],
                     }]
             }], ctorParameters: function () {
             return [{ type: undefined, decorators: [{
@@ -952,7 +963,7 @@
                             args: [common$1.WINDOW]
                         }] }, { type: i3__namespace.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
-                            args: [i3.TuiRectAccessor]
+                            args: [i3$1.TuiRectAccessor]
                         }] }];
         }, propDecorators: { direction: [{
                     type: i0.Input,