@taiga-ui/core 5.23.0 → 5.24.0-canary.51d7c08

package/fesm2022/taiga-ui-core-portals-dropdown.mjs

@@ -1,15 +1,15 @@
 import { tuiProvide, tuiDirectiveBinding, tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import { coerceArray } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, forwardRef, computed, ChangeDetectionStrategy, Component, input, effect, INJECTOR, ChangeDetectorRef, signal, TemplateRef, ElementRef, contentChild, model, PLATFORM_ID, ViewContainerRef } from '@angular/core';
-import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, computed, ChangeDetectionStrategy, Component, input, effect, ElementRef, INJECTOR, ChangeDetectorRef, signal, TemplateRef, contentChild, model, PLATFORM_ID, ViewContainerRef, afterNextRender } from '@angular/core';
+import { takeUntilDestroyed, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { tuiZonefreeScheduler, tuiIfMap, tuiCloseWatcher, tuiTypedFromEvent, tuiStopPropagation, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement, tuiGetActualTarget, tuiIsElement, tuiIsElementEditable, tuiIsHTMLElement, tuiPointToClientRect, tuiIsTextNode, tuiIsTextfield } from '@taiga-ui/cdk/utils/dom';
-import { TuiDriverDirective, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiPositionAccessorFor, tuiRectAccessorFor, tuiAsVehicle, tuiAsDriver, tuiAsRectAccessor, TuiDriver, tuiAsPositionAccessor } from '@taiga-ui/core/classes';
+import { TuiDriverDirective, TuiRectAccessor, tuiProvideAccessor, TuiPositionAccessor, tuiAsRectAccessor, tuiInjectAccessor, tuiAsPositionAccessor, tuiAsVehicle, tuiAsDriver, TuiDriver } from '@taiga-ui/core/classes';
 import { TuiPopupService } from '@taiga-ui/core/portals/popup';
 import { tuiCheckFixedPosition, tuiGetWordRange } from '@taiga-ui/core/utils/dom';
 import { PolymorpheusOutlet, PolymorpheusComponent, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
-import { BehaviorSubject, Subject, distinctUntilChanged, takeWhile, map, throttleTime, merge, filter, EMPTY, switchMap, delay, startWith, takeUntil, fromEvent, of, tap, share, combineLatest } from 'rxjs';
+import { BehaviorSubject, takeWhile, map, Subject, distinctUntilChanged, throttleTime, merge, filter, EMPTY, switchMap, delay, startWith, takeUntil, fromEvent, of, tap, share, combineLatest } from 'rxjs';
 import * as i1 from '@taiga-ui/cdk/directives/active-zone';
 import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
 import * as i2 from '@taiga-ui/cdk/directives/animated';
@@ -99,84 +99,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }] });
 
