@taiga-ui/core 4.52.0-canary.2c75afa → 4.52.0-canary.2d877cf

package/fesm2022/{taiga-ui-core-directives-dropdown.mjs → taiga-ui-core-portals-dropdown.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, Input, EventEmitter, Output, ChangeDetectorRef, INJECTOR, signal, TemplateRef, computed, forwardRef, ChangeDetectionStrategy, Component, PLATFORM_ID, ElementRef, ContentChild, ViewContainerRef } from '@angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, Input, ChangeDetectorRef, effect, signal, INJECTOR, input, computed, TemplateRef, forwardRef, ChangeDetectionStrategy, Component, PLATFORM_ID, contentChild, ElementRef, model, ViewContainerRef } from '@angular/core';
+import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { EMPTY_CLIENT_RECT, TUI_TRUE_HANDLER, CHAR_ZERO_WIDTH_SPACE, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
 import * as i1 from '@taiga-ui/cdk/directives/active-zone';
 import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
@@ -8,24 +8,25 @@ import * as i2 from '@taiga-ui/cdk/directives/animated';
 import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
 import { tuiInjectElement, tuiGetActualTarget, tuiPointToClientRect, tuiIsElement, tuiIsHTMLElement, tuiIsElementEditable, tuiIsTextNode, tuiIsTextfield } from '@taiga-ui/cdk/utils/dom';
 import { tuiClamp } from '@taiga-ui/cdk/utils/math';
-import { tuiProvide, tuiPure, tuiPx, tuiProvideOptions, tuiSetSignal, tuiIsString, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiPx, tuiSetSignal, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TuiDriverDirective, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsVehicle, tuiPositionAccessorFor, tuiRectAccessorFor, tuiAsDriver, tuiAsRectAccessor, TuiDriver, tuiAsPositionAccessor } from '@taiga-ui/core/classes';
 import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
 import { TuiVisualViewportService, TuiPositionService } from '@taiga-ui/core/services';
 import { TUI_VIEWPORT, TUI_DARK_MODE, TUI_SELECTION_STREAM } from '@taiga-ui/core/tokens';
 import { PolymorpheusComponent, PolymorpheusTemplate, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { BehaviorSubject, Subject, throttleTime, takeWhile, map, merge, filter, fromEvent, switchMap, delay, startWith, takeUntil, distinctUntilChanged, of, tap, share, combineLatest } from 'rxjs';
+import { BehaviorSubject, Subject, distinctUntilChanged, throttleTime, takeWhile, map, merge, filter, fromEvent, switchMap, delay, startWith, takeUntil, of, tap, share, combineLatest } from 'rxjs';
 import { coerceArray } from '@angular/cdk/coercion';
 import { tuiZonefreeScheduler, tuiTypedFromEvent, tuiZonefree, tuiIfMap, tuiCloseWatcher, tuiZonefull, tuiWatch, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
-import { TuiPopupService } from '@taiga-ui/core/directives/popup';
+import { TuiPopupService } from '@taiga-ui/core/portals/popup';
 import { tuiOverrideOptions, tuiCheckFixedPosition, tuiGetWordRange } from '@taiga-ui/core/utils';
-import { __decorate } from 'tslib';
+import { tuiProvide, tuiCreateOptions, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
-import { TUI_IS_TOUCH, TUI_RANGE } from '@taiga-ui/cdk/tokens';
+import { __decorate } from 'tslib';
+import { TUI_IS_TOUCH } from '@taiga-ui/cdk/tokens';
 import { shouldCall } from '@taiga-ui/event-plugins';
 import * as i1$1 from '@taiga-ui/cdk/directives/obscured';
 import { TuiObscured } from '@taiga-ui/cdk/directives/obscured';
-import { tuiIsKeyboardFocusable, tuiGetClosestFocusable, tuiIsFocusedIn, tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
+import { tuiIsFocusable, tuiGetClosestFocusable, tuiIsFocusedIn, tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
 import { tuiIsEditingKey, tuiOverrideOptions as tuiOverrideOptions$1 } from '@taiga-ui/core/utils/miscellaneous';
 
 class TuiDropdownDriver extends BehaviorSubject {
@@ -33,10 +34,10 @@ class TuiDropdownDriver extends BehaviorSubject {
         super(false);
         this.type = 'dropdown';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDriver }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownDriver }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDriver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownDriver, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 class TuiDropdownDriverDirective extends TuiDriverDirective {
@@ -44,10 +45,10 @@ class TuiDropdownDriverDirective extends TuiDriverDirective {
         super(...arguments);
         this.type = 'dropdown';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownDriverDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownDriverDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
             type: Directive
         }] });
 
@@ -94,10 +95,10 @@ class TuiDropdownOptionsDirective {
         this.maxHeight = this.options.maxHeight;
         this.offset = this.options.offset;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownOptionsDirective, isStandalone: true, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: { align: ["tuiDropdownAlign", "align"], appearance: ["tuiDropdownAppearance", "appearance"], direction: ["tuiDropdownDirection", "direction"], limitWidth: ["tuiDropdownLimitWidth", "limitWidth"], minHeight: ["tuiDropdownMinHeight", "minHeight"], maxHeight: ["tuiDropdownMaxHeight", "maxHeight"], offset: ["tuiDropdownOffset", "offset"] }, providers: [tuiProvide(TUI_DROPDOWN_OPTIONS, TuiDropdownOptionsDirective)], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownOptionsDirective, isStandalone: true, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: { align: ["tuiDropdownAlign", "align"], appearance: ["tuiDropdownAppearance", "appearance"], direction: ["tuiDropdownDirection", "direction"], limitWidth: ["tuiDropdownLimitWidth", "limitWidth"], minHeight: ["tuiDropdownMinHeight", "minHeight"], maxHeight: ["tuiDropdownMaxHeight", "maxHeight"], offset: ["tuiDropdownOffset", "offset"] }, providers: [tuiProvide(TUI_DROPDOWN_OPTIONS, TuiDropdownOptionsDirective)], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOptionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownOptionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]',
@@ -132,14 +133,10 @@ class TuiDropdownPosition extends TuiPositionAccessor {
         this.el = tuiInjectElement();
         this.options = inject(TUI_DROPDOWN_OPTIONS);
         this.viewport = inject(TUI_VIEWPORT);
-        this.directionChange = new EventEmitter();
+        this.direction = new Subject();
         this.type = 'dropdown';
-        this.accessor = tuiFallbackAccessor('dropdown')(inject(TuiRectAccessor, { optional: true }), {
-            getClientRect: () => this.el.getBoundingClientRect(),
-        });
-    }
-    emitDirection(direction) {
-        this.directionChange.emit(direction);
+        this.accessor = tuiFallbackAccessor('dropdown')(inject(TuiRectAccessor, { optional: true }), { getClientRect: () => this.el.getBoundingClientRect() });
+        this.tuiDropdownDirectionChange = outputFromObservable(this.direction.pipe(distinctUntilChanged()));
     }
     getPosition({ width, height }) {
         if (!width && !height) {
@@ -175,12 +172,12 @@ class TuiDropdownPosition extends TuiPositionAccessor {
         const better = available.top > available.bottom ? 'top' : 'bottom';
         if ((available[previous] > minHeight && direction) ||
             available[previous] > height) {
-            this.emitDirection(previous);
-            return [position[previous], position[align]];
+            this.direction.next(previous);
+            return [position[align], position[previous]];
         }
         this.previous = better;
-        this.emitDirection(better);
-        return [position[better], position[align]];
+        this.direction.next(better);
+        return [position[align], position[better]];
     }
     getAlign(align) {
         const rtl = this.el.matches('[dir="rtl"] :scope');
@@ -189,25 +186,18 @@ class TuiDropdownPosition extends TuiPositionAccessor {
         }
         return rtl && align === 'right' ? 'left' : align;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPosition, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownPosition, isStandalone: true, outputs: { directionChange: "tuiDropdownDirectionChange" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownPosition, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownPosition, isStandalone: true, outputs: { tuiDropdownDirectionChange: "tuiDropdownDirectionChange" }, usesInheritance: true, ngImport: i0 }); }
 }
-__decorate([
-    tuiPure
-], TuiDropdownPosition.prototype, "emitDirection", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPosition, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownPosition, decorators: [{
             type: Directive
-        }], propDecorators: { directionChange: [{
-                type: Output,
-                args: ['tuiDropdownDirectionChange']
-            }], emitDirection: [] } });
+        }] });
 
 class TuiDropdownDirective {
     constructor() {
         this.refresh$ = new Subject();
         this.service = inject(TuiPopupService);
         this.cdr = inject(ChangeDetectorRef);
-        // TODO: think of a better solution later
         this.drivers = coerceArray(inject(TuiDropdownDriver, { self: true, optional: true }));
         this.sub = this.refresh$
             .pipe(throttleTime(0, tuiZonefreeScheduler()), takeUntilDestroyed())
@@ -215,33 +205,25 @@ class TuiDropdownDirective {
             this.ref()?.changeDetectorRef.detectChanges();
             this.ref()?.changeDetectorRef.markForCheck();
         });
+        this.autoClose = effect(() => {
+            if (!this.content()) {
+                this.toggle(false);
+            }
+        });
+        this.ref = signal(null);
         this.el = tuiInjectElement();
         this.type = 'dropdown';
         this.component = new PolymorpheusComponent(inject(TUI_DROPDOWN_COMPONENT), inject(INJECTOR));
-        this.ref = signal(null);
-        // TODO(v5): rename to `content`
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        this._content = signal(null);
-    }
-    set tuiDropdown(content) {
-        this._content.set(content instanceof TemplateRef
-            ? new PolymorpheusTemplate(content, this.cdr)
-            : content);
-        if (!this._content()) {
-            this.toggle(false);
-        }
+        this.tuiDropdown = input();
+        this.content = computed((content = this.tuiDropdown()) => {
+            return content instanceof TemplateRef
+                ? new PolymorpheusTemplate(content, this.cdr)
+                : content;
+        });
     }
     get position() {
         return tuiCheckFixedPosition(this.el) ? 'fixed' : 'absolute';
     }
