@taiga-ui/core 5.25.0 → 5.26.0-canary.eb5f53f

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

@@ -1,21 +1,21 @@
 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, computed, ChangeDetectionStrategy, Component, input, effect, ElementRef, INJECTOR, ChangeDetectorRef, signal, TemplateRef, contentChild, model, PLATFORM_ID, ViewContainerRef, afterNextRender } from '@angular/core';
+import { InjectionToken, Optional, Self, SkipSelf, inject, Directive, computed, ChangeDetectionStrategy, Component, Injectable, input, effect, ElementRef, INJECTOR, ChangeDetectorRef, signal, TemplateRef, contentChild, model, PLATFORM_ID, ViewContainerRef } 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, TuiRectAccessor, tuiProvideAccessor, TuiPositionAccessor, tuiAsRectAccessor, tuiInjectAccessor, tuiAsPositionAccessor, tuiAsVehicle, tuiAsDriver, TuiDriver } from '@taiga-ui/core/classes';
+import { TuiRectAccessor, TuiPositionAccessor, tuiProvideAccessor, tuiInjectAccessor, tuiAsPositionAccessor, TuiDriverDirective, tuiAsRectAccessor, 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 { tuiCheckFixedPosition, tuiAnchorDelegate, tuiGetWordRange } from '@taiga-ui/core/utils/dom';
 import { PolymorpheusOutlet, PolymorpheusComponent, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
-import { BehaviorSubject, takeWhile, map, Subject, distinctUntilChanged, throttleTime, merge, filter, EMPTY, switchMap, delay, startWith, takeUntil, fromEvent, of, tap, share, combineLatest } from 'rxjs';
+import { takeWhile, map, Subject, distinctUntilChanged, BehaviorSubject, 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';
 import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
-import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
-import { TUI_VIEWPORT, TUI_DARK_MODE, TUI_SELECTION_STREAM } from '@taiga-ui/core/tokens';
+import { TuiScrollbar, TuiScrollControls, TUI_SCROLL_REF } from '@taiga-ui/core/components/scrollbar';
+import { TUI_VIEWPORT, TUI_ANCHOR_SUPPORT, TUI_DARK_MODE, TUI_SELECTION_STREAM } from '@taiga-ui/core/tokens';
 import { EMPTY_CLIENT_RECT, TUI_TRUE_HANDLER, CHAR_ZERO_WIDTH_SPACE, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
 import { tuiClamp } from '@taiga-ui/cdk/utils/math';
 import { tuiPx, tuiGenerateId, tuiSetSignal, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
@@ -27,28 +27,12 @@ import { TuiObscured } from '@taiga-ui/cdk/directives/obscured';
 import { tuiIsFocusable, tuiGetClosestFocusable, tuiIsFocusedIn, tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
 import { WA_IS_TOUCH } from '@ng-web-apis/platform';
 
-class TuiDropdownDriver extends BehaviorSubject {
-    constructor() {
-        super(false);
-        this.type = 'dropdown';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriver }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriver, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-class TuiDropdownDriverDirective extends TuiDriverDirective {
-    constructor() {
-        super(...arguments);
-        this.type = 'dropdown';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownDriverDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
-            type: Directive
-        }] });
+/**
+ * @deprecated: remove in v6
+ */
+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' : '');
 
 const TUI_DROPDOWN_DEFAULT_OPTIONS = {
     align: 'start',
@@ -104,25 +88,45 @@ class TuiDropdownAnchored {
     constructor() {
         this.el = tuiInjectElement();
         this.directive = inject(TuiDropdownDirective);
-        this.accessor = inject(TuiRectAccessor);
+        this.rect = inject(TuiRectAccessor);
         this.viewport = inject(TUI_VIEWPORT);
         this.vvs = inject(TuiVisualViewportService);
         this.options = inject(TUI_DROPDOWN_OPTIONS);
         this.position = this.directive.position;
+        this.accessor = inject(TuiPositionAccessor);
         this.styles$ = inject(TuiPositionService).pipe(takeWhile(() => this.directive.el.isConnected &&
             this.directive.el.getClientRects().length > 0), map((v) => (this.position === 'fixed' ? this.vvs.correct(v) : v)), map((point) => this.getStyles(...point)), takeUntilDestroyed());
+        this.anchored = inject(TUI_ANCHOR_SUPPORT) &&
+            'position' in this.accessor &&
+            this.viewport.type === 'window';
     }
     ngAfterViewInit() {
-        this.styles$.subscribe({
-            next: (styles) => Object.assign(this.el.style, styles),
-            complete: () => this.directive.toggle(false),
-        });
+        if (this.anchored) {
+            this.accessor.position?.(this.el);
+        }
+        else {
+            this.styles$.subscribe({
+                next: (styles) => Object.assign(this.el.style, styles),
+                complete: () => this.directive.toggle(false),
+            });
+        }
+    }
+    // https://github.com/w3c/csswg-drafts/issues/14112
+    retrigger() {
+        if (!this.anchored ||
+            this.el.scrollHeight === this.el.clientHeight ||
+            this.el.clientHeight === this.options.maxHeight) {
+            return;
+        }
+        this.el.style.position = 'static';
+        void this.el.offsetHeight;
+        this.el.style.position = 'fixed';
     }
     getStyles(x, y) {
         const { maxHeight, minHeight, offset, limitWidth } = this.options;
         const parent = this.el.offsetParent?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
         const { left = 0, top = 0 } = this.position === 'fixed' ? {} : parent;
-        const rect = this.accessor.getClientRect();
+        const rect = this.rect.getClientRect();
         const viewport = this.viewport.getClientRect();
         const zoom = this.directive.el.currentCSSZoom || 1;
         const above = rect.top - viewport.top - 2 * offset;
@@ -144,7 +148,7 @@ class TuiDropdownAnchored {
         };
     }
     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: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownAnchored, isStandalone: true, host: { listeners: { "window:scrollend.zoneless.capture": "retrigger()" }, properties: { "class._anchored": "anchored" } }, providers: [
             TuiPositionService,
             tuiProvideAccessor(TuiPositionAccessor, 'dropdown'),
             tuiProvideAccessor(TuiRectAccessor, 'dropdown'),
@@ -158,41 +162,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         tuiProvideAccessor(TuiPositionAccessor, 'dropdown'),
                         tuiProvideAccessor(TuiRectAccessor, 'dropdown'),
                     ],
+                    host: {
+                        '[class._anchored]': 'anchored',
+                        '(window:scrollend.zoneless.capture)': 'retrigger()',
+                    },
                 }]
         }] });
 
+class TuiDropdownPosition extends TuiPositionAccessor {
+    constructor() {
+        super(...arguments);
+        this.el = tuiInjectElement();
+        this.options = inject(TUI_DROPDOWN_OPTIONS);
+        this.viewport = inject(TUI_VIEWPORT);
+        this.anchor = inject(TUI_DROPDOWN_ANCHOR);
+        this.direction = new Subject();
+        this.type = 'dropdown';
+        this.accessor = tuiInjectAccessor(TuiRectAccessor, 'dropdown');
+        this.tuiDropdownDirectionChange = outputFromObservable(this.direction.pipe(distinctUntilChanged()));
+    }
+    position(element) {
+        const { direction, align, offset, limitWidth, minHeight, maxHeight } = this.options;
+        const rect = this.anchor.nativeElement.getBoundingClientRect();
+        const viewport = this.viewport.getClientRect();
+        const horizontal = align === 'center' ? '' : `span-x-${invert(align)}`;
+        const height = Math.min(element.clientHeight, maxHeight) + offset * 2;
+        const vertical = direction || 'bottom';
+        const top = rect.top - viewport.top;
+        const bottom = viewport.bottom - rect.bottom;
+        const available = vertical === 'top' ? top : bottom;
+        const max = Math.max(top, bottom);
+        Object.assign(element.style, {
+            position: 'fixed',
+            visibility: 'visible',
+            positionAnchor: this.anchor.nativeElement.dataset.tuiAnchor,
+            positionArea: `${available < height && max !== available ? flip(vertical) : vertical} ${horizontal}`,
+            marginBlock: `${offset}px`,
+            minBlockSize: `calc-size(fit-content, min(size, ${minHeight}px))`,
+            maxBlockSize: `calc-size(fit-content, min(size, ${maxHeight}px))`,
+            minInlineSize: limitWidth === 'min' ? 'anchor-size(inline)' : '',
+            inlineSize: limitWidth === 'fixed' ? 'anchor-size(inline)' : '',
+            blockSize: `calc-size(fit-content, calc(100% - ${2 * offset}px))`,
+        });
+    }
+    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 previous = this.previous || direction || 'bottom';
+        const viewport = {
+            top: viewportRect.top - offset,
+            bottom: viewportRect.bottom + offset,
+            right: viewportRect.right - offset,
+            left: viewportRect.left + offset,
+        };
+        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 better = available.top > available.bottom ? 'top' : 'bottom';
+        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),
+        };
+        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)] }]
+        }] });
+// TODO: Review in v6 to possible sync alignment with native anchors
+function invert(align) {
+    return align === 'start' ? 'end' : 'start';
+}
+function flip(direction) {
+    return direction === 'top' ? 'bottom' : 'top';
+}
+
+const TUI_DROPDOWN_COMPONENT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_COMPONENT' : '', { factory: () => TuiDropdownComponent });
 /**
- * @description:
- * This component is used to show template in a portal
- * using default style of white rounded box with a shadow
+ * TODO: Remove extends TuiScrollbar in v6 when TuiScrollable is dropped
  */
