@taiga-ui/core 3.19.0-dev.main-8e6cab0 → 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.17", ngImport: i0, type: TuiDropdownDirective, deps: [{ token: ElementRef }, { token: PolymorpheusComponent }, { token: TuiDropdownPortalService }], target: i0.ɵɵFactoryTarget.Directive });
+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()
@@ -89,19 +87,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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,6 +131,7 @@ 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);
@@ -154,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     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: [{
@@ -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.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 });
+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);
@@ -453,8 +461,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0, type: TuiDropdownDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+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,
@@ -462,9 +475,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     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;
@@ -485,8 +513,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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);
@@ -504,14 +533,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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,9 +567,15 @@ 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.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 });
+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: [{
@@ -549,27 +588,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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,11 +639,11 @@ class TuiDropdownPositionSidedDirective {
         return [position[better], left];
     }
 }
-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.ɵ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 });
+    ], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDropdownPositionSidedDirective, decorators: [{
             type: Directive,
             args: [{
@@ -615,10 +659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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)) {
@@ -762,7 +804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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: [{