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

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-web-apis/common'), require('@taiga-ui/cdk'), require('@taiga-ui/core/abstract'), require('@taiga-ui/core/animations'), require('@taiga-ui/core/services'), require('@taiga-ui/core/tokens'), require('rxjs/operators'), require('@taiga-ui/core/utils'), require('@tinkoff/ng-polymorpheus'), require('rxjs'), require('@taiga-ui/core/components/scrollbar'), require('@taiga-ui/core/directives/mode'), require('@tinkoff/ng-event-plugins'), require('@angular/common')) :
     typeof define === 'function' && define.amd ? define('@taiga-ui/core/directives/dropdown', ['exports', '@angular/core', '@ng-web-apis/common', '@taiga-ui/cdk', '@taiga-ui/core/abstract', '@taiga-ui/core/animations', '@taiga-ui/core/services', '@taiga-ui/core/tokens', 'rxjs/operators', '@taiga-ui/core/utils', '@tinkoff/ng-polymorpheus', 'rxjs', '@taiga-ui/core/components/scrollbar', '@taiga-ui/core/directives/mode', '@tinkoff/ng-event-plugins', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].core = global["taiga-ui"].core || {}, global["taiga-ui"].core.directives = global["taiga-ui"].core.directives || {}, global["taiga-ui"].core.directives.dropdown = {}), global.ng.core, global.common, global.i2, global["taiga-ui"].core.abstract, global["taiga-ui"].core.animations, global["taiga-ui"].core.services, global["taiga-ui"].core.tokens, global.rxjs.operators, global["taiga-ui"].core.utils, global.i1, global.rxjs, global["taiga-ui"].core.components.scrollbar, global["taiga-ui"].core.directives.mode, global.ngEventPlugins, global.ng.common));
