@taiga-ui/core/fesm2022/taiga-ui-core-directives-dropdown.mjs.map

Core library for creating Angular components and applications using Taiga UI

{"version":3,"file":"taiga-ui-core-directives-dropdown.mjs","sources":["../../../projects/core/directives/dropdown/dropdown.driver.ts","../../../projects/core/directives/dropdown/dropdown.providers.ts","../../../projects/core/directives/dropdown/dropdown.service.ts","../../../projects/core/directives/dropdown/dropdown-options.directive.ts","../../../projects/core/directives/dropdown/dropdown-position.directive.ts","../../../projects/core/directives/dropdown/dropdown.directive.ts","../../../projects/core/directives/dropdown/dropdown.component.ts","../../../projects/core/directives/dropdown/dropdown.template.html","../../../projects/core/directives/dropdown/dropdown-context.directive.ts","../../../projects/core/directives/dropdown/dropdown-hover.options.ts","../../../projects/core/directives/dropdown/dropdown-open.directive.ts","../../../projects/core/directives/dropdown/dropdown-hover.directive.ts","../../../projects/core/directives/dropdown/dropdown-manual.directive.ts","../../../projects/core/directives/dropdown/dropdown-open-legacy.directive.ts","../../../projects/core/directives/dropdown/dropdown-portal.directive.ts","../../../projects/core/directives/dropdown/dropdown-position-sided.directive.ts","../../../projects/core/directives/dropdown/dropdown-selection.directive.ts","../../../projects/core/directives/dropdown/dropdown.ts","../../../projects/core/directives/dropdown/dropdown.bindings.ts","../../../projects/core/directives/dropdown/dropdown-limit-width.ts","../../../projects/core/directives/dropdown/dropdowns.component.ts","../../../projects/core/directives/dropdown/with-dropdown-open.directive.ts","../../../projects/core/directives/dropdown/taiga-ui-core-directives-dropdown.ts"],"sourcesContent":["import {Directive, Injectable} from '@angular/core';\nimport {type TuiDriver, TuiDriverDirective} from '@taiga-ui/core/classes';\nimport {BehaviorSubject} from 'rxjs';\n\n@Injectable()\nexport class TuiDropdownDriver extends BehaviorSubject<boolean> implements TuiDriver {\n    public readonly type = 'dropdown';\n\n    constructor() {\n        super(false);\n    }\n}\n\n@Directive({\n    standalone: true,\n})\nexport class TuiDropdownDriverDirective extends TuiDriverDirective {\n    public readonly type = 'dropdown';\n}\n","import {InjectionToken, type Type} from '@angular/core';\n\nimport {TuiDropdownComponent} from './dropdown.component';\n\n/**\n * A component to display a dropdown\n */\nexport const TUI_DROPDOWN_COMPONENT = new InjectionToken<Type<any>>(\n    ngDevMode ? 'TUI_DROPDOWN_COMPONENT' : '',\n    {\n        factory: () => TuiDropdownComponent,\n    },\n);\n\nexport const TUI_DROPDOWN_CONTEXT = new InjectionToken<Record<any, any>>(\n    ngDevMode ? 'TUI_DROPDOWN_CONTEXT' : '',\n);\n","import {Injectable} from '@angular/core';\nimport {TuiPortalService} from '@taiga-ui/cdk/classes';\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class TuiDropdownService extends TuiPortalService {}\n","import {\n    Directive,\n    type FactoryProvider,\n    inject,\n    InjectionToken,\n    Input,\n    Optional,\n    Self,\n    SkipSelf,\n} from '@angular/core';\nimport {tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type TuiVerticalDirection} from '@taiga-ui/core/types';\nimport {tuiOverrideOptions} from '@taiga-ui/core/utils';\n\nexport type TuiDropdownAlign = 'center' | 'left' | 'right';\nexport type TuiDropdownWidth = 'auto' | 'fixed' | 'min';\n\nexport interface TuiDropdownOptions {\n    readonly align: TuiDropdownAlign;\n    readonly appearance: string;\n    readonly direction: TuiVerticalDirection | null;\n    readonly limitWidth: TuiDropdownWidth;\n    readonly maxHeight: number;\n    readonly minHeight: number;\n    readonly offset: number;\n}\n\n/** Default values for dropdown options */\nexport const TUI_DROPDOWN_DEFAULT_OPTIONS: TuiDropdownOptions = {\n    align: 'left',\n    direction: null,\n    limitWidth: 'auto',\n    maxHeight: 400,\n    minHeight: 80,\n    offset: 4,\n    appearance: '',\n};\n\n/**\n * Default parameters for dropdown directive\n */\nexport const TUI_DROPDOWN_OPTIONS = new InjectionToken(\n    ngDevMode ? 'TUI_DROPDOWN_OPTIONS' : '',\n    {\n        factory: () => TUI_DROPDOWN_DEFAULT_OPTIONS,\n    },\n);\n\nexport const tuiDropdownOptionsProvider: (\n    options: Partial<TuiDropdownOptions>,\n) => FactoryProvider = (override: Partial<TuiDropdownOptions>) => ({\n    provide: TUI_DROPDOWN_OPTIONS,\n    deps: [\n        [new Optional(), new Self(), TuiDropdownOptionsDirective],\n        [new Optional(), new SkipSelf(), TUI_DROPDOWN_OPTIONS],\n    ],\n    useFactory: tuiOverrideOptions(override, TUI_DROPDOWN_DEFAULT_OPTIONS),\n});\n\n@Directive({\n    standalone: true,\n    selector:\n        '[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]',\n    providers: [tuiProvide(TUI_DROPDOWN_OPTIONS, TuiDropdownOptionsDirective)],\n})\nexport class TuiDropdownOptionsDirective implements TuiDropdownOptions {\n    private readonly options = inject(TUI_DROPDOWN_OPTIONS, {skipSelf: true});\n\n    @Input('tuiDropdownAlign')\n    public align = this.options.align;\n\n    @Input('tuiDropdownAppearance')\n    public appearance = this.options.appearance;\n\n    @Input('tuiDropdownDirection')\n    public direction = this.options.direction;\n\n    @Input('tuiDropdownLimitWidth')\n    public limitWidth = this.options.limitWidth;\n\n    @Input('tuiDropdownMinHeight')\n    public minHeight = this.options.minHeight;\n\n    @Input('tuiDropdownMaxHeight')\n    public maxHeight = this.options.maxHeight;\n\n    @Input('tuiDropdownOffset')\n    public offset = this.options.offset;\n}\n","import {Directive, EventEmitter, inject, Output} from '@angular/core';\nimport {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk/constants';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiFallbackAccessor,\n    TuiPositionAccessor,\n    TuiRectAccessor,\n} from '@taiga-ui/core/classes';\nimport {TUI_VIEWPORT} from '@taiga-ui/core/tokens';\nimport {type TuiPoint, type TuiVerticalDirection} from '@taiga-ui/core/types';\n\nimport {TuiDropdownDirective} from './dropdown.directive';\nimport {TUI_DROPDOWN_OPTIONS, type TuiDropdownAlign} from './dropdown-options.directive';\n\n@Directive({\n    standalone: true,\n})\nexport class TuiDropdownPosition extends TuiPositionAccessor {\n    private readonly el = tuiInjectElement();\n    private readonly options = inject(TUI_DROPDOWN_OPTIONS);\n    private readonly viewport = inject(TUI_VIEWPORT);\n\n    private previous?: TuiVerticalDirection;\n\n    @Output('tuiDropdownDirectionChange')\n    public readonly directionChange = new EventEmitter<TuiVerticalDirection>();\n\n    public readonly type = 'dropdown';\n    public readonly accessor: TuiRectAccessor | null =\n        tuiFallbackAccessor<TuiRectAccessor>('dropdown')(\n            inject<any>(TuiRectAccessor),\n            inject(TuiDropdownDirective, {optional: true})!,\n        );\n\n    @tuiPure\n    public emitDirection(direction: TuiVerticalDirection): void {\n        this.directionChange.emit(direction);\n    }\n\n    public getPosition({width, height}: DOMRect): TuiPoint {\n        if (!width && !height) {\n            this.previous = undefined;\n        }\n\n        const hostRect = this.accessor?.getClientRect() ?? EMPTY_CLIENT_RECT;\n        const viewportRect = this.viewport.getClientRect();\n        const {minHeight, direction, offset, limitWidth} = this.options;\n        const align = this.getAlign(this.options.align);\n        const viewport = {\n            top: viewportRect.top - offset,\n            bottom: viewportRect.bottom + offset,\n            right: viewportRect.right - offset,\n            left: viewportRect.left + offset,\n        } as const;\n        const previous = this.previous || direction || 'bottom';\n        const available = {\n            top: hostRect.top - 2 * offset - viewport.top,\n            bottom: viewport.bottom - hostRect.bottom - 2 * offset,\n        } as const;\n        const rectWidth = limitWidth === 'fixed' ? hostRect.width : width;\n        const right = Math.max(hostRect.right - rectWidth, offset);\n        const left = hostRect.left + width < viewport.right ? hostRect.left : right;\n        const position = {\n            top: hostRect.top - offset - height,\n            bottom: hostRect.bottom + offset,\n            right: Math.max(viewport.left, right),\n            center:\n                hostRect.left + hostRect.width / 2 + width / 2 < viewport.right\n                    ? hostRect.left + hostRect.width / 2 - width / 2\n                    : right,\n            left: Math.max(viewport.left, left),\n        } as const;\n        const better: TuiVerticalDirection =\n            available.top > available.bottom ? 'top' : 'bottom';\n\n        if (\n            (available[previous] > minHeight && direction) ||\n            available[previous] > height\n        ) {\n            this.emitDirection(previous);\n\n            return [position[previous], position[align]];\n        }\n\n        this.previous = better;\n        this.emitDirection(better);\n\n        return [position[better], position[align]];\n    }\n\n    public getAlign(align: TuiDropdownAlign): TuiDropdownAlign {\n        const rtl = this.el.matches('[dir=\"rtl\"] :scope');\n\n        if (rtl && align === 'left') {\n            return 'right';\n        }\n\n        return rtl && align === 'right' ? 'left' : align;\n    }\n}\n","import {coerceArray} from '@angular/cdk/coercion';\nimport {\n    type AfterViewChecked,\n    ChangeDetectorRef,\n    type ComponentRef,\n    Directive,\n    inject,\n    INJECTOR,\n    Input,\n    type OnDestroy,\n    signal,\n    TemplateRef,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiZonefreeScheduler} from '@taiga-ui/cdk/observables';\nimport {type TuiContext} from '@taiga-ui/cdk/types';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {\n    tuiAsRectAccessor,\n    tuiAsVehicle,\n    type TuiRectAccessor,\n    type TuiVehicle,\n} from '@taiga-ui/core/classes';\nimport {type TuiPortalItem} from '@taiga-ui/core/types';\nimport {tuiCheckFixedPosition} from '@taiga-ui/core/utils';\nimport {\n    PolymorpheusComponent,\n    type PolymorpheusContent,\n    PolymorpheusTemplate,\n} from '@taiga-ui/polymorpheus';\nimport {Subject, throttleTime} from 'rxjs';\n\nimport {TuiDropdownDriver, TuiDropdownDriverDirective} from './dropdown.driver';\nimport {TUI_DROPDOWN_COMPONENT} from './dropdown.providers';\nimport {TuiDropdownService} from './dropdown.service';\nimport {TuiDropdownPosition} from './dropdown-position.directive';\n\n@Directive({\n    standalone: true,\n    selector: '[tuiDropdown]:not(ng-container):not(ng-template)',\n    providers: [\n        tuiAsRectAccessor(TuiDropdownDirective),\n        tuiAsVehicle(TuiDropdownDirective),\n    ],\n    exportAs: 'tuiDropdown',\n    hostDirectives: [\n        TuiDropdownDriverDirective,\n        {\n            directive: TuiDropdownPosition,\n            outputs: ['tuiDropdownDirectionChange'],\n        },\n    ],\n    host: {\n        '[class.tui-dropdown-open]': 'ref()',\n    },\n})\nexport class TuiDropdownDirective\n    implements AfterViewChecked, OnDestroy, TuiPortalItem, TuiRectAccessor, TuiVehicle\n{\n    private readonly refresh$ = new Subject<void>();\n    private readonly service = inject(TuiDropdownService);\n    private readonly cdr = inject(ChangeDetectorRef);\n\n    // TODO: think of a better solution later\n    private readonly drivers = coerceArray(\n        inject(TuiDropdownDriver, {self: true, optional: true}),\n    );\n\n    protected readonly sub = this.refresh$\n        .pipe(throttleTime(0, tuiZonefreeScheduler()), takeUntilDestroyed())\n        .subscribe(() => {\n            this.ref()?.changeDetectorRef.detectChanges();\n            this.ref()?.changeDetectorRef.markForCheck();\n        });\n\n    public readonly el = tuiInjectElement();\n    public readonly type = 'dropdown';\n    public readonly component = new PolymorpheusComponent(\n        inject(TUI_DROPDOWN_COMPONENT),\n        inject(INJECTOR),\n    );\n\n    public ref = signal<ComponentRef<unknown> | null>(null);\n    // TODO(v5): rename to `content`\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    public readonly _content = signal<PolymorpheusContent<TuiContext<() => void>>>(null);\n\n    @Input()\n    public set tuiDropdown(content: PolymorpheusContent<TuiContext<() => void>>) {\n        this._content.set(\n            content instanceof TemplateRef\n                ? new PolymorpheusTemplate(content, this.cdr)\n                : content,\n        );\n\n        if (!this._content()) {\n            this.toggle(false);\n        }\n    }\n\n    public get position(): 'absolute' | 'fixed' {\n        return tuiCheckFixedPosition(this.el) ? 'fixed' : 'absolute';\n    }\n\n    // TODO(v5): delete\n    public get content(): PolymorpheusContent<TuiContext<() => void>> {\n        return this._content();\n    }\n\n    // TODO(v5): delete\n    public set content(x: PolymorpheusContent<TuiContext<() => void>>) {\n        this._content.set(x);\n    }\n\n    public ngAfterViewChecked(): void {\n        this.refresh$.next();\n    }\n\n    public ngOnDestroy(): void {\n        this.toggle(false);\n    }\n\n    public getClientRect(): DOMRect {\n        return this.el.getBoundingClientRect();\n    }\n\n    public toggle(show: boolean): void {\n        const ref = this.ref();\n\n        if (show && this._content() && !ref) {\n            this.ref.set(this.service.add(this.component));\n        } else if (!show && ref) {\n            this.ref.set(null);\n            this.service.remove(ref);\n        }\n\n        this.drivers.forEach((driver) => driver?.next(show));\n\n        // TODO: Remove in v5, only needed in Angular 16\n        this.cdr.markForCheck();\n    }\n}\n","import {\n    type AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    inject,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk/constants';\nimport {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiClamp} from '@taiga-ui/cdk/utils/math';\nimport {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiPositionAccessorFor,\n    TuiRectAccessor,\n    tuiRectAccessorFor,\n} from '@taiga-ui/core/classes';\nimport {TuiScrollbar} from '@taiga-ui/core/components/scrollbar';\nimport {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services';\nimport {TUI_DARK_MODE, TUI_VIEWPORT} from '@taiga-ui/core/tokens';\nimport {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\nimport {map, takeWhile} from 'rxjs';\n\nimport {TuiDropdownDirective} from './dropdown.directive';\nimport {TUI_DROPDOWN_CONTEXT} from './dropdown.providers';\nimport {TUI_DROPDOWN_OPTIONS} from './dropdown-options.directive';\nimport {TuiDropdownPosition} from './dropdown-position.directive';\n\n/**\n * @description:\n * This component is used to show template in a portal\n * using default style of white rounded box with a shadow\n */\n@Component({\n    standalone: true,\n    selector: 'tui-dropdown',\n    imports: [PolymorpheusOutlet, TuiScrollbar],\n    templateUrl: './dropdown.template.html',\n    styleUrls: ['./dropdown.style.less'],\n    // @bad TODO: OnPush\n    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection\n    changeDetection: ChangeDetectionStrategy.Default,\n    providers: [\n        TuiPositionService,\n        tuiPositionAccessorFor('dropdown', TuiDropdownPosition),\n        tuiRectAccessorFor('dropdown', TuiDropdownDirective),\n    ],\n    hostDirectives: [TuiActiveZone, TuiAnimated],\n    host: {\n        '[attr.data-appearance]': 'options.appearance',\n        '[attr.tuiTheme]': 'theme()',\n    },\n})\nexport class TuiDropdownComponent implements AfterViewInit {\n    private readonly el = tuiInjectElement();\n    private readonly accessor = inject(TuiRectAccessor);\n    private readonly viewport = inject(TUI_VIEWPORT);\n    private readonly vvs = inject(TuiVisualViewportService);\n\n    private readonly styles$ = inject(TuiPositionService).pipe(\n        takeWhile(\n            () =>\n                this.directive.el.isConnected &&\n                !!this.directive.el.getBoundingClientRect().height,\n        ),\n        map((v) => (this.position === 'fixed' ? this.vvs.correct(v) : v)),\n        map(([top, left]) => this.getStyles(left, top)),\n        takeUntilDestroyed(),\n    );\n\n    protected readonly options = inject(TUI_DROPDOWN_OPTIONS);\n    protected readonly directive = inject(TuiDropdownDirective);\n    protected readonly context = inject(TUI_DROPDOWN_CONTEXT, {optional: true});\n    protected readonly darkMode = inject(TUI_DARK_MODE);\n    protected readonly position = this.directive.position;\n    protected readonly theme = computed((_ = this.darkMode()) =>\n        this.directive.el.closest('[tuiTheme]')?.getAttribute('tuiTheme'),\n    );\n\n    public ngAfterViewInit(): void {\n        this.styles$.subscribe({\n            next: (styles) => Object.assign(this.el.style, styles),\n            complete: () => this.close?.(),\n        });\n    }\n\n    protected readonly close = (): void => this.directive.toggle(false);\n\n    private getStyles(x: number, y: number): Record<string, string> {\n        const {maxHeight, minHeight, offset, limitWidth} = this.options;\n        const parent = this.el.offsetParent?.getBoundingClientRect() || EMPTY_CLIENT_RECT;\n        const {left = 0, top = 0} = this.position === 'fixed' ? {} : parent;\n        const rect = this.accessor.getClientRect();\n        const viewport = this.viewport.getClientRect();\n        const above = rect.top - viewport.top - 2 * offset;\n        const below = viewport.top + viewport.height - y - offset;\n        const available = y > rect.bottom ? below : above;\n        const height =\n            this.el.getBoundingClientRect().right <= rect.left || x >= rect.right\n                ? maxHeight\n                : tuiClamp(available, minHeight, maxHeight);\n\n        y -= top;\n        x -= left;\n\n        return {\n            position: this.position,\n            top: tuiPx(Math.round(Math.max(y, offset - top))),\n            left: tuiPx(Math.round(x)),\n            maxHeight: tuiPx(Math.round(height)),\n            width: limitWidth === 'fixed' ? tuiPx(Math.round(rect.width)) : '',\n            minWidth: limitWidth === 'min' ? tuiPx(Math.round(rect.width)) : '',\n            maxWidth: tuiPx(Math.round(viewport.width) - 16), // 8px min gap from each side\n        };\n    }\n}\n","<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","import {DOCUMENT} from '@angular/common';\nimport {computed, Directive, inject} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk/constants';\nimport {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';\nimport {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk/observables';\nimport {TUI_IS_TOUCH} from '@taiga-ui/cdk/tokens';\nimport {tuiGetActualTarget, tuiPointToClientRect} from '@taiga-ui/cdk/utils/dom';\nimport {tuiAsDriver, tuiAsRectAccessor, TuiRectAccessor} from '@taiga-ui/core/classes';\nimport {shouldCall} from '@taiga-ui/event-plugins';\nimport {merge} from 'rxjs';\n\nimport {TuiDropdownDriver} from './dropdown.driver';\n\nfunction activeZoneFilter(this: TuiDropdownContext, event?: Event): boolean {\n    return (\n        !event ||\n        (this.driver.value && !this.activeZone.contains(tuiGetActualTarget(event)))\n    );\n}\n\n@Directive({\n    standalone: true,\n    selector: '[tuiDropdownContext]',\n    providers: [\n        TuiActiveZone,\n        TuiDropdownDriver,\n        tuiAsDriver(TuiDropdownDriver),\n        tuiAsRectAccessor(TuiDropdownContext),\n    ],\n    host: {\n        '[style.user-select]': 'userSelect()',\n        '[style.-webkit-user-select]': 'userSelect()',\n        '[style.-webkit-touch-callout]': 'userSelect()',\n        '(document:keydown.esc)': 'closeDropdown()',\n        '(longtap)': 'onContextMenu($event.detail.clientX, $event.detail.clientY)',\n    },\n})\nexport class TuiDropdownContext extends TuiRectAccessor {\n    private readonly isTouch = inject(TUI_IS_TOUCH);\n    private currentRect = EMPTY_CLIENT_RECT;\n\n    protected readonly userSelect = computed(() => (this.isTouch() ? 'none' : null));\n    protected readonly activeZone = inject(TuiActiveZone);\n    protected readonly driver = inject(TuiDropdownDriver);\n    protected readonly doc = inject(DOCUMENT);\n\n    protected readonly sub = merge(\n        tuiTypedFromEvent(this.doc, 'pointerdown'),\n        tuiTypedFromEvent(this.doc, 'contextmenu', {capture: true}),\n    )\n        .pipe(tuiZonefree(), takeUntilDestroyed())\n        .subscribe((event: Event) => this.closeDropdown(event));\n\n    public readonly type = 'dropdown';\n\n    public getClientRect(): DOMRect {\n        return this.currentRect;\n    }\n\n    @shouldCall(activeZoneFilter)\n    protected closeDropdown(_event?: Event): void {\n        this.driver.next(false);\n        this.currentRect = EMPTY_CLIENT_RECT;\n    }\n\n    protected onContextMenu(x: number, y: number): void {\n        this.currentRect = tuiPointToClientRect(x, y);\n        this.driver.next(true);\n    }\n}\n","import {InjectionToken, type Provider} from '@angular/core';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\n\nexport interface TuiDropdownHoverOptions {\n    readonly hideDelay: number;\n    readonly showDelay: number;\n}\n\n/** Default values for hint options */\nexport const TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS: TuiDropdownHoverOptions = {\n    showDelay: 200,\n    hideDelay: 500,\n};\n\n/**\n * Default parameters for dropdown hover directive\n */\nexport const TUI_DROPDOWN_HOVER_OPTIONS = new InjectionToken(\n    ngDevMode ? 'TUI_DROPDOWN_HOVER_OPTIONS' : '',\n    {\n        factory: () => TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,\n    },\n);\n\nexport function tuiDropdownHoverOptionsProvider(\n    options: Partial<TuiDropdownHoverOptions>,\n): Provider {\n    return tuiProvideOptions(\n        TUI_DROPDOWN_HOVER_OPTIONS,\n        options,\n        TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,\n    );\n}\n","import {\n    computed,\n    ContentChild,\n    Directive,\n    ElementRef,\n    EventEmitter,\n    inject,\n    Input,\n    type OnChanges,\n    Output,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';\nimport {TuiObscured} from '@taiga-ui/cdk/directives/obscured';\nimport {\n    tuiCloseWatcher,\n    tuiIfMap,\n    tuiWatch,\n    tuiZonefull,\n} from '@taiga-ui/cdk/observables';\nimport {\n    tuiGetActualTarget,\n    tuiInjectElement,\n    tuiIsElement,\n    tuiIsElementEditable,\n    tuiIsHTMLElement,\n} from '@taiga-ui/cdk/utils/dom';\nimport {\n    tuiGetClosestFocusable,\n    tuiIsNativeFocusedIn,\n    tuiIsNativeKeyboardFocusable,\n} from '@taiga-ui/cdk/utils/focus';\nimport {tuiAsDriver} from '@taiga-ui/core/classes';\nimport {tuiIsEditingKey} from '@taiga-ui/core/utils/miscellaneous';\nimport {shouldCall} from '@taiga-ui/event-plugins';\nimport {filter, fromEvent, merge} from 'rxjs';\n\nimport {TuiDropdownDirective} from './dropdown.directive';\nimport {TuiDropdownDriver} from './dropdown.driver';\n\nfunction shouldClose(this: TuiDropdownOpen, event: KeyboardEvent): boolean {\n    return (\n        // @ts-ignore\n        typeof CloseWatcher === 'undefined' &&\n        // ?. for auto fill events\n        event.key?.toLowerCase() === 'escape' &&\n        this.tuiDropdownEnabled &&\n        !!this.tuiDropdownOpen &&\n        !this['dropdown']()?.nextElementSibling\n    );\n}\n\n@Directive({\n    standalone: true,\n    selector: '[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]',\n    providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],\n    hostDirectives: [\n        TuiObscured,\n        {\n            directive: TuiActiveZone,\n            inputs: ['tuiActiveZoneParent'],\n            outputs: ['tuiActiveZoneChange'],\n        },\n    ],\n    host: {\n        '(click)': 'onClick($event.target)',\n        '(keydown.arrowDown)': 'onArrow($event, false)',\n        '(keydown.arrowUp)': 'onArrow($event, true)',\n        '(document:keydown.zoneless.capture)': 'onEsc($event)',\n        '(document:keydown.zoneless)': 'onKeydown($event)',\n        // TODO: Necessary because startWith(false) + distinctUntilChanged() in TuiActiveZone, think of better solution\n        '(tuiActiveZoneChange)': '0',\n    },\n})\nexport class TuiDropdownOpen implements OnChanges {\n    @ContentChild('tuiDropdownHost', {descendants: true, read: ElementRef})\n    private readonly dropdownHost?: ElementRef<HTMLElement>;\n\n    private readonly directive = inject(TuiDropdownDirective);\n    private readonly el = tuiInjectElement();\n    private readonly obscured = inject(TuiObscured);\n    private readonly activeZone = inject(TuiActiveZone);\n\n    private readonly dropdown = computed(\n        () => this.directive.ref()?.location.nativeElement,\n    );\n\n    @Input()\n    public tuiDropdownEnabled = true;\n\n    @Input()\n    public tuiDropdownOpen: boolean | '' = false;\n\n    @Output()\n    public readonly tuiDropdownOpenChange = new EventEmitter<boolean>();\n\n    // TODO: make it private when all legacy controls will be deleted from @taiga-ui/legacy (5.0)\n    public readonly driver = inject(TuiDropdownDriver);\n    public readonly sub = this.driver\n        .pipe(\n            tuiIfMap(() =>\n                merge(\n                    tuiCloseWatcher(),\n                    this.obscured.tuiObscured.pipe(filter(Boolean)),\n                    this.activeZone.tuiActiveZoneChange.pipe(filter((a) => !a)),\n                    fromEvent(this.el, 'focusin').pipe(\n                        filter(\n                            (event) =>\n                                !this.host.contains(tuiGetActualTarget(event)) ||\n                                !this.directive.ref(),\n                        ),\n                    ),\n                ),\n            ),\n            tuiZonefull(),\n            tuiWatch(),\n            takeUntilDestroyed(),\n        )\n        .subscribe(() => this.toggle(false));\n\n    public readonly sync = this.driver.pipe(takeUntilDestroyed()).subscribe((open) => {\n        if (open !== this.tuiDropdownOpen) {\n            this.update(open);\n        }\n    });\n\n    public ngOnChanges(): void {\n        this.drive(!!this.tuiDropdownOpen);\n        this.tuiDropdownOpenChange.emit(!!this.tuiDropdownOpen);\n    }\n\n    public toggle(open: boolean): void {\n        if (this.focused && !open) {\n            this.host.focus({preventScroll: true});\n        }\n\n        this.update(open);\n    }\n\n    @shouldCall(shouldClose)\n    protected onEsc(event: KeyboardEvent): void {\n        event.preventDefault();\n        this.toggle(false);\n    }\n\n    protected onClick(target: HTMLElement): void {\n        if (!this.editable && this.host.contains(target)) {\n            this.update(!this.tuiDropdownOpen);\n        }\n    }\n\n    protected onArrow(event: KeyboardEvent, up: boolean): void {\n        if (\n            !tuiIsElement(event.target) ||\n            !this.host.contains(event.target) ||\n            !this.tuiDropdownEnabled ||\n            !this.directive._content()\n        ) {\n            return;\n        }\n\n        event.preventDefault();\n        this.focusDropdown(up);\n    }\n\n    protected onKeydown(event: KeyboardEvent): void {\n        const target = tuiGetActualTarget(event);\n\n        if (\n            !event.defaultPrevented &&\n            tuiIsEditingKey(event.key) &&\n            this.editable &&\n            this.focused &&\n            tuiIsHTMLElement(target) &&\n            !tuiIsElementEditable(target)\n        ) {\n            this.host.focus({preventScroll: true});\n        }\n    }\n\n    private get host(): HTMLElement {\n        const initial = this.dropdownHost?.nativeElement || this.el;\n        const focusable = tuiIsNativeKeyboardFocusable(initial)\n            ? initial\n            : tuiGetClosestFocusable({initial, root: this.el});\n\n        return this.dropdownHost?.nativeElement || focusable || this.el;\n    }\n\n    private get editable(): boolean {\n        return tuiIsElementEditable(this.host);\n    }\n\n    private get focused(): boolean {\n        return tuiIsNativeFocusedIn(this.host) || tuiIsNativeFocusedIn(this.dropdown());\n    }\n\n    private update(open: boolean): void {\n        if (open && !this.tuiDropdownEnabled) {\n            return this.drive();\n        }\n\n        this.tuiDropdownOpen = open;\n        this.tuiDropdownOpenChange.emit(open);\n        this.drive();\n    }\n\n    private drive(open = !!this.tuiDropdownOpen && this.tuiDropdownEnabled): void {\n        this.obscured.tuiObscuredEnabled = open;\n        this.driver.next(open);\n    }\n\n    private focusDropdown(previous: boolean): void {\n        const root = this.dropdown();\n\n        if (!root) {\n            this.update(true);\n\n            return;\n        }\n\n        const doc = this.el.ownerDocument;\n        const child = root.appendChild(doc.createElement('div'));\n        const initial = previous ? child : root;\n        const focusable = tuiGetClosestFocusable({initial, previous, root});\n\n        child.remove();\n        focusable?.focus();\n    }\n}\n","import {DOCUMENT} from '@angular/common';\nimport {ContentChild, Directive, ElementRef, inject, Input} from '@angular/core';\nimport {toObservable} from '@angular/core/rxjs-interop';\nimport {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';\nimport {tuiTypedFromEvent, tuiZoneOptimized} from '@taiga-ui/cdk/observables';\nimport {\n    tuiGetActualTarget,\n    tuiInjectElement,\n    tuiIsElement,\n} from '@taiga-ui/cdk/utils/dom';\nimport {tuiAsDriver, TuiDriver} from '@taiga-ui/core/classes';\nimport {\n    delay,\n    distinctUntilChanged,\n    filter,\n    fromEvent,\n    map,\n    merge,\n    of,\n    share,\n    startWith,\n    switchMap,\n    takeUntil,\n    tap,\n} from 'rxjs';\n\nimport {TuiDropdownDirective} from './dropdown.directive';\nimport {TUI_DROPDOWN_HOVER_OPTIONS} from './dropdown-hover.options';\nimport {TuiDropdownOpen} from './dropdown-open.directive';\n\n@Directive({\n    standalone: true,\n    selector: '[tuiDropdownHover]',\n    providers: [TuiActiveZone, tuiAsDriver(TuiDropdownHover)],\n    host: {\n        '(click.capture)': 'onClick($event)',\n    },\n})\nexport class TuiDropdownHover extends TuiDriver {\n    @ContentChild('tuiDropdownHost', {descendants: true, read: ElementRef})\n    private readonly dropdownHost?: ElementRef<HTMLElement>;\n\n    private readonly el = tuiInjectElement();\n    private readonly doc = inject(DOCUMENT);\n    private readonly options = inject(TUI_DROPDOWN_HOVER_OPTIONS);\n    private readonly activeZone = inject(TuiActiveZone);\n    private readonly open = inject(TuiDropdownOpen, {optional: true});\n    /**\n     * Dropdown can be removed not only via click/touch –\n     * swipe on mobile devices removes dropdown sheet without triggering new mouseover / mouseout events.\n     */\n    private readonly dropdownExternalRemoval$ = toObservable(\n        inject(TuiDropdownDirective).ref,\n    ).pipe(filter((x) => !x && this.hovered));\n\n    private readonly stream$ = merge(\n        this.dropdownExternalRemoval$.pipe(\n            switchMap(() =>\n                tuiTypedFromEvent(this.doc, 'pointerdown').pipe(\n                    map(tuiGetActualTarget),\n                    delay(this.hideDelay),\n                    startWith(null),\n                    takeUntil(fromEvent(this.doc, 'mouseover')),\n                ),\n            ),\n        ),\n        tuiTypedFromEvent(this.doc, 'mouseover').pipe(map(tuiGetActualTarget)),\n        tuiTypedFromEvent(this.doc, 'mouseout').pipe(map((e) => e.relatedTarget)),\n    ).pipe(\n        map((element) => tuiIsElement(element) && this.isHovered(element)),\n        distinctUntilChanged(),\n        switchMap((v) => of(v).pipe(delay(v ? this.showDelay : this.hideDelay))),\n        tuiZoneOptimized(),\n        tap((hovered) => {\n            this.hovered = hovered;\n            this.open?.toggle(hovered);\n        }),\n        share(),\n    );\n\n    @Input('tuiDropdownShowDelay')\n    public showDelay = this.options.showDelay;\n\n    @Input('tuiDropdownHideDelay')\n    public hideDelay = this.options.hideDelay;\n\n    public hovered = false;\n\n    public readonly type = 'dropdown';\n\n    constructor() {\n        super((subscriber) => this.stream$.subscribe(subscriber));\n    }\n\n    protected onClick(event: MouseEvent): void {\n        if (this.hovered && this.open) {\n            event.preventDefault();\n        }\n    }\n\n    private isHovered(element: Element): boolean {\n        const host = this.dropdownHost?.nativeElement || this.el;\n        const hovered = host.contains(element);\n        const child = !this.el.contains(element) && this.activeZone.contains(element);\n\n        return hovered || child;\n    }\n}\n","import {Directive, inject, Input, type OnChanges} from '@angular/core';\nimport {tuiAsDriver} from '@taiga-ui/core/classes';\n\nimport {TuiDropdownDriver} from './dropdown.driver';\n\n@Directive({\n    standalone: true,\n    selector: '[tuiDropdownManual]',\n    providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],\n})\nexport class TuiDropdownManual implements OnChanges {\n    private readonly driver = inject(TuiDropdownDriver);\n\n    @Input()\n    public tuiDropdownManual: boolean | '' = false;\n\n    public ngOnChanges(): void {\n        this.driver.next(!!this.tuiDropdownManual);\n    }\n}\n","import {Directive, Input, Output} from '@angular/core';\nimport {distinctUntilChanged, Subject} from 'rxjs';\n\n/**\n * @deprecated TODO: remove in v.5 when legacy controls are dropped\n */\n@Directive({\n    standalone: true,\n    selector:\n        '[tuiDropdownOpen]:not([tuiDropdown]),[tuiDropdownOpenChange]:not([tuiDropdown])',\n})\nexport class TuiDropdownOpenLegacy {\n    private readonly openStateSub = new Subject<boolean>();\n\n    @Output()\n    public readonly tuiDropdownOpenChange =\n        this.openStateSub.pipe(distinctUntilChanged());\n\n    @Input()\n    public set tuiDropdownOpen(open: boolean) {\n        this.emitOpenChange(open);\n    }\n\n    public emitOpenChange(open: boolean): void {\n        this.openStateSub.next(open);\n    }\n}\n","import {\n    Directive,\n    type EmbeddedViewRef,\n    inject,\n    Input,\n    type OnDestroy,\n    TemplateRef,\n} from '@angular/core';\n\nimport {TuiDropdownService} from './dropdown.service';\n\n/**\n * @deprecated use {@link TuiPopup} directive instead\n */\n@Directive({\n    standalone: true,\n    selector: 'ng-template[tuiDropdown]',\n})\nexport class TuiDropdownPortal implements OnDestroy {\n    private readonly template = inject(TemplateRef);\n    private readonly service = inject(TuiDropdownService);\n\n    private viewRef?: EmbeddedViewRef<unknown>;\n\n    @Input()\n    public set tuiDropdown(show: boolean) {\n        this.viewRef?.destroy();\n\n        if (show) {\n            this.viewRef = this.service.addTemplate(this.template);\n        }\n    }\n\n    public ngOnDestroy(): void {\n        this.viewRef?.destroy();\n    }\n}\n","import {Directive, inject, Input} from '@angular/core';\nimport {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk/constants';\nimport {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core/classes';\nimport {TUI_VIEWPORT} from '@taiga-ui/core/tokens';\nimport {type TuiPoint} from '@taiga-ui/core/types';\n\nimport {TUI_DROPDOWN_OPTIONS} from './dropdown-options.directive';\nimport {TuiDropdownPosition} from './dropdown-position.directive';\n\n@Directive({\n    standalone: true,\n    selector: '[tuiDropdownSided]',\n    providers: [TuiDropdownPosition, tuiAsPositionAccessor(TuiDropdownPositionSided)],\n})\nexport class TuiDropdownPositionSided extends TuiPositionAccessor {\n    private readonly options = inject(TUI_DROPDOWN_OPTIONS);\n    private readonly viewport = inject(TUI_VIEWPORT);\n    private readonly vertical = inject(TuiDropdownPosition);\n    private previous = this.options.direction || 'bottom';\n\n    @Input()\n    public tuiDropdownSided: boolean | string = '';\n\n    @Input()\n    public tuiDropdownSidedOffset = 4;\n\n    public readonly type = 'dropdown';\n\n    public getPosition(rect: DOMRect): TuiPoint {\n        if (this.tuiDropdownSided === false) {\n            return this.vertical.getPosition(rect);\n        }\n\n        const {height, width} = rect;\n        const hostRect = this.vertical.accessor?.getClientRect() ?? EMPTY_CLIENT_RECT;\n        const viewport = this.viewport.getClientRect();\n        const {direction, offset} = this.options;\n        const adjusted = this.vertical.getAlign(this.options.align);\n        const align = adjusted === 'center' ? 'left' : adjusted;\n        const available = {\n            top: hostRect.bottom - viewport.top,\n            left: hostRect.left - offset - viewport.left,\n            right: viewport.right - hostRect.right - offset,\n            bottom: viewport.bottom - hostRect.top,\n        } as const;\n        const position = {\n            top: hostRect.bottom - height + this.tuiDropdownSidedOffset + 1, // 1 for border\n            left: hostRect.left - width - offset,\n            right: hostRect.right + offset,\n            bottom: hostRect.top - this.tuiDropdownSidedOffset - 1, // 1 for border\n        } as const;\n        const better = available.top > available.bottom ? 'top' : 'bottom';\n        const maxLeft = available.left > available.right ? position.left : position.right;\n        const left = available[align] > width ? position[align] : maxLeft;\n\n        if (\n            (available[this.previous] > height && direction) ||\n            this.previous === better\n        ) {\n            this.vertical.emitDirection(this.previous);\n\n            return [position[this.previous], left];\n        }\n\n        this.previous = better;\n        this.vertical.emitDirection(better);\n\n        return [position[better], left];\n    }\n}\n","import {DOCUMENT} from '@angular/common';\nimport {Directive, inject, Input, type OnDestroy, ViewContainerRef} from '@angular/core';\nimport {\n    CHAR_NO_BREAK_SPACE,\n    CHAR_ZERO_WIDTH_SPACE,\n    EMPTY_CLIENT_RECT,\n    TUI_TRUE_HANDLER,\n} from '@taiga-ui/cdk/constants';\nimport {TUI_RANGE} from '@taiga-ui/cdk/tokens';\nimport {type TuiBooleanHandler} from '@taiga-ui/cdk/types';\nimport {\n    tuiInjectElement,\n    tuiIsElement,\n    tuiIsTextfield,\n    tuiIsTextNode,\n} from '@taiga-ui/cdk/utils/dom';\nimport {tuiGetNativeFocused} from '@taiga-ui/cdk/utils/focus';\nimport {tuiIsString, tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiAsDriver,\n    tuiAsRectAccessor,\n    TuiDriver,\n    type TuiRectAccessor,\n} from '@taiga-ui/core/classes';\nimport {TUI_SELECTION_STREAM} from '@taiga-ui/core/tokens';\nimport {tuiGetWordRange} from '@taiga-ui/core/utils';\nimport {BehaviorSubject, combineLatest, distinctUntilChanged, filter, map} from 'rxjs';\n\nimport {TuiDropdownDirective} from './dropdown.directive';\n\n@Directive({\n    standalone: true,\n    selector: '[tuiDropdownSelection]',\n    providers: [\n        tuiAsDriver(TuiDropdownSelection),\n        tuiAsRectAccessor(TuiDropdownSelection),\n    ],\n})\nexport class TuiDropdownSelection\n    extends TuiDriver\n    implements TuiRectAccessor, OnDestroy\n{\n    private ghost?: HTMLElement;\n\n    protected readonly doc = inject(DOCUMENT);\n    protected readonly vcr = inject(ViewContainerRef);\n    protected readonly dropdown = inject(TuiDropdownDirective);\n    protected readonly el = tuiInjectElement();\n    protected readonly handler$ = new BehaviorSubject<TuiBooleanHandler<Range>>(\n        TUI_TRUE_HANDLER,\n    );\n\n    protected readonly stream$ = combineLatest([\n        this.handler$,\n        inject(TUI_SELECTION_STREAM).pipe(\n            map(() => this.getRange()),\n            filter((range) => this.isValid(range)),\n            distinctUntilChanged(\n                (x, y) =>\n                    x.startOffset === y.startOffset &&\n                    x.endOffset === y.endOffset &&\n                    x.commonAncestorContainer === y.commonAncestorContainer,\n            ),\n        ),\n    ]).pipe(\n        map(([handler, range]) => {\n            const contained = this.el.contains(range.commonAncestorContainer);\n\n            this.range =\n                contained && tuiIsTextNode(range.commonAncestorContainer)\n                    ? range\n                    : this.range;\n\n            return (contained && handler(this.range)) || this.inDropdown(range);\n        }),\n    );\n\n    protected range = inject(TUI_RANGE);\n\n    @Input('tuiDropdownSelectionPosition')\n    public position: 'selection' | 'tag' | 'word' = 'selection';\n\n    public readonly type = 'dropdown';\n\n    constructor() {\n        super((subscriber) => this.stream$.subscribe(subscriber));\n    }\n\n    @Input()\n    public set tuiDropdownSelection(visible: TuiBooleanHandler<Range> | string) {\n        if (!tuiIsString(visible)) {\n            this.handler$.next(visible);\n        }\n    }\n\n    public getClientRect(): DOMRect {\n        switch (this.position) {\n            case 'tag': {\n                const {commonAncestorContainer} = this.range;\n                const element = tuiIsElement(commonAncestorContainer)\n                    ? commonAncestorContainer\n                    : commonAncestorContainer.parentNode;\n\n                return element && tuiIsElement(element)\n                    ? element.getBoundingClientRect()\n                    : EMPTY_CLIENT_RECT;\n            }\n            case 'word':\n                return tuiGetWordRange(this.range).getBoundingClientRect();\n            default:\n                return this.range.getBoundingClientRect();\n        }\n    }\n\n    public ngOnDestroy(): void {\n        if (this.ghost) {\n            this.ghostHost.removeChild(this.ghost);\n        }\n    }\n\n    private get ghostHost(): HTMLElement {\n        return this.el.querySelector('tui-textfield .t-ghost') || this.el;\n    }\n\n    private getRange(): Range {\n        const active = tuiGetNativeFocused(this.doc);\n        const selection = this.doc.getSelection();\n        const range =\n            active && tuiIsTextfield(active) && this.el.contains(active)\n                ? this.veryVerySadInputFix(active)\n                : (selection?.rangeCount && selection.getRangeAt(0)) || this.range;\n\n        return range.cloneRange();\n    }\n\n    /**\n     * Check if given range is at least partially inside dropdown\n     */\n    private inDropdown(range: Range): boolean {\n        const {startContainer, endContainer} = range;\n        const inDropdown = this.boxContains(range.commonAncestorContainer);\n        const hostToDropdown =\n            this.boxContains(endContainer) && this.el.contains(startContainer);\n        const dropdownToHost =\n            this.boxContains(startContainer) && this.el.contains(endContainer);\n\n        return inDropdown || hostToDropdown || dropdownToHost;\n    }\n\n    /**\n     * Check if Node is inside dropdown\n     */\n    private boxContains(node: Node): boolean {\n        return !!this.dropdown.ref()?.location.nativeElement.contains(node);\n    }\n\n    /**\n     * Check if range is not inside tui-textfield's DOM elements\n     */\n    private isValid(range: Range): boolean {\n        return (\n            !this.el.contains(range.commonAncestorContainer) ||\n            !this.el.closest('tui-textfield') ||\n            range.intersectsNode(this.ghost || this.el)\n        );\n    }\n\n    private veryVerySadInputFix(element: HTMLInputElement | HTMLTextAreaElement): Range {\n        const {ghost = this.initGhost(this.ghostHost)} = this;\n        const {top, left, width, height} = this.ghostHost.getBoundingClientRect();\n        const {selectionStart, selectionEnd, value} = element;\n        const range = this.doc.createRange();\n        const hostRect = this.ghostHost.getBoundingClientRect();\n\n        ghost.style.top = tuiPx(top - hostRect.top);\n        ghost.style.left = tuiPx(left - hostRect.left);\n        ghost.style.width = tuiPx(width);\n        ghost.style.height = tuiPx(height);\n        ghost.textContent = CHAR_ZERO_WIDTH_SPACE + value + CHAR_NO_BREAK_SPACE;\n\n        range.setStart(ghost.firstChild as Node, selectionStart || 0);\n        range.setEnd(ghost.firstChild as Node, selectionEnd || 0);\n\n        return range;\n    }\n\n    /**\n     * Create an invisible DIV styled exactly like input/textarea element inside directive\n     */\n    private initGhost(\n        element: HTMLElement | HTMLInputElement | HTMLTextAreaElement,\n    ): HTMLElement {\n        const ghost = this.doc.createElement('div');\n        const {font, letterSpacing, textTransform, padding, borderTop} =\n            getComputedStyle(element);\n\n        ghost.style.position = 'absolute';\n        ghost.style.pointerEvents = 'none';\n        ghost.style.opacity = '0';\n        ghost.style.whiteSpace = 'pre-wrap';\n        ghost.style.boxSizing = 'border-box';\n        ghost.style.borderTop = borderTop;\n        ghost.style.font = font;\n        ghost.style.letterSpacing = letterSpacing;\n        ghost.style.textTransform = textTransform;\n        ghost.style.padding = padding;\n\n        this.ghostHost.appendChild(ghost);\n        this.ghost = ghost;\n\n        return ghost;\n    }\n}\n","import {TuiDropdownComponent} from './dropdown.component';\nimport {TuiDropdownDirective} from './dropdown.directive';\nimport {TuiDropdownDriverDirective} from './dropdown.driver';\nimport {TuiDropdownContext} from './dropdown-context.directive';\nimport {TuiDropdownHover} from './dropdown-hover.directive';\nimport {TuiDropdownManual} from './dropdown-manual.directive';\nimport {TuiDropdownOpen} from './dropdown-open.directive';\nimport {TuiDropdownOpenLegacy} from './dropdown-open-legacy.directive';\nimport {TuiDropdownOptionsDirective} from './dropdown-options.directive';\nimport {TuiDropdownPortal} from './dropdown-portal.directive';\nimport {TuiDropdownPosition} from './dropdown-position.directive';\nimport {TuiDropdownPositionSided} from './dropdown-position-sided.directive';\nimport {TuiDropdownSelection} from './dropdown-selection.directive';\n\nexport const TuiDropdown = [\n    TuiDropdownOptionsDirective,\n    TuiDropdownDriverDirective,\n    TuiDropdownDirective,\n    TuiDropdownComponent,\n    TuiDropdownOpen,\n    TuiDropdownOpenLegacy,\n    TuiDropdownPortal,\n    TuiDropdownManual,\n    TuiDropdownHover,\n    TuiDropdownContext,\n    TuiDropdownPosition,\n    TuiDropdownPositionSided,\n    TuiDropdownSelection,\n] as const;\n","import {inject, type Signal, type WritableSignal} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiDirectiveBinding} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type PolymorpheusContent} from '@taiga-ui/polymorpheus';\n\nimport {TuiDropdownDirective} from './dropdown.directive';\nimport {TuiDropdownOpen} from './dropdown-open.directive';\n\ntype C = PolymorpheusContent;\n\nexport function tuiDropdown(value: C | WritableSignal<C>): WritableSignal<C>;\nexport function tuiDropdown(value: Signal<C>): Signal<C>;\nexport function tuiDropdown(value: C | Signal<C>): Signal<C> {\n    return tuiDirectiveBinding(TuiDropdownDirective, 'tuiDropdown', value, {});\n}\n\nexport function tuiDropdownEnabled(\n    value: WritableSignal<boolean> | boolean,\n): WritableSignal<boolean>;\nexport function tuiDropdownEnabled(value: Signal<boolean>): Signal<boolean>;\nexport function tuiDropdownEnabled(value: Signal<boolean> | boolean): Signal<boolean> {\n    return tuiDirectiveBinding(TuiDropdownOpen, 'tuiDropdownEnabled', value, {});\n}\n\nexport function tuiDropdownOpen(): WritableSignal<boolean> {\n    const open: WritableSignal<boolean> = tuiDirectiveBinding(\n        TuiDropdownOpen,\n        'tuiDropdownOpen',\n        false,\n        {},\n    );\n\n    inject(TuiDropdownOpen)\n        .tuiDropdownOpenChange.pipe(takeUntilDestroyed())\n        .subscribe((value) => open.set(value));\n\n    return open;\n}\n","import {Directive, inject} from '@angular/core';\nimport {tuiOverrideOptions} from '@taiga-ui/core/utils/miscellaneous';\n\nimport {\n    TUI_DROPDOWN_DEFAULT_OPTIONS,\n    TUI_DROPDOWN_OPTIONS,\n    tuiDropdownOptionsProvider,\n} from './dropdown-options.directive';\n\n@Directive({\n    standalone: true,\n    providers: [tuiDropdownOptionsProvider({})],\n})\nexport class TuiDropdownFixed {\n    constructor() {\n        const override = tuiOverrideOptions(\n            {limitWidth: 'fixed'},\n            TUI_DROPDOWN_DEFAULT_OPTIONS,\n        );\n\n        override(inject(TUI_DROPDOWN_OPTIONS, {self: true, optional: true}), null);\n    }\n}\n\n@Directive({standalone: true})\nexport class TuiDropdownAuto {\n    constructor() {\n        /**\n         * Update directive props with new defaults before inputs are processed\n         * TODO: find better way to override TuiDropd