@educarehq/solaris-ui 0.2.0 → 0.3.1

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

@@ -1,819 +0,0 @@
-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