-})(this, (function (exports, i0, common, i2, i1$1, animations, services, tokens, operators, utils, i1, i5, i1$2, i3, ngEventPlugins, common$1) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].core = global["taiga-ui"].core || {}, global["taiga-ui"].core.directives = global["taiga-ui"].core.directives || {}, global["taiga-ui"].core.directives.dropdown = {}), global.ng.core, global.common, global.i2, global["taiga-ui"].core.abstract, global["taiga-ui"].core.animations, global["taiga-ui"].core.services, global["taiga-ui"].core.tokens, global.rxjs.operators, global["taiga-ui"].core.utils, global.i4, global.rxjs, global["taiga-ui"].core.components.scrollbar, global["taiga-ui"].core.directives.mode, global.ngEventPlugins, global.ng.common));
+})(this, (function (exports, i0, common, i2, i1, animations, services, tokens, operators, utils, i4, i1$1, i1$2, i3, ngEventPlugins, common$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,9 +24,9 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
 
@@ -353,12 +353,15 @@
     });
 
     var TuiDropdownDirective = /** @class */ (function () {
-        function TuiDropdownDirective(elementRef, component, dropdownService) {
+        function TuiDropdownDirective(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 i4.PolymorpheusComponent(this.hapica, this.injector);
         }
         Object.defineProperty(TuiDropdownDirective.prototype, "position", {
             get: function () {
@@ -396,15 +399,10 @@
         };
         return TuiDropdownDirective;
     }());
-    TuiDropdownDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownDirective, deps: [{ token: i0.ElementRef }, { token: i1.PolymorpheusComponent }, { token: i2.TuiDropdownPortalService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDropdownDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownDirective, deps: [{ token: i0.ElementRef }, { token: TUI_DROPDOWN_COMPONENT }, { token: i0.INJECTOR }, { token: i2.TuiDropdownPortalService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: { content: ["tuiDropdown", "content"] }, providers: [
-            i1$1.tuiAsRectAccessor(TuiDropdownDirective),
-            i1$1.tuiAsVehicle(TuiDropdownDirective),
-            {
-                provide: i1.PolymorpheusComponent,
-                deps: [TUI_DROPDOWN_COMPONENT, i0.INJECTOR],
-                useClass: i1.PolymorpheusComponent,
-            },
+            i1.tuiAsRectAccessor(TuiDropdownDirective),
+            i1.tuiAsVehicle(TuiDropdownDirective),
         ], exportAs: ["tuiDropdown"], usesOnChanges: true, ngImport: i0__namespace });
     __decorate([
         i2.tuiDefaultProp()
@@ -418,22 +416,20 @@
                         selector: '[tuiDropdown]:not(ng-container)',
                         exportAs: 'tuiDropdown',
                         providers: [
-                            i1$1.tuiAsRectAccessor(TuiDropdownDirective),
-                            i1$1.tuiAsVehicle(TuiDropdownDirective),
-                            {
-                                provide: i1.PolymorpheusComponent,
-                                deps: [TUI_DROPDOWN_COMPONENT, i0.INJECTOR],
-                                useClass: i1.PolymorpheusComponent,
-                            },
+                            i1.tuiAsRectAccessor(TuiDropdownDirective),
+                            i1.tuiAsVehicle(TuiDropdownDirective),
                         ],
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ElementRef]
-                        }] }, { type: i1__namespace.PolymorpheusComponent, decorators: [{
+                        }] }, { type: i0__namespace.Type, decorators: [{
                             type: i0.Inject,
-                            args: [i1.PolymorpheusComponent]
+                            args: [TUI_DROPDOWN_COMPONENT]
+                        }] }, { type: i0__namespace.Injector, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.INJECTOR]
                         }] }, { type: i2__namespace.TuiDropdownPortalService, decorators: [{
                             type: i0.Inject,
                             args: [i2.TuiDropdownPortalService]
@@ -462,22 +458,23 @@
             var _this = _super.call(this, function (subscriber) { return _this.stream$.subscribe(subscriber); }) || this;
             _this.hovered$ = hovered$;
             _this.options = options;
-            _this.toggle$ = new i5.Subject();
-            _this.stream$ = i5.merge(_this.toggle$, _this.hovered$).pipe(operators.switchMap(function (visible) { return i5.of(visible).pipe(operators.delay(visible ? _this.showDelay : _this.hideDelay)); }), operators.tap(function (visible) {
+            _this.toggle$ = new i1$1.Subject();
+            _this.stream$ = i1$1.merge(_this.toggle$, _this.hovered$).pipe(operators.switchMap(function (visible) { return i1$1.of(visible).pipe(operators.delay(visible ? _this.showDelay : _this.hideDelay)); }), operators.tap(function (visible) {
                 _this.hovered = visible;
             }), operators.share());
             _this.showDelay = _this.options.showDelay;
             _this.hideDelay = _this.options.hideDelay;
             _this.hovered = false;
+            _this.type = 'dropdown';
             return _this;
         }
         TuiDropdownHoverDirective.prototype.toggle = function (visible) {
             this.toggle$.next(visible);
         };
         return TuiDropdownHoverDirective;
-    }(i1$1.TuiDriver));
+    }(i1.TuiDriver));
     TuiDropdownHoverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownHoverDirective, deps: [{ token: i2.TuiHoveredService }, { token: TUI_DROPDOWN_HOVER_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiDropdownHoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownHoverDirective, selector: "[tuiDropdownHover]:not(ng-container)", inputs: { showDelay: ["tuiDropdownShowDelay", "showDelay"], hideDelay: ["tuiDropdownHideDelay", "hideDelay"] }, providers: [i1$1.tuiAsDriver(TuiDropdownHoverDirective), i2.TuiHoveredService], usesInheritance: true, ngImport: i0__namespace });
+    TuiDropdownHoverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownHoverDirective, selector: "[tuiDropdownHover]:not(ng-container)", inputs: { showDelay: ["tuiDropdownShowDelay", "showDelay"], hideDelay: ["tuiDropdownHideDelay", "hideDelay"] }, providers: [i1.tuiAsDriver(TuiDropdownHoverDirective), i2.TuiHoveredService], usesInheritance: true, ngImport: i0__namespace });
     __decorate([
         i2.tuiDefaultProp()
     ], TuiDropdownHoverDirective.prototype, "showDelay", void 0);