-class TuiDropdownPosition extends TuiPositionAccessor {
-    constructor() {
-        super(...arguments);
-        this.el = tuiInjectElement();
-        this.options = inject(TUI_DROPDOWN_OPTIONS);
-        this.viewport = inject(TUI_VIEWPORT);
-        this.direction = new Subject();
-        this.type = 'dropdown';
-        this.accessor = tuiFallbackAccessor('dropdown')(inject(TuiRectAccessor, { self: true, optional: true }), { getClientRect: () => this.el.getBoundingClientRect() });
-        this.tuiDropdownDirectionChange = outputFromObservable(this.direction.pipe(distinctUntilChanged()));
-    }
-    getPosition({ width, height }) {
-        if (!width && !height) {
-            this.previous = undefined;
-        }
-        const hostRect = this.accessor.getClientRect();
-        const viewportRect = this.viewport.getClientRect();
-        const { minHeight, direction, offset, limitWidth } = this.options;
-        const align = this.getAlign(this.options.align);
-        const viewport = {
-            top: viewportRect.top - offset,
-            bottom: viewportRect.bottom + offset,
-            right: viewportRect.right - offset,
-            left: viewportRect.left + offset,
-        };
-        const previous = this.previous || direction || 'bottom';
-        const available = {
-            top: hostRect.top - 2 * offset - viewport.top,
-            bottom: viewport.bottom - hostRect.bottom - 2 * offset,
-        };
-        const rectWidth = limitWidth === 'fixed' ? hostRect.width : width;
-        const right = Math.max(hostRect.right - rectWidth, offset);
-        const left = hostRect.left + width < viewport.right ? hostRect.left : right;
-        const position = {
-            top: hostRect.top - offset - height,
-            bottom: hostRect.bottom + offset,
-            right: Math.max(viewport.left, right),
-            center: hostRect.left + hostRect.width / 2 + width / 2 < viewport.right
-                ? hostRect.left + hostRect.width / 2 - width / 2
-                : right,
-            left: Math.max(viewport.left, left),
-        };
-        const better = available.top > available.bottom ? 'top' : 'bottom';
-        if ((available[previous] > minHeight && direction) ||
-            available[previous] > height) {
-            this.direction.next(previous);
-            return [position[align], position[previous]];
-        }
-        this.previous = better;
-        this.direction.next(better);
-        return [position[align], position[better]];
-    }
-    getAlign(align) {
-        const rtl = this.el.matches('[dir="rtl"] :scope');
-        if (rtl && align === 'start') {
-            return 'right';
-        }
-        if (rtl && align === 'end') {
-            return 'left';
-        }
-        if (align === 'center') {
-            return 'center';
-        }
-        return align === 'end' ? 'right' : 'left';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownPosition, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownPosition, isStandalone: true, outputs: { tuiDropdownDirectionChange: "tuiDropdownDirectionChange" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownPosition, decorators: [{
-            type: Directive
-        }] });
-
 const MAX_WIDTH_GAP = 16; // 8px min gap from each side
-class TuiDropdownAnchor {
+class TuiDropdownAnchored {
     constructor() {
         this.el = tuiInjectElement();
         this.directive = inject(TuiDropdownDirective);
-        this.accessor = this.directive.accessor;
+        this.accessor = inject(TuiRectAccessor);
         this.viewport = inject(TUI_VIEWPORT);
         this.vvs = inject(TuiVisualViewportService);
         this.options = inject(TUI_DROPDOWN_OPTIONS);
@@ -215,20 +143,20 @@ class TuiDropdownAnchor {
             maxWidth: tuiPx(Math.round(viewport.width / zoom) - MAX_WIDTH_GAP),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownAnchor, isStandalone: true, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchored, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownAnchored, isStandalone: true, providers: [
             TuiPositionService,
-            tuiPositionAccessorFor('dropdown', TuiDropdownPosition),
-            tuiRectAccessorFor('dropdown', forwardRef(() => TuiDropdownDirective)),
+            tuiProvideAccessor(TuiPositionAccessor, 'dropdown'),
+            tuiProvideAccessor(TuiRectAccessor, 'dropdown'),
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchored, decorators: [{
             type: Directive,
             args: [{
                     providers: [
                         TuiPositionService,
-                        tuiPositionAccessorFor('dropdown', TuiDropdownPosition),
-                        tuiRectAccessorFor('dropdown', forwardRef(() => TuiDropdownDirective)),
+                        tuiProvideAccessor(TuiPositionAccessor, 'dropdown'),
+                        tuiProvideAccessor(TuiRectAccessor, 'dropdown'),
                     ],
                 }]
         }] });
@@ -248,11 +176,11 @@ class TuiDropdownComponent {
         this.close = () => this.directive.toggle(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownComponent, isStandalone: true, selector: "tui-dropdown", host: { properties: { "attr.data-appearance": "options.appearance", "attr.tuiTheme": "theme()" } }, hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }, { directive: TuiDropdownAnchor }], 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-1);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:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide;animation-duration:calc(var(--tui-duration) / 2);pointer-events:none}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:calc(100% + 2px);inline-size:max-content;overscroll-behavior:none;margin:-1px}.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownComponent, isStandalone: true, selector: "tui-dropdown", host: { properties: { "attr.data-appearance": "options.appearance", "attr.tuiTheme": "theme()" } }, hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }, { directive: TuiDropdownAnchored }], 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-1);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:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide;animation-duration:calc(var(--tui-duration) / 2);pointer-events:none}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:calc(100% + 2px);inline-size:max-content;overscroll-behavior:none;margin:-1px}.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.25", ngImport: i0, type: TuiDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-dropdown', imports: [PolymorpheusOutlet, TuiScrollbar], changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [TuiActiveZone, TuiAnimated, TuiDropdownAnchor], host: {
+            args: [{ selector: 'tui-dropdown', imports: [PolymorpheusOutlet, TuiScrollbar], changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [TuiActiveZone, TuiAnimated, TuiDropdownAnchored], 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-1);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:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide;animation-duration:calc(var(--tui-duration) / 2);pointer-events:none}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:calc(100% + 2px);inline-size:max-content;overscroll-behavior:none;margin:-1px}.t-primitive{padding:1rem}\n"] }]
@@ -264,6 +192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 const TUI_DROPDOWN_COMPONENT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_COMPONENT' : '', { factory: () => TuiDropdownComponent });
 const TUI_DROPDOWN_CONTEXT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_CONTEXT' : '');
 const TUI_DROPDOWN_HOST = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_HOST' : '');