-class TuiDropdownComponent {
+class TuiDropdownComponent extends TuiScrollbar {
     constructor() {
+        super(...arguments);
+        this.anchor = inject(TUI_DROPDOWN_ANCHOR);
+        this.position = inject(TuiDropdownPosition);
+        this.darkMode = inject(TUI_DARK_MODE);
         this.options = inject(TUI_DROPDOWN_OPTIONS);
         this.directive = inject(TuiDropdownDirective);
-        this.context = inject(TUI_DROPDOWN_CONTEXT, { optional: true });
-        this.darkMode = inject(TUI_DARK_MODE);
         this.theme = computed((_ = this.darkMode()) => this.directive.el.closest('[tuiTheme]')?.getAttribute('tuiTheme'));
         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: 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;isolation:isolate;pointer-events:auto;outline-offset:-1px;outline:1px solid color-mix(in srgb,rgb(from var(--tui-border-normal) r g b / 1) 12%,var(--tui-background-elevation-1));--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{z-index:-1;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 }); }
+    ngOnDestroy() {
+        if (!this.anchor.nativeElement.isConnected) {
+            this.el.style.setProperty('visibility', 'hidden');
+        }
+    }
+    onResize({ target, contentRect }) {
+        if (!target.checkVisibility({ opacityProperty: true })) {
+            return;
+        }
+        if (contentRect.width) {
+            this.position.direction.next(contentRect.height ? 'bottom' : 'top');
+            this.el.style.setProperty('visibility', 'visible');
+        }
+        else {
+            this.el.style.setProperty('visibility', 'hidden');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownComponent, deps: null, 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()", "style.max-block-size.px": "options.maxHeight" } }, providers: [
+            {
+                provide: TUI_SCROLL_REF,
+                useFactory: () => inject(TuiDropdownComponent).browserScrollRef,
+            },
+        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }, { directive: TuiDropdownAnchored }], ngImport: i0, template: `
+        <tui-scroll-controls class="t-scrollbar" />
+        <div class="t-wrapper">
+            <div
+                *polymorpheusOutlet="
+                    directive.content() as text;
+                    context: {$implicit: close}
+                "
+                [innerHTML]="text"
+            ></div>
+        </div>
+        <div
+            class="t-detector"
+            (resize)="onResize($any($event)[0])"
+        ></div>
+    `, isInline: true, 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:auto;isolation:isolate;pointer-events:auto;outline-offset:-1px;outline:1px solid color-mix(in srgb,rgb(from var(--tui-border-normal) r g b / 1) 12%,var(--tui-background-elevation-1));overscroll-behavior:none;position-visibility:anchors-valid;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;--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}:host._delegated{scroll-timeline:none}:host:not(._anchored) .t-detector{display:none}.t-wrapper{z-index:-1;flex:1}.t-wrapper>*{padding:1rem}.t-detector{position:inherit;inset:anchor(top) 1rem calc(anchor(--t-scrollbar top) - 1rem);pointer-events:none;inline-size:calc(anchor-size(inline,-1px) + 1px);position-anchor:inherit;position-visibility:always}@supports (anchor-name: --t-scrollbar){.t-scrollbar{position:fixed;inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position-anchor:--t-scrollbar;min-inline-size:0;min-block-size:0;margin:0}}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }], 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, TuiDropdownAnchored], host: {
+            args: [{ selector: 'tui-dropdown', imports: [PolymorpheusOutlet, TuiScrollControls], template: `
+        <tui-scroll-controls class="t-scrollbar" />
+        <div class="t-wrapper">
+            <div
+                *polymorpheusOutlet="
+                    directive.content() as text;
+                    context: {$implicit: close}
+                "
+                [innerHTML]="text"
+            ></div>
+        </div>
+        <div
+            class="t-detector"
+            (resize)="onResize($any($event)[0])"
+        ></div>
+    `, changeDetection: ChangeDetectionStrategy.Default, providers: [
+                        {
+                            provide: TUI_SCROLL_REF,
+                            useFactory: () => inject(TuiDropdownComponent).browserScrollRef,
+                        },
+                    ], 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;isolation:isolate;pointer-events:auto;outline-offset:-1px;outline:1px solid color-mix(in srgb,rgb(from var(--tui-border-normal) r g b / 1) 12%,var(--tui-background-elevation-1));--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{z-index:-1;flex-grow:1;max-inline-size:100%;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"] }]
+                        '[style.max-block-size.px]': 'options.maxHeight',
+                    }, 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:auto;isolation:isolate;pointer-events:auto;outline-offset:-1px;outline:1px solid color-mix(in srgb,rgb(from var(--tui-border-normal) r g b / 1) 12%,var(--tui-background-elevation-1));overscroll-behavior:none;position-visibility:anchors-valid;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;--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}:host._delegated{scroll-timeline:none}:host:not(._anchored) .t-detector{display:none}.t-wrapper{z-index:-1;flex:1}.t-wrapper>*{padding:1rem}.t-detector{position:inherit;inset:anchor(top) 1rem calc(anchor(--t-scrollbar top) - 1rem);pointer-events:none;inline-size:calc(anchor-size(inline,-1px) + 1px);position-anchor:inherit;position-visibility:always}@supports (anchor-name: --t-scrollbar){.t-scrollbar{position:fixed;inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position-anchor:--t-scrollbar;min-inline-size:0;min-block-size:0;margin:0}}\n"] }]
         }] });
 