@@ -488,10 +485,10 @@
                 type: i0.Directive,
                 args: [{
                         selector: '[tuiDropdownHover]:not(ng-container)',
-                        providers: [i1$1.tuiAsDriver(TuiDropdownHoverDirective), i2.TuiHoveredService],
+                        providers: [i1.tuiAsDriver(TuiDropdownHoverDirective), i2.TuiHoveredService],
                     }]
             }], ctorParameters: function () {
-            return [{ type: i5__namespace.Observable, decorators: [{
+            return [{ type: i1__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [i2.TuiHoveredService]
                         }] }, { type: undefined, decorators: [{
@@ -675,36 +672,46 @@
             }
         };
         TuiDropdownComponent.prototype.moveFocusOutside = function (previous) {
-            var host = document.createElement('div');
-            var ownerDocument = host.ownerDocument;
-            var root = ownerDocument ? ownerDocument.body : host;
-            var focusable = i2.tuiGetClosestFocusable({ initial: host, root: root, previous: previous });
-            while (focusable !== null && host.contains(focusable)) {
+            var nativeElement = this.directive.elementRef.nativeElement;
+            var ownerDocument = nativeElement.ownerDocument;
+            var root = ownerDocument ? ownerDocument.body : nativeElement;
+            var focusable = i2.tuiGetClosestFocusable({ initial: nativeElement, root: root, previous: previous });
+            while (focusable !== null && nativeElement.contains(focusable)) {
                 focusable = i2.tuiGetClosestFocusable({ initial: focusable, root: root, previous: previous });
             }
             focusable === null || focusable === void 0 ? void 0 : focusable.focus();
         };
         return TuiDropdownComponent;
     }());
-    TuiDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownComponent, deps: [{ token: services.TuiPositionService }, { token: i2.TuiDestroyService, self: true }, { token: TuiDropdownDirective }, { token: i0.ElementRef }, { token: i2.AbstractTuiPortalHostComponent }, { token: i1$1.TuiRectAccessor }, { token: common.WINDOW }, { token: tokens.TUI_ANIMATION_OPTIONS }, { token: TUI_DROPDOWN_OPTIONS }, { token: TuiDropdownHoverDirective, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownComponent, selector: "tui-dropdown", host: { properties: { "@tuiDropdownAnimation": "this.dropdownAnimation" } }, providers: [i2.TuiDestroyService, services.TuiPositionService], ngImport: i0__namespace, 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__namespace$1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }], directives: [{ type: i2__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i2__namespace.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }, { type: i3__namespace.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i2__namespace.TuiHoveredDirective, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { type: i1__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [animations.tuiDropdownAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
+    TuiDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownComponent, deps: [{ token: services.TuiPositionService }, { token: i2.TuiDestroyService, self: true }, { token: TuiDropdownDirective }, { token: i0.ElementRef }, { token: i2.AbstractTuiPortalHostComponent }, { token: i1.TuiRectAccessor }, { token: common.WINDOW }, { token: tokens.TUI_ANIMATION_OPTIONS }, { token: TUI_DROPDOWN_OPTIONS }, { token: TuiDropdownHoverDirective, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownComponent, selector: "tui-dropdown", host: { properties: { "@tuiDropdownAnimation": "this.dropdownAnimation" } }, providers: [
+            i2.TuiDestroyService,
+            services.TuiPositionService,
+            i1.tuiPositionAccessorFor('dropdown'),
+            i1.tuiRectAccessorFor('dropdown', TuiDropdownDirective),
+        ], ngImport: i0__namespace, 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__namespace$1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }], directives: [{ type: i2__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i2__namespace.TuiOverscrollDirective, selector: "[tuiOverscroll]", inputs: ["tuiOverscroll"] }, { type: i3__namespace.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i2__namespace.TuiHoveredDirective, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { type: i4__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [animations.tuiDropdownAnimation], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-dropdown',
                         templateUrl: './dropdown.template.html',
                         styleUrls: ['./dropdown.style.less'],
-                        providers: [i2.TuiDestroyService, services.TuiPositionService],
+                        providers: [
+                            i2.TuiDestroyService,
+                            services.TuiPositionService,
+                            i1.tuiPositionAccessorFor('dropdown'),
+                            i1.tuiRectAccessorFor('dropdown', TuiDropdownDirective),
+                        ],
                         animations: [animations.tuiDropdownAnimation],
                         // @bad TODO: OnPush
                         // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
                         changeDetection: i0.ChangeDetectionStrategy.Default,
                     }]
             }], ctorParameters: function () {
-            return [{ type: i5__namespace.Observable, decorators: [{
+            return [{ type: i1__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [services.TuiPositionService]
-                        }] }, { type: i5__namespace.Observable, decorators: [{
+                        }] }, { type: i1__namespace.Observable, decorators: [{
                             type: i0.Self
                         }, {
                             type: i0.Inject,
@@ -720,7 +727,7 @@
                             args: [i2.AbstractTuiPortalHostComponent]
                         }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
-                            args: [i1$1.TuiRectAccessor]
+                            args: [i1.TuiRectAccessor]
                         }] }, { type: Window, decorators: [{
                             type: i0.Inject,
                             args: [common.WINDOW]
@@ -749,8 +756,9 @@
         function TuiDropdownContextDirective(activeZone) {
             var _this = _super.call(this, function (subscriber) { return _this.stream$.subscribe(subscriber); }) || this;
             _this.activeZone = activeZone;
-            _this.stream$ = new i5.Subject();
+            _this.stream$ = new i1$1.Subject();
             _this.currentRect = i2.EMPTY_CLIENT_RECT;
+            _this.type = 'dropdown';
             return _this;
         }
         TuiDropdownContextDirective.prototype.onContextMenu = function (x, y) {
@@ -764,12 +772,12 @@
             return this.currentRect;
         };
         return TuiDropdownContextDirective;
-    }(i1$1.TuiDriver));
+    }(i1.TuiDriver));
     TuiDropdownContextDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownContextDirective, deps: [{ token: i2.TuiActiveZoneDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownContextDirective.ɵdir = i0__namespace.ɵɵ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: [
             i2.TuiActiveZoneDirective,
-            i1$1.tuiAsDriver(TuiDropdownContextDirective),
-            i1$1.tuiAsRectAccessor(TuiDropdownContextDirective),
+            i1.tuiAsDriver(TuiDropdownContextDirective),
+            i1.tuiAsRectAccessor(TuiDropdownContextDirective),
         ], usesInheritance: true, ngImport: i0__namespace });
     __decorate([
         ngEventPlugins.shouldCall(activeZoneFilter)
@@ -780,8 +788,8 @@
                         selector: '[tuiDropdown][tuiDropdownContext]',
                         providers: [
                             i2.TuiActiveZoneDirective,
-                            i1$1.tuiAsDriver(TuiDropdownContextDirective),
-                            i1$1.tuiAsRectAccessor(TuiDropdownContextDirective),
+                            i1.tuiAsDriver(TuiDropdownContextDirective),
+                            i1.tuiAsRectAccessor(TuiDropdownContextDirective),
                         ],
                     }]
             }], ctorParameters: function () {
@@ -805,12 +813,15 @@
 
     var TuiDropdownDriverDirective = /** @class */ (function (_super) {
         __extends(TuiDropdownDriverDirective, _super);
-        function TuiDropdownDriverDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        // TODO: Figure out why this is necessary under nx test runner
+        function TuiDropdownDriverDirective(destroy$, drivers, vehicles) {
+            var _this = _super.call(this, destroy$, drivers, vehicles) || this;
+            _this.type = 'dropdown';
+            return _this;
         }
         return TuiDropdownDriverDirective;
-    }(i1$1.AbstractTuiDriverDirective));
-    TuiDropdownDriverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownDriverDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    }(i1.AbstractTuiDriverDirective));
+    TuiDropdownDriverDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownDriverDirective, deps: [{ token: i2.TuiDestroyService, self: true }, { token: i1.TuiDriver }, { token: i1.TuiVehicle }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownDriverDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownDriverDirective, selector: "[tuiDropdown]", providers: [i2.TuiDestroyService], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownDriverDirective, decorators: [{
                 type: i0.Directive,
@@ -818,26 +829,41 @@
                         selector: '[tuiDropdown]',
                         providers: [i2.TuiDestroyService],
                     }]
-            }] });
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace.Observable, decorators: [{
+                            type: i0.Self
+                        }, {
+                            type: i0.Inject,
+                            args: [i2.TuiDestroyService]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TuiDriver]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TuiVehicle]
+                        }] }];
+        } });
 
     var TuiDropdownHostDirective = /** @class */ (function (_super) {
         __extends(TuiDropdownHostDirective, _super);
         function TuiDropdownHostDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.type = 'dropdown';
+            return _this;
         }
         TuiDropdownHostDirective.prototype.getClientRect = function () {
             var _a;
             return ((_a = this.tuiDropdownHost) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || i2.EMPTY_CLIENT_RECT;
         };
         return TuiDropdownHostDirective;
-    }(i1$1.TuiRectAccessor));
+    }(i1.TuiRectAccessor));
     TuiDropdownHostDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownHostDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiDropdownHostDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownHostDirective, selector: "[tuiDropdown][tuiDropdownHost]", inputs: { tuiDropdownHost: "tuiDropdownHost" }, providers: [i1$1.tuiAsRectAccessor(TuiDropdownHostDirective)], usesInheritance: true, ngImport: i0__namespace });
