@ship-ui/core 0.19.5 → 0.22.2

package/fesm2022/ship-ui-core-ship-select.mjs

@@ -0,0 +1,971 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, model, output, computed, signal, contentChild, TemplateRef, viewChild, untracked, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { ShipCheckbox } from '@ship-ui/core/ship-checkbox';
+import { ShipChip } from '@ship-ui/core/ship-chip';
+import { ShipDivider } from '@ship-ui/core/ship-divider';
+import { ShipFormField } from '@ship-ui/core/ship-form-field';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { ShipPopover } from '@ship-ui/core/ship-popover';
+import { ShipSpinner } from '@ship-ui/core/ship-spinner';
+import { shipComponentClasses, generateUniqueId } from '@ship-ui/core';
+
+class ShipSelect {
+    constructor() {
+        this.#selfRef = inject((ElementRef));
+        this.value = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.label = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.asFreeText = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asFreeText" }] : /* istanbul ignore next */ []));
+        this.color = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.optionTitle = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionTitle" }] : /* istanbul ignore next */ []));
+        this.freeTextTitle = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "freeTextTitle" }] : /* istanbul ignore next */ []));
+        this.freeTextPlaceholder = input('Type to create a new option', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "freeTextPlaceholder" }] : /* istanbul ignore next */ []));
+        this.validateFreeText = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "validateFreeText" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.readonly = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.hostClasses = shipComponentClasses('select', {
+            color: this.color,
+            variant: this.variant,
+            size: this.size,
+            readonly: this.readonly,
+        });
+        this.lazySearch = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lazySearch" }] : /* istanbul ignore next */ []));
+        this.inlineSearch = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inlineSearch" }] : /* istanbul ignore next */ []));
+        this.asText = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asText" }] : /* istanbul ignore next */ []));
+        this.isClearable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isClearable" }] : /* istanbul ignore next */ []));
+        this.selectMultiple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectMultiple" }] : /* istanbul ignore next */ []));
+        this.optionTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+        this.selectedOptionTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedOptionTemplate" }] : /* istanbul ignore next */ []));
+        this.placeholderTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholderTemplate" }] : /* istanbul ignore next */ []));
+        this.freeTextOptionTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "freeTextOptionTemplate" }] : /* istanbul ignore next */ []));
+        this.isOpen = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.isLoading = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.options = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.selectedOptions = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+        this.cleared = output();
+        this.onAddNewFreeTextOption = output();
+        this.spacedSelectedOptions = computed(() => {
+            const selectedOptions = this.selectedOptions();
+            const valueKey = this.value();
+            return selectedOptions.map((option) => (valueKey ? this.#getProperty(option, valueKey) : option)).join(', ');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spacedSelectedOptions" }] : /* istanbul ignore next */ []));
+        this.computedFreeTextOption = computed(() => {
+            const inputValue = this.inputValue();
+            const valueKey = this.value();
+            const newOption = valueKey ? {} : inputValue;
+            if (valueKey && typeof newOption === 'object') {
+                newOption[valueKey] = inputValue;
+            }
+            return newOption;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedFreeTextOption" }] : /* istanbul ignore next */ []));
+        this.#previousSelectedOptions = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#previousSelectedOptions" }] : /* istanbul ignore next */ []));
+        this.inlineTemplate = contentChild(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inlineTemplate" }] : /* istanbul ignore next */ []));
+        this.optionsWrapRef = viewChild.required('optionsWrap');
+        this.inputRefInput = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRefInput" }] : /* istanbul ignore next */ []));
+        this.#inputObserver = typeof MutationObserver !== 'undefined'
+            ? new MutationObserver((mutations) => {
+                for (var mutation of mutations) {
+                    if (mutation && (mutation.target.nodeName === 'INPUT' || mutation.target.nodeName === 'TEXTAREA')) {
+                        this.inputRefInput.set(new ElementRef(mutation.target));
+                        this.#inputObserver.disconnect();
+                    }
+                }
+            })
+            : undefined;
+        this.inputValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+        this.prevInputValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevInputValue" }] : /* istanbul ignore next */ []));
+        this.focusedOptionIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : /* istanbul ignore next */ []));
+        this._isClearable = computed(() => this.selectMultiple() || this.isClearable(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isClearable" }] : /* istanbul ignore next */ []));
+        this.selectClasses = computed(() => this.#selfRef.nativeElement.classList.toString(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectClasses" }] : /* istanbul ignore next */ []));
+        this.stretch = computed(() => this.selectClasses().includes('stretch'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stretch" }] : /* istanbul ignore next */ []));
+        this.small = computed(() => this.selectClasses().includes('small'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "small" }] : /* istanbul ignore next */ []));
+        this.placeholderText = computed(() => {
+            const placeholder = this.placeholder();
+            const inputRefEl = this.inputRefEl();
+            return placeholder || inputRefEl?.placeholder || null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
+        this.selectedOptionValues = computed(() => {
+            const selectedOptions = this.selectedOptions();
+            const valueKey = this.value();
+            return valueKey
+                ? selectedOptions.map((selectedOption) => this.#getProperty(selectedOption, valueKey))
+                : selectedOptions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedOptionValues" }] : /* istanbul ignore next */ []));
+        this.filteredOptions = computed(() => {
+            const opts = this.options() || [];
+            const label = this.label();
+            const valueKey = this.value();
+            const inlineSearch = this.inlineSearch();
+            const inputValue = this.inputValue().toLowerCase();
+            const inputValueRegex = this.#createWildcardRegex(inputValue);
+            if (opts.length <= 0)
+                return [];
+            if (!inlineSearch || inputValue === '') {
+                return opts;
+            }
+            const filtered = opts.filter((item) => {
+                const optionLabel = label
+                    ? (this.#getProperty(item, label) ?? '').toString().toLowerCase()
+                    : (item ?? '').toString().toLowerCase();
+                const optionValue = ((valueKey ? this.#getProperty(item, valueKey) : item) ?? '').toString().toLowerCase();
+                const testLabel = inputValueRegex.test(optionLabel);
+                const testValue = inputValueRegex.test(optionValue);
+                return testLabel || testValue;
+            });
+            const scoredOptions = filtered.map((item) => {
+                const optionLabel = label
+                    ? (this.#getProperty(item, label) ?? '').toString().toLowerCase()
+                    : (item ?? '').toString().toLowerCase();
+                const optionValue = ((valueKey ? this.#getProperty(item, valueKey) : item) ?? '').toString().toLowerCase();
+                const labelScore = this.#calculateMatchScore(optionLabel, inputValue);
+                const valueScore = this.#calculateMatchScore(optionValue, inputValue);
+                return {
+                    item,
+                    score: Math.max(labelScore, valueScore),
+                };
+            });
+            scoredOptions.sort((a, b) => b.score - a.score);
+            return scoredOptions.map((scoredOption) => scoredOption.item);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        this.componentId = generateUniqueId();
+        this.inputRefEl = computed(() => {
+            const inputRefInput = this.inputRefInput();
+            if (inputRefInput === null)
+                return;
+            const input = inputRefInput ? inputRefInput.nativeElement : null;
+            if (!input) {
+                console.warn('<sh-select> input element not found are you missing to pass an <input> or <textarea> element to select component?');
+                return null;
+            }
+            input.autocomplete = 'off';
+            input.setAttribute('role', 'combobox');
+            input.setAttribute('id', `combobox-${this.componentId}`);
+            input.setAttribute('aria-haspopup', 'listbox');
+            input.setAttribute('aria-owns', `optionsWrapId-${this.componentId}`);
+            input.setAttribute('aria-controls', `optionsWrapId-${this.componentId}`);
+            this.#createCustomInputEventListener(input);
+            input.addEventListener('focus', () => {
+                if (this.readonly())
+                    return;
+                this.open();
+            });
+            input.addEventListener('input', (e) => {
+                const newInputValue = e.target.value;
+                const inputValue = this.inputValue();
+                if (newInputValue === inputValue)
+                    return;
+                this.focusedOptionIndex.set(this.asFreeText() ? -1 : 0);
+                this.inputValue.set(newInputValue);
+                this.updateInputElValue();
+            });
+            input.addEventListener('inputValueChanged', (event) => {
+                const newInputValue = event.detail.value;
+                const inputValue = this.inputValue();
+                const selectedOptionsLength = untracked(() => this.selectedOptions().length);
+                if (newInputValue === inputValue && (newInputValue !== '' || selectedOptionsLength > 0))
+                    return;
+                this.setSelectedOptionsFromValue(newInputValue);
+                this.setInputValueFromOptions(this.selectedOptions());
+                this.#setFirstSelectedOptionAsFocused();
+            });
+            return input;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRefEl" }] : /* istanbul ignore next */ []));
+        this.focusEffect = effect(() => {
+            const input = this.inputRefEl();
+            if (!input)
+                return;
+            const index = this.focusedOptionIndex();
+            if (index >= 0 || (index === -1 && this.asFreeText())) {
+                input.setAttribute('aria-activedescendant', this.getOptionId(index));
+            }
+            else {
+                input.removeAttribute('aria-activedescendant');
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusEffect" }] : /* istanbul ignore next */ []));
+        this.openAbortController = null;
+        this.isOpenEffect = effect(() => {
+            const isOpen = this.isOpen();
+            if (isOpen) {
+                if (!this.openAbortController) {
+                    this.openAbortController = new AbortController();
+                }
+                const input = this.inputRefEl();
+                const asFreeText = this.asFreeText();
+                const baseIndex = asFreeText ? -1 : 0;
+                if (!input)
+                    return;
+                input.setAttribute('aria-expanded', this.isOpen().toString());
+                input.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape' || e.key === 'Tab') {
+                        e.preventDefault();
+                        this.close();
+                    }
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        this.toggleOptionByIndex(this.focusedOptionIndex(), undefined, true);
+                    }
+                    if (e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        const newIndex = this.focusedOptionIndex() + 1;
+                        this.focusedOptionIndex.set(newIndex > this.filteredOptions().length - 1 ? baseIndex : newIndex);
+                    }
+                    if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        const newIndex = this.focusedOptionIndex() - 1;
+                        this.focusedOptionIndex.set(newIndex < baseIndex ? this.filteredOptions().length - 1 : newIndex);
+                    }
+                }, {
+                    signal: this.openAbortController?.signal,
+                });
+            }
+            else {
+                const input = this.inputRefEl();
+                if (!input)
+                    return;
+                input.setAttribute('aria-expanded', this.isOpen().toString());
+                if (this.openAbortController) {
+                    this.openAbortController.abort();
+                    this.openAbortController = null;
+                }
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpenEffect" }] : /* istanbul ignore next */ []));
+        this._inputValue = '';
+        this.inputValueEffect = effect(() => {
+            const inputValue = this.inputValue();
+            this._inputValue = inputValue;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputValueEffect" }] : /* istanbul ignore next */ []));
+        this.inputRefElEffect = effect(() => {
+            const input = this.inputRefEl();
+            if (!input)
+                return;
+            const selectedOptionsLength = untracked(() => this.selectedOptions().length);
+            if (input.value === this._inputValue && (input.value !== '' || selectedOptionsLength > 0))
+                return;
+            this.disabled.set(input.disabled);
+            untracked(() => {
+                this.setSelectedOptionsFromValue(input.value);
+                this.setInputValueFromOptions(this.selectedOptions());
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRefElEffect" }] : /* istanbul ignore next */ []));
+        this.selectedLabels = computed(() => {
+            const selected = this.selectedOptions();
+            const label = this.label();
+            if (!label) {
+                return selected.join(', ');
+            }
+            return selected.map((selected) => this.getLabel(selected)).join(', ');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
+        this.inputState = computed(() => {
+            if ((this.selectedOptions().length > 0 || (this.asFreeText() && this.inputValue().length > 0)) && !this.isOpen()) {
+                return 'selected';
+            }
+            if (this.isLoading()) {
+                return 'loading';
+            }
+            if (this.isOpen() && (this.lazySearch() || this.inlineSearch())) {
+                return 'open-searching';
+            }
+            if (this.isOpen()) {
+                return 'open';
+            }
+            if (this.inlineSearch() || this.lazySearch()) {
+                return 'searching';
+            }
+            return 'closed';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputState" }] : /* istanbul ignore next */ []));
+        this.hasSearch = computed(() => this.inlineSearch() || this.lazySearch(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSearch" }] : /* istanbul ignore next */ []));
+        this.#selectedOptionsEffect = effect(() => {
+            if (this.selectMultiple() && this.hasSearch()) {
+                return;
+            }
+            const selectedOptions = this.selectedOptions();
+            const valueKey = this.value();
+            const inputValue = selectedOptions
+                .map((option) => {
+                const optionValue = valueKey ? this.#getProperty(option, valueKey) : option;
+                return optionValue;
+            })
+                .join(',');
+            this.inputValue.set(inputValue);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectedOptionsEffect" }] : /* istanbul ignore next */ []));
+    }
+    #selfRef;
+    #previousSelectedOptions;
+    #inputObserver;
+    #calculateMatchScore(option, input) {
+        if (!input)
+            return 0;
+        let score = 0;
+        let lastIndex = -1;
+        let matchCount = 0;
+        let inSequence = true;
+        for (let i = 0; i < input.length; i++) {
+            const char = input[i];
+            if (option.length > lastIndex + 1 && option[lastIndex + 1] === char) {
+                score += i === 0 ? 100 : 150;
+                lastIndex++;
+                matchCount++;
+            }
+            else {
+                const charIndex = option.indexOf(char, lastIndex + 1);
+                if (i > 0) {
+                    inSequence = false;
+                }
+                if (charIndex === -1) {
+                    return 0;
+                }
+                score += 100;
+                lastIndex = charIndex;
+                matchCount++;
+            }
+        }
+        if (inSequence && input.length === matchCount) {
+            score += 1000;
+        }
+        score += matchCount * 20;
+        return score;
+    }
+    #selectedOptionsEffect;
+    ngOnInit() {
+        this.setInitInput();
+    }
+    setInitInput() {
+        const input = this.#selfRef.nativeElement.querySelector('input');
+        if (input) {
+            this.inputRefInput.set(new ElementRef(input));
+            return;
+        }
+        const textarea = this.#selfRef.nativeElement.querySelector('textarea');
+        if (textarea) {
+            this.inputRefInput.set(new ElementRef(textarea));
+            return;
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.#inputObserver.observe(this.#selfRef.nativeElement, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+        }
+    }
+    setSelectedOptionsFromValue(value) {
+        const options = this.options() || [];
+        const valueKey = this.value();
+        const selectMultiple = this.selectMultiple();
+        const inputValueAsString = value.toString().split(',');
+        if (inputValueAsString.length === 0) {
+            this.selectedOptions.set([]);
+            return;
+        }
+        const inputAsArray = selectMultiple ? inputValueAsString : [inputValueAsString[0]];
+        const selectedOptions = options.filter((option) => {
+            const optionValue = valueKey ? this.#getProperty(option, valueKey)?.toString() : option?.toString();
+            return optionValue !== undefined && optionValue !== null && inputAsArray.includes(optionValue);
+        });
+        const isMatched = selectedOptions.length > 0;
+        this.selectedOptions.set(selectMultiple ? selectedOptions : isMatched ? [selectedOptions[0]] : []);
+    }
+    setInputValueFromOptions(options) {
+        const valueKey = this.value();
+        if (options.length === 0) {
+            this.inputValue.set('');
+            this.updateInputElValue();
+            return;
+        }
+        const newInputValue = options
+            .map((option) => {
+            const optionValue = valueKey ? this.#getProperty(option, valueKey) : option;
+            return optionValue;
+        })
+            .join(',');
+        if (newInputValue === this.inputValue())
+            return;
+        this.inputValue.set(newInputValue);
+        this.updateInputElValue();
+    }
+    getValue(option) {
+        const valueKey = this.value();
+        if (!valueKey)
+            return option;
+        return this.#getProperty(option, valueKey);
+    }
+    getLabel(option) {
+        const label = this.label();
+        if (!label)
+            return option;
+        return this.#getProperty(option, label);
+    }
+    getOptionId(index) {
+        return `opt-${this.componentId}-${index}`;
+    }
+    toggleOptionByIndex(optionIndex, event, enterKey = false) {
+        let option = this.filteredOptions()[optionIndex];
+        if (this.asFreeText() && optionIndex === -1) {
+            const newOption = this.computedFreeTextOption();
+            const newOptionValue = this.getValue(newOption);
+            const validateFreeTextFunc = this.validateFreeText() ?? ((val) => true);
+            const isValid = validateFreeTextFunc(newOptionValue);
+            if (!isValid)
+                return;
+            this.options.update((options) => {
+                const index = options.findIndex((option) => this.getValue(option) === newOptionValue);
+                if (index > -1)
+                    return options;
+                this.onAddNewFreeTextOption.emit(newOptionValue);
+                return [newOption, ...options];
+            });
+            optionIndex = 0;
+            option = newOption;
+        }
+        else if (!option) {
+            this.close();
+            return;
+        }
+        if (event) {
+            event.stopPropagation();
+        }
+        const selectMultiple = this.selectMultiple();
+        const isClearable = this._isClearable();
+        const valueKey = this.value();
+        const selectedOptionValues = this.selectedOptionValues();
+        const optionValue = valueKey ? this.#getProperty(option, valueKey) : option;
+        this.prevInputValue.set(null);
+        this.#previousSelectedOptions.set(null);
+        this.selectedOptions.update((selectedOptions) => {
+            const index = selectedOptionValues.indexOf(optionValue);
+            if (index > -1) {
+                // Remove it
+                const nextSelectedOptions = [...selectedOptions.slice(0, index), ...selectedOptions.slice(index + 1)];
+                return isClearable
+                    ? nextSelectedOptions
+                    : nextSelectedOptions.length > 0
+                        ? nextSelectedOptions
+                        : selectedOptions;
+            }
+            else {
+                // Add it
+                this.focusedOptionIndex.set(optionIndex);
+                return selectMultiple ? [...selectedOptions, option] : [option];
+            }
+        });
+        if (selectMultiple) {
+            this.inputRefEl()?.focus();
+        }
+        else {
+            this.isOpen.set(false);
+        }
+        this.setInputValueFromOptions(this.selectedOptions());
+        if (selectMultiple && this.hasSearch()) {
+            this.inputValue.set('');
+            this.updateInputElValue();
+        }
+    }
+    removeSelectedOptionByIndex($event, optionRemoveIndex) {
+        $event.stopPropagation();
+        this.selectedOptions.update((selectedOptions) => {
+            return [...selectedOptions.slice(0, optionRemoveIndex), ...selectedOptions.slice(optionRemoveIndex + 1)];
+        });
+        this.setInputValueFromOptions(this.selectedOptions());
+    }
+    isSelected(optionIndex) {
+        const valueKey = this.value();
+        const option = this.filteredOptions()[optionIndex];
+        const optionValue = valueKey ? this.#getProperty(option, valueKey) : option;
+        return this.selectedOptionValues().indexOf(optionValue) > -1;
+    }
+    open() {
+        if (this.isOpen())
+            return;
+        this.isOpen.set(true);
+        if (this.hasSearch()) {
+            this.prevInputValue.set(this.inputValue() ?? '');
+            this.inputValue.set('');
+            this.updateInputElValue();
+        }
+        else {
+            this.#previousSelectedOptions.set(this.selectedOptions());
+        }
+        if (!this.selectMultiple()) {
+            this.#setFirstSelectedOptionAsFocused();
+        }
+    }
+    #setFirstSelectedOptionAsFocused() {
+        const firstSelectedValue = this.selectedOptionValues()[0];
+        const valueKey = this.value();
+        if (firstSelectedValue) {
+            const findOptionIndex = this.filteredOptions().findIndex((x) => valueKey ? this.#getProperty(x, valueKey) === firstSelectedValue : x === firstSelectedValue);
+            this.focusedOptionIndex.set(findOptionIndex);
+        }
+        else {
+            this.focusedOptionIndex.set(-1);
+        }
+    }
+    close() {
+        this.isOpen.set(false);
+        const prevInputValue = this.prevInputValue();
+        const prevSelectedOptions = this.#previousSelectedOptions();
+        if (this.asFreeText() && !this.selectMultiple()) {
+            this.updateInputElValue();
+            return;
+        }
+        if (this.hasSearch() && prevInputValue) {
+            this.inputValue.set(prevInputValue);
+            this.setInputValueFromOptions(this.selectedOptions());
+        }
+        if (!this.hasSearch() && prevSelectedOptions !== null) {
+            this.setInputValueFromOptions(prevSelectedOptions);
+        }
+        if (this.selectMultiple()) {
+            this.setInputValueFromOptions(this.selectedOptions());
+        }
+    }
+    clear($event) {
+        $event?.stopPropagation();
+        this.inputValue.set('');
+        this.selectedOptions.set([]);
+        this.isOpen.set(false);
+        this.prevInputValue.set(null);
+        this.cleared.emit();
+        this.updateInputElValue();
+    }
+    updateInputElValue() {
+        const inputEl = this.inputRefEl();
+        const inputValue = this.inputValue();
+        if (!inputEl || inputEl.value === inputValue)
+            return;
+        inputEl.value = inputValue;
+        inputEl.dispatchEvent(new Event('input'));
+    }
+    #getProperty(obj, path) {
+        return path.split('.').reduce((o, i) => o?.[i], obj);
+    }
+    #createCustomInputEventListener(input) {
+        Object.defineProperty(input, 'value', {
+            configurable: true,
+            get() {
+                const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+                return descriptor.get.call(this);
+            },
+            set(newVal) {
+                const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+                descriptor.set.call(this, newVal);
+                const inputEvent = new CustomEvent('inputValueChanged', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        value: newVal,
+                    },
+                });
+                this.dispatchEvent(inputEvent);
+                return newVal;
+            },
+        });
+    }
+    #createWildcardRegex(inputValue) {
+        const lowerCaseInput = (inputValue ?? '').toLowerCase();
+        let regexPattern = '^';
+        for (const char of lowerCaseInput) {
+            regexPattern += '.*' + this.#escapeRegexChar(char);
+        }
+        regexPattern += '.*$';
+        return new RegExp(regexPattern, 'i');
+    }
+    #escapeRegexChar(char) {
+        return char.replace(/[-\/\\^$+?.()|[\]{}]/g, '\\$&');
+    }
+    ngOnDestroy() {
+        if (this.openAbortController) {
+            this.openAbortController.abort();
+            this.openAbortController = null;
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.#inputObserver.disconnect();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipSelect, isStandalone: true, selector: "sh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, asFreeText: { classPropertyName: "asFreeText", publicName: "asFreeText", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, optionTitle: { classPropertyName: "optionTitle", publicName: "optionTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextTitle: { classPropertyName: "freeTextTitle", publicName: "freeTextTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextPlaceholder: { classPropertyName: "freeTextPlaceholder", publicName: "freeTextPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, validateFreeText: { classPropertyName: "validateFreeText", publicName: "validateFreeText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lazySearch: { classPropertyName: "lazySearch", publicName: "lazySearch", isSignal: true, isRequired: false, transformFunction: null }, inlineSearch: { classPropertyName: "inlineSearch", publicName: "inlineSearch", isSignal: true, isRequired: false, transformFunction: null }, asText: { classPropertyName: "asText", publicName: "asText", isSignal: true, isRequired: false, transformFunction: null }, isClearable: { classPropertyName: "isClearable", publicName: "isClearable", isSignal: true, isRequired: false, transformFunction: null }, selectMultiple: { classPropertyName: "selectMultiple", publicName: "selectMultiple", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTemplate: { classPropertyName: "selectedOptionTemplate", publicName: "selectedOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, freeTextOptionTemplate: { classPropertyName: "freeTextOptionTemplate", publicName: "freeTextOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", disabled: "disabledChange", isOpen: "isOpenChange", isLoading: "isLoadingChange", options: "optionsChange", selectedOptions: "selectedOptionsChange", cleared: "cleared", onAddNewFreeTextOption: "onAddNewFreeTextOption" }, host: { properties: { "class.multiple": "selectMultiple()", "class": "hostClasses()" } }, queries: [{ propertyName: "inlineTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsWrapRef", first: true, predicate: ["optionsWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @let _placeholderTemplate = placeholderTemplate();
+    @let _optionTemplate = optionTemplate();
+    @let _freeTextOptionTemplate = freeTextOptionTemplate();
+    @let _selectedOptionTemplate = selectedOptionTemplate();
+    @let _inlineTemplate = inlineTemplate();
+    @let _selectedOptions = selectedOptions();
+    @let _inputState = inputState();
+
+    @let _selOptionTemplate = _selectedOptionTemplate || _optionTemplate || _inlineTemplate;
+    @let _listOptionTemplate = _optionTemplate || _inlineTemplate;
+    @let _asChips = !asText() && selectMultiple();
+    @let _showSearchText = isOpen() && hasSearch() && (_asChips || inputValue().length > 0);
+
+    <sh-popover
+      #formFieldWrapper
+      [(isOpen)]="isOpen"
+      [disableOpenByClick]="true"
+      (closed)="close()"
+      [options]="{
+        closeOnButton: false,
+        closeOnEsc: false,
+      }">
+      <sh-form-field
+        trigger
+        (click)="open()"
+        [color]="color()"
+        [variant]="variant()"
+        [size]="size()"
+        [class.stretch]="stretch()"
+        [class.small]="small()"
+        [class.readonly]="readonly() || disabled()">
+        <ng-content select="label" ngProjectAs="label" />
+        <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+        <ng-content select="[boxPrefix]" ngProjectAs="[boxPrefix]" />
+
+        <div class="input" [class.show-search-text]="_showSearchText" ngProjectAs="input">
+          <div class="selected-value" [class.is-selected]="_inputState === 'selected'">
+            @if (asFreeText() && inputValue().length > 0 && !isOpen()) {
+              {{ spacedSelectedOptions() }}
+            } @else if (_selectedOptions.length > 0) {
+              @for (selectedOption of _selectedOptions; track $index) {
+                @if (selectedOption) {
+                  @if (_asChips) {
+                    <sh-chip
+                      [class]="selectClasses()"
+                      class="small"
+                      (click)="removeSelectedOptionByIndex($event, $index)">
+                      @if (_selOptionTemplate) {
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
+                      } @else {
+                        {{ getLabel(selectedOption) }}
+                      }
+
+                      <sh-icon>x-bold</sh-icon>
+                    </sh-chip>
+                  } @else {
+                    @if (!_showSearchText) {
+                      @if (_selOptionTemplate) {
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
+                      } @else {
+                        {{ $last ? getLabel(selectedOption) : getLabel(selectedOption) + ',' }}
+                      }
+                    }
+                  }
+                }
+              }
+            } @else if (!_showSearchText) {
+              @if (_placeholderTemplate) {
+                <ng-container *ngTemplateOutlet="_placeholderTemplate" />
+              } @else {
+                {{ placeholderText() ?? '' }}
+              }
+            }
+
+            <ng-content select="input" />
+            <ng-content select="textarea" />
+          </div>
+        </div>
+
+        @if (_inputState === 'closed') {
+          <sh-icon suffix>caret-down</sh-icon>
+        } @else if (_inputState === 'loading') {
+          <sh-spinner class="primary" suffix></sh-spinner>
+        } @else if (_inputState === 'open-searching') {
+          <sh-icon suffix>list-magnifying-glass</sh-icon>
+        } @else if (_inputState === 'searching') {
+          <sh-icon suffix>magnifying-glass</sh-icon>
+        } @else if (_inputState === 'selected' && _isClearable()) {
+          <sh-icon suffix (click)="clear($event)">x-bold</sh-icon>
+        } @else if (_inputState === 'selected' && !_isClearable()) {
+          <sh-icon suffix>caret-down</sh-icon>
+        } @else {
+          <sh-icon suffix>caret-up</sh-icon>
+        }
+      </sh-form-field>
+
+      <div class="ship-options" #optionsWrap [id]="'optionsWrapId-' + componentId" role="listbox">
+        @if (asFreeText()) {
+          @let freeTextOption = computedFreeTextOption();
+          @let freeTextOptionValue = getValue(freeTextOption);
+
+          @if ($any(freeTextOptionValue).length > 0) {
+            @if (freeTextTitle()) {
+              <p title>{{ freeTextTitle() }}</p>
+            }
+
+            <li
+              (click)="toggleOptionByIndex(-1)"
+              class="option"
+              role="option"
+              [id]="this.getOptionId(-1)"
+              [attr.aria-selected]="isSelected(-1)"
+              [class.selected]="isSelected(-1)"
+              [class.focused]="-1 === focusedOptionIndex()">
+              @if (_freeTextOptionTemplate) {
+                <ng-container *ngTemplateOutlet="_freeTextOptionTemplate; context: { $implicit: freeTextOption }" />
+              } @else if (_listOptionTemplate) {
+                <ng-container *ngTemplateOutlet="_listOptionTemplate; context: { $implicit: freeTextOption }" />
+              } @else {
+                {{ freeTextOptionValue }}
+              }
+            </li>
+
+            @if (freeTextTitle() && filteredOptions().length > 0) {
+              <sh-divider />
+            }
+          }
+        }
+
+        @if (optionTitle() && filteredOptions().length > 0) {
+          <p title>{{ optionTitle() }}</p>
+        }
+
+        @for (option of filteredOptions(); track $index) {
+          <li
+            (click)="toggleOptionByIndex($index)"
+            class="option"
+            role="option"
+            [id]="this.getOptionId($index)"
+            [attr.aria-selected]="isSelected($index)"
+            [class.selected]="isSelected($index)"
+            [class.focused]="$index === focusedOptionIndex()">
+            @if (selectMultiple()) {
+              <sh-checkbox [class]="selectClasses()" [checked]="isSelected($index)" />
+            }
+
+            @if (_listOptionTemplate) {
+              <ng-container *ngTemplateOutlet="_listOptionTemplate; context: { $implicit: option }" />
+            } @else {
+              {{ getLabel(option) }}
+            }
+          </li>
+        }
+      </div>
+    </sh-popover>
+  `, isInline: true, styles: ["sh-select{--miw: 13.125rem;--select-option-mih: min-content;--select-options-mh: 11.25rem;display:flex}sh-select sh-form-field{display:flex;--ff-mw: var(--miw)}sh-select sh-popover{flex:1 0}sh-select sh-popover:has(.ship-options:empty) .popover{opacity:0}sh-select .selected-value{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;color:var(--base-8)}sh-select .selected-value input{margin:0}sh-select .selected-value.is-selected{color:var(--base-12)}sh-select sh-form-field .input-wrap .input{position:relative;display:flex;flex-wrap:wrap;--ff-space: .4375rem .625rem}sh-select sh-form-field .input-wrap .input textarea,sh-select sh-form-field .input-wrap .input input{opacity:0;width:0;height:0;position:absolute}sh-select sh-form-field .input-wrap .input.show-search-text input{opacity:1;height:initial;min-width:min-content;field-sizing:content;font:var(--paragraph-30);position:relative}sh-select sh-form-field .input-wrap .input.show-search-text textarea{opacity:1;height:initial;margin:.25rem 0 0}sh-select sh-form-field.small .input-wrap .input{--ff-space: .3125rem .5rem}sh-select sh-form-field.small .input-wrap .input sh-chip{--chip-h: 1.25rem;font-size:80%}.ship-options{padding:.5rem 0;display:flex;flex-direction:column;max-height:var(--select-options-mh);overflow-y:auto;overflow-x:hidden}.ship-options p[title]{padding:.25rem 1rem}.ship-options sh-divider{margin:.5rem 0}.ship-options .option{display:flex;justify-content:flex-start;align-items:center;min-height:var(--select-option-mih);margin:0 .5rem;padding:.5rem;gap:.5rem;width:calc(100% - 1rem);border-radius:var(--shape-2);appearance:none;background-color:transparent;border:0;cursor:pointer;color:var(--base-12);-webkit-user-select:none;user-select:none}.ship-options .option[disabled]{opacity:.3;cursor:initial}.ship-options .option[disabled]:hover{background-color:transparent}.ship-options .option sh-icon{font-size:1rem}.ship-options .option span.placeholder{color:var(--base-7)}.ship-options .option.active,.ship-options .option:checked,.ship-options .option:hover{background-color:var(--base-2);color:var(--base-12)}.ship-options .option.focused{background-color:var(--primary-1);color:var(--base-12)}.ship-options .option.focused:hover{background-color:var(--primary-2)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "asSheetOnMobile", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["checked", "color", "variant", "readonly", "disabled", "noInternalInput"], outputs: ["checkedChange"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-select', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, ShipPopover, ShipFormField, ShipIcon, ShipCheckbox, ShipSpinner, ShipChip, ShipDivider], template: `
+    @let _placeholderTemplate = placeholderTemplate();
+    @let _optionTemplate = optionTemplate();
+    @let _freeTextOptionTemplate = freeTextOptionTemplate();
+    @let _selectedOptionTemplate = selectedOptionTemplate();
+    @let _inlineTemplate = inlineTemplate();
+    @let _selectedOptions = selectedOptions();
+    @let _inputState = inputState();
+
+    @let _selOptionTemplate = _selectedOptionTemplate || _optionTemplate || _inlineTemplate;
+    @let _listOptionTemplate = _optionTemplate || _inlineTemplate;
+    @let _asChips = !asText() && selectMultiple();
+    @let _showSearchText = isOpen() && hasSearch() && (_asChips || inputValue().length > 0);
+
+    <sh-popover
+      #formFieldWrapper
+      [(isOpen)]="isOpen"
+      [disableOpenByClick]="true"
+      (closed)="close()"
+      [options]="{
+        closeOnButton: false,
+        closeOnEsc: false,
+      }">
+      <sh-form-field
+        trigger
+        (click)="open()"
+        [color]="color()"
+        [variant]="variant()"
+        [size]="size()"
+        [class.stretch]="stretch()"
+        [class.small]="small()"
+        [class.readonly]="readonly() || disabled()">
+        <ng-content select="label" ngProjectAs="label" />
+        <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+        <ng-content select="[boxPrefix]" ngProjectAs="[boxPrefix]" />
+
+        <div class="input" [class.show-search-text]="_showSearchText" ngProjectAs="input">
+          <div class="selected-value" [class.is-selected]="_inputState === 'selected'">
+            @if (asFreeText() && inputValue().length > 0 && !isOpen()) {
+              {{ spacedSelectedOptions() }}
+            } @else if (_selectedOptions.length > 0) {
+              @for (selectedOption of _selectedOptions; track $index) {
+                @if (selectedOption) {
+                  @if (_asChips) {
+                    <sh-chip
+                      [class]="selectClasses()"
+                      class="small"
+                      (click)="removeSelectedOptionByIndex($event, $index)">
+                      @if (_selOptionTemplate) {
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
+                      } @else {
+                        {{ getLabel(selectedOption) }}
+                      }
+
+                      <sh-icon>x-bold</sh-icon>
+                    </sh-chip>
+                  } @else {
+                    @if (!_showSearchText) {
+                      @if (_selOptionTemplate) {
+                        <ng-container
+                          *ngTemplateOutlet="_selOptionTemplate; context: { $implicit: selectedOption, last: $last }" />
+                      } @else {
+                        {{ $last ? getLabel(selectedOption) : getLabel(selectedOption) + ',' }}
+                      }
+                    }
+                  }
+                }
+              }
+            } @else if (!_showSearchText) {
+              @if (_placeholderTemplate) {
+                <ng-container *ngTemplateOutlet="_placeholderTemplate" />
+              } @else {
+                {{ placeholderText() ?? '' }}
+              }
+            }
+
+            <ng-content select="input" />
+            <ng-content select="textarea" />
+          </div>
+        </div>
+
+        @if (_inputState === 'closed') {
+          <sh-icon suffix>caret-down</sh-icon>
+        } @else if (_inputState === 'loading') {
+          <sh-spinner class="primary" suffix></sh-spinner>
+        } @else if (_inputState === 'open-searching') {
+          <sh-icon suffix>list-magnifying-glass</sh-icon>
+        } @else if (_inputState === 'searching') {
+          <sh-icon suffix>magnifying-glass</sh-icon>
+        } @else if (_inputState === 'selected' && _isClearable()) {
+          <sh-icon suffix (click)="clear($event)">x-bold</sh-icon>
+        } @else if (_inputState === 'selected' && !_isClearable()) {
+          <sh-icon suffix>caret-down</sh-icon>
+        } @else {
+          <sh-icon suffix>caret-up</sh-icon>
+        }
+      </sh-form-field>
+
+      <div class="ship-options" #optionsWrap [id]="'optionsWrapId-' + componentId" role="listbox">
+        @if (asFreeText()) {
+          @let freeTextOption = computedFreeTextOption();
+          @let freeTextOptionValue = getValue(freeTextOption);
+
+          @if ($any(freeTextOptionValue).length > 0) {
+            @if (freeTextTitle()) {
+              <p title>{{ freeTextTitle() }}</p>
+            }
+
+            <li
+              (click)="toggleOptionByIndex(-1)"
+              class="option"
+              role="option"
+              [id]="this.getOptionId(-1)"
+              [attr.aria-selected]="isSelected(-1)"
+              [class.selected]="isSelected(-1)"
+              [class.focused]="-1 === focusedOptionIndex()">
+              @if (_freeTextOptionTemplate) {
+                <ng-container *ngTemplateOutlet="_freeTextOptionTemplate; context: { $implicit: freeTextOption }" />
+              } @else if (_listOptionTemplate) {
+                <ng-container *ngTemplateOutlet="_listOptionTemplate; context: { $implicit: freeTextOption }" />
+              } @else {
+                {{ freeTextOptionValue }}
+              }
+            </li>
+
+            @if (freeTextTitle() && filteredOptions().length > 0) {
+              <sh-divider />
+            }
+          }
+        }
+
+        @if (optionTitle() && filteredOptions().length > 0) {
+          <p title>{{ optionTitle() }}</p>
+        }
+
+        @for (option of filteredOptions(); track $index) {
+          <li
+            (click)="toggleOptionByIndex($index)"
+            class="option"
+            role="option"
+            [id]="this.getOptionId($index)"
+            [attr.aria-selected]="isSelected($index)"
+            [class.selected]="isSelected($index)"
+            [class.focused]="$index === focusedOptionIndex()">
+            @if (selectMultiple()) {
+              <sh-checkbox [class]="selectClasses()" [checked]="isSelected($index)" />
+            }
+
+            @if (_listOptionTemplate) {
+              <ng-container *ngTemplateOutlet="_listOptionTemplate; context: { $implicit: option }" />
+            } @else {
+              {{ getLabel(option) }}
+            }
+          </li>
+        }
+      </div>
+    </sh-popover>
+  `, host: {
+                        '[class.multiple]': 'selectMultiple()',
+                        '[class]': 'hostClasses()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["sh-select{--miw: 13.125rem;--select-option-mih: min-content;--select-options-mh: 11.25rem;display:flex}sh-select sh-form-field{display:flex;--ff-mw: var(--miw)}sh-select sh-popover{flex:1 0}sh-select sh-popover:has(.ship-options:empty) .popover{opacity:0}sh-select .selected-value{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;color:var(--base-8)}sh-select .selected-value input{margin:0}sh-select .selected-value.is-selected{color:var(--base-12)}sh-select sh-form-field .input-wrap .input{position:relative;display:flex;flex-wrap:wrap;--ff-space: .4375rem .625rem}sh-select sh-form-field .input-wrap .input textarea,sh-select sh-form-field .input-wrap .input input{opacity:0;width:0;height:0;position:absolute}sh-select sh-form-field .input-wrap .input.show-search-text input{opacity:1;height:initial;min-width:min-content;field-sizing:content;font:var(--paragraph-30);position:relative}sh-select sh-form-field .input-wrap .input.show-search-text textarea{opacity:1;height:initial;margin:.25rem 0 0}sh-select sh-form-field.small .input-wrap .input{--ff-space: .3125rem .5rem}sh-select sh-form-field.small .input-wrap .input sh-chip{--chip-h: 1.25rem;font-size:80%}.ship-options{padding:.5rem 0;display:flex;flex-direction:column;max-height:var(--select-options-mh);overflow-y:auto;overflow-x:hidden}.ship-options p[title]{padding:.25rem 1rem}.ship-options sh-divider{margin:.5rem 0}.ship-options .option{display:flex;justify-content:flex-start;align-items:center;min-height:var(--select-option-mih);margin:0 .5rem;padding:.5rem;gap:.5rem;width:calc(100% - 1rem);border-radius:var(--shape-2);appearance:none;background-color:transparent;border:0;cursor:pointer;color:var(--base-12);-webkit-user-select:none;user-select:none}.ship-options .option[disabled]{opacity:.3;cursor:initial}.ship-options .option[disabled]:hover{background-color:transparent}.ship-options .option sh-icon{font-size:1rem}.ship-options .option span.placeholder{color:var(--base-7)}.ship-options .option.active,.ship-options .option:checked,.ship-options .option:hover{background-color:var(--base-2);color:var(--base-12)}.ship-options .option.focused{background-color:var(--primary-1);color:var(--base-12)}.ship-options .option.focused:hover{background-color:var(--primary-2)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], asFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "asFreeText", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], optionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTitle", required: false }] }], freeTextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextTitle", required: false }] }], freeTextPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextPlaceholder", required: false }] }], validateFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFreeText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], lazySearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazySearch", required: false }] }], inlineSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineSearch", required: false }] }], asText: [{ type: i0.Input, args: [{ isSignal: true, alias: "asText", required: false }] }], isClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClearable", required: false }] }], selectMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMultiple", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], selectedOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptionTemplate", required: false }] }], placeholderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderTemplate", required: false }] }], freeTextOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextOptionTemplate", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }, { type: i0.Output, args: ["optionsChange"] }], selectedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptions", required: false }] }, { type: i0.Output, args: ["selectedOptionsChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], onAddNewFreeTextOption: [{ type: i0.Output, args: ["onAddNewFreeTextOption"] }], inlineTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], optionsWrapRef: [{ type: i0.ViewChild, args: ['optionsWrap', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipSelect };
+//# sourceMappingURL=ship-ui-core-ship-select.mjs.map