@radix-ng/primitives 0.50.0 → 0.51.0

package/fesm2022/radix-ng-primitives-select2.mjs

@@ -0,0 +1,897 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, computed, signal, Directive, InjectionToken, ElementRef, afterNextRender, effect, ContentChild, linkedSignal, DestroyRef, numberAttribute, forwardRef } from '@angular/core';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i3 from '@radix-ng/primitives/collection';
+import { useCollection, RdxCollectionProvider, RdxCollectionItem } from '@radix-ng/primitives/collection';
+import { isEqual, getActiveElement, createContext, isNullish, _IdGenerator, handleAndDispatchCustomEvent } from '@radix-ng/primitives/core';
+import * as i2 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import * as i1$1 from '@radix-ng/primitives/focus-scope';
+import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
+import * as i1 from '@radix-ng/primitives/popper';
+import { RdxPopper, RdxPopperContent, RdxPopperContentWrapper, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import * as i1$2 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$3 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+
+const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];
+const SELECTION_KEYS = [' ', 'Enter'];
+const CONTENT_MARGIN = 10;
+function valueComparator(value, currentValue, comparator) {
+    if (value === undefined)
+        return false;
+    else if (Array.isArray(value))
+        return value.some((val) => compare(val, currentValue, comparator));
+    else
+        return compare(value, currentValue, comparator);
+}
+function compare(value, currentValue, comparator) {
+    if (value === undefined || currentValue === undefined)
+        return false;
+    if (typeof value === 'string')
+        return value === currentValue;
+    if (typeof comparator === 'function')
+        return comparator(value, currentValue);
+    if (typeof comparator === 'string')
+        return value?.[comparator] === currentValue?.[comparator];
+    return isEqual(value, currentValue);
+}
+function shouldShowPlaceholder(value) {
+    return value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
+}
+function focusFirst(candidates) {
+    const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement();
+    for (const candidate of candidates) {
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
+        candidate.focus();
+        if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
+    }
+}
+
+const context$2 = () => {
+    const context = inject(RdxSelectRoot);
+    return {
+        triggerElement: context.triggerElement,
+        valueElement: context.valueElement,
+        triggerPointerDownPosRef: context.triggerPointerDownPosRef,
+        contentId: '',
+        dir: context.dir,
+        value: context.value,
+        multiple: context.multiple,
+        by: context.by,
+        open: context.open,
+        disabled: context.disabled,
+        optionsSet: context.optionsSet,
+        onOptionAdd: (option) => {
+            const existingOption = context.getOption(option());
+            if (existingOption) {
+                context.optionsSet().delete(existingOption);
+            }
+            context.optionsSet().add(option());
+        },
+        onOptionRemove: (option) => {
+            const existingOption = context.getOption(option());
+            if (existingOption) {
+                context.optionsSet().delete(existingOption);
+            }
+        },
+        onValueChange: context.handleValueChange,
+        onTriggerChange: (node) => {
+            context.triggerElement.set(node.nativeElement);
+        },
+        onValueElementChange: (node) => {
+            context.valueElement.set(node);
+        },
+        onOpenChange: (value) => {
+            context.open.set(value);
+        }
+    };
+};
+const [injectSelectRootContext, provideSelectRootContext] = createContext('RdxSelectRootContext');
+class RdxSelectRoot {
+    constructor() {
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        /** Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. */
+        this.by = input(...(ngDevMode ? [undefined, { debugName: "by" }] : /* istanbul ignore next */ []));
+        this.isEmptyModelValue = computed(() => {
+            if (this.multiple() && Array.isArray(this.value())) {
+                return Array(this.value())?.length === 0;
+            }
+            else {
+                return isNullish(this.value());
+            }
+        }, ...(ngDevMode ? [{ debugName: "isEmptyModelValue" }] : /* istanbul ignore next */ []));
+        this.optionsSet = signal(new Set(), ...(ngDevMode ? [{ debugName: "optionsSet" }] : /* istanbul ignore next */ []));
+        // The native `select` only associates the correct default value if the corresponding
+        // `option` is rendered as a child **at the same time** as itself.
+        // Because it might take a few renders for our items to gather the information to build
+        // the native `option`(s), we generate a key on the `select` to make sure Vue re-builds it
+        // each time the options change.
+        this.nativeSelectKey = computed(() => {
+            return Array.from(this.optionsSet())
+                .map((option) => option.value)
+                .join(';');
+        }, ...(ngDevMode ? [{ debugName: "nativeSelectKey" }] : /* istanbul ignore next */ []));
+        this.triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "triggerElement" }] : /* istanbul ignore next */ []));
+        this.valueElement = signal(null, ...(ngDevMode ? [{ debugName: "valueElement" }] : /* istanbul ignore next */ []));
+        this.triggerPointerDownPosRef = signal({
+            x: 0,
+            y: 0
+        }, ...(ngDevMode ? [{ debugName: "triggerPointerDownPosRef" }] : /* istanbul ignore next */ []));
+    }
+    getOption(value) {
+        return Array.from(this.optionsSet()).find((option) => valueComparator(value, option.value, this.by()));
+    }
+    handleValueChange(value) {
+        if (this.multiple()) {
+            const array = Array.isArray(this.value()) ? [...Array(this.value())] : [];
+            const index = array.findIndex((i) => compare(i, value, this.by()));
+            index === -1 ? array.push(value) : array.splice(index, 1);
+            this.value.set([...array]);
+        }
+        else {
+            this.value.set(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectRoot, isStandalone: true, selector: "[rdxSelectRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, by: { classPropertyName: "by", publicName: "by", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange" }, providers: [provideSelectRootContext(context$2)], exportAs: ["rdxSelectRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectRoot]',
+                    exportAs: 'rdxSelectRoot',
+                    providers: [provideSelectRootContext(context$2)],
+                    hostDirectives: [RdxPopper]
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], by: [{ type: i0.Input, args: [{ isSignal: true, alias: "by", required: false }] }] } });
+
+const context$1 = () => {
+    const context = inject(RdxSelectContent);
+    return {
+        content: context.content,
+        viewport: context.viewport,
+        isPositioned: context.isPositioned,
+        selectedItem: context.selectedItem,
+        selectedItemText: context.selectedItemText,
+        onViewportChange: (node) => {
+            context.viewport.set(node);
+        },
+        onItemLeave: () => {
+            context.content()?.focus();
+        },
+        itemRefCallback: (node, value, disabled) => {
+            const isFirstValidItem = !context.firstValidItemFoundRef() && !disabled;
+            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.by());
+            if (isSelectedItem || isFirstValidItem) {
+                context.selectedItem.set(node);
+            }
+            if (isFirstValidItem) {
+                context.firstValidItemFoundRef.set(true);
+            }
+        },
+        itemTextRefCallback: (node, value, disabled) => {
+            const isFirstValidItem = !context.firstValidItemFoundRef() && !disabled;
+            const isSelectedItem = valueComparator(context.rootContext.value(), value, context.rootContext.by());
+            if (isSelectedItem || isFirstValidItem) {
+                context.selectedItemText.set(node);
+            }
+        }
+    };
+};
+const [injectSelectContentContext, provideSelectContentContext] = createContext('RdxSelectContent');
+const RDX_SELECT_POSITIONER_TOKEN = new InjectionToken('RDX_SELECT_POSITIONER_TOKEN');
+class RdxSelectContent {
+    set positioner(port) {
+        if (port) {
+            port.placed.subscribe(() => {
+                this.focusSelectedItem();
+                this.isPositioned.set(true);
+            });
+        }
+    }
+    constructor() {
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.currentElement = inject(ElementRef);
+        this.rootContext = injectSelectRootContext();
+        this.selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+        this.selectedItemText = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedItemText" }] : /* istanbul ignore next */ []));
+        this.firstValidItemFoundRef = signal(false, ...(ngDevMode ? [{ debugName: "firstValidItemFoundRef" }] : /* istanbul ignore next */ []));
+        this.viewport = signal(undefined, ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+        this.isPositioned = signal(false, ...(ngDevMode ? [{ debugName: "isPositioned" }] : /* istanbul ignore next */ []));
+        /**
+         * Event handler called when the escape key is down.
+         * Can be prevented.
+         */
+        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
+        /**
+         * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
+         * Can be prevented.
+         */
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        const { getItems } = useCollection();
+        this.getItems = getItems;
+        this.dismissableLayer.focusOutside.subscribe((e) => e.preventDefault());
+        this.dismissableLayer.dismiss.subscribe(() => this.rootContext.onOpenChange(false));
+        const focusScope = inject(RdxFocusScope);
+        afterNextRender(() => {
+            focusScope.unmountAutoFocus.subscribe((event) => {
+                if (event.defaultPrevented)
+                    return;
+                this.rootContext.triggerElement()?.focus({ preventScroll: true });
+                event.preventDefault();
+            });
+            focusScope.mountAutoFocus.subscribe((event) => {
+                event.preventDefault();
+            });
+            this.content.set(this.currentElement.nativeElement.firstElementChild);
+        });
+        effect((onCleanup) => {
+            if (!this.content())
+                return;
+            let pointerMoveDelta = { x: 0, y: 0 };
+            const handlePointerMove = (event) => {
+                pointerMoveDelta = {
+                    x: Math.abs(Math.round(event.pageX) - (this.rootContext.triggerPointerDownPosRef()?.x ?? 0)),
+                    y: Math.abs(Math.round(event.pageY) - (this.rootContext.triggerPointerDownPosRef()?.y ?? 0))
+                };
+            };
+            const handlePointerUp = (event) => {
+                // Prevent options from being untappable on touch devices
+                if (event.pointerType === 'touch')
+                    return;
+                // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.
+                if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
+                    event.preventDefault();
+                }
+                else {
+                    // otherwise, if the event was outside the content, close.
+                    if (!this.content()?.contains(event.target))
+                        this.rootContext.onOpenChange(false);
+                }
+                document.removeEventListener('pointermove', handlePointerMove);
+                this.rootContext.triggerPointerDownPosRef.set(null);
+            };
+            if (this.rootContext.triggerPointerDownPosRef() !== null) {
+                document.addEventListener('pointermove', handlePointerMove);
+                document.addEventListener('pointerup', handlePointerUp, {
+                    capture: true,
+                    once: true
+                });
+            }
+            onCleanup(() => {
+                document.removeEventListener('pointermove', handlePointerMove);
+                document.removeEventListener('pointerup', handlePointerUp, {
+                    capture: true
+                });
+            });
+        });
+    }
+    focusSelectedItem() {
+        if (this.selectedItem() && this.content()) {
+            focusFirst([this.selectedItem(), this.content()]);
+        }
+    }
+    handleKeyDown(event) {
+        const keyEvent = event;
+        // select should not be navigated using tab key so we prevent it
+        if (keyEvent.key === 'Tab')
+            event.preventDefault();
+        if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(keyEvent.key)) {
+            const collectionItems = this.getItems().map((i) => i.ref);
+            let candidateNodes = [...collectionItems];
+            if (['ArrowUp', 'End'].includes(keyEvent.key))
+                candidateNodes = candidateNodes.slice().reverse();
+            if (['ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
+                const currentElement = event.target;
+                const currentIndex = candidateNodes.indexOf(currentElement);
+                candidateNodes = candidateNodes.slice(currentIndex + 1);
+            }
+            setTimeout(() => focusFirst(candidateNodes));
+            event.preventDefault();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectContent, isStandalone: true, selector: "[rdxSelectContent]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "handleKeyDown($event)" }, properties: { "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "dir": "rootContext.dir()", "style": "{\n            display: 'flex',\n            flexDirection: 'column',\n            outline: 'none'\n        }" } }, providers: [
+            provideSelectContentContext(context$1),
+            provideRdxDismissableLayerConfig(() => {
+                return {
+                    disableOutsidePointerEvents: signal(true)
+                };
+            })
+        ], queries: [{ propertyName: "positioner", first: true, predicate: RDX_SELECT_POSITIONER_TOKEN, descendants: true }], hostDirectives: [{ directive: i1$1.RdxFocusScope }, { directive: i2.RdxDismissableLayer }, { directive: i3.RdxCollectionProvider }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectContent]',
+                    hostDirectives: [RdxFocusScope, RdxDismissableLayer, RdxCollectionProvider],
+                    providers: [
+                        provideSelectContentContext(context$1),
+                        provideRdxDismissableLayerConfig(() => {
+                            return {
+                                disableOutsidePointerEvents: signal(true)
+                            };
+                        })
+                    ],
+                    host: {
+                        role: 'listbox',
+                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
+                        '[dir]': 'rootContext.dir()',
+                        '(keydown)': 'handleKeyDown($event)',
+                        '[style]': `{
+            display: 'flex',
+            flexDirection: 'column',
+            outline: 'none'
+        }`
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], positioner: [{
+                type: ContentChild,
+                args: [RDX_SELECT_POSITIONER_TOKEN, { descendants: true }]
+            }] } });
+
+class RdxSelectGroup {
+    constructor() {
+        this.id = inject(_IdGenerator).getId('rdx-select-group-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectGroup, isStandalone: true, selector: "[rdxSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "id" } }, exportAs: ["rdxSelectGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectGroup]',
+                    exportAs: 'rdxSelectGroup',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'id'
+                    }
+                }]
+        }] });
+
+const context = () => {
+    const context = inject(RdxSelectItem);
+    return {
+        value: context.value,
+        disabled: context.disabled,
+        isSelected: context.isSelected,
+        textId: context.textId,
+        onItemTextChange: (node) => {
+            context.textValue$.set(((context.textValue$() || node.textContent) ?? '').trim());
+        }
+    };
+};
+const [injectSelectItemContext, provideSelectItemContext] = createContext('RdxSelectItemContext');
+class RdxSelectItem {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+        this.contentContext = injectSelectContentContext();
+        this.currentElement = inject(ElementRef);
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.textValue = input('', ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.textValue$ = linkedSignal(this.textValue, ...(ngDevMode ? [{ debugName: "textValue$" }] : /* istanbul ignore next */ []));
+        this.isSelected = computed(() => valueComparator(this.rootContext.value(), this.value(), this.rootContext.by()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.textId = inject(_IdGenerator).getId('rdx-select-item-text-');
+        this.afterNextRender = afterNextRender(() => {
+            this.contentContext.itemRefCallback(this.currentElement.nativeElement, this.value(), this.disabled());
+        });
+        this.SELECT_SELECT = 'select.select';
+    }
+    onPointerDown(event) {
+        event.currentTarget.focus({ preventScroll: true });
+    }
+    onPointerUp(event) {
+        if (event.defaultPrevented)
+            return;
+        const eventDetail = { originalEvent: event, value: this.value() };
+        handleAndDispatchCustomEvent(this.SELECT_SELECT, async (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.rootContext.onValueChange(this.value());
+            if (!this.rootContext.multiple()) {
+                this.rootContext.onOpenChange(false);
+            }
+        }, eventDetail);
+    }
+    onPointerLeave(event) {
+        if (event.defaultPrevented)
+            return;
+        if (event.currentTarget === getActiveElement())
+            this.contentContext.onItemLeave?.();
+    }
+    onPointerMove(event) {
+        if (event.defaultPrevented)
+            return;
+        if (this.disabled()) {
+            this.contentContext.onItemLeave?.();
+        }
+        else {
+            // even though safari doesn't support this option, it's acceptable
+            // as it only means it might scroll a few pixels when using the pointer.
+            event.currentTarget?.focus({ preventScroll: true });
+        }
+    }
+    handleKeyDown(event) {
+        const keyEvent = event;
+        if (event.defaultPrevented)
+            return;
+        if (SELECTION_KEYS.includes(keyEvent.key))
+            this.handleSelectCustomEvent(keyEvent);
+        // prevent page scroll if using the space key to select an item
+        if (keyEvent.key === ' ')
+            event.preventDefault();
+    }
+    async handleSelectCustomEvent(event) {
+        if (event.defaultPrevented)
+            return;
+        const eventDetail = { originalEvent: event, value: this.value() };
+        handleAndDispatchCustomEvent(this.SELECT_SELECT, async (event) => {
+            if (event.defaultPrevented)
+                return;
+            if (!this.disabled()) {
+                this.rootContext.onValueChange(this.value());
+                if (!this.rootContext.multiple())
+                    this.rootContext.onOpenChange(false);
+            }
+        }, eventDetail);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectItem, isStandalone: true, selector: "[rdxSelectItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "focus": "isFocused.set(true)", "blur": "isFocused.set(false)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "pointerleave": "onPointerLeave($event)", "pointermove": "onPointerMove($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.tabindex": "disabled() ? undefined : -1", "attr.aria-selected": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"", "attr.data-highlighted": "isFocused() ? \"\" : undefined" } }, providers: [provideSelectItemContext(context)], hostDirectives: [{ directive: i3.RdxCollectionItem, inputs: ["value", "value"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectItem]',
+                    providers: [provideSelectItemContext(context)],
+                    hostDirectives: [
+                        {
+                            directive: RdxCollectionItem,
+                            inputs: ['value']
+                        }
+                    ],
+                    host: {
+                        role: 'option',
+                        '[attr.tabindex]': 'disabled() ? undefined : -1',
+                        '[attr.aria-selected]': 'isSelected() ? "checked" : "unchecked"',
+                        '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
+                        '[attr.data-highlighted]': 'isFocused() ? "" : undefined',
+                        '(focus)': 'isFocused.set(true)',
+                        '(blur)': 'isFocused.set(false)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(keydown)': 'handleKeyDown($event)'
+                    }
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class RdxSelectItemIndicator {
+    constructor() {
+        this.itemContext = injectSelectItemContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectItemIndicator, isStandalone: true, selector: "[rdxSelectItemIndicator]", host: { properties: { "attr.aria-hidden": "true", "hidden": "!itemContext.isSelected()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectItemIndicator]',
+                    host: {
+                        '[attr.aria-hidden]': 'true',
+                        '[hidden]': '!itemContext.isSelected()'
+                    }
+                }]
+        }] });
+
+class RdxSelectItemText {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.rootContext = injectSelectRootContext();
+        this.contentContext = injectSelectContentContext();
+        this.itemContext = injectSelectItemContext();
+        this.optionProps = computed(() => {
+            return {
+                value: this.itemContext.value(),
+                disabled: this.itemContext.disabled(),
+                textContent: this.elementRef.nativeElement.textContent ?? this.itemContext.value()?.toString() ?? ''
+            };
+        }, ...(ngDevMode ? [{ debugName: "optionProps" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.itemContext.onItemTextChange(this.elementRef.nativeElement);
+            this.contentContext.itemTextRefCallback(this.elementRef.nativeElement, this.itemContext.value(), this.itemContext.disabled());
+            this.rootContext.onOptionAdd(this.optionProps);
+        });
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => {
+            this.rootContext.onOptionRemove(this.optionProps);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectItemText, isStandalone: true, selector: "[rdxSelectItemText]", host: { properties: { "id": "itemContext.textId" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectItemText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectItemText]',
+                    host: {
+                        '[id]': 'itemContext.textId'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxSelectLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectLabel, isStandalone: true, selector: "[rdxSelectLabel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectLabel]',
+                    host: {}
+                }]
+        }] });
+
+class RdxSelectPopperPositionContent {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPopperPositionContent, isStandalone: true, selector: "[rdxSelectPopperPositionContent]", host: { attributes: { "role": "listbox" }, properties: { "id": "rootContext.contentId" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectPopperPositionContent]',
+                    hostDirectives: [RdxPopperContent],
+                    host: {
+                        role: 'listbox',
+                        '[id]': 'rootContext.contentId'
+                    }
+                }]
+        }] });
+
+class RdxSelectPopperPositionWrapper {
+    constructor() {
+        /**
+         * The preferred side of the anchor to render against when open.
+         * Will be reversed when collisions occur and avoidCollisions is enabled.
+         */
+        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /**
+         * The distance in pixels from the anchor.
+         */
+        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * The preferred alignment against the anchor. May change when collisions occur.
+         */
+        this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /**
+         * An offset in pixels from the `start` or `end` alignment options.
+         */
+        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * The padding between the arrow and the edges of the content.
+         * If your content has border-radius, this will prevent it from overflowing the corners.
+         */
+        this.arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
+         */
+        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The element used as the collision boundary.
+         * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+         */
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
+        /**
+         * The distance in pixels from the boundary edges where collision detection should occur.
+         * Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.
+         */
+        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
+        /**
+         * The sticky behavior on the `align` axis.
+         * - `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary
+         * - `always` will keep the content in the boundary regardless.
+         */
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to hide the content when the trigger becomes fully occluded.
+         */
+        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether to update the position of the floating element on every animation frame if required.
+         */
+        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the element is placed.
+         */
+        this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectPopperPositionWrapper, isStandalone: true, selector: "[rdxSelectPopperPositionWrapper]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { properties: { "style": "{\n          'boxSizing': 'border-box',\n          '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',\n        }" } }, providers: [
+            {
+                provide: RDX_SELECT_POSITIONER_TOKEN,
+                useExisting: forwardRef(() => RdxSelectPopperPositionWrapper)
+            }
+        ], hostDirectives: [{ directive: i1.RdxPopperContentWrapper, inputs: ["side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPopperPositionWrapper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectPopperPositionWrapper]',
+                    providers: [
+                        {
+                            provide: RDX_SELECT_POSITIONER_TOKEN,
+                            useExisting: forwardRef(() => RdxSelectPopperPositionWrapper)
+                        }
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
+                    host: {
+                        // re-namespace exposed content custom properties
+                        '[style]': `{
+          'boxSizing': 'border-box',
+          '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',
+          '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',
+          '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',
+          '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',
+          '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',
+        }`
+                    }
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
+
+class RdxSelectPortal {
+    constructor() {
+        this.container = input.required(...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectPortal, isStandalone: true, selector: "[rdxSelectPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$2.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectPortal]',
+                    hostDirectives: [
+                        {
+                            directive: RdxPortal,
+                            inputs: ['container']
+                        }
+                    ]
+                }]
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: true }] }] } });
+
+class RdxSelectPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectPortalPresence, isStandalone: true, selector: "ng-template[rdxSelectPortalPresence]", providers: [
+            provideRdxPresenceContext(() => {
+                const context = injectSelectRootContext();
+                return { present: context.open };
+            })
+        ], hostDirectives: [{ directive: i1$3.RdxPresenceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxSelectPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectSelectRootContext();
+                            return { present: context.open };
+                        })
+                    ]
+                }]
+        }] });
+
+class RdxSelectTrigger {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+        this.elementRef = inject(ElementRef);
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.rootContext.onTriggerChange(this.elementRef);
+        });
+    }
+    handleOpen() {
+        if (!this.isDisabled()) {
+            this.rootContext.onOpenChange(true);
+        }
+    }
+    handlePointerOpen(event) {
+        const pointerEvent = event;
+        this.handleOpen();
+        this.rootContext.triggerPointerDownPosRef.set({
+            x: Math.round(pointerEvent.pageX),
+            y: Math.round(pointerEvent.pageY)
+        });
+    }
+    onClickHandler(event) {
+        // Whilst browsers generally have no issue focusing the trigger when clicking
+        // on a label, Safari seems to struggle with the fact that there's no `onClick`.
+        // We force `focus` in this case. Note: this doesn't create any other side-effect
+        // because we are preventing default in `onPointerDown` so effectively
+        // this only runs for a label 'click'
+        event?.currentTarget?.focus();
+    }
+    onPointerDown(event) {
+        const pointerEvent = event;
+        if (pointerEvent.pointerType === 'touch')
+            return event.preventDefault();
+        // prevent implicit pointer capture
+        // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
+        const target = event.target;
+        if (target.hasPointerCapture(pointerEvent.pointerId)) {
+            target.releasePointerCapture(pointerEvent.pointerId);
+        }
+        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+        // but not when the control key is pressed (avoiding MacOS right click)
+        if (pointerEvent.button === 0 && pointerEvent.ctrlKey === false) {
+            this.handlePointerOpen(event);
+            // prevent trigger from stealing focus from the active item after opening.
+            event.preventDefault();
+        }
+    }
+    onPointerUp(event) {
+        const pointerEvent = event;
+        event.preventDefault();
+        // Only open on pointer up when using touch devices
+        if (pointerEvent.pointerType === 'touch')
+            this.handlePointerOpen(event);
+    }
+    onKeydown(event) {
+        const keyEvent = event;
+        if (OPEN_KEYS.includes(keyEvent.key)) {
+            this.handleOpen();
+            event.preventDefault();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectTrigger, isStandalone: true, selector: "button[rdxSelectTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "button" }, listeners: { "click": "onClickHandler($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)", "keydown": "onKeydown($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "dir": "rootContext.dir()", "attr.data-state": "rootContext.open() ? \"open\" : \"closed\"", "attr.data-disabled": "isDisabled() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxSelectTrigger]',
+                    hostDirectives: [RdxPopperAnchor],
+                    host: {
+                        role: 'combobox',
+                        type: 'button',
+                        '[attr.disabled]': 'isDisabled() ? "" : undefined',
+                        '[dir]': 'rootContext.dir()',
+                        '[attr.data-state]': 'rootContext.open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '(click)': 'onClickHandler($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(keydown)': 'onKeydown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class RdxSelectValue {
+    constructor() {
+        this.rootContext = injectSelectRootContext();
+        this.elementRef = inject(ElementRef);
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.slotText = computed(() => {
+            return this.selectedLabel().length ? this.selectedLabel().join(', ') : this.placeholder();
+        }, ...(ngDevMode ? [{ debugName: "slotText" }] : /* istanbul ignore next */ []));
+        this.selectedLabel = computed(() => {
+            // eslint-disable-next-line no-useless-assignment
+            let list = [];
+            const options = Array.from(this.rootContext.optionsSet());
+            const getOption = (value) => options.find((option) => valueComparator(value, option.value, this.rootContext.by()));
+            if (Array.isArray(this.rootContext.value())) {
+                list = Array(this.rootContext.value()).map((value) => getOption(value)?.textContent ?? '');
+            }
+            else {
+                list = [getOption(this.rootContext.value())?.textContent ?? ''];
+            }
+            return list.filter(Boolean);
+        }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.rootContext.valueElement.set(this.elementRef.nativeElement);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSelectValue, isStandalone: true, selector: "span[rdxSelectValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.pointer-events": "\"none\"" } }, exportAs: ["rdxSelectedValue"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[rdxSelectValue]',
+                    exportAs: 'rdxSelectedValue',
+                    host: {
+                        '[style.pointer-events]': '"none"'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+class RdxSelectViewport {
+    constructor() {
+        this.contentContext = injectSelectContentContext();
+        this.elementRef = inject((ElementRef));
+        this.prevScrollTopRef = signal(0, ...(ngDevMode ? [{ debugName: "prevScrollTopRef" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.contentContext?.onViewportChange(this.elementRef.nativeElement);
+        });
+    }
+    handleScroll(event) {
+        const viewport = event.currentTarget;
+        this.prevScrollTopRef.set(viewport.scrollTop);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSelectViewport, isStandalone: true, selector: "[rdxSelectViewport]", host: { attributes: { "role": "presentation" }, listeners: { "scroll": "handleScroll($event)" }, properties: { "attr.data-rdx-select-viewport": "\"\"", "style": "{\n            position: 'relative',\n            flex: 1,\n            overflow: 'hidden auto',\n            scrollbarWidth: 'none'\n        }" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSelectViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectViewport]',
+                    host: {
+                        role: 'presentation',
+                        '[attr.data-rdx-select-viewport]': '""',
+                        '[style]': `{
+            position: 'relative',
+            flex: 1,
+            overflow: 'hidden auto',
+            scrollbarWidth: 'none'
+        }`,
+                        '(scroll)': 'handleScroll($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+const _importsSelect = [
+    RdxSelectRoot,
+    RdxSelectPortal,
+    RdxSelectTrigger,
+    RdxSelectValue,
+    RdxSelectContent,
+    RdxSelectViewport,
+    RdxSelectItemIndicator,
+    RdxSelectItem,
+    RdxSelectItemText,
+    RdxSelectLabel,
+    RdxSelectGroup,
+    RdxSelectPopperPositionContent,
+    RdxSelectPopperPositionWrapper,
+    RdxSelectPortalPresence
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CONTENT_MARGIN, OPEN_KEYS, RDX_SELECT_POSITIONER_TOKEN, RdxSelectContent, RdxSelectGroup, RdxSelectItem, RdxSelectItemIndicator, RdxSelectItemText, RdxSelectLabel, RdxSelectPopperPositionContent, RdxSelectPopperPositionWrapper, RdxSelectPortal, RdxSelectPortalPresence, RdxSelectRoot, RdxSelectTrigger, RdxSelectValue, RdxSelectViewport, SELECTION_KEYS, _importsSelect, compare, focusFirst, injectSelectContentContext, injectSelectItemContext, injectSelectRootContext, provideSelectContentContext, provideSelectItemContext, provideSelectRootContext, shouldShowPlaceholder, valueComparator };
+//# sourceMappingURL=radix-ng-primitives-select2.mjs.map