+    TuiDropdownHostDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownHostDirective, selector: "[tuiDropdown][tuiDropdownHost]", inputs: { tuiDropdownHost: "tuiDropdownHost" }, providers: [i1.tuiAsRectAccessor(TuiDropdownHostDirective)], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownHostDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[tuiDropdown][tuiDropdownHost]',
-                        providers: [i1$1.tuiAsRectAccessor(TuiDropdownHostDirective)],
+                        providers: [i1.tuiAsRectAccessor(TuiDropdownHostDirective)],
                     }]
             }], propDecorators: { tuiDropdownHost: [{
                     type: i0.Input
@@ -847,38 +873,45 @@
         __extends(TuiDropdownManualDirective, _super);
         function TuiDropdownManualDirective() {
             var _this = _super.call(this, function (subscriber) { return _this.stream$.subscribe(subscriber); }) || this;
-            _this.stream$ = new i5.Subject();
+            _this.stream$ = new i1$1.BehaviorSubject(false);
             _this.tuiDropdownManual = false;
+            _this.type = 'dropdown';
             return _this;
         }
         TuiDropdownManualDirective.prototype.ngOnChanges = function () {
             this.stream$.next(this.tuiDropdownManual);
         };
         return TuiDropdownManualDirective;
-    }(i1$1.TuiDriver));
+    }(i1.TuiDriver));
     TuiDropdownManualDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownManualDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiDropdownManualDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: { tuiDropdownManual: "tuiDropdownManual" }, providers: [i1$1.tuiAsDriver(TuiDropdownManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace });
+    TuiDropdownManualDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: { tuiDropdownManual: "tuiDropdownManual" }, providers: [i1.tuiAsDriver(TuiDropdownManualDirective)], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownManualDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[tuiDropdown][tuiDropdownManual]',
-                        providers: [i1$1.tuiAsDriver(TuiDropdownManualDirective)],
+                        providers: [i1.tuiAsDriver(TuiDropdownManualDirective)],
                     }]
             }], ctorParameters: function () { return []; }, propDecorators: { tuiDropdownManual: [{
                     type: i0.Input
                 }] } });
 
-    var TuiDropdownPositionDirective = /** @class */ (function () {
-        function TuiDropdownPositionDirective(options, viewport, accessor) {
-            this.options = options;
-            this.viewport = viewport;
-            this.accessor = accessor;
+    var TuiDropdownPositionDirective = /** @class */ (function (_super) {
+        __extends(TuiDropdownPositionDirective, _super);
+        function TuiDropdownPositionDirective(options, viewport, accessors, directive) {
+            var _this = _super.call(this) || this;
+            _this.options = options;
+            _this.viewport = viewport;
+            _this.accessors = accessors;
+            _this.directive = directive;
+            _this.type = 'dropdown';
+            return _this;
         }
-        TuiDropdownPositionDirective.prototype.getPosition = function (_a) {
-            var width = _a.width, height = _a.height;
-            var hostRect = this.accessor.getClientRect();
+        TuiDropdownPositionDirective.prototype.getPosition = function (_c) {
+            var width = _c.width, height = _c.height;
+            var _a, _b;
+            var hostRect = (_b = (_a = this.accessor) === null || _a === void 0 ? void 0 : _a.getClientRect()) !== null && _b !== void 0 ? _b : i2.EMPTY_CLIENT_RECT;
             var viewport = this.viewport.getClientRect();
-            var _b = this.options, minHeight = _b.minHeight, align = _b.align, direction = _b.direction, offset = _b.offset;
+            var _d = this.options, minHeight = _d.minHeight, align = _d.align, direction = _d.direction, offset = _d.offset;
             var previous = this.previous || direction || 'bottom';
             var right = Math.max(hostRect.right - width, offset);
             var available = {
@@ -899,15 +932,25 @@
             this.previous = better;
             return [position[better], position[align]];
         };
+        Object.defineProperty(TuiDropdownPositionDirective.prototype, "accessor", {
+            get: function () {
+                return i1.tuiFallbackRectAccessor('dropdown')(this.accessors, this.directive);
+            },
+            enumerable: false,
+            configurable: true
+        });
         return TuiDropdownPositionDirective;
-    }());
-    TuiDropdownPositionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownPositionDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: tokens.TUI_VIEWPORT }, { token: i1$1.TuiRectAccessor }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiDropdownPositionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])", providers: [i1$1.tuiAsPositionAccessor(TuiDropdownPositionDirective)], ngImport: i0__namespace });
+    }(i1.TuiPositionAccessor));
+    TuiDropdownPositionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownPositionDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: tokens.TUI_VIEWPORT }, { token: i1.TuiRectAccessor }, { token: TuiDropdownDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDropdownPositionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])", providers: [i1.tuiAsPositionAccessor(TuiDropdownPositionDirective)], usesInheritance: true, ngImport: i0__namespace });
+    __decorate([
+        i2.tuiPure
+    ], TuiDropdownPositionDirective.prototype, "accessor", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownPositionDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])',
-                        providers: [i1$1.tuiAsPositionAccessor(TuiDropdownPositionDirective)],
+                        providers: [i1.tuiAsPositionAccessor(TuiDropdownPositionDirective)],
                     }]
             }], ctorParameters: function () {
             return [{ type: undefined, decorators: [{
@@ -916,30 +959,37 @@
                         }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_VIEWPORT]
-                        }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TuiRectAccessor]
+                        }] }, { type: TuiDropdownDirective, decorators: [{
                             type: i0.Inject,
-                            args: [i1$1.TuiRectAccessor]
+                            args: [TuiDropdownDirective]
                         }] }];