-/**
- * A component to display a dropdown
- */
-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 TuiDropdownDriver extends BehaviorSubject {
+    constructor() {
+        super(false);
+        this.type = 'dropdown';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriver }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriver, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+class TuiDropdownDriverDirective extends TuiDriverDirective {
+    constructor() {
+        super(...arguments);
+        this.type = 'dropdown';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownDriverDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
+            type: Directive
+        }] });
 
 class TuiDropdownA11y {
     constructor() {
@@ -257,79 +444,6 @@ 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 = 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);
@@ -404,10 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TuiDropdownAnchor,
                         TuiDropdownDriverDirective,
                         { directive: TuiDropdownA11y, inputs: ['tuiDropdownRole'] },
-                        {
-                            directive: TuiDropdownPosition,
-                            outputs: ['tuiDropdownDirectionChange'],
-                        },
+                        { directive: TuiDropdownPosition, outputs: ['tuiDropdownDirectionChange'] },
                     ],
                     host: { '[class.tui-dropdown-open]': 'ref()' },
                 }]
@@ -588,12 +699,6 @@ 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);
@@ -616,14 +721,10 @@ 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);
+        this.nativeElement = tuiAnchorDelegate({
+            top: 'calc(anchor(top)',
+            left: 'calc(anchor(left)',
+        });
     }
     ngOnDestroy() {
         this.nativeElement.parentNode?.removeChild(this.nativeElement);
@@ -635,8 +736,7 @@ class TuiDropdownContext extends TuiRectAccessor {
         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.nativeElement.style.left = `calc(anchor(left, -100000px) + ${x - left}px)`;
         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 }); }