+const TUI_DROPDOWN_ANCHOR = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_ANCHOR' : '');
 
 class TuiDropdownA11y {
     constructor() {
@@ -296,6 +225,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: '[tuiDropdownA11y]' }]
         }] });
 
+class TuiDropdownAnchor extends TuiRectAccessor {
+    constructor() {
+        super(...arguments);
+        this.el = tuiInjectElement();
+        this.anchor = `--${tuiGenerateId()}`;
+        this.type = 'dropdown';
+    }
+    getClientRect() {
+        return this.el.getBoundingClientRect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownAnchor, isStandalone: true, host: { properties: { "attr.data-tui-anchor": "anchor", "style.anchor-name": "anchor" } }, providers: [
+            tuiAsRectAccessor(TuiDropdownAnchor),
+            tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, ElementRef),
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        tuiAsRectAccessor(TuiDropdownAnchor),
+                        tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, ElementRef),
+                    ],
+                    host: {
+                        '[attr.data-tui-anchor]': 'anchor',
+                        '[style.anchor-name]': 'anchor',
+                    },
+                }]
+        }] });
+
+class TuiDropdownPosition extends TuiPositionAccessor {
+    constructor() {
+        super(...arguments);
+        this.el = tuiInjectElement();
+        this.options = inject(TUI_DROPDOWN_OPTIONS);
+        this.viewport = inject(TUI_VIEWPORT);
+        this.direction = new Subject();
+        this.type = 'dropdown';
+        this.accessor = tuiInjectAccessor(TuiRectAccessor, 'dropdown');
+        this.tuiDropdownDirectionChange = outputFromObservable(this.direction.pipe(distinctUntilChanged()));
+    }
+    getPosition({ width, height }) {
+        if (!width && !height) {
+            this.previous = undefined;
+        }
+        const hostRect = this.accessor.getClientRect();
+        const viewportRect = this.viewport.getClientRect();
+        const { minHeight, direction, offset, limitWidth } = this.options;
+        const align = this.getAlign(this.options.align);
+        const viewport = {
+            top: viewportRect.top - offset,
+            bottom: viewportRect.bottom + offset,
+            right: viewportRect.right - offset,
+            left: viewportRect.left + offset,
+        };
+        const previous = this.previous || direction || 'bottom';
+        const available = {
+            top: hostRect.top - 2 * offset - viewport.top,
+            bottom: viewport.bottom - hostRect.bottom - 2 * offset,
+        };
+        const rectWidth = limitWidth === 'fixed' ? hostRect.width : width;
+        const right = Math.max(hostRect.right - rectWidth, offset);
+        const left = hostRect.left + width < viewport.right ? hostRect.left : right;
+        const position = {
+            top: hostRect.top - offset - height,
+            bottom: hostRect.bottom + offset,
+            right: Math.max(viewport.left, right),
+            center: hostRect.left + hostRect.width / 2 + width / 2 < viewport.right
+                ? hostRect.left + hostRect.width / 2 - width / 2
+                : right,
+            left: Math.max(viewport.left, left),
+        };
+        const better = available.top > available.bottom ? 'top' : 'bottom';
+        if ((available[previous] > minHeight && direction) ||
+            available[previous] > height) {
+            this.direction.next(previous);
+            return [position[align], position[previous]];
+        }
+        this.previous = better;
+        this.direction.next(better);
+        return [position[align], position[better]];
+    }
+    getAlign(align) {
+        const rtl = this.el.matches('[dir="rtl"] :scope');
+        if (rtl && align === 'start') {
+            return 'right';
+        }
+        if (rtl && align === 'end') {
+            return 'left';
+        }
+        if (align === 'center') {
+            return 'center';
+        }
+        return align === 'end' ? 'right' : 'left';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownPosition, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownPosition, isStandalone: true, outputs: { tuiDropdownDirectionChange: "tuiDropdownDirectionChange" }, providers: [tuiAsPositionAccessor(TuiDropdownPosition)], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownPosition, decorators: [{
+            type: Directive,
+            args: [{ providers: [tuiAsPositionAccessor(TuiDropdownPosition)] }]
+        }] });
+
 class TuiDropdownDirective {
     constructor() {
         this.injector = inject(INJECTOR);
@@ -325,11 +359,12 @@ class TuiDropdownDirective {
                 : content,
         });
     }