-        } });
+        }, propDecorators: { accessor: [] } });
 
-    var TuiDropdownPositionSidedDirective = /** @class */ (function () {
-        function TuiDropdownPositionSidedDirective(options, viewport, accessor, vertical) {
-            this.options = options;
-            this.viewport = viewport;
-            this.accessor = accessor;
-            this.vertical = vertical;
-            this.previous = this.options.direction || 'bottom';
-            this.tuiDropdownSided = '';
-            this.tuiDropdownSidedOffset = 4;
+    var TuiDropdownPositionSidedDirective = /** @class */ (function (_super) {
+        __extends(TuiDropdownPositionSidedDirective, _super);
+        function TuiDropdownPositionSidedDirective(options, viewport, vertical) {
+            var _this = _super.call(this) || this;
+            _this.options = options;
+            _this.viewport = viewport;
+            _this.vertical = vertical;
+            _this.previous = _this.options.direction || 'bottom';
+            _this.tuiDropdownSided = '';
+            _this.tuiDropdownSidedOffset = 4;
+            _this.type = 'dropdown';
+            return _this;
         }
         TuiDropdownPositionSidedDirective.prototype.getPosition = function (rect) {
+            var _a, _b;
             if (this.tuiDropdownSided === false) {
                 return this.vertical.getPosition(rect);
             }
             var height = rect.height, width = rect.width;
-            var hostRect = this.accessor.getClientRect();
+            var hostRect = (_b = (_a = this.vertical.accessor) === null || _a === void 0 ? void 0 : _a.getClientRect()) !== null && _b !== void 0 ? _b : i2.EMPTY_CLIENT_RECT;
             var viewport = this.viewport.getClientRect();
-            var _a = this.options, align = _a.align, direction = _a.direction, minHeight = _a.minHeight, offset = _a.offset;
+            var _c = this.options, align = _c.align, direction = _c.direction, minHeight = _c.minHeight, offset = _c.offset;
             var available = {
                 top: hostRect.bottom - viewport.top,
                 left: hostRect.left - offset - viewport.left,
@@ -963,19 +1013,19 @@
             return [position[better], left];
         };
         return TuiDropdownPositionSidedDirective;
-    }());
-    TuiDropdownPositionSidedDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownPositionSidedDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: tokens.TUI_VIEWPORT }, { token: i1$1.TuiRectAccessor }, { token: TuiDropdownPositionDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    }(i1.TuiPositionAccessor));
+    TuiDropdownPositionSidedDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownPositionSidedDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: tokens.TUI_VIEWPORT }, { token: TuiDropdownPositionDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownPositionSidedDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownPositionSidedDirective, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: "tuiDropdownSided", tuiDropdownSidedOffset: "tuiDropdownSidedOffset" }, providers: [
             TuiDropdownPositionDirective,
-            i1$1.tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
-        ], ngImport: i0__namespace });
+            i1.tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
+        ], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownPositionSidedDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[tuiDropdownSided]',
                         providers: [
                             TuiDropdownPositionDirective,
-                            i1$1.tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
+                            i1.tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
                         ],
                     }]
             }], ctorParameters: function () {
@@ -985,10 +1035,7 @@
                         }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_VIEWPORT]