-    // TODO(v5): delete
-    get content() {
-        return this._content();
-    }
-    // TODO(v5): delete
-    set content(x) {
-        this._content.set(x);
-    }
     ngAfterViewChecked() {
         this.refresh$.next();
     }
@@ -253,21 +235,21 @@ class TuiDropdownDirective {
     }
     toggle(show) {
         const ref = this.ref();
-        if (show && this._content() && !ref) {
+        if (show && this.content() && !ref) {
             this.ref.set(this.service.add(this.component));
         }
         else if (!show && ref) {
             this.ref.set(null);
             ref.destroy();
         }
-        this.drivers.forEach((driver) => driver?.next(show));
         // TODO: Remove in v5, only needed in Angular 16
         this.cdr.markForCheck();
+        this.drivers.forEach((driver) => driver?.next(show));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { tuiDropdown: "tuiDropdown" }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { tuiDropdown: { classPropertyName: "tuiDropdown", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]:not(ng-container):not(ng-template)',
@@ -284,9 +266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '[class.tui-dropdown-open]': 'ref()',
                     },
                 }]
-        }], propDecorators: { tuiDropdown: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * @description:
@@ -300,7 +280,7 @@ class TuiDropdownComponent {
         this.viewport = inject(TUI_VIEWPORT);
         this.vvs = inject(TuiVisualViewportService);
         this.styles$ = inject(TuiPositionService).pipe(takeWhile(() => this.directive.el.isConnected &&
-            !!this.directive.el.getBoundingClientRect().height), map((v) => (this.position === 'fixed' ? this.vvs.correct(v) : v)), map(([top, left]) => this.getStyles(left, top)), takeUntilDestroyed());
+            !!this.directive.el.getBoundingClientRect().height), map((v) => (this.position === 'fixed' ? this.vvs.correct(v) : v)), map((point) => this.getStyles(...point)), takeUntilDestroyed());
         this.options = inject(TUI_DROPDOWN_OPTIONS);
         this.directive = inject(TuiDropdownDirective);
         this.context = inject(TUI_DROPDOWN_CONTEXT, { optional: true });
