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

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

@@ -4,16 +4,16 @@ import { WINDOW } from '@ng-web-apis/common';
 import * as i2 from '@taiga-ui/cdk';
 import { TuiDropdownPortalService, tuiDefaultProp, tuiPure, TuiHoveredService, tuiPx, tuiGetClosestFocusable, TuiDestroyService, AbstractTuiPortalHostComponent, EMPTY_CLIENT_RECT, tuiPointToClientRect, TuiActiveZoneDirective, ALWAYS_TRUE_HANDLER, tuiIsTextNode, tuiIsString, tuiIsElement, tuiGetNativeFocused, tuiIsTextfield, CHAR_ZERO_WIDTH_SPACE, CHAR_NO_BREAK_SPACE, TUI_RANGE, TuiActiveZoneModule, TuiOverscrollModule, TuiHoveredModule } from '@taiga-ui/cdk';
 import * as i1$2 from '@taiga-ui/core/abstract';
-import { tuiAsRectAccessor, tuiAsVehicle, TuiDriver, tuiAsDriver, TuiRectAccessor, AbstractTuiDriverDirective, tuiAsPositionAccessor } from '@taiga-ui/core/abstract';
+import { tuiAsRectAccessor, tuiAsVehicle, TuiDriver, tuiAsDriver, TuiRectAccessor, tuiPositionAccessorFor, tuiRectAccessorFor, AbstractTuiDriverDirective, TuiVehicle, TuiPositionAccessor, tuiFallbackRectAccessor, tuiAsPositionAccessor } from '@taiga-ui/core/abstract';
 import { tuiDropdownAnimation } from '@taiga-ui/core/animations';
 import { TuiPositionService } from '@taiga-ui/core/services';
 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';
-import * as i1 from '@tinkoff/ng-polymorpheus';
+import * as i4 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
-import * as i5 from 'rxjs';
+import * as i1 from 'rxjs';
 import { Subject, merge, of, BehaviorSubject, combineLatest } from 'rxjs';
 import * as i1$1 from '@taiga-ui/core/components/scrollbar';
 import { TuiScrollbarModule } from '@taiga-ui/core/components/scrollbar';
