@taiga-ui/core 3.17.0 → 3.18.0-dev.main-05a0bf8

package/fesm2015/taiga-ui-core-components-tooltip.js

@@ -2,28 +2,27 @@ import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Self, Inject, ViewChild, Input, HostBinding, HostListener, NgModule } from '@angular/core';
 import { TuiDestroyService, TUI_IS_MOBILE, tuiDefaultProp } from '@taiga-ui/cdk';
-import { TuiDriver } from '@taiga-ui/core/abstract';
-import { TuiHintOptionsDirective, TUI_HINT_OPTIONS } from '@taiga-ui/core/directives';
+import { TuiHintOptionsDirective, TUI_HINT_OPTIONS, TuiHintHoverDirective } from '@taiga-ui/core/directives';
 import { MODE_PROVIDER } from '@taiga-ui/core/providers';
 import { TUI_MODE } from '@taiga-ui/core/tokens';
-import * as i5 from 'rxjs';
-import { EMPTY } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import * as i1 from '@taiga-ui/core/components/svg';
 import { TuiSvgModule } from '@taiga-ui/core/components/svg';
-import * as i2 from '@taiga-ui/core/directives/hint';
+import * as i2 from '@taiga-ui/core/directives/wrapper';
+import { TuiWrapperModule } from '@taiga-ui/core/directives/wrapper';
+import * as i3 from '@taiga-ui/core/directives/hint';
 import { TuiHintModule } from '@taiga-ui/core/directives/hint';