@@ -339,14 +319,14 @@ class TuiDropdownComponent {
             maxWidth: tuiPx(Math.round(viewport.width) - 16), // 8px min gap from each side
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownComponent, isStandalone: true, selector: "tui-dropdown", host: { properties: { "attr.data-appearance": "options.appearance", "attr.tuiTheme": "theme()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownComponent, isStandalone: true, selector: "tui-dropdown", host: { properties: { "attr.data-appearance": "options.appearance", "attr.tuiTheme": "theme()" } }, providers: [
             TuiPositionService,
             tuiPositionAccessorFor('dropdown', TuiDropdownPosition),
             tuiRectAccessorFor('dropdown', forwardRef(() => TuiDropdownDirective)),
-        ], hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }], ngImport: i0, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive._content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-3);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:100%;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+        ], hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }], ngImport: i0, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive.content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-3);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:100%;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tui-dropdown', imports: [PolymorpheusOutlet, TuiScrollbar], changeDetection: ChangeDetectionStrategy.Default, providers: [
                         TuiPositionService,
@@ -355,25 +335,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], hostDirectives: [TuiActiveZone, TuiAnimated], host: {
                         '[attr.data-appearance]': 'options.appearance',
                         '[attr.tuiTheme]': 'theme()',
-                    }, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive._content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-3);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:100%;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"] }]
+                    }, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive.content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-3);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:100%;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"] }]
         }] });
 
 class TuiDropdownContent {
     constructor() {
         this.directive = inject(TuiDropdownDirective);
-        this.directive.tuiDropdown = inject(TemplateRef);
+        tuiSetSignal(this.directive.tuiDropdown, inject(TemplateRef));
         if (isPlatformBrowser(inject(PLATFORM_ID)) &&
             this.directive.el.matches(':focus-within')) {
             this.directive.toggle(true);
         }
     }
     ngOnDestroy() {
-        this.directive.tuiDropdown = null;
+        tuiSetSignal(this.directive.tuiDropdown, null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownContent, isStandalone: true, selector: "ng-template[tuiDropdown]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownContent, isStandalone: true, selector: "ng-template[tuiDropdown]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[tuiDropdown]',
@@ -409,8 +389,8 @@ class TuiDropdownContext extends TuiRectAccessor {
         this.currentRect = tuiPointToClientRect(x, y);
         this.driver.next(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownContext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownContext, isStandalone: true, selector: "[tuiDropdownContext]", host: { listeners: { "document:keydown.esc": "closeDropdown()", "longtap": "onContextMenu($event.detail.clientX, $event.detail.clientY)" }, properties: { "style.user-select": "userSelect()", "style.-webkit-user-select": "userSelect()", "style.-webkit-touch-callout": "userSelect()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownContext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownContext, isStandalone: true, selector: "[tuiDropdownContext]", host: { listeners: { "document:keydown.esc": "closeDropdown()", "longtap": "onContextMenu($event.detail.clientX, $event.detail.clientY)" }, properties: { "style.user-select": "userSelect()", "style.-webkit-user-select": "userSelect()", "style.-webkit-touch-callout": "userSelect()" } }, providers: [
             TuiActiveZone,
             TuiDropdownDriver,
             tuiAsDriver(TuiDropdownDriver),
@@ -420,7 +400,7 @@ class TuiDropdownContext extends TuiRectAccessor {
 __decorate([
     shouldCall(activeZoneFilter)
 ], TuiDropdownContext.prototype, "closeDropdown", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownContext, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownContext]',
@@ -448,48 +428,40 @@ const TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = {
 /**
  * Default parameters for dropdown hover directive
  */
-const TUI_DROPDOWN_HOVER_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_HOVER_OPTIONS' : '', {
-    factory: () => TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
-});
-function tuiDropdownHoverOptionsProvider(options) {
-    return tuiProvideOptions(TUI_DROPDOWN_HOVER_OPTIONS, options, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS);
-}
+const [TUI_DROPDOWN_HOVER_OPTIONS, tuiDropdownHoverOptionsProvider] = tuiCreateOptions(TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS);
 
 function shouldClose(event) {
     return (
     // @ts-ignore
     typeof CloseWatcher === 'undefined' &&
-        // ?. for auto fill events
+        // ?. for autofill events
         event.key?.toLowerCase() === 'escape' &&
-        this.tuiDropdownEnabled &&
-        !!this.tuiDropdownOpen &&
+        this.enabled() &&
+        this.open() &&
         !this['dropdown']()?.nextElementSibling);
 }
 class TuiDropdownOpen {
     constructor() {
+        this.dropdownHost = contentChild('tuiDropdownHost', {
+            descendants: true,
+            read: ElementRef,
+        });
         this.directive = inject(TuiDropdownDirective);
         this.el = tuiInjectElement();
         this.obscured = inject(TuiObscured);
         this.activeZone = inject(TuiActiveZone);
-        this.dropdown = computed(() => this.directive.ref()?.location.nativeElement);
-        this.tuiDropdownEnabled = true;
-        this.tuiDropdownOpen = false;
-        this.tuiDropdownOpenChange = new EventEmitter();
-        // TODO: make it private when all legacy controls will be deleted from @taiga-ui/legacy (5.0)
         this.driver = inject(TuiDropdownDriver);
-        this.sub = this.driver
+        this.dropdown = computed(() => this.directive.ref()?.location.nativeElement);
+        this.enabled = input(true, { alias: 'tuiDropdownEnabled' });
+        this.open = model(false, { alias: 'tuiDropdownOpen' });
+        this.driveEffect = effect(() => this.drive(this.open()));
+        this.syncSub = this.driver
+            .pipe(filter((open) => open !== this.open()), takeUntilDestroyed())
+            .subscribe((open) => this.update(open));
+        this.closeSub = this.driver
             .pipe(tuiIfMap(() => merge(tuiCloseWatcher(), this.obscured.tuiObscured$.pipe(filter(Boolean)), this.activeZone.tuiActiveZoneChange.pipe(filter((a) => !a)), fromEvent(this.el, 'focusin').pipe(filter((event) => !this.host.contains(tuiGetActualTarget(event)) ||
             !this.directive.ref())))), tuiZonefull(), tuiWatch(), takeUntilDestroyed())
             .subscribe(() => this.toggle(false));
-        this.sync = this.driver.pipe(takeUntilDestroyed()).subscribe((open) => {
-            if (open !== this.tuiDropdownOpen) {
-                this.update(open);
-            }
-        });
-    }
-    ngOnChanges() {
-        this.drive(!!this.tuiDropdownOpen);
-        this.tuiDropdownOpenChange.emit(!!this.tuiDropdownOpen);
     }
     toggle(open) {
         if (this.focused && !open) {
@@ -503,14 +475,14 @@ class TuiDropdownOpen {
     }
     onClick(target) {
         if (!this.editable && this.host.contains(target)) {
-            this.update(!this.tuiDropdownOpen);
+            this.update(!this.open());
         }
     }
     onArrow(event, up) {
         if (!tuiIsElement(event.target) ||
             !this.host.contains(event.target) ||
-            !this.tuiDropdownEnabled ||
-            !this.directive._content()) {
+            !this.enabled() ||
+            !this.directive.content()) {
             return;
         }
         event.preventDefault();
@@ -528,11 +500,11 @@ class TuiDropdownOpen {
         }
     }
     get host() {
-        const initial = this.dropdownHost?.nativeElement || this.el;
-        const focusable = tuiIsKeyboardFocusable(initial)
+        const initial = this.dropdownHost()?.nativeElement || this.el;
+        const focusable = tuiIsFocusable(initial)
             ? initial
             : tuiGetClosestFocusable({ initial, root: this.el });
-        return this.dropdownHost?.nativeElement || focusable || this.el;
+        return this.dropdownHost()?.nativeElement || focusable || this.el;
     }
     get editable() {
         return tuiIsElementEditable(this.host);
@@ -541,14 +513,13 @@ class TuiDropdownOpen {
         return tuiIsFocusedIn(this.host) || tuiIsFocusedIn(this.dropdown());
     }
     update(open) {
-        if (open && !this.tuiDropdownEnabled) {
+        if (open && !this.enabled()) {
             return this.drive();
         }
-        this.tuiDropdownOpen = open;
-        this.tuiDropdownOpenChange.emit(open);
+        this.open.set(open);
         this.drive();
     }
-    drive(open = !!this.tuiDropdownOpen && this.tuiDropdownEnabled) {
+    drive(open = this.open() && this.enabled()) {
         tuiSetSignal(this.obscured.tuiObscuredEnabled, open);
         this.driver.next(open);
     }
@@ -565,16 +536,16 @@ class TuiDropdownOpen {
         child.remove();
         focusable?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOpen, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownOpen, isStandalone: true, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: { tuiDropdownEnabled: "tuiDropdownEnabled", tuiDropdownOpen: "tuiDropdownOpen" }, outputs: { tuiDropdownOpenChange: "tuiDropdownOpenChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown.arrowDown": "onArrow($event, false)", "keydown.arrowUp": "onArrow($event, true)", "document:keydown.zoneless.capture": "onEsc($event)", "document:keydown.zoneless": "onKeydown($event)", "tuiActiveZoneChange": "0" } }, providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1$1.TuiObscured }, { directive: i1.TuiActiveZone, inputs: ["tuiActiveZoneParent", "tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange", "tuiActiveZoneChange"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownOpen, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.17", type: TuiDropdownOpen, isStandalone: true, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: { enabled: { classPropertyName: "enabled", publicName: "tuiDropdownEnabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "tuiDropdownOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "tuiDropdownOpenChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown.arrowDown": "onArrow($event, false)", "keydown.arrowUp": "onArrow($event, true)", "document:keydown.zoneless.capture": "onEsc($event)", "document:keydown.zoneless": "onKeydown($event)", "tuiActiveZoneChange": "0" } }, providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.TuiObscured }, { directive: i1.TuiActiveZone, inputs: ["tuiActiveZoneParent", "tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange", "tuiActiveZoneChange"] }], ngImport: i0 }); }
 }
 __decorate([
     shouldCall(shouldClose)
 ], TuiDropdownOpen.prototype, "onEsc", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOpen, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownOpen, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]',
+                    selector: '[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]',
                     providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],
                     hostDirectives: [
                         TuiObscured,
@@ -594,37 +565,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '(tuiActiveZoneChange)': '0',
                     },
                 }]
-        }], propDecorators: { dropdownHost: [{
-                type: ContentChild,
-                args: ['tuiDropdownHost', { descendants: true, read: ElementRef }]
-            }], tuiDropdownEnabled: [{
-                type: Input
-            }], tuiDropdownOpen: [{
-                type: Input
-            }], tuiDropdownOpenChange: [{
-                type: Output
-            }], onEsc: [] } });
+        }], propDecorators: { onEsc: [] } });
 
 class TuiDropdownHover extends TuiDriver {
     constructor() {
         super((subscriber) => this.stream$.subscribe(subscriber));
+        this.dropdownHost = contentChild('tuiDropdownHost', {
+            descendants: true,
+            read: ElementRef,
+        });
+        this.hovered = false;
         this.el = tuiInjectElement();
         this.doc = inject(DOCUMENT);
         this.options = inject(TUI_DROPDOWN_HOVER_OPTIONS);
         this.activeZone = inject(TuiActiveZone);
         this.open = inject(TuiDropdownOpen, { optional: true });
+        this.stream$ = merge(
         /**
          * Dropdown can be removed not only via click/touch –
          * swipe on mobile devices removes dropdown sheet without triggering new mouseover / mouseout events.
          */
-        this.dropdownExternalRemoval$ = toObservable(inject(TuiDropdownDirective).ref).pipe(filter((x) => !x && this.hovered));
-        this.stream$ = merge(this.dropdownExternalRemoval$.pipe(switchMap(() => tuiTypedFromEvent(this.doc, 'pointerdown').pipe(map(tuiGetActualTarget), delay(this.hideDelay), startWith(null), takeUntil(fromEvent(this.doc, 'mouseover'))))), tuiTypedFromEvent(this.doc, 'mouseover').pipe(map(tuiGetActualTarget)), tuiTypedFromEvent(this.doc, 'mouseout').pipe(map((e) => e.relatedTarget))).pipe(map((element) => tuiIsElement(element) && this.isHovered(element)), distinctUntilChanged(), switchMap((v) => of(v).pipe(delay(v ? this.showDelay : this.hideDelay))), tuiZoneOptimized(), tap((hovered) => {
+        toObservable(inject(TuiDropdownDirective).ref).pipe(filter((x) => !x && this.hovered), switchMap(() => tuiTypedFromEvent(this.doc, 'pointerdown').pipe(map(tuiGetActualTarget), delay(this.tuiDropdownHideDelay()), startWith(null), takeUntil(fromEvent(this.doc, 'mouseover'))))), tuiTypedFromEvent(this.doc, 'mouseover').pipe(map(tuiGetActualTarget)), tuiTypedFromEvent(this.doc, 'mouseout').pipe(map((e) => e.relatedTarget))).pipe(map((element) => tuiIsElement(element) && this.isHovered(element)), distinctUntilChanged(), switchMap((v) => of(v).pipe(delay(v ? this.tuiDropdownShowDelay() : this.tuiDropdownHideDelay()))), tuiZoneOptimized(), tap((hovered) => {
             this.hovered = hovered;
             this.open?.toggle(hovered);
         }), share());
-        this.showDelay = this.options.showDelay;
-        this.hideDelay = this.options.hideDelay;
-        this.hovered = false;
+        this.tuiDropdownShowDelay = input(this.options.showDelay);
+        this.tuiDropdownHideDelay = input(this.options.hideDelay);
         this.type = 'dropdown';
     }
     onClick(event) {
@@ -633,15 +599,15 @@ class TuiDropdownHover extends TuiDriver {
         }
     }
     isHovered(element) {
-        const host = this.dropdownHost?.nativeElement || this.el;
+        const host = this.dropdownHost()?.nativeElement || this.el;
         const hovered = host.contains(element);
         const child = !this.el.contains(element) && this.activeZone.contains(element);
         return hovered || child;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownHover, isStandalone: true, selector: "[tuiDropdownHover]", inputs: { showDelay: ["tuiDropdownShowDelay", "showDelay"], hideDelay: ["tuiDropdownHideDelay", "hideDelay"] }, host: { listeners: { "click.capture": "onClick($event)" } }, providers: [TuiActiveZone, tuiAsDriver(TuiDropdownHover)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.17", type: TuiDropdownHover, isStandalone: true, selector: "[tuiDropdownHover]", inputs: { tuiDropdownShowDelay: { classPropertyName: "tuiDropdownShowDelay", publicName: "tuiDropdownShowDelay", isSignal: true, isRequired: false, transformFunction: null }, tuiDropdownHideDelay: { classPropertyName: "tuiDropdownHideDelay", publicName: "tuiDropdownHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click.capture": "onClick($event)" } }, providers: [TuiActiveZone, tuiAsDriver(TuiDropdownHover)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownHover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownHover, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownHover]',
@@ -650,65 +616,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '(click.capture)': 'onClick($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { dropdownHost: [{
-                type: ContentChild,
-                args: ['tuiDropdownHost', { descendants: true, read: ElementRef }]
-            }], showDelay: [{
-                type: Input,
-                args: ['tuiDropdownShowDelay']
-            }], hideDelay: [{
-                type: Input,
-                args: ['tuiDropdownHideDelay']
-            }] } });
+        }], ctorParameters: () => [] });
 
 class TuiDropdownManual {
     constructor() {
         this.driver = inject(TuiDropdownDriver);
-        this.tuiDropdownManual = false;
+        this.tuiDropdownManual = input(false);
     }
     ngOnChanges() {
-        this.driver.next(!!this.tuiDropdownManual);
+        this.driver.next(!!this.tuiDropdownManual());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownManual, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownManual, isStandalone: true, selector: "[tuiDropdownManual]", inputs: { tuiDropdownManual: "tuiDropdownManual" }, providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownManual, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiDropdownManual, isStandalone: true, selector: "[tuiDropdownManual]", inputs: { tuiDropdownManual: { classPropertyName: "tuiDropdownManual", publicName: "tuiDropdownManual", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownManual, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownManual, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownManual]',
                     providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],
                 }]