@@ -778,6 +878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 class TuiDropdownPositionSided extends TuiPositionAccessor {
     constructor() {
         super(...arguments);
+        this.anchor = inject(TUI_DROPDOWN_ANCHOR, { optional: true });
         this.options = inject(TUI_DROPDOWN_OPTIONS);
         this.viewport = inject(TUI_VIEWPORT);
         this.vertical = inject(TuiDropdownPosition, { optional: true });
@@ -786,6 +887,23 @@ class TuiDropdownPositionSided extends TuiPositionAccessor {
         this.tuiDropdownSidedOffset = input(4);
         this.type = 'dropdown';
     }
+    position(element) {
+        if (this.tuiDropdownSided() === false) {
+            this.vertical?.position(element);
+            return;
+        }
+        const { direction, align, offset, minHeight, maxHeight } = this.options;
+        const horizontal = align === 'center' ? 'end' : align;
+        Object.assign(element.style, {
+            position: 'fixed',
+            visibility: 'visible',
+            positionAnchor: this.anchor?.nativeElement.dataset.tuiAnchor,
+            positionArea: `x-${horizontal} span-${direction || 'bottom'}`,
+            minBlockSize: `calc-size(fit-content, min(size, ${minHeight}px))`,
+            maxBlockSize: `min(calc-size(fit-content, size), ${maxHeight}px)`,
+            margin: `${-offset}px ${offset}px`,
+        });
+    }
     getPosition(rect) {
         if (this.tuiDropdownSided() === false && this.vertical) {
             return this.vertical.getPosition(rect);
@@ -857,27 +975,17 @@ class TuiDropdownSelection extends TuiDriver {
             const visible = valid || this.inDropdown(range);
             const focus = tuiGetFocused(this.doc);
             const textfield = focus && tuiIsTextfield(focus) && this.el.contains(focus);
+            const show = visible && textfield ? this.isCaretVisible(this.range) : visible;
             this.updateAnchor();
-            return visible && textfield ? this.isCaretVisible(this.range) : visible;
+            return show;
         }));
         this.range = isPlatformBrowser(inject(PLATFORM_ID))
             ? new Range()
             : {};
         this.type = 'dropdown';
-        this.nativeElement = this.doc.createElement('div');
+        this.nativeElement = tuiAnchorDelegate();
         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);
@@ -939,12 +1047,11 @@ class TuiDropdownSelection extends TuiDriver {
     }
     veryVerySadInputFix(element) {
         const { ghost = this.initGhost(this.ghostHost) } = this;
-        const { top, left, width, height } = this.ghostHost.getBoundingClientRect();
+        const { width, height } = this.ghostHost.getBoundingClientRect();
         const { selectionStart, selectionEnd, value } = element;
         const range = this.doc.createRange();
-        const hostRect = this.ghostHost.getBoundingClientRect();
-        ghost.style.top = tuiPx(top - hostRect.top);
-        ghost.style.left = tuiPx(left - hostRect.left);
+        ghost.style.top = '0px';
+        ghost.style.left = '0px';
         ghost.style.width = tuiPx(width);
         ghost.style.height = tuiPx(height);
         ghost.textContent = `${CHAR_ZERO_WIDTH_SPACE}${value}${CHAR_NO_BREAK_SPACE}`;
@@ -989,7 +1096,7 @@ class TuiDropdownSelection extends TuiDriver {
         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)`,
+            left: `calc(anchor(left, -100000px) + ${rect.left - left}px)`,
             blockSize: tuiPx(rect.height),
             inlineSize: tuiPx(rect.width),
         });