+    /** @deprecated remove in v6 */
     get accessor() {
         const accessors = this.injector.get(TuiRectAccessor, null, {
             self: true,
         });
-        return tuiFallbackAccessor('dropdown')(accessors, this);
+        return ([...(accessors || [])].reverse().find(({ type }) => type === 'dropdown') || this);
     }
     get position() {
         return tuiCheckFixedPosition(this.el) ? 'fixed' : 'absolute';
@@ -357,21 +392,16 @@ class TuiDropdownDirective {
         this.drivers.forEach((driver) => driver?.next(show));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [
-            tuiAsVehicle(TuiDropdownDirective),
-            tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
-        ], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownA11y, inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownAnchor }, { directive: TuiDropdownDriverDirective }, { directive: TuiDropdownA11y, inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]:not(ng-container):not(ng-template)',
-                    providers: [
-                        tuiAsVehicle(TuiDropdownDirective),
-                        tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
-                    ],
+                    providers: [tuiAsVehicle(TuiDropdownDirective)],
                     exportAs: 'tuiDropdown',
                     hostDirectives: [
+                        TuiDropdownAnchor,
                         TuiDropdownDriverDirective,
                         { directive: TuiDropdownA11y, inputs: ['tuiDropdownRole'] },
                         {
@@ -558,6 +588,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: 'ng-template[tuiDropdown]' }]
         }], ctorParameters: () => [] });
 
+const STYLE = {
+    position: 'fixed',
+    blockSize: '1px',
+    inlineSize: '1px',
+    pointerEvents: 'none',
+};
 class TuiDropdownContext extends TuiRectAccessor {
     constructor() {
         super(...arguments);
@@ -580,12 +616,27 @@ class TuiDropdownContext extends TuiRectAccessor {
             this.currentRect = EMPTY_CLIENT_RECT;
         });
         this.type = 'dropdown';
+        this.nativeElement = this.doc.createElement('div');
+    }
+    ngAfterViewInit() {
+        const anchorName = `--${tuiGenerateId()}`;
+        const positionAnchor = this.el.getAttribute('data-tui-anchor');
+        const style = { ...STYLE, positionAnchor, anchorName };
+        Object.assign(this.nativeElement.style, style);
+        this.nativeElement.setAttribute('data-tui-anchor', anchorName);
+    }
+    ngOnDestroy() {
+        this.nativeElement.parentNode?.removeChild(this.nativeElement);
     }
     getClientRect() {
         return this.currentRect;
     }
     onContextMenu(x, y) {
+        const { top, left } = this.el.getBoundingClientRect();
         this.currentRect = tuiPointToClientRect(x, y);
+        this.nativeElement.style.top = `calc(anchor(top) + ${y - top}px)`;
+        this.nativeElement.style.left = `calc(anchor(left) + ${x - left}px)`;
+        this.doc.body.appendChild(this.nativeElement);
         this.driver.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownContext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
@@ -594,6 +645,7 @@ class TuiDropdownContext extends TuiRectAccessor {
             TuiDropdownDriver,
             tuiAsDriver(TuiDropdownDriver),
             tuiAsRectAccessor(TuiDropdownContext),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownContext),
         ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownContext, decorators: [{
@@ -605,6 +657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TuiDropdownDriver,
                         tuiAsDriver(TuiDropdownDriver),
                         tuiAsRectAccessor(TuiDropdownContext),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownContext),
                     ],
                     host: {
                         '[style.-webkit-touch-callout]': 'userSelect()',
@@ -727,21 +780,21 @@ class TuiDropdownPositionSided extends TuiPositionAccessor {
         super(...arguments);
         this.options = inject(TUI_DROPDOWN_OPTIONS);
         this.viewport = inject(TUI_VIEWPORT);
-        this.vertical = inject(TuiDropdownPosition);
+        this.vertical = inject(TuiDropdownPosition, { optional: true });
         this.previous = this.options.direction || 'bottom';
         this.tuiDropdownSided = input('');
         this.tuiDropdownSidedOffset = input(4);
         this.type = 'dropdown';
     }
     getPosition(rect) {
-        if (this.tuiDropdownSided() === false) {
+        if (this.tuiDropdownSided() === false && this.vertical) {
             return this.vertical.getPosition(rect);
         }
         const { height, width } = rect;
-        const hostRect = this.vertical.accessor?.getClientRect() ?? EMPTY_CLIENT_RECT;
+        const hostRect = this.vertical?.accessor.getClientRect() ?? EMPTY_CLIENT_RECT;
         const viewport = this.viewport.getClientRect();
         const { direction, offset } = this.options;
-        const adjusted = this.vertical.getAlign(this.options.align);
+        const adjusted = this.vertical?.getAlign(this.options.align) || 'center';
         const align = adjusted === 'center' ? 'left' : adjusted;
         const available = {
             top: hostRect.bottom - viewport.top,
@@ -760,21 +813,21 @@ class TuiDropdownPositionSided extends TuiPositionAccessor {
         const left = available[align] > width ? position[align] : maxLeft;
         if ((available[this.previous] > height && direction) ||
             this.previous === better) {
-            this.vertical.direction.next(this.previous);
+            this.vertical?.direction.next(this.previous);
             return [left, position[this.previous]];
         }
         this.previous = better;
-        this.vertical.direction.next(better);
+        this.vertical?.direction.next(better);
         return [left, position[better]];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownPositionSided, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", 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: [tuiAsPositionAccessor(TuiDropdownPositionSided)], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownPositionSided, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdownSided]',
-                    providers: [TuiDropdownPosition, tuiAsPositionAccessor(TuiDropdownPositionSided)],
+                    providers: [tuiAsPositionAccessor(TuiDropdownPositionSided)],
                 }]
         }] });
 
