@educarehq/solaris-ui 0.1.0 → 0.2.0

package/esm2022/lib/components/forms/select/component/select.component.js

@@ -0,0 +1,819 @@
+import { Component, input, computed, signal, output, effect, forwardRef, inject, ContentChildren, ElementRef, ViewChild, isDevMode, } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SolarisFormControl } from '../../form-field/model/form-control.contract';
+import { SolarisFormFieldComponent } from '../../form-field/component/form-field.component';
+import { SolarisFormFieldTriggerDirective } from '../../form-field/directives/form-field-trigger.directive';
+import { SolarisFormPrefixDirective } from '../../form-field/directives/form-prefix.directive';
+import { SolarisFormSuffixDirective } from '../../form-field/directives/form-suffix.directive';
+import { SolarisTranslateService } from '../../../../services/translation';
+import { SolarisOptionComponent } from '../../option';
+import { SolarisOptionGroupComponent } from '../../option-group';
+import { SolarisIconComponent } from '../../../icon';
+import { SolarisPopoverDirective, SolarisPopoverTriggerDirective, } from '../../../interaction/popover';
+import * as i0 from "@angular/core";
+let nextId = 0;
+function generateId() {
+    return `solaris-select-${++nextId}`;
+}
+export class SolarisSelectComponent extends SolarisFormControl {
+    elementRef = inject(ElementRef);
+    translateService = inject(SolarisTranslateService);
+    parentFormField = inject(SolarisFormFieldComponent, {
+        optional: true,
+    });
+    popoverTrigger;
+    searchInputRef;
+    triggerElement;
+    formFieldElement;
+    options;
+    optionGroups;
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
+    labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    errorKey = input(...(ngDevMode ? [undefined, { debugName: "errorKey" }] : /* istanbul ignore next */ []));
+    emptyText = input(...(ngDevMode ? [undefined, { debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    emptyTextKey = input(...(ngDevMode ? [undefined, { debugName: "emptyTextKey" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    placeholderKey = input(...(ngDevMode ? [undefined, { debugName: "placeholderKey" }] : /* istanbul ignore next */ []));
+    loadingTextKey = input(...(ngDevMode ? [undefined, { debugName: "loadingTextKey" }] : /* istanbul ignore next */ []));
+    ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    noResultsTextKey = input(...(ngDevMode ? [undefined, { debugName: "noResultsTextKey" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    clearLabel = input(...(ngDevMode ? [undefined, { debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    clearLabelKey = input(...(ngDevMode ? [undefined, { debugName: "clearLabelKey" }] : /* istanbul ignore next */ []));
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchPlaceholderKey = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholderKey" }] : /* istanbul ignore next */ []));
+    panelMinWidth = input(...(ngDevMode ? [undefined, { debugName: "panelMinWidth" }] : /* istanbul ignore next */ []));
+    panelMaxWidth = input(...(ngDevMode ? [undefined, { debugName: "panelMaxWidth" }] : /* istanbul ignore next */ []));
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    panelMatchTriggerWidth = input(true, ...(ngDevMode ? [{ debugName: "panelMatchTriggerWidth" }] : /* istanbul ignore next */ []));
+    radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    panelMaxHeight = input('20rem', ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    displayWith = input(...(ngDevMode ? [undefined, { debugName: "displayWith" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    manualInvalid = input(undefined, { ...(ngDevMode ? { debugName: "manualInvalid" } : /* istanbul ignore next */ {}), alias: 'invalid' });
+    opened = output();
+    closed = output();
+    cleared = output();
+    openChange = output();
+    searchChange = output();
+    valueChange = output();
+    selectionChange = output();
+    panelId = `solaris-select-panel-${generateId()}`;
+    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    internalValue = signal(undefined, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
+    internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    optionsInitialized = signal(false, ...(ngDevMode ? [{ debugName: "optionsInitialized" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    optionsSubscription;
+    optionInteractionSubscriptions = [];
+    popoverSubscriptions = [];
+    elementId = computed(() => {
+        // SECURITY_EXCEPTION: nativeElement.getAttribute('id') is standard DOM API to check existing ID before generating one. Same approach used by Solaris Option and Angular CDK.
+        const existing = this.elementRef.nativeElement.getAttribute('id');
+        return existing ?? generateId();
+    }, ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
+    effectiveDensity = computed(() => {
+        return this.density() ?? 'comfortable';
+    }, ...(ngDevMode ? [{ debugName: "effectiveDensity" }] : /* istanbul ignore next */ []));
+    isEffectivelyDisabled = computed(() => {
+        return this.disabledInput() || this.internalDisabled();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+    isEffectivelyReadonly = computed(() => {
+        return this.readonlyInput();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
+    isEffectivelyInvalid = computed(() => {
+        const manual = this.manualInvalid();
+        if (manual !== undefined) {
+            return manual;
+        }
+        return this.requiredInput() && this.touched() && !this.hasValue();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyInvalid" }] : /* istanbul ignore next */ []));
+    popoverAppearance = computed(() => {
+        const a = this.appearance();
+        return a === 'filled' ? 'surface' : a;
+    }, ...(ngDevMode ? [{ debugName: "popoverAppearance" }] : /* istanbul ignore next */ []));
+    canOpen = computed(() => {
+        return !this.isEffectivelyDisabled() && !this.isEffectivelyReadonly();
+    }, ...(ngDevMode ? [{ debugName: "canOpen" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => {
+        return this.internalValue() !== undefined && this.internalValue() !== null;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    canClear = computed(() => {
+        return (this.clearable() &&
+            this.hasValue() &&
+            !this.isEffectivelyDisabled() &&
+            !this.isEffectivelyReadonly());
+    }, ...(ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => {
+        const value = this.internalValue();
+        const comp = this.compareWith();
+        const opts = this.options;
+        if (!opts || value === undefined || value === null) {
+            return undefined;
+        }
+        return opts.find((opt) => comp(opt.value(), value));
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    displayText = computed(() => {
+        const dw = this.displayWith();
+        const val = this.internalValue();
+        if (dw && val !== undefined && val !== null) {
+            const result = dw(val);
+            if (result !== undefined) {
+                return result;
+            }
+        }
+        const selected = this.selectedOption();
+        if (selected) {
+            const label = selected.labelText();
+            if (label) {
+                return label;
+            }
+            const nativeText = this.getOptionNativeText(selected);
+            if (nativeText) {
+                return nativeText;
+            }
+        }
+        if (val !== undefined && val !== null) {
+            const str = String(val);
+            if (str !== '[object Object]') {
+                return str;
+            }
+            if (isDevMode()) {
+                console.warn(`[SolarisSelect] No displayWith provided for object value. Use displayWith input to show a readable label.`);
+            }
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    placeholderText = computed(() => {
+        const key = this.placeholderKey();
+        if (key) {
+            return this.translateService.translate(key) || this.placeholder() || '';
+        }
+        return this.placeholder() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
+    searchPlaceholderText = computed(() => {
+        const key = this.searchPlaceholderKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.searchPlaceholder();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.select.search.placeholder');
+    }, ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : /* istanbul ignore next */ []));
+    loadingTextValue = computed(() => {
+        const key = this.loadingTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.loadingText();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.select.loading');
+    }, ...(ngDevMode ? [{ debugName: "loadingTextValue" }] : /* istanbul ignore next */ []));
+    emptyTextValue = computed(() => {
+        const key = this.emptyTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.emptyText();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.select.empty');
+    }, ...(ngDevMode ? [{ debugName: "emptyTextValue" }] : /* istanbul ignore next */ []));
+    noResultsTextValue = computed(() => {
+        const key = this.noResultsTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.noResultsText();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.select.noResults');
+    }, ...(ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []));
+    clearAriaLabel = computed(() => {
+        const key = this.clearLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        const text = this.clearLabel();
+        if (text) {
+            return text;
+        }
+        return this.translateService.translate('solaris.select.clear');
+    }, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelText = computed(() => {
+        const key = this.ariaLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        return this.ariaLabel();
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelText" }] : /* istanbul ignore next */ []));
+    ariaLabelledbyText = computed(() => {
+        return this.ariaLabelledby();
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelledbyText" }] : /* istanbul ignore next */ []));
+    labelText = computed(() => {
+        const key = this.labelKey();
+        if (key) {
+            return this.translateService.translate(key) || this.label() || '';
+        }
+        return this.label() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+    hintText = computed(() => {
+        const key = this.hintKey();
+        if (key) {
+            return this.translateService.translate(key) || this.hint() || '';
+        }
+        return this.hint() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => {
+        const key = this.errorKey();
+        if (key) {
+            return this.translateService.translate(key) || this.error() || '';
+        }
+        return this.error() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    activeDescendantId = computed(() => {
+        if (!this.panelOpen())
+            return null;
+        const idx = this.activeOptionIndex();
+        const opts = this.visibleOptions();
+        if (idx >= 0 && idx < opts.length) {
+            return opts[idx].elementId();
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    _describedByIds = signal([], ...(ngDevMode ? [{ debugName: "_describedByIds" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = computed(() => {
+        const ids = this._describedByIds();
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    visibleOptions = computed(() => {
+        const opts = this.options;
+        if (!opts)
+            return [];
+        if (!this.panelOpen())
+            return [];
+        const query = this.searchQuery().toLowerCase().trim();
+        if (!query)
+            return opts.toArray();
+        return opts.toArray().filter((opt) => {
+            if (opt.isEffectivelyDisabled())
+                return false;
+            return this.optionMatchesSearch(opt, query);
+        });
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    showNoResults = computed(() => {
+        return (this.searchQuery().trim().length > 0 &&
+            this.visibleOptions().length === 0 &&
+            !this.loading());
+    }, ...(ngDevMode ? [{ debugName: "showNoResults" }] : /* istanbul ignore next */ []));
+    showEmpty = computed(() => {
+        const opts = this.options;
+        return ((!opts || opts.length === 0) &&
+            !this.loading() &&
+            this.searchQuery().trim().length === 0);
+    }, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
+    get id() {
+        return this.elementId();
+    }
+    get focused() {
+        return this.internalFocused();
+    }
+    get disabled() {
+        return this.isEffectivelyDisabled();
+    }
+    get readonly() {
+        return this.isEffectivelyReadonly();
+    }
+    get invalid() {
+        return this.isEffectivelyInvalid();
+    }
+    get required() {
+        return this.requiredInput();
+    }
+    get describedByIds() {
+        return this._describedByIds();
+    }
+    setDescribedByIds(ids) {
+        this._describedByIds.set([...ids]);
+    }
+    focus() {
+        // SECURITY_EXCEPTION: nativeElement.focus() required to programmatically focus the select trigger. Standard DOM method used by Angular CDK.
+        if (this.triggerElement) {
+            this.triggerElement.nativeElement.focus();
+        }
+        else {
+            // SECURITY_EXCEPTION: nativeElement.focus() required as fallback when no triggerElement ref. Standard DOM method.
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    writeValue(safe) {
+        this.internalValue.set(safe);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.internalDisabled.set(isDisabled);
+    }
+    constructor() {
+        super();
+        effect(() => {
+            if (!this.optionsInitialized())
+                return;
+            this.internalValue();
+            this.setOptionsSelectedState();
+        });
+    }
+    ngAfterContentInit() {
+        this.optionsInitialized.set(true);
+        this.setOptionsSelectedState();
+        this.setOptionGroupDisabledState();
+        this.syncActiveOptionToSelected();
+        this.syncActiveStates();
+        this.syncVisibility();
+        this.subscribeToOptionInteractions();
+        const optionsSub = this.options.changes.subscribe(() => {
+            this.setOptionsSelectedState();
+            this.setOptionGroupDisabledState();
+            this.syncVisibility();
+            this.subscribeToOptionInteractions();
+        });
+        this.optionsSubscription = () => optionsSub.unsubscribe();
+        if (isDevMode() && this.parentFormField) {
+            console.warn('SolarisSelectComponent already includes SolarisFormField internally. ' +
+                'Do not wrap it with <solaris-form-field>; pass label, hint, error, prefix and suffix directly to <solaris-select>.');
+        }
+    }
+    ngAfterViewInit() {
+        if (this.popoverTrigger) {
+            const openedSub = this.popoverTrigger.solarisPopoverOpened.subscribe(() => {
+                this.onPanelOpened();
+            });
+            const closedSub = this.popoverTrigger.solarisPopoverClosed.subscribe(() => {
+                this.onPanelClosed();
+            });
+            this.popoverSubscriptions.push(() => openedSub.unsubscribe(), () => closedSub.unsubscribe());
+        }
+    }
+    ngOnDestroy() {
+        this.optionsSubscription?.();
+        this.optionInteractionSubscriptions.forEach((fn) => fn());
+        this.popoverSubscriptions.forEach((fn) => fn());
+    }
+    onPanelOpened() {
+        this.searchQuery.set('');
+        this.panelOpen.set(true);
+        this.setOptionsSelectedState();
+        this.syncActiveOptionToSelected();
+        this.syncActiveStates();
+        this.syncVisibility();
+        this.opened.emit();
+        this.openChange.emit(true);
+        this.setConnectedSide('bottom');
+        if (this.searchable()) {
+            requestAnimationFrame(() => {
+                // SECURITY_EXCEPTION: nativeElement.focus() required to focus search input when panel opens. Standard DOM method.
+                this.searchInputRef?.nativeElement.focus();
+            });
+        }
+    }
+    onPanelClosed() {
+        this.panelOpen.set(false);
+        this.searchQuery.set('');
+        this.syncVisibility();
+        this.closed.emit();
+        this.openChange.emit(false);
+        this.markAsTouched();
+        this.clearConnectedSide();
+    }
+    setConnectedSide(side) {
+        // SECURITY_EXCEPTION: nativeElement required to access form-field DOM for connected-side sync. ElementRef SSR-safe.
+        const el = this.formFieldElement?.nativeElement;
+        if (el) {
+            // SECURITY_EXCEPTION: nativeElement.querySelector required to find control-wrapper for connected-side sync.
+            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
+            if (wrapper) {
+                wrapper.dataset['connectedSide'] = side;
+            }
+        }
+    }
+    clearConnectedSide() {
+        // SECURITY_EXCEPTION: nativeElement required to access form-field DOM for connected-side cleanup. ElementRef SSR-safe.
+        const el = this.formFieldElement?.nativeElement;
+        if (el) {
+            const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
+            if (wrapper) {
+                delete wrapper.dataset['connectedSide'];
+            }
+        }
+    }
+    selectOption(option) {
+        if (option.isEffectivelyDisabled())
+            return;
+        const newValue = option.value();
+        this.internalValue.set(newValue);
+        this.onChange(newValue);
+        this.valueChange.emit(newValue);
+        this.selectionChange.emit(option);
+        this.setOptionsSelectedState();
+        this.popoverTrigger?.close();
+    }
+    clearValue() {
+        this.internalValue.set(null);
+        this.onChange(null);
+        this.valueChange.emit(null);
+        this.selectionChange.emit(undefined);
+        this.cleared.emit();
+        this.setOptionsSelectedState();
+        this.markAsTouched();
+    }
+    onTriggerKeydown(event) {
+        if (!this.canOpen()) {
+            event.preventDefault();
+            return;
+        }
+        if (this.maybeClosePanel(event))
+            return;
+        if (this.maybeNavigateToBound(event))
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.handleToggleOpen();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.handleArrow(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.handleArrow(-1);
+                break;
+        }
+    }
+    handleToggleOpen() {
+        if (this.panelOpen()) {
+            this.selectActiveOption();
+        }
+        else {
+            this.popoverTrigger?.open();
+        }
+    }
+    handleArrow(direction) {
+        if (this.panelOpen()) {
+            this.focusNextOption(direction);
+        }
+        else {
+            this.popoverTrigger?.open();
+            requestAnimationFrame(() => this.focusNextOption(direction));
+        }
+    }
+    maybeClosePanel(event) {
+        if (!this.panelOpen())
+            return false;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.popoverTrigger?.close();
+            return true;
+        }
+        if (event.key === 'Tab') {
+            this.popoverTrigger?.close();
+            return true;
+        }
+        return false;
+    }
+    maybeNavigateToBound(event) {
+        if (!this.panelOpen())
+            return false;
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this.activeOptionIndex.set(this.getFirstEnabledOptionIndex());
+            this.syncActiveStates();
+            return true;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            this.activeOptionIndex.set(this.getLastEnabledOptionIndex());
+            this.syncActiveStates();
+            return true;
+        }
+        return false;
+    }
+    onSearchInput(event) {
+        const target = event.target;
+        const value = target.value;
+        this.searchQuery.set(value);
+        this.searchChange.emit(value);
+        this.activeOptionIndex.set(-1);
+        this.syncActiveStates();
+        this.syncVisibility();
+    }
+    onSearchKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusNextOption(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusNextOption(-1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                event.stopPropagation();
+                this.selectActiveOption();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.searchQuery()) {
+                    this.searchQuery.set('');
+                    this.searchChange.emit('');
+                    this.syncVisibility();
+                    this.syncActiveStates();
+                }
+                else {
+                    this.popoverTrigger?.close();
+                }
+                break;
+            case 'Tab':
+                this.popoverTrigger?.close();
+                break;
+        }
+    }
+    onPanelClick(event) {
+        event.stopPropagation();
+    }
+    onPanelKeydown(event) {
+        event.stopPropagation();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNextOption(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusNextOption(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectActiveOption();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.popoverTrigger?.close();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.activeOptionIndex.set(this.getFirstEnabledOptionIndex());
+                break;
+            case 'End':
+                event.preventDefault();
+                this.activeOptionIndex.set(this.getLastEnabledOptionIndex());
+                break;
+        }
+    }
+    onTriggerFocus() {
+        this.internalFocused.set(true);
+    }
+    onTriggerBlur() {
+        this.internalFocused.set(false);
+    }
+    subscribeToOptionInteractions() {
+        this.optionInteractionSubscriptions.forEach((fn) => fn());
+        this.optionInteractionSubscriptions = [];
+        this.options.forEach((opt) => {
+            const sub = opt.optionInteraction.subscribe(({ option }) => {
+                this.selectOption(option);
+            });
+            this.optionInteractionSubscriptions.push(() => sub.unsubscribe());
+        });
+    }
+    setOptionsSelectedState() {
+        const value = this.internalValue();
+        const comp = this.compareWith();
+        this.options.forEach((opt) => {
+            const isSelected = comp(opt.value(), value);
+            opt.setSelected(isSelected);
+        });
+    }
+    setOptionGroupDisabledState() {
+        this.optionGroups.forEach((group) => {
+            group.options.forEach((opt) => {
+                opt.setGroupDisabledState(group.isEffectivelyDisabled());
+            });
+        });
+    }
+    syncActiveStates() {
+        const idx = this.activeOptionIndex();
+        const opts = this.visibleOptions();
+        this.options.forEach((opt) => opt.setActive(false));
+        if (idx >= 0 && idx < opts.length) {
+            opts[idx].setActive(true);
+        }
+    }
+    syncVisibility() {
+        const query = this.searchQuery().trim();
+        if (!query) {
+            this.options.forEach((o) => o.setHidden(false));
+            this.optionGroups.forEach((g) => g.setHidden(false));
+            return;
+        }
+        const visible = new Set(this.visibleOptions());
+        this.options.forEach((o) => o.setHidden(!visible.has(o)));
+        this.optionGroups.forEach((g) => {
+            const anyVisible = g.options.some((o) => visible.has(o));
+            g.setHidden(!anyVisible);
+        });
+    }
+    syncActiveOptionToSelected() {
+        const selected = this.selectedOption();
+        if (selected) {
+            const opts = this.options.toArray();
+            const idx = opts.indexOf(selected);
+            this.activeOptionIndex.set(idx >= 0 ? idx : -1);
+        }
+        else {
+            this.activeOptionIndex.set(-1);
+        }
+        this.syncActiveStates();
+    }
+    getOptionNativeText(option) {
+        const nativeEl = option.elementRef;
+        // SECURITY_EXCEPTION: nativeElement access needed to read option text for search filtering. Read-only, SSR-safe.
+        if (nativeEl?.nativeElement) {
+            // SECURITY_EXCEPTION: nativeElement.textContent needed to read option text for search filtering. Read-only, SSR-safe.
+            return nativeEl.nativeElement.textContent?.trim() || '';
+        }
+        return '';
+    }
+    optionMatchesSearch(option, query) {
+        const label = (option.labelText() || '').toLowerCase();
+        const desc = (option.descriptionText() || '').toLowerCase();
+        const native = this.getOptionNativeText(option).toLowerCase();
+        const normalizedQuery = query
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        const normalizedLabel = label
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        const normalizedDesc = desc
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        const normalizedNative = native
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '');
+        return (normalizedLabel.includes(normalizedQuery) ||
+            normalizedDesc.includes(normalizedQuery) ||
+            normalizedNative.includes(normalizedQuery));
+    }
+    markAsTouched() {
+        if (!this.touched()) {
+            this.touched.set(true);
+            this.onTouched();
+        }
+    }
+    selectActiveOption() {
+        const idx = this.activeOptionIndex();
+        const opts = this.visibleOptions();
+        if (idx >= 0 && idx < opts.length) {
+            this.selectOption(opts[idx]);
+        }
+    }
+    focusNextOption(direction) {
+        const opts = this.visibleOptions();
+        if (opts.length === 0)
+            return;
+        let current = this.activeOptionIndex();
+        if (current < 0 || current >= opts.length) {
+            current = direction === 1 ? -1 : opts.length;
+        }
+        let next = current + direction;
+        while (next >= 0 && next < opts.length) {
+            if (!opts[next].isEffectivelyDisabled()) {
+                this.activeOptionIndex.set(next);
+                this.syncActiveStates();
+                return;
+            }
+            next += direction;
+        }
+        if (direction === 1 && next >= opts.length) {
+            this.activeOptionIndex.set(this.getFirstEnabledOptionIndex());
+            this.syncActiveStates();
+        }
+        else if (direction === -1 && next < 0) {
+            this.activeOptionIndex.set(this.getLastEnabledOptionIndex());
+            this.syncActiveStates();
+        }
+    }
+    getFirstEnabledOptionIndex() {
+        const opts = this.visibleOptions();
+        for (let i = 0; i < opts.length; i++) {
+            if (!opts[i].isEffectivelyDisabled())
+                return i;
+        }
+        return -1;
+    }
+    getLastEnabledOptionIndex() {
+        const opts = this.visibleOptions();
+        for (let i = opts.length - 1; i >= 0; i--) {
+            if (!opts[i].isEffectivelyDisabled())
+                return i;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSelectComponent, isStandalone: true, selector: "solaris-select", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, loadingTextKey: { classPropertyName: "loadingTextKey", publicName: "loadingTextKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabelKey: { classPropertyName: "clearLabelKey", publicName: "clearLabelKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, panelMatchTriggerWidth: { classPropertyName: "panelMatchTriggerWidth", publicName: "panelMatchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, manualInvalid: { classPropertyName: "manualInvalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", openChange: "openChange", searchChange: "searchChange", valueChange: "valueChange", selectionChange: "selectionChange" }, host: { attributes: { "solaris-select": "" }, properties: { "attr.id": "elementId()", "attr.data-size": "size()", "attr.data-open": "panelOpen() ? \"\" : null", "attr.aria-label": "ariaLabelText() ?? null", "attr.data-has-value": "hasValue() ? \"\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisSelectComponent),
+                multi: true,
+            },
+            {
+                provide: SolarisFormControl,
+                useExisting: forwardRef(() => SolarisSelectComponent),
+            },
+        ], queries: [{ propertyName: "options", predicate: SolarisOptionComponent, descendants: true }, { propertyName: "optionGroups", predicate: SolarisOptionGroupComponent, descendants: true }], viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "triggerElement", first: true, predicate: ["triggerEl"], descendants: true, read: ElementRef }, { propertyName: "formFieldElement", first: true, predicate: ["formFieldRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<solaris-form-field\r\n  #formFieldRef\r\n  [class.solaris-select--panel-open]=\"panelOpen()\"\r\n  [control]=\"this\"\r\n  [label]=\"labelText()\"\r\n  [hint]=\"hintText()\"\r\n  [error]=\"errorText()\"\r\n  [appearance]=\"appearance()\"\r\n  [size]=\"size()\"\r\n  [density]=\"effectiveDensity()\"\r\n  [radius]=\"radius()\"\r\n  [invalid]=\"isEffectivelyInvalid()\"\r\n  [required]=\"requiredInput()\"\r\n  solaris-popover-trigger\r\n  [solarisPopoverDisabled]=\"!canOpen()\"\r\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\r\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\r\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\r\n  [solarisPopoverPlacement]=\"'bottom'\"\r\n  [solarisPopoverAlign]=\"'start'\"\r\n  [solarisPopoverOffset]=\"0\"\r\n  [solarisPopoverPadding]=\"'none'\"\r\n  [solarisPopoverRadius]=\"radius()\"\r\n  [solarisPopoverTopConnected]=\"true\"\r\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\r\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\r\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\r\n  [solarisPopoverCloseOnEscape]=\"false\"\r\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\r\n>\r\n  @if (icon(); as iconName) {\r\n    <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\r\n  }\r\n  <ng-content select=\"[solaris-form-prefix]\" />\r\n\r\n  <div\r\n    #triggerEl\r\n    class=\"solaris-select__trigger\"\r\n    [id]=\"elementId() + '--trigger'\"\r\n    solaris-form-field-trigger\r\n    role=\"combobox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\r\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus()\"\r\n    (blur)=\"onTriggerBlur()\"\r\n  >\r\n    @if (searchable() && panelOpen()) {\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"solaris-select__search-input\"\r\n        [attr.placeholder]=\"searchPlaceholderText()\"\r\n        [value]=\"searchQuery()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"onSearchKeydown($event)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        role=\"searchbox\"\r\n        autocomplete=\"off\"\r\n      />\r\n    } @else {\r\n      <span class=\"solaris-select__value\">\r\n        @if (displayText()) {\r\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\r\n        } @else {\r\n          <span class=\"solaris-select__placeholder\">{{\r\n            placeholderText()\r\n          }}</span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <span class=\"solaris-select__actions\">\r\n      @if (canClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"solaris-select__clear\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n          (click)=\"clearValue(); $event.stopPropagation()\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n        </button>\r\n      }\r\n\r\n      <solaris-icon\r\n        class=\"solaris-select__dropdown-icon\"\r\n        name=\"chevron-down\"\r\n        [decorative]=\"true\"\r\n        size=\"sm\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  <ng-content select=\"[solaris-form-suffix]\" />\r\n</solaris-form-field>\r\n\r\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\r\n  <div\r\n    class=\"solaris-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"panelId\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onPanelClick($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (loading()) {\r\n      <div class=\"solaris-select__loading\">\r\n        <span class=\"solaris-select__loading-text\">{{\r\n          loadingTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showNoResults()) {\r\n      <div class=\"solaris-select__no-results\">\r\n        <span class=\"solaris-select__no-results-text\">{{\r\n          noResultsTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showEmpty()) {\r\n      <div class=\"solaris-select__empty\">\r\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"solaris-select__options\"\r\n        [style.max-height]=\"panelMaxHeight()\"\r\n      >\r\n        <ng-content select=\"solaris-option, solaris-option-group\" />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-placeholder-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-line-height: var(--solaris-line-height-md);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans, system-ui)}.solaris-select__trigger{flex:1;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) ease}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) ease}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;min-width:0;border:none;outline:none;padding:0;margin:0;font-family:inherit;box-sizing:border-box;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);background:transparent}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "size", "radius", "appearance", "control"] }, { kind: "directive", type: SolarisFormFieldTriggerDirective, selector: "[solaris-form-field-trigger]" }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-select', standalone: true, imports: [
+                        SolarisFormFieldComponent,
+                        SolarisFormFieldTriggerDirective,
+                        SolarisFormPrefixDirective,
+                        SolarisFormSuffixDirective,
+                        SolarisIconComponent,
+                        SolarisPopoverDirective,
+                        SolarisPopoverTriggerDirective,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisSelectComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: SolarisFormControl,
+                            useExisting: forwardRef(() => SolarisSelectComponent),
+                        },
+                    ], host: {
+                        'solaris-select': '',
+                        '[attr.id]': 'elementId()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-open]': 'panelOpen() ? "" : null',
+                        '[attr.aria-label]': 'ariaLabelText() ?? null',
+                        '[attr.data-has-value]': 'hasValue() ? "" : null',
+                    }, template: "<solaris-form-field\r\n  #formFieldRef\r\n  [class.solaris-select--panel-open]=\"panelOpen()\"\r\n  [control]=\"this\"\r\n  [label]=\"labelText()\"\r\n  [hint]=\"hintText()\"\r\n  [error]=\"errorText()\"\r\n  [appearance]=\"appearance()\"\r\n  [size]=\"size()\"\r\n  [density]=\"effectiveDensity()\"\r\n  [radius]=\"radius()\"\r\n  [invalid]=\"isEffectivelyInvalid()\"\r\n  [required]=\"requiredInput()\"\r\n  solaris-popover-trigger\r\n  [solarisPopoverDisabled]=\"!canOpen()\"\r\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\r\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\r\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\r\n  [solarisPopoverPlacement]=\"'bottom'\"\r\n  [solarisPopoverAlign]=\"'start'\"\r\n  [solarisPopoverOffset]=\"0\"\r\n  [solarisPopoverPadding]=\"'none'\"\r\n  [solarisPopoverRadius]=\"radius()\"\r\n  [solarisPopoverTopConnected]=\"true\"\r\n  [solarisPopoverMinWidth]=\"panelMinWidth()\"\r\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\r\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\r\n  [solarisPopoverCloseOnEscape]=\"false\"\r\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\r\n>\r\n  @if (icon(); as iconName) {\r\n    <solaris-icon solaris-form-prefix [name]=\"iconName\" [decorative]=\"true\" />\r\n  }\r\n  <ng-content select=\"[solaris-form-prefix]\" />\r\n\r\n  <div\r\n    #triggerEl\r\n    class=\"solaris-select__trigger\"\r\n    [id]=\"elementId() + '--trigger'\"\r\n    solaris-form-field-trigger\r\n    role=\"combobox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\r\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n    (focus)=\"onTriggerFocus()\"\r\n    (blur)=\"onTriggerBlur()\"\r\n  >\r\n    @if (searchable() && panelOpen()) {\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"solaris-select__search-input\"\r\n        [attr.placeholder]=\"searchPlaceholderText()\"\r\n        [value]=\"searchQuery()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"onSearchKeydown($event)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        role=\"searchbox\"\r\n        autocomplete=\"off\"\r\n      />\r\n    } @else {\r\n      <span class=\"solaris-select__value\">\r\n        @if (displayText()) {\r\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\r\n        } @else {\r\n          <span class=\"solaris-select__placeholder\">{{\r\n            placeholderText()\r\n          }}</span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <span class=\"solaris-select__actions\">\r\n      @if (canClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"solaris-select__clear\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n          (click)=\"clearValue(); $event.stopPropagation()\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\r\n        </button>\r\n      }\r\n\r\n      <solaris-icon\r\n        class=\"solaris-select__dropdown-icon\"\r\n        name=\"chevron-down\"\r\n        [decorative]=\"true\"\r\n        size=\"sm\"\r\n      />\r\n    </span>\r\n  </div>\r\n\r\n  <ng-content select=\"[solaris-form-suffix]\" />\r\n</solaris-form-field>\r\n\r\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\r\n  <div\r\n    class=\"solaris-select__panel\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"panelId\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onPanelClick($event)\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (loading()) {\r\n      <div class=\"solaris-select__loading\">\r\n        <span class=\"solaris-select__loading-text\">{{\r\n          loadingTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showNoResults()) {\r\n      <div class=\"solaris-select__no-results\">\r\n        <span class=\"solaris-select__no-results-text\">{{\r\n          noResultsTextValue()\r\n        }}</span>\r\n      </div>\r\n    } @else if (showEmpty()) {\r\n      <div class=\"solaris-select__empty\">\r\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\r\n      </div>\r\n    } @else {\r\n      <div\r\n        class=\"solaris-select__options\"\r\n        [style.max-height]=\"panelMaxHeight()\"\r\n      >\r\n        <ng-content select=\"solaris-option, solaris-option-group\" />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--solaris-select-icon-color: var(--solaris-text-muted);--solaris-select-value-color: var(--solaris-text-default);--solaris-select-placeholder-color: var(--solaris-text-muted);--solaris-select-font-size: var(--solaris-font-size-md);--solaris-select-line-height: var(--solaris-line-height-md);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans, system-ui)}.solaris-select__trigger{flex:1;min-width:0;display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0;outline:none;border:none;background:transparent;cursor:pointer}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-2)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) ease}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-select__clear:hover{color:var(--solaris-text-default)}.solaris-select__dropdown-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) ease}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain}.solaris-select__search-input{flex:1;min-width:0;border:none;outline:none;padding:0;margin:0;font-family:inherit;box-sizing:border-box;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);background:transparent}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-text-muted);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { popoverTrigger: [{
+                type: ViewChild,
+                args: [SolarisPopoverTriggerDirective]
+            }], searchInputRef: [{
+                type: ViewChild,
+                args: ['searchInput', { read: ElementRef }]
+            }], triggerElement: [{
+                type: ViewChild,
+                args: ['triggerEl', { read: ElementRef }]
+            }], formFieldElement: [{
+                type: ViewChild,
+                args: ['formFieldRef', { read: ElementRef }]
+            }], options: [{
+                type: ContentChildren,
+                args: [SolarisOptionComponent, { descendants: true }]
+            }], optionGroups: [{
+                type: ContentChildren,
+                args: [SolarisOptionGroupComponent, { descendants: true }]
+            }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], emptyTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTextKey", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], loadingTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTextKey", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], noResultsTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTextKey", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], clearLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabelKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderKey", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], panelMatchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMatchTriggerWidth", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], manualInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+//# sourceMappingURL=select.component.js.map