-        }], propDecorators: { tuiDropdownManual: [{
-                type: Input
-            }] } });
-
-/**
- * @deprecated TODO: remove in v.5 when legacy controls are dropped
- */
-class TuiDropdownOpenLegacy {
-    constructor() {
-        this.openStateSub = new Subject();
-        this.tuiDropdownOpenChange = this.openStateSub.pipe(distinctUntilChanged());
-    }
-    set tuiDropdownOpen(open) {
-        this.emitOpenChange(open);
-    }
-    emitOpenChange(open) {
-        this.openStateSub.next(open);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOpenLegacy, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownOpenLegacy, isStandalone: true, selector: "[tuiDropdownOpen]:not([tuiDropdown]),[tuiDropdownOpenChange]:not([tuiDropdown])", inputs: { tuiDropdownOpen: "tuiDropdownOpen" }, outputs: { tuiDropdownOpenChange: "tuiDropdownOpenChange" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOpenLegacy, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tuiDropdownOpen]:not([tuiDropdown]),[tuiDropdownOpenChange]:not([tuiDropdown])',
-                }]
-        }], propDecorators: { tuiDropdownOpenChange: [{
-                type: Output
-            }], tuiDropdownOpen: [{
-                type: Input
-            }] } });
+        }] });
 
 class TuiDropdownPositionSided extends TuiPositionAccessor {
     constructor() {
@@ -717,12 +644,12 @@ class TuiDropdownPositionSided extends TuiPositionAccessor {
         this.viewport = inject(TUI_VIEWPORT);
         this.vertical = inject(TuiDropdownPosition);
         this.previous = this.options.direction || 'bottom';
-        this.tuiDropdownSided = '';
-        this.tuiDropdownSidedOffset = 4;
+        this.tuiDropdownSided = input('');
+        this.tuiDropdownSidedOffset = input(4);
         this.type = 'dropdown';
     }
     getPosition(rect) {
-        if (this.tuiDropdownSided === false) {
+        if (this.tuiDropdownSided() === false) {
             return this.vertical.getPosition(rect);
         }
         const { height, width } = rect;
@@ -738,37 +665,33 @@ class TuiDropdownPositionSided extends TuiPositionAccessor {
             bottom: viewport.bottom - hostRect.top,
         };
         const position = {
-            top: hostRect.bottom - height + this.tuiDropdownSidedOffset + 1, // 1 for border
+            top: hostRect.bottom - height + this.tuiDropdownSidedOffset() + 1, // 1 for border
             left: hostRect.left - width - offset,
             right: hostRect.right + offset,
-            bottom: hostRect.top - this.tuiDropdownSidedOffset - 1, // 1 for border
+            bottom: hostRect.top - this.tuiDropdownSidedOffset() - 1, // 1 for border
         };
         const better = available.top > available.bottom ? 'top' : 'bottom';
         const maxLeft = available.left > available.right ? position.left : position.right;
         const left = available[align] > width ? position[align] : maxLeft;
         if ((available[this.previous] > height && direction) ||
             this.previous === better) {
-            this.vertical.emitDirection(this.previous);
-            return [position[this.previous], left];
+            this.vertical.direction.next(this.previous);
+            return [left, position[this.previous]];
         }
         this.previous = better;
-        this.vertical.emitDirection(better);
-        return [position[better], left];
+        this.vertical.direction.next(better);
+        return [left, position[better]];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPositionSided, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownPositionSided, isStandalone: true, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: "tuiDropdownSided", tuiDropdownSidedOffset: "tuiDropdownSidedOffset" }, providers: [TuiDropdownPosition, tuiAsPositionAccessor(TuiDropdownPositionSided)], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownPositionSided, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiDropdownPositionSided, isStandalone: true, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: { classPropertyName: "tuiDropdownSided", publicName: "tuiDropdownSided", isSignal: true, isRequired: false, transformFunction: null }, tuiDropdownSidedOffset: { classPropertyName: "tuiDropdownSidedOffset", publicName: "tuiDropdownSidedOffset", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TuiDropdownPosition, tuiAsPositionAccessor(TuiDropdownPositionSided)], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPositionSided, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownPositionSided, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownSided]',
                     providers: [TuiDropdownPosition, tuiAsPositionAccessor(TuiDropdownPositionSided)],
                 }]