@@ -27,12 +27,15 @@ const TUI_DROPDOWN_COMPONENT = new InjectionToken(`[TUI_DROPDOWN_COMPONENT] A co
 });
 
 class TuiDropdownDirective {
-    constructor(elementRef, component, dropdownService) {
+    constructor(elementRef, hapica, injector, dropdownService) {
         this.elementRef = elementRef;
-        this.component = component;
+        this.hapica = hapica;
+        this.injector = injector;
         this.dropdownService = dropdownService;
         this.content = '';
         this.dropdownBoxRef = null;
+        this.type = 'dropdown';
+        this.component = new PolymorpheusComponent(this.hapica, this.injector);
     }
     get position() {
         return tuiCheckFixedPosition(this.elementRef.nativeElement)
@@ -65,15 +68,10 @@ 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: TUI_DROPDOWN_COMPONENT }, { token: INJECTOR }, { 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),
-        {
-            provide: PolymorpheusComponent,
-            deps: [TUI_DROPDOWN_COMPONENT, INJECTOR],
-            useClass: PolymorpheusComponent,
-        },
     ], exportAs: ["tuiDropdown"], usesOnChanges: true, ngImport: i0 });
 __decorate([
     tuiDefaultProp()
@@ -81,7 +79,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)',
@@ -89,19 +87,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [
                         tuiAsRectAccessor(TuiDropdownDirective),
                         tuiAsVehicle(TuiDropdownDirective),
-                        {
-                            provide: PolymorpheusComponent,
-                            deps: [TUI_DROPDOWN_COMPONENT, INJECTOR],
-                            useClass: PolymorpheusComponent,
-                        },
                     ],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
                     type: Inject,
                     args: [ElementRef]
-                }] }, { type: i1.PolymorpheusComponent, decorators: [{
+                }] }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [TUI_DROPDOWN_COMPONENT]
+                }] }, { type: i0.Injector, decorators: [{
                     type: Inject,
-                    args: [PolymorpheusComponent]
+                    args: [INJECTOR]
                 }] }, { type: i2.TuiDropdownPortalService, decorators: [{
                     type: Inject,
                     args: [TuiDropdownPortalService]
@@ -135,26 +131,27 @@ class TuiDropdownHoverDirective extends TuiDriver {
         this.showDelay = this.options.showDelay;
         this.hideDelay = this.options.hideDelay;
         this.hovered = false;
+        this.type = 'dropdown';
     }
     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 }, { token: TUI_DROPDOWN_HOVER_OPTIONS }], 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)',
                     providers: [tuiAsDriver(TuiDropdownHoverDirective), TuiHoveredService],
                 }]
-        }], ctorParameters: function () { return [{ type: i5.Observable, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.Observable, decorators: [{
                     type: Inject,
                     args: [TuiHoveredService]
                 }] }, { type: undefined, decorators: [{
@@ -199,8 +196,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),
@@ -224,7 +221,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]',
@@ -332,34 +329,44 @@ class TuiDropdownComponent {
         }
     }
     moveFocusOutside(previous) {
-        const host = document.createElement('div');
-        const { ownerDocument } = host;
-        const root = ownerDocument ? ownerDocument.body : host;
-        let focusable = tuiGetClosestFocusable({ initial: host, root, previous });
-        while (focusable !== null && host.contains(focusable)) {
+        const { nativeElement } = this.directive.elementRef;
+        const { ownerDocument } = nativeElement;
+        const root = ownerDocument ? ownerDocument.body : nativeElement;
+        let focusable = tuiGetClosestFocusable({ initial: nativeElement, root, previous });
+        while (focusable !== null && nativeElement.contains(focusable)) {
             focusable = tuiGetClosestFocusable({ initial: focusable, root, previous });
         }
         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,
+        tuiPositionAccessorFor('dropdown'),
+        tuiRectAccessorFor('dropdown', TuiDropdownDirective),
+    ], 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: i4.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',
                     templateUrl: './dropdown.template.html',
                     styleUrls: ['./dropdown.style.less'],
-                    providers: [TuiDestroyService, TuiPositionService],
+                    providers: [
+                        TuiDestroyService,
+                        TuiPositionService,
+                        tuiPositionAccessorFor('dropdown'),
+                        tuiRectAccessorFor('dropdown', TuiDropdownDirective),
+                    ],
                     animations: [tuiDropdownAnimation],
                     // @bad TODO: OnPush
                     // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
                     changeDetection: ChangeDetectionStrategy.Default,
                 }]
-        }], ctorParameters: function () { return [{ type: i5.Observable, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.Observable, decorators: [{
                     type: Inject,
                     args: [TuiPositionService]
-                }] }, { type: i5.Observable, decorators: [{
+                }] }, { type: i1.Observable, decorators: [{
                     type: Self
                 }, {
                     type: Inject,
@@ -404,6 +411,7 @@ class TuiDropdownContextDirective extends TuiDriver {
         this.activeZone = activeZone;
         this.stream$ = new Subject();
         this.currentRect = EMPTY_CLIENT_RECT;
+        this.type = 'dropdown';
     }
     onContextMenu(x, y) {
         this.currentRect = tuiPointToClientRect(x, y);
@@ -416,8 +424,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),
@@ -425,7 +433,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]',
@@ -453,26 +461,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class TuiDropdownDriverDirective extends AbstractTuiDriverDirective {
+    // TODO: Figure out why this is necessary under nx test runner
+    constructor(destroy$, drivers, vehicles) {
+        super(destroy$, drivers, vehicles);
+        this.type = 'dropdown';
+    }
 }
-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: [{ token: TuiDestroyService, self: true }, { token: TuiDriver }, { token: TuiVehicle }], 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]',
                     providers: [TuiDestroyService],
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.Observable, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TuiDriver]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TuiVehicle]
+                }] }]; } });
 
 class TuiDropdownHostDirective extends TuiRectAccessor {
+    constructor() {
+        super(...arguments);
+        this.type = 'dropdown';
+    }
     getClientRect() {
         var _a;
         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]',
@@ -485,16 +513,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class TuiDropdownManualDirective extends TuiDriver {
     constructor() {
         super(subscriber => this.stream$.subscribe(subscriber));
-        this.stream$ = new Subject();
+        this.stream$ = new BehaviorSubject(false);
         this.tuiDropdownManual = false;
+        this.type = 'dropdown';
     }
     ngOnChanges() {
         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]',
@@ -504,14 +533,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-class TuiDropdownPositionDirective {
-    constructor(options, viewport, accessor) {
+class TuiDropdownPositionDirective extends TuiPositionAccessor {
+    constructor(options, viewport, accessors, directive) {
+        super();
         this.options = options;
         this.viewport = viewport;
-        this.accessor = accessor;
+        this.accessors = accessors;
+        this.directive = directive;
+        this.type = 'dropdown';
     }
     getPosition({ width, height }) {
-        const hostRect = this.accessor.getClientRect();
+        var _a, _b;
+        const hostRect = (_b = (_a = this.accessor) === null || _a === void 0 ? void 0 : _a.getClientRect()) !== null && _b !== void 0 ? _b : EMPTY_CLIENT_RECT;
         const viewport = this.viewport.getClientRect();
         const { minHeight, align, direction, offset } = this.options;
         const previous = this.previous || direction || 'bottom';
@@ -534,10 +567,16 @@ class TuiDropdownPositionDirective {
         this.previous = better;
         return [position[better], position[align]];
     }
+    get accessor() {
+        return tuiFallbackRectAccessor('dropdown')(this.accessors, this.directive);
+    }
 }
-TuiDropdownPositionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.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 }, { token: TuiDropdownDirective }], 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)], usesInheritance: true, ngImport: i0 });
+__decorate([
+    tuiPure
+], TuiDropdownPositionDirective.prototype, "accessor", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownPositionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])',
@@ -549,27 +588,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }] }, { type: i1$2.TuiRectAccessor, decorators: [{
                     type: Inject,
                     args: [TUI_VIEWPORT]
-                }] }, { type: i1$2.TuiRectAccessor, decorators: [{
+                }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TuiRectAccessor]
-                }] }]; } });
+                }] }, { type: TuiDropdownDirective, decorators: [{
+                    type: Inject,
+                    args: [TuiDropdownDirective]
+                }] }]; }, propDecorators: { accessor: [] } });
 
-class TuiDropdownPositionSidedDirective {
-    constructor(options, viewport, accessor, vertical) {
+class TuiDropdownPositionSidedDirective extends TuiPositionAccessor {
+    constructor(options, viewport, vertical) {
+        super();
         this.options = options;
         this.viewport = viewport;
-        this.accessor = accessor;
         this.vertical = vertical;
         this.previous = this.options.direction || 'bottom';
         this.tuiDropdownSided = '';
         this.tuiDropdownSidedOffset = 4;
+        this.type = 'dropdown';
     }
     getPosition(rect) {
+        var _a, _b;
         if (this.tuiDropdownSided === false) {
             return this.vertical.getPosition(rect);
         }
         const { height, width } = rect;
-        const hostRect = this.accessor.getClientRect();
+        const hostRect = (_b = (_a = this.vertical.accessor) === null || _a === void 0 ? void 0 : _a.getClientRect()) !== null && _b !== void 0 ? _b : EMPTY_CLIENT_RECT;
         const viewport = this.viewport.getClientRect();
         const { align, direction, minHeight, offset } = this.options;
         const available = {
@@ -595,12 +639,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: TUI_VIEWPORT }, { 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: 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: [{
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownPositionSidedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownSided]',
@@ -615,10 +659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }] }, { type: i1$2.TuiRectAccessor, decorators: [{
                     type: Inject,
                     args: [TUI_VIEWPORT]
-                }] }, { type: i1$2.TuiRectAccessor, decorators: [{
-                    type: Inject,
-                    args: [TuiRectAccessor]
-                }] }, { type: i1$2.TuiPositionAccessor, decorators: [{
+                }] }, { type: TuiDropdownPositionDirective, decorators: [{
                     type: Inject,
                     args: [TuiDropdownPositionDirective]
                 }] }]; }, propDecorators: { tuiDropdownSided: [{
@@ -649,6 +690,7 @@ class TuiDropdownSelectionDirective extends TuiDriver {
             return (contained && handler(this.range)) || this.inDropdown(range);
         }));
         this.position = 'selection';
+        this.type = 'dropdown';
     }
     set tuiDropdownSelection(visible) {
         if (!tuiIsString(visible)) {
@@ -739,15 +781,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]',
@@ -762,7 +804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i5.Observable, decorators: [{
+                }] }, { type: i1.Observable, decorators: [{
                     type: Inject,
                     args: [TUI_SELECTION_STREAM]
                 }] }, { type: i0.ElementRef, decorators: [{
@@ -783,8 +825,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,
@@ -810,7 +852,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,
@@ -818,7 +860,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: [