-                        }] }, { type: i1__namespace$2.TuiRectAccessor, decorators: [{
-                            type: i0.Inject,
-                            args: [i1$1.TuiRectAccessor]
-                        }] }, { type: i1__namespace$2.TuiPositionAccessor, decorators: [{
+                        }] }, { type: TuiDropdownPositionDirective, decorators: [{
                             type: i0.Inject,
                             args: [TuiDropdownPositionDirective]
                         }] }];
@@ -1008,8 +1055,8 @@
             _this.elementRef = elementRef;
             _this.viewContainerRef = viewContainerRef;
             _this.dropdown = dropdown;
-            _this.handler$ = new i5.BehaviorSubject(i2.ALWAYS_TRUE_HANDLER);
-            _this.stream$ = i5.combineLatest([
+            _this.handler$ = new i1$1.BehaviorSubject(i2.ALWAYS_TRUE_HANDLER);
+            _this.stream$ = i1$1.combineLatest([
                 _this.handler$,
                 _this.selection$.pipe(operators.map(function () { return _this.getRange(); }), operators.distinctUntilChanged()),
             ]).pipe(operators.map(function (_b) {
@@ -1022,6 +1069,7 @@
                 return (contained && handler(_this.range)) || _this.inDropdown(range);
             }));
             _this.position = 'selection';
+            _this.type = 'dropdown';
             return _this;
         }
         Object.defineProperty(TuiDropdownSelectionDirective.prototype, "tuiDropdownSelection", {
@@ -1117,11 +1165,11 @@
             return ghost;
         };
         return TuiDropdownSelectionDirective;
-    }(i1$1.TuiDriver));
+    }(i1.TuiDriver));
     TuiDropdownSelectionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownSelectionDirective, deps: [{ token: i2.TUI_RANGE }, { token: common$1.DOCUMENT }, { token: tokens.TUI_SELECTION_STREAM }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: TuiDropdownDirective }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiDropdownSelectionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDropdownSelectionDirective, selector: "[tuiDropdown][tuiDropdownSelection]", inputs: { position: ["tuiDropdownSelectionPosition", "position"], tuiDropdownSelection: "tuiDropdownSelection" }, providers: [
-            i1$1.tuiAsDriver(TuiDropdownSelectionDirective),
-            i1$1.tuiAsRectAccessor(TuiDropdownSelectionDirective),
+            i1.tuiAsDriver(TuiDropdownSelectionDirective),
+            i1.tuiAsRectAccessor(TuiDropdownSelectionDirective),
         ], usesInheritance: true, ngImport: i0__namespace });
     __decorate([
         i2.tuiDefaultProp()
@@ -1131,8 +1179,8 @@
                 args: [{
                         selector: '[tuiDropdown][tuiDropdownSelection]',
                         providers: [
-                            i1$1.tuiAsDriver(TuiDropdownSelectionDirective),
-                            i1$1.tuiAsRectAccessor(TuiDropdownSelectionDirective),
+                            i1.tuiAsDriver(TuiDropdownSelectionDirective),
+                            i1.tuiAsRectAccessor(TuiDropdownSelectionDirective),
                         ],
                     }]
             }], ctorParameters: function () {
@@ -1142,7 +1190,7 @@
                         }] }, { type: Document, decorators: [{
                             type: i0.Inject,
                             args: [common$1.DOCUMENT]
-                        }] }, { type: i5__namespace.Observable, decorators: [{
+                        }] }, { type: i1__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_SELECTION_STREAM]
                         }] }, { type: i0__namespace.ElementRef, decorators: [{
@@ -1178,7 +1226,7 @@
             TuiDropdownContextDirective,
             TuiDropdownPositionDirective,
             TuiDropdownPositionSidedDirective,
-            TuiDropdownSelectionDirective], imports: [i1.PolymorpheusModule,
+            TuiDropdownSelectionDirective], imports: [i4.PolymorpheusModule,
             i2.TuiActiveZoneModule,
             i2.TuiOverscrollModule,
             i1$2.TuiScrollbarModule,
@@ -1195,7 +1243,7 @@
             TuiDropdownPositionSidedDirective,
             TuiDropdownSelectionDirective] });
     TuiDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDropdownModule, imports: [[
-                i1.PolymorpheusModule,
+                i4.PolymorpheusModule,
                 i2.TuiActiveZoneModule,
                 i2.TuiOverscrollModule,
                 i1$2.TuiScrollbarModule,
@@ -1206,7 +1254,7 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i1.PolymorpheusModule,
+                            i4.PolymorpheusModule,
                             i2.TuiActiveZoneModule,
                             i2.TuiOverscrollModule,
                             i1$2.TuiScrollbarModule,