-        }], propDecorators: { tuiDropdownSided: [{
-                type: Input
-            }], tuiDropdownSidedOffset: [{
-                type: Input
-            }] } });
+        }] });
 
 class TuiDropdownSelection extends TuiDriver {
     constructor() {
@@ -777,9 +700,9 @@ class TuiDropdownSelection extends TuiDriver {
         this.vcr = inject(ViewContainerRef);
         this.dropdown = inject(TuiDropdownDirective);
         this.el = tuiInjectElement();
-        this.handler$ = new BehaviorSubject(TUI_TRUE_HANDLER);
+        this.handler = computed((visible = this.tuiDropdownSelection()) => tuiIsString(visible) ? TUI_TRUE_HANDLER : visible);
         this.stream$ = combineLatest([
-            this.handler$,
+            toObservable(this.handler),
             inject(TUI_SELECTION_STREAM).pipe(map(() => this.getRange()), filter((range) => this.isValid(range)), distinctUntilChanged((x, y) => x.startOffset === y.startOffset &&
                 x.endOffset === y.endOffset &&
                 x.commonAncestorContainer === y.commonAncestorContainer)),
@@ -791,17 +714,15 @@ class TuiDropdownSelection extends TuiDriver {
                     : this.range;
             return (contained && handler(this.range)) || this.inDropdown(range);
         }));
-        this.range = inject(TUI_RANGE);
-        this.position = 'selection';
+        this.range = isPlatformBrowser(inject(PLATFORM_ID))
+            ? new Range()
+            : {};
         this.type = 'dropdown';
-    }
-    set tuiDropdownSelection(visible) {
-        if (!tuiIsString(visible)) {
-            this.handler$.next(visible);
-        }
+        this.tuiDropdownSelection = input('');
+        this.tuiDropdownSelectionPosition = input('selection');
     }
     getClientRect() {
-        switch (this.position) {
+        switch (this.tuiDropdownSelectionPosition()) {
             case 'tag': {
                 const { commonAncestorContainer } = this.range;
                 const element = tuiIsElement(commonAncestorContainer)
@@ -892,13 +813,13 @@ class TuiDropdownSelection extends TuiDriver {
         this.ghost = ghost;
         return ghost;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownSelection, isStandalone: true, selector: "[tuiDropdownSelection]", inputs: { position: ["tuiDropdownSelectionPosition", "position"], tuiDropdownSelection: "tuiDropdownSelection" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiDropdownSelection, isStandalone: true, selector: "[tuiDropdownSelection]", inputs: { tuiDropdownSelection: { classPropertyName: "tuiDropdownSelection", publicName: "tuiDropdownSelection", isSignal: true, isRequired: false, transformFunction: null }, tuiDropdownSelectionPosition: { classPropertyName: "tuiDropdownSelectionPosition", publicName: "tuiDropdownSelectionPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             tuiAsDriver(TuiDropdownSelection),
             tuiAsRectAccessor(TuiDropdownSelection),
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownSelection, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownSelection]',
@@ -907,12 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         tuiAsRectAccessor(TuiDropdownSelection),
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { position: [{
-                type: Input,
-                args: ['tuiDropdownSelectionPosition']
-            }], tuiDropdownSelection: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 const TuiDropdown = [
     TuiDropdownOptionsDirective,
@@ -920,7 +836,6 @@ const TuiDropdown = [
     TuiDropdownDirective,
     TuiDropdownComponent,
     TuiDropdownOpen,
-    TuiDropdownOpenLegacy,
     TuiDropdownManual,
     TuiDropdownHover,
     TuiDropdownContent,
@@ -934,14 +849,7 @@ function tuiDropdown(value) {
     return tuiDirectiveBinding(TuiDropdownDirective, 'tuiDropdown', value, {});
 }
 function tuiDropdownEnabled(value) {
-    return tuiDirectiveBinding(TuiDropdownOpen, 'tuiDropdownEnabled', value, {});
-}
-function tuiDropdownOpen() {
-    const open = tuiDirectiveBinding(TuiDropdownOpen, 'tuiDropdownOpen', false, {});
-    inject(TuiDropdownOpen)
-        .tuiDropdownOpenChange.pipe(takeUntilDestroyed())
-        .subscribe((value) => open.set(value));
-    return open;
+    return tuiDirectiveBinding(TuiDropdownOpen, 'enabled', value, {});
 }
 
 class TuiDropdownFixed {
@@ -949,10 +857,10 @@ class TuiDropdownFixed {
         const override = tuiOverrideOptions$1({ limitWidth: 'fixed' }, TUI_DROPDOWN_DEFAULT_OPTIONS);
         override(inject(TUI_DROPDOWN_OPTIONS, { self: true, optional: true }), null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownFixed, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownFixed, isStandalone: true, providers: [tuiDropdownOptionsProvider({})], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownFixed, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownFixed, isStandalone: true, providers: [tuiDropdownOptionsProvider({})], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownFixed, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownFixed, decorators: [{
             type: Directive,
             args: [{
                     providers: [tuiDropdownOptionsProvider({})],
@@ -966,18 +874,18 @@ class TuiDropdownAuto {
          */
         inject(TUI_DROPDOWN_OPTIONS).limitWidth = 'auto';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownAuto, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownAuto, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownAuto, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiDropdownAuto, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownAuto, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDropdownAuto, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
 class TuiWithDropdownOpen {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithDropdownOpen, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithDropdownOpen, isStandalone: true, hostDirectives: [{ directive: TuiDropdownOpen, inputs: ["tuiDropdownOpen", "open", "tuiDropdownEnabled", "tuiDropdownEnabled"], outputs: ["tuiDropdownOpenChange", "openChange"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithDropdownOpen, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiWithDropdownOpen, isStandalone: true, hostDirectives: [{ directive: TuiDropdownOpen, inputs: ["tuiDropdownOpen", "open", "tuiDropdownEnabled", "tuiDropdownEnabled"], outputs: ["tuiDropdownOpenChange", "openChange"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithDropdownOpen, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithDropdownOpen, decorators: [{
             type: Directive,
             args: [{
                     hostDirectives: [
@@ -994,5 +902,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownAuto, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOpenLegacy, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOpen, tuiDropdownOptionsProvider };
-//# sourceMappingURL=taiga-ui-core-directives-dropdown.mjs.map
+export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownAuto, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
+//# sourceMappingURL=taiga-ui-core-portals-dropdown.mjs.map