@@ -802,16 +855,35 @@ class TuiDropdownSelection extends TuiDriver {
             const contained = this.el.contains(range.commonAncestorContainer);
             const valid = contained && handler(this.range);
             const visible = valid || this.inDropdown(range);
-            const active = tuiGetFocused(this.doc);
-            const textfield = active && tuiIsTextfield(active) && this.el.contains(active);
+            const focus = tuiGetFocused(this.doc);
+            const textfield = focus && tuiIsTextfield(focus) && this.el.contains(focus);
+            this.updateAnchor();
             return visible && textfield ? this.isCaretVisible(this.range) : visible;
         }));
         this.range = isPlatformBrowser(inject(PLATFORM_ID))
             ? new Range()
             : {};
         this.type = 'dropdown';
+        this.nativeElement = this.doc.createElement('div');
         this.tuiDropdownSelection = input('');
         this.tuiDropdownSelectionPosition = input('selection');
+        afterNextRender(() => {
+            const anchorName = `--${tuiGenerateId()}`;
+            Object.assign(this.nativeElement.style, {
+                position: 'fixed',
+                pointerEvents: 'none',
+                positionAnchor: this.el.dataset.tuiAnchor,
+                anchorName,
+            });
+            this.nativeElement.dataset.tuiAnchor = anchorName;
+            this.doc.body.appendChild(this.nativeElement);
+        });
+    }
+    ngOnDestroy() {
+        this.nativeElement.parentNode?.removeChild(this.nativeElement);
+        if (this.ghost) {
+            this.ghostHost.removeChild(this.ghost);
+        }
     }
     getClientRect() {
         switch (this.tuiDropdownSelectionPosition()) {
@@ -830,11 +902,6 @@ class TuiDropdownSelection extends TuiDriver {
                 return this.range.getBoundingClientRect();
         }
     }
-    ngOnDestroy() {
-        if (this.ghost) {
-            this.ghostHost.removeChild(this.ghost);
-        }
-    }
     get ghostHost() {
         return this.el.querySelector('tui-textfield .t-ghost') || this.el;
     }
@@ -917,10 +984,21 @@ class TuiDropdownSelection extends TuiDriver {
         const threshold = lineHeight * 0.5;
         return visibleHeight >= threshold;
     }
+    updateAnchor() {
+        const rect = this.getClientRect();
+        const { top, left } = this.el.getBoundingClientRect();
+        Object.assign(this.nativeElement.style, {
+            top: `calc(anchor(top) + ${rect.top - top}px)`,
+            left: `calc(anchor(left) + ${rect.left - left}px)`,
+            blockSize: tuiPx(rect.height),
+            inlineSize: tuiPx(rect.width),
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", 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),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownSelection),
         ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownSelection, decorators: [{
@@ -930,6 +1008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     providers: [
                         tuiAsDriver(TuiDropdownSelection),
                         tuiAsRectAccessor(TuiDropdownSelection),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownSelection),
                     ],
                 }]
         }], ctorParameters: () => [] });
@@ -971,5 +1050,5 @@ const TuiDropdown = [
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOST, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAnchor, TuiDropdownAuto, TuiDropdownClose, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
+export { TUI_DROPDOWN_ANCHOR, TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOST, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAnchor, TuiDropdownAnchored, TuiDropdownAuto, TuiDropdownClose, 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