-import * as i3 from '@tinkoff/ng-polymorpheus';
+import * as i4 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i6 from 'rxjs';
 
 class TuiTooltipComponent extends TuiHintOptionsDirective {
     constructor(destroy$, mode$, options, isMobile) {
         super(options);
         this.isMobile = isMobile;
         this.mode = null;
-        this.driver$ = EMPTY;
         this.describeId = '';
         mode$.pipe(takeUntil(destroy$)).subscribe(mode => {
             this.mode = mode;
@@ -33,18 +32,20 @@ class TuiTooltipComponent extends TuiHintOptionsDirective {
         return this.appearance || this.mode || '';
     }
     stopOnMobile(event) {
+        var _a;
         if (this.isMobile) {
             event.preventDefault();
             event.stopPropagation();
         }
+        (_a = this.driver$) === null || _a === void 0 ? void 0 : _a.toggle(true);
     }
 }
-TuiTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTooltipComponent, deps: [{ token: TuiDestroyService, self: true }, { token: TUI_MODE }, { token: TUI_HINT_OPTIONS }, { token: TUI_IS_MOBILE }], target: i0.ɵɵFactoryTarget.Component });
-TuiTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTooltipComponent, selector: "tui-tooltip", inputs: { content: "content", direction: "direction", appearance: "appearance", showDelay: "showDelay", hideDelay: "hideDelay", describeId: "describeId" }, host: { listeners: { "mousedown": "stopOnMobile($event)", "click": "stopOnMobile($event)" }, properties: { "attr.data-appearance": "this.computedAppearance" } }, providers: [TuiDestroyService, MODE_PROVIDER], viewQueries: [{ propertyName: "driver$", first: true, predicate: TuiDriver, descendants: true }], usesInheritance: true, ngImport: i0, template: "<span\n    automation-id=\"tui-tooltip__icon\"\n    class=\"t-tooltip-icon\"\n    [class.t-icon_hovered]=\"driver$ | async\"\n    [tuiHint]=\"content\"\n    [tuiHintDescribe]=\"describeId\"\n    [tuiHintDirection]=\"direction\"\n    [tuiHintShowDelay]=\"showDelay\"\n    [tuiHintHideDelay]=\"hideDelay\"\n    [tuiHintAppearance]=\"computedAppearance\"\n>\n    <tui-svg\n        *polymorpheusOutlet=\"icon as src\"\n        [src]=\"src\"\n    ></tui-svg>\n</span>\n", styles: [":host{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:inline-block;width:1.5rem;height:1.5rem;vertical-align:middle;font-size:0;line-height:0;cursor:pointer;color:var(--tui-text-03)}:host:hover{color:var(--tui-text-02)}:host[data-appearance=onDark]{color:var(--tui-text-01-night)}:host[data-appearance=onLight]{color:var(--tui-text-01)}:host[data-appearance=error]{color:var(--tui-error-fill)}.t-tooltip-icon{transition-property:opacity,color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-block;width:100%;height:100%}:host:not([data-appearance]) .t-tooltip-icon_hovered{color:var(--tui-text-02)}:host[data-appearance=onLight] .t-tooltip-icon,:host[data-appearance=onDark] .t-tooltip-icon{opacity:var(--tui-disabled-opacity)}:host[data-appearance=onLight] .t-tooltip-icon_hovered,:host[data-appearance=onDark] .t-tooltip-icon_hovered{opacity:1}\n"], components: [{ type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { type: i2.TuiHintDriverDirective, selector: "[tuiHint]" }, { type: i2.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i2.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { type: i2.TuiHintDescribeDirective, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { type: i3.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTooltipComponent, deps: [{ token: TuiDestroyService, self: true }, { token: TUI_MODE }, { token: TUI_HINT_OPTIONS }, { token: TUI_IS_MOBILE }], target: i0.ɵɵFactoryTarget.Component });
+TuiTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTooltipComponent, selector: "tui-tooltip", inputs: { content: "content", direction: "direction", appearance: "appearance", showDelay: "showDelay", hideDelay: "hideDelay", describeId: "describeId" }, host: { listeners: { "mousedown": "stopOnMobile($event)", "click": "stopOnMobile($event)" }, properties: { "attr.data-appearance": "this.computedAppearance" } }, providers: [TuiDestroyService, MODE_PROVIDER], viewQueries: [{ propertyName: "driver$", first: true, predicate: TuiHintHoverDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<span\n    #driver=\"tuiHintHover\"\n    automation-id=\"tui-tooltip__icon\"\n    tuiWrapper\n    appearance=\"icon\"\n    class=\"t-tooltip-icon\"\n    [hover]=\"(driver | async) || null\"\n    [tuiHint]=\"content\"\n    [tuiHintDescribe]=\"describeId\"\n    [tuiHintDirection]=\"direction\"\n    [tuiHintShowDelay]=\"showDelay\"\n    [tuiHintHideDelay]=\"hideDelay\"\n    [tuiHintAppearance]=\"computedAppearance\"\n>\n    <tui-svg\n        *polymorpheusOutlet=\"icon as src\"\n        [src]=\"src\"\n    ></tui-svg>\n</span>\n", styles: [":host{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:inline-block;width:1.5rem;height:1.5rem;vertical-align:middle;font-size:0;line-height:0;cursor:pointer;color:var(--tui-text-01)}:host[data-appearance=error]{color:var(--tui-error-fill)}.t-tooltip-icon{display:inline-block;width:100%;height:100%;color:inherit}\n"], components: [{ type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { type: i3.TuiHintDriverDirective, selector: "[tuiHint]" }, { type: i3.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { type: i3.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { type: i3.TuiHintDescribeDirective, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { type: i4.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
 ], TuiTooltipComponent.prototype, "describeId", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-tooltip',
@@ -54,12 +55,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [TuiDestroyService, MODE_PROVIDER],
                     inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'],
                 }]
-        }], ctorParameters: function () { return [{ type: i5.Observable, decorators: [{
+        }], ctorParameters: function () { return [{ type: i6.Observable, decorators: [{
                     type: Self
                 }, {
                     type: Inject,
                     args: [TuiDestroyService]
-                }] }, { type: i5.Observable, decorators: [{
+                }] }, { type: i6.Observable, decorators: [{
                     type: Inject,
                     args: [TUI_MODE]
                 }] }, { type: undefined, decorators: [{
@@ -70,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TUI_IS_MOBILE]
                 }] }]; }, propDecorators: { driver$: [{
                 type: ViewChild,
-                args: [TuiDriver]
+                args: [TuiHintHoverDirective]
             }], describeId: [{
                 type: Input
             }], computedAppearance: [{
@@ -86,13 +87,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiTooltipModule {
 }
-TuiTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTooltipModule, declarations: [TuiTooltipComponent], imports: [CommonModule, TuiSvgModule, TuiHintModule, PolymorpheusModule], exports: [TuiTooltipComponent] });
-TuiTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTooltipModule, imports: [[CommonModule, TuiSvgModule, TuiHintModule, PolymorpheusModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTooltipModule, decorators: [{
+TuiTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTooltipModule, declarations: [TuiTooltipComponent], imports: [CommonModule,
+        TuiWrapperModule,
+        TuiSvgModule,
+        TuiHintModule,
+        PolymorpheusModule], exports: [TuiTooltipComponent] });
+TuiTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTooltipModule, imports: [[
+            CommonModule,
+            TuiWrapperModule,
+            TuiSvgModule,
+            TuiHintModule,
+            PolymorpheusModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTooltipModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, TuiSvgModule, TuiHintModule, PolymorpheusModule],
+                    imports: [
+                        CommonModule,
+                        TuiWrapperModule,
+                        TuiSvgModule,
+                        TuiHintModule,
+                        PolymorpheusModule,
+                    ],
                     declarations: [TuiTooltipComponent],
                     exports: [TuiTooltipComponent],
                 }]

package/fesm2015/taiga-ui-core-components-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-components-tooltip.js","sources":["../../../projects/core/components/tooltip/tooltip.component.ts","../../../projects/core/components/tooltip/tooltip.template.html","../../../projects/core/components/tooltip/tooltip.module.ts","../../../projects/core/components/tooltip/taiga-ui-core-components-tooltip.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    HostListener,\n    Inject,\n    Input,\n    Self,\n    ViewChild,\n} from '@angular/core';\nimport {TUI_IS_MOBILE, tuiDefaultProp, TuiDestroyService} from '@taiga-ui/cdk';\nimport {TuiDriver} from '@taiga-ui/core/abstract';\nimport {\n    TUI_HINT_OPTIONS,\n    TuiHintOptions,\n    TuiHintOptionsDirective,\n} from '@taiga-ui/core/directives';\nimport {MODE_PROVIDER} from '@taiga-ui/core/providers';\nimport {TUI_MODE} from '@taiga-ui/core/tokens';\nimport {TuiBrightness} from '@taiga-ui/core/types';\nimport {EMPTY, Observable} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\n\n@Component({\n    selector: 'tui-tooltip',\n    templateUrl: './tooltip.template.html',\n    styleUrls: ['./tooltip.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [TuiDestroyService, MODE_PROVIDER],\n    inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'],\n})\nexport class TuiTooltipComponent extends TuiHintOptionsDirective {\n    private mode: TuiBrightness | null = null;\n\n    @ViewChild(TuiDriver)\n    readonly driver$: Observable<boolean> = EMPTY;\n\n    @Input()\n    @tuiDefaultProp()\n    describeId = '';\n\n    constructor(\n        @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,\n        @Inject(TUI_MODE) mode$: Observable<TuiBrightness | null>,\n        @Inject(TUI_HINT_OPTIONS) options: TuiHintOptions,\n        @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean,\n    ) {\n        super(options);\n\n        mode$.pipe(takeUntil(destroy$)).subscribe(mode => {\n            this.mode = mode;\n        });\n    }\n\n    @HostBinding('attr.data-appearance')\n    get computedAppearance(): string {\n        return this.appearance || this.mode || '';\n    }\n\n    @HostListener('mousedown', ['$event'])\n    @HostListener('click', ['$event'])\n    stopOnMobile(event: MouseEvent): void {\n        if (this.isMobile) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }\n}\n","<span\n    automation-id=\"tui-tooltip__icon\"\n    class=\"t-tooltip-icon\"\n    [class.t-icon_hovered]=\"driver$ | async\"\n    [tuiHint]=\"content\"\n    [tuiHintDescribe]=\"describeId\"\n    [tuiHintDirection]=\"direction\"\n    [tuiHintShowDelay]=\"showDelay\"\n    [tuiHintHideDelay]=\"hideDelay\"\n    [tuiHintAppearance]=\"computedAppearance\"\n>\n    <tui-svg\n        *polymorpheusOutlet=\"icon as src\"\n        [src]=\"src\"\n    ></tui-svg>\n</span>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core/components/svg';\nimport {TuiHintModule} from '@taiga-ui/core/directives/hint';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {TuiTooltipComponent} from './tooltip.component';\n\n@NgModule({\n    imports: [CommonModule, TuiSvgModule, TuiHintModule, PolymorpheusModule],\n    declarations: [TuiTooltipComponent],\n    exports: [TuiTooltipComponent],\n})\nexport class TuiTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-core-components-tooltip.js","sources":["../../../projects/core/components/tooltip/tooltip.component.ts","../../../projects/core/components/tooltip/tooltip.template.html","../../../projects/core/components/tooltip/tooltip.module.ts","../../../projects/core/components/tooltip/taiga-ui-core-components-tooltip.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    HostListener,\n    Inject,\n    Input,\n    Self,\n    ViewChild,\n} from '@angular/core';\nimport {TUI_IS_MOBILE, tuiDefaultProp, TuiDestroyService} from '@taiga-ui/cdk';\nimport {\n    TUI_HINT_OPTIONS,\n    TuiHintHoverDirective,\n    TuiHintOptions,\n    TuiHintOptionsDirective,\n} from '@taiga-ui/core/directives';\nimport {MODE_PROVIDER} from '@taiga-ui/core/providers';\nimport {TUI_MODE} from '@taiga-ui/core/tokens';\nimport {TuiBrightness} from '@taiga-ui/core/types';\nimport {Observable} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\n\n@Component({\n    selector: 'tui-tooltip',\n    templateUrl: './tooltip.template.html',\n    styleUrls: ['./tooltip.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [TuiDestroyService, MODE_PROVIDER],\n    inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'],\n})\nexport class TuiTooltipComponent extends TuiHintOptionsDirective {\n    private mode: TuiBrightness | null = null;\n\n    @ViewChild(TuiHintHoverDirective)\n    readonly driver$?: TuiHintHoverDirective;\n\n    @Input()\n    @tuiDefaultProp()\n    describeId = '';\n\n    constructor(\n        @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,\n        @Inject(TUI_MODE) mode$: Observable<TuiBrightness | null>,\n        @Inject(TUI_HINT_OPTIONS) options: TuiHintOptions,\n        @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean,\n    ) {\n        super(options);\n\n        mode$.pipe(takeUntil(destroy$)).subscribe(mode => {\n            this.mode = mode;\n        });\n    }\n\n    @HostBinding('attr.data-appearance')\n    get computedAppearance(): string {\n        return this.appearance || this.mode || '';\n    }\n\n    @HostListener('mousedown', ['$event'])\n    @HostListener('click', ['$event'])\n    stopOnMobile(event: MouseEvent): void {\n        if (this.isMobile) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n\n        this.driver$?.toggle(true);\n    }\n}\n","<span\n    #driver=\"tuiHintHover\"\n    automation-id=\"tui-tooltip__icon\"\n    tuiWrapper\n    appearance=\"icon\"\n    class=\"t-tooltip-icon\"\n    [hover]=\"(driver | async) || null\"\n    [tuiHint]=\"content\"\n    [tuiHintDescribe]=\"describeId\"\n    [tuiHintDirection]=\"direction\"\n    [tuiHintShowDelay]=\"showDelay\"\n    [tuiHintHideDelay]=\"hideDelay\"\n    [tuiHintAppearance]=\"computedAppearance\"\n>\n    <tui-svg\n        *polymorpheusOutlet=\"icon as src\"\n        [src]=\"src\"\n    ></tui-svg>\n</span>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core/components/svg';\nimport {TuiHintModule} from '@taiga-ui/core/directives/hint';\nimport {TuiWrapperModule} from '@taiga-ui/core/directives/wrapper';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {TuiTooltipComponent} from './tooltip.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TuiWrapperModule,\n        TuiSvgModule,\n        TuiHintModule,\n        PolymorpheusModule,\n    ],\n    declarations: [TuiTooltipComponent],\n    exports: [TuiTooltipComponent],\n})\nexport class TuiTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -7,7 +7,7 @@ import * as i1$2 from '@taiga-ui/core/abstract';
 import { tuiAsRectAccessor, tuiAsVehicle, TuiDriver, tuiAsDriver, TuiRectAccessor, AbstractTuiDriverDirective, tuiAsPositionAccessor } from '@taiga-ui/core/abstract';
 import { tuiDropdownAnimation } from '@taiga-ui/core/animations';
 import { TuiPositionService } from '@taiga-ui/core/services';
-import { TUI_ANIMATION_OPTIONS, TUI_SELECTION_STREAM } from '@taiga-ui/core/tokens';
+import { TUI_ANIMATION_OPTIONS, TUI_VIEWPORT, TUI_SELECTION_STREAM } from '@taiga-ui/core/tokens';
 import { switchMap, delay, tap, share, takeUntil, map, distinctUntilChanged } from 'rxjs/operators';
 import { __decorate } from 'tslib';
 import { tuiCheckFixedPosition, tuiOverrideOptions, tuiGetWordRange } from '@taiga-ui/core/utils';
@@ -65,8 +65,8 @@ class TuiDropdownDirective {
         }
     }
 }
-TuiDropdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownDirective, deps: [{ token: ElementRef }, { token: PolymorpheusComponent }, { token: TuiDropdownPortalService }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: { content: ["tuiDropdown", "content"] }, providers: [
+TuiDropdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownDirective, deps: [{ token: ElementRef }, { token: PolymorpheusComponent }, { token: TuiDropdownPortalService }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: { content: ["tuiDropdown", "content"] }, providers: [
         tuiAsRectAccessor(TuiDropdownDirective),
         tuiAsVehicle(TuiDropdownDirective),
         {
@@ -81,7 +81,7 @@ __decorate([
 __decorate([
     tuiPure
 ], TuiDropdownDirective.prototype, "position", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]:not(ng-container)',
@@ -110,31 +110,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['tuiDropdown']
             }], position: [] } });
 
+/** Default values for hint options */
+const TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = {
+    showDelay: 200,
+    hideDelay: 500,
+};
+const TUI_DROPDOWN_HOVER_OPTIONS = new InjectionToken('[TUI_DROPDOWN_HOVER_OPTIONS] Default parameters for dropdown hover directive', {
+    factory: () => TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
+});
+const tuiDropdownHoverOptionsProvider = (options) => ({
+    provide: TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
+    useValue: Object.assign(Object.assign({}, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS), options),
+});
+
 class TuiDropdownHoverDirective extends TuiDriver {
-    constructor(hovered$) {
+    constructor(hovered$, options) {
         super(subscriber => this.stream$.subscribe(subscriber));
         this.hovered$ = hovered$;
+        this.options = options;
         this.toggle$ = new Subject();
         this.stream$ = merge(this.toggle$, this.hovered$).pipe(switchMap(visible => of(visible).pipe(delay(visible ? this.showDelay : this.hideDelay))), tap(visible => {
             this.hovered = visible;
         }), share());
-        this.showDelay = 200;
-        this.hideDelay = 500;
+        this.showDelay = this.options.showDelay;
+        this.hideDelay = this.options.hideDelay;
         this.hovered = false;
     }
     toggle(visible) {
         this.toggle$.next(visible);
     }
 }
-TuiDropdownHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownHoverDirective, deps: [{ token: TuiHoveredService }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownHoverDirective, selector: "[tuiDropdownHover]:not(ng-container)", inputs: { showDelay: ["tuiDropdownShowDelay", "showDelay"], hideDelay: ["tuiDropdownHideDelay", "hideDelay"] }, providers: [tuiAsDriver(TuiDropdownHoverDirective), TuiHoveredService], usesInheritance: true, ngImport: i0 });
+TuiDropdownHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownHoverDirective, deps: [{ token: TuiHoveredService }, { token: TUI_DROPDOWN_HOVER_OPTIONS }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownHoverDirective, selector: "[tuiDropdownHover]:not(ng-container)", inputs: { showDelay: ["tuiDropdownShowDelay", "showDelay"], hideDelay: ["tuiDropdownHideDelay", "hideDelay"] }, providers: [tuiAsDriver(TuiDropdownHoverDirective), TuiHoveredService], usesInheritance: true, ngImport: i0 });
 __decorate([
     tuiDefaultProp()
 ], TuiDropdownHoverDirective.prototype, "showDelay", void 0);
 __decorate([
     tuiDefaultProp()
 ], TuiDropdownHoverDirective.prototype, "hideDelay", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownHoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownHoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownHover]:not(ng-container)',
@@ -143,6 +157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i5.Observable, decorators: [{
                     type: Inject,
                     args: [TuiHoveredService]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DROPDOWN_HOVER_OPTIONS]
                 }] }]; }, propDecorators: { showDelay: [{
                 type: Input,
                 args: ['tuiDropdownShowDelay']
@@ -182,8 +199,8 @@ class TuiDropdownOptionsDirective {
         this.offset = this.options.offset;
     }
 }
-TuiDropdownOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownOptionsDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: { align: ["tuiDropdownAlign", "align"], direction: ["tuiDropdownDirection", "direction"], limitWidth: ["tuiDropdownLimitWidth", "limitWidth"], minHeight: ["tuiDropdownMinHeight", "minHeight"], maxHeight: ["tuiDropdownMaxHeight", "maxHeight"], offset: ["tuiDropdownOffset", "offset"] }, providers: [
+TuiDropdownOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownOptionsDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: { align: ["tuiDropdownAlign", "align"], direction: ["tuiDropdownDirection", "direction"], limitWidth: ["tuiDropdownLimitWidth", "limitWidth"], minHeight: ["tuiDropdownMinHeight", "minHeight"], maxHeight: ["tuiDropdownMaxHeight", "maxHeight"], offset: ["tuiDropdownOffset", "offset"] }, providers: [
         {
             provide: TUI_DROPDOWN_OPTIONS,
             useExisting: forwardRef(() => TuiDropdownOptionsDirective),
@@ -207,7 +224,7 @@ __decorate([
 __decorate([
     tuiDefaultProp()
 ], TuiDropdownOptionsDirective.prototype, "offset", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownOptionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownOptionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]',
@@ -325,9 +342,9 @@ class TuiDropdownComponent {
         focusable === null || focusable === void 0 ? void 0 : focusable.focus();
     }
 }
-TuiDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownComponent, deps: [{ token: TuiPositionService }, { token: TuiDestroyService, self: true }, { token: TuiDropdownDirective }, { token: ElementRef }, { token: AbstractTuiPortalHostComponent }, { token: TuiRectAccessor }, { token: WINDOW }, { token: TUI_ANIMATION_OPTIONS }, { token: TUI_DROPDOWN_OPTIONS }, { token: TuiDropdownHoverDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TuiDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownComponent, selector: "tui-dropdown", host: { properties: { "@tuiDropdownAnimation": "this.dropdownAnimation" } }, providers: [TuiDestroyService, TuiPositionService], ngImport: i0, template: "<div\n    #activeZone=\"tuiActiveZone\"\n    tuiActiveZone\n    tuiOverscroll=\"all\"\n    class=\"t-wrapper\"\n    [tuiMode]=\"null\"\n    (tuiHoveredChange)=\"onHoveredChange($event)\"\n>\n    <tui-scrollbar class=\"t-scroll\">\n        <div\n            tabindex=\"0\"\n            (focus)=\"onTopFocus()\"\n        ></div>\n        <div\n            *polymorpheusOutlet=\"directive.content as text; context: {$implicit: activeZone}\"\n            class=\"t-primitive\"\n        >\n            {{ text }}\n        </div>\n        <div\n            tabindex=\"0\"\n            (focus)=\"onBottomFocus()\"\n        ></div>\n    </tui-scrollbar>\n</div>\n", styles: [":host{position:relative;z-index:0;box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);position:absolute;display:flex;background-color:var(--tui-elevation-01);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-base-04);box-sizing:border-box;max-width:calc(100% - 8px)}:host.ng-animating{pointer-events:none}:host:not([style*=\"top\"]){visibility:hidden}.t-wrapper{flex-grow:1;max-width:100%;max-height:inherit;overflow:visible}.t-scroll{height:100%}.t-primitive{padding:1rem}\n"], components: [{ type: i1$1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }], directives: [{ type: i2.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i2.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }, { type: i3.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i2.TuiHoveredDirective, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [tuiDropdownAnimation], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownComponent, decorators: [{
+TuiDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownComponent, deps: [{ token: TuiPositionService }, { token: TuiDestroyService, self: true }, { token: TuiDropdownDirective }, { token: ElementRef }, { token: AbstractTuiPortalHostComponent }, { token: TuiRectAccessor }, { token: WINDOW }, { token: TUI_ANIMATION_OPTIONS }, { token: TUI_DROPDOWN_OPTIONS }, { token: TuiDropdownHoverDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TuiDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownComponent, selector: "tui-dropdown", host: { properties: { "@tuiDropdownAnimation": "this.dropdownAnimation" } }, providers: [TuiDestroyService, TuiPositionService], ngImport: i0, template: "<div\n    #activeZone=\"tuiActiveZone\"\n    tuiActiveZone\n    tuiOverscroll=\"all\"\n    class=\"t-wrapper\"\n    [tuiMode]=\"null\"\n    (tuiHoveredChange)=\"onHoveredChange($event)\"\n>\n    <tui-scrollbar class=\"t-scroll\">\n        <div\n            tabindex=\"0\"\n            (focus)=\"onTopFocus()\"\n        ></div>\n        <div\n            *polymorpheusOutlet=\"directive.content as text; context: {$implicit: activeZone}\"\n            class=\"t-primitive\"\n        >\n            {{ text }}\n        </div>\n        <div\n            tabindex=\"0\"\n            (focus)=\"onBottomFocus()\"\n        ></div>\n    </tui-scrollbar>\n</div>\n", styles: [":host{position:relative;z-index:0;box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);position:absolute;display:flex;background-color:var(--tui-elevation-01);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-base-04);box-sizing:border-box;max-width:calc(100% - 8px)}:host.ng-animating{pointer-events:none}:host:not([style*=\"top\"]){visibility:hidden}.t-wrapper{flex-grow:1;max-width:100%;max-height:inherit;overflow:visible}.t-scroll{height:100%}.t-primitive{padding:1rem}\n"], components: [{ type: i1$1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }], directives: [{ type: i2.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i2.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }, { type: i3.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i2.TuiHoveredDirective, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [tuiDropdownAnimation], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-dropdown',
@@ -399,8 +416,8 @@ class TuiDropdownContextDirective extends TuiDriver {
         return this.currentRect;
     }
 }
-TuiDropdownContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownContextDirective, deps: [{ token: TuiActiveZoneDirective }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownContextDirective, selector: "[tuiDropdown][tuiDropdownContext]", host: { listeners: { "contextmenu.prevent.stop": "onContextMenu($event.clientX,$event.clientY)", "document:click.silent": "closeDropdown($event.target)", "document:contextmenu.capture.silent": "closeDropdown($event.target)", "document:keydown.esc": "closeDropdown($event.currentTarget)" } }, providers: [
+TuiDropdownContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownContextDirective, deps: [{ token: TuiActiveZoneDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownContextDirective, selector: "[tuiDropdown][tuiDropdownContext]", host: { listeners: { "contextmenu.prevent.stop": "onContextMenu($event.clientX,$event.clientY)", "document:click.silent": "closeDropdown($event.target)", "document:contextmenu.capture.silent": "closeDropdown($event.target)", "document:keydown.esc": "closeDropdown($event.currentTarget)" } }, providers: [
         TuiActiveZoneDirective,
         tuiAsDriver(TuiDropdownContextDirective),
         tuiAsRectAccessor(TuiDropdownContextDirective),
@@ -408,7 +425,7 @@ TuiDropdownContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.
 __decorate([
     shouldCall(activeZoneFilter)
 ], TuiDropdownContextDirective.prototype, "closeDropdown", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown][tuiDropdownContext]',
@@ -437,9 +454,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiDropdownDriverDirective extends AbstractTuiDriverDirective {
 }
-TuiDropdownDriverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownDriverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownDriverDirective, selector: "[tuiDropdown]", providers: [TuiDestroyService], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
+TuiDropdownDriverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownDriverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownDriverDirective, selector: "[tuiDropdown]", providers: [TuiDestroyService], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]',
@@ -453,9 +470,9 @@ class TuiDropdownHostDirective extends TuiRectAccessor {
         return ((_a = this.tuiDropdownHost) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || EMPTY_CLIENT_RECT;
     }
 }
-TuiDropdownHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownHostDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownHostDirective, selector: "[tuiDropdown][tuiDropdownHost]", inputs: { tuiDropdownHost: "tuiDropdownHost" }, providers: [tuiAsRectAccessor(TuiDropdownHostDirective)], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownHostDirective, decorators: [{
+TuiDropdownHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownHostDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownHostDirective, selector: "[tuiDropdown][tuiDropdownHost]", inputs: { tuiDropdownHost: "tuiDropdownHost" }, providers: [tuiAsRectAccessor(TuiDropdownHostDirective)], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownHostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown][tuiDropdownHost]',
@@ -475,9 +492,9 @@ class TuiDropdownManualDirective extends TuiDriver {
         this.stream$.next(this.tuiDropdownManual);
     }
 }
-TuiDropdownManualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownManualDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownManualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: { tuiDropdownManual: "tuiDropdownManual" }, providers: [tuiAsDriver(TuiDropdownManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownManualDirective, decorators: [{
+TuiDropdownManualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownManualDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownManualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: { tuiDropdownManual: "tuiDropdownManual" }, providers: [tuiAsDriver(TuiDropdownManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownManualDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown][tuiDropdownManual]',
@@ -488,26 +505,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class TuiDropdownPositionDirective {
-    constructor(options, windowRef, accessor) {
+    constructor(options, viewport, accessor) {
         this.options = options;
-        this.windowRef = windowRef;
+        this.viewport = viewport;
         this.accessor = accessor;
     }
     getPosition({ width, height }) {
         const hostRect = this.accessor.getClientRect();
-        const { innerHeight, innerWidth } = this.windowRef;
+        const viewport = this.viewport.getClientRect();
         const { minHeight, align, direction, offset } = this.options;
         const previous = this.previous || direction || 'bottom';
         const right = Math.max(hostRect.right - width, offset);
         const available = {
-            top: hostRect.top - 2 * offset,
-            bottom: innerHeight - hostRect.bottom - 2 * offset,
+            top: hostRect.top - 2 * offset - viewport.top,
+            bottom: viewport.bottom - hostRect.bottom - 2 * offset,
         };
         const position = {
             top: hostRect.top - offset - height,
             bottom: hostRect.bottom + offset,
             right,
-            left: hostRect.left + width < innerWidth - offset ? hostRect.left : right,
+            left: hostRect.left + width < viewport.right - offset ? hostRect.left : right,
         };
         const better = available.top > available.bottom ? 'top' : 'bottom';
         if ((available[previous] > minHeight && direction) ||
@@ -518,9 +535,9 @@ class TuiDropdownPositionDirective {
         return [position[better], position[align]];
     }
 }
-TuiDropdownPositionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownPositionDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: WINDOW }, { token: TuiRectAccessor }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownPositionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])", providers: [tuiAsPositionAccessor(TuiDropdownPositionDirective)], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownPositionDirective, decorators: [{
+TuiDropdownPositionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownPositionDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: TUI_VIEWPORT }, { token: TuiRectAccessor }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownPositionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])", providers: [tuiAsPositionAccessor(TuiDropdownPositionDirective)], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownPositionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])',
@@ -529,18 +546,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [TUI_DROPDOWN_OPTIONS]
-                }] }, { type: Window, decorators: [{
+                }] }, { type: i1$2.TuiRectAccessor, decorators: [{
                     type: Inject,
-                    args: [WINDOW]
+                    args: [TUI_VIEWPORT]
                 }] }, { type: i1$2.TuiRectAccessor, decorators: [{
                     type: Inject,
                     args: [TuiRectAccessor]
                 }] }]; } });
 
 class TuiDropdownPositionSidedDirective {
-    constructor(options, windowRef, accessor, vertical) {
+    constructor(options, viewport, accessor, vertical) {
         this.options = options;
-        this.windowRef = windowRef;
+        this.viewport = viewport;
         this.accessor = accessor;
         this.vertical = vertical;
         this.previous = this.options.direction || 'bottom';
@@ -553,13 +570,13 @@ class TuiDropdownPositionSidedDirective {
         }
         const { height, width } = rect;
         const hostRect = this.accessor.getClientRect();
-        const { innerHeight, innerWidth } = this.windowRef;
+        const viewport = this.viewport.getClientRect();
         const { align, direction, minHeight, offset } = this.options;
         const available = {
-            top: hostRect.bottom,
-            left: hostRect.left - offset,
-            right: innerWidth - hostRect.right - offset,
-            bottom: innerHeight - hostRect.top,
+            top: hostRect.bottom - viewport.top,
+            left: hostRect.left - offset - viewport.left,
+            right: viewport.right - hostRect.right - offset,
+            bottom: viewport.bottom - hostRect.top,
         };
         const position = {
             top: hostRect.bottom - height + this.tuiDropdownSidedOffset + 1,
@@ -578,12 +595,12 @@ class TuiDropdownPositionSidedDirective {
         return [position[better], left];
     }
 }
-TuiDropdownPositionSidedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownPositionSidedDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: WINDOW }, { token: TuiRectAccessor }, { token: TuiDropdownPositionDirective }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownPositionSidedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownPositionSidedDirective, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: "tuiDropdownSided", tuiDropdownSidedOffset: "tuiDropdownSidedOffset" }, providers: [
+TuiDropdownPositionSidedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownPositionSidedDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: TUI_VIEWPORT }, { token: TuiRectAccessor }, { token: TuiDropdownPositionDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownPositionSidedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownPositionSidedDirective, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: "tuiDropdownSided", tuiDropdownSidedOffset: "tuiDropdownSidedOffset" }, providers: [
         TuiDropdownPositionDirective,
         tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownPositionSidedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownPositionSidedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownSided]',
@@ -595,9 +612,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [TUI_DROPDOWN_OPTIONS]
-                }] }, { type: Window, decorators: [{
+                }] }, { type: i1$2.TuiRectAccessor, decorators: [{
                     type: Inject,
-                    args: [WINDOW]
+                    args: [TUI_VIEWPORT]
                 }] }, { type: i1$2.TuiRectAccessor, decorators: [{
                     type: Inject,
                     args: [TuiRectAccessor]
@@ -722,15 +739,15 @@ class TuiDropdownSelectionDirective extends TuiDriver {
         return ghost;
     }
 }
-TuiDropdownSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownSelectionDirective, deps: [{ token: TUI_RANGE }, { token: DOCUMENT }, { token: TUI_SELECTION_STREAM }, { token: ElementRef }, { token: ViewContainerRef }, { token: TuiDropdownDirective }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownSelectionDirective, selector: "[tuiDropdown][tuiDropdownSelection]", inputs: { position: ["tuiDropdownSelectionPosition", "position"], tuiDropdownSelection: "tuiDropdownSelection" }, providers: [
+TuiDropdownSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownSelectionDirective, deps: [{ token: TUI_RANGE }, { token: DOCUMENT }, { token: TUI_SELECTION_STREAM }, { token: ElementRef }, { token: ViewContainerRef }, { token: TuiDropdownDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownSelectionDirective, selector: "[tuiDropdown][tuiDropdownSelection]", inputs: { position: ["tuiDropdownSelectionPosition", "position"], tuiDropdownSelection: "tuiDropdownSelection" }, providers: [
         tuiAsDriver(TuiDropdownSelectionDirective),
         tuiAsRectAccessor(TuiDropdownSelectionDirective),
     ], usesInheritance: true, ngImport: i0 });
 __decorate([
     tuiDefaultProp()
 ], TuiDropdownSelectionDirective.prototype, "position", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownSelectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown][tuiDropdownSelection]',
@@ -766,8 +783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiDropdownModule {
 }
-TuiDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownModule, declarations: [TuiDropdownDirective,
+TuiDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownModule, declarations: [TuiDropdownDirective,
         TuiDropdownComponent,
         TuiDropdownOptionsDirective,
         TuiDropdownHostDirective,
@@ -793,7 +810,7 @@ TuiDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         TuiDropdownPositionDirective,
         TuiDropdownPositionSidedDirective,
         TuiDropdownSelectionDirective] });
-TuiDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownModule, imports: [[
+TuiDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownModule, imports: [[
             PolymorpheusModule,
             TuiActiveZoneModule,
             TuiOverscrollModule,
@@ -801,7 +818,7 @@ TuiDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             TuiModeModule,
             TuiHoveredModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -845,5 +862,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdownComponent, TuiDropdownContextDirective, TuiDropdownDirective, TuiDropdownDriverDirective, TuiDropdownHostDirective, TuiDropdownHoverDirective, TuiDropdownManualDirective, TuiDropdownModule, TuiDropdownOptionsDirective, TuiDropdownPositionDirective, TuiDropdownPositionSidedDirective, TuiDropdownSelectionDirective, tuiDropdownOptionsProvider };
+export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdownComponent, TuiDropdownContextDirective, TuiDropdownDirective, TuiDropdownDriverDirective, TuiDropdownHostDirective, TuiDropdownHoverDirective, TuiDropdownManualDirective, TuiDropdownModule, TuiDropdownOptionsDirective, TuiDropdownPositionDirective, TuiDropdownPositionSidedDirective, TuiDropdownSelectionDirective, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-directives-dropdown.js.map