@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0

package/dist/components/ds-select.js

@@ -1,599 +1 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, f as forceUpdate, h, d as Host } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { i as idGenerator, t as transformTagName, c as componentOnReady, b as debounce, a as ifDefined, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { k as selectAnOption, c as atLeastOneOption, f as thereAreOptionsToBrowse, l as loadingOptions, w as weCouldNotLoadOptions, b as tryAgainOrIfTheProblemPersists, r as removeSelection, h as selections } from './p-BGV-ubOj.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
-import { F as FEEDBACK_RESET_TIMEOUT } from './p-BT1Kxodd.js';
-import { m as multipleValueFactory } from './p-Cl9h0hQc.js';
-import { d as disableEventsFactory } from './p-B3JeAI4k.js';
-import { d as defineCustomElement$b } from './p-BtwuVYMk.js';
-import { d as defineCustomElement$a } from './p-CBTcmEBq.js';
-import { d as defineCustomElement$9 } from './p-cVo5wigC.js';
-import { d as defineCustomElement$8 } from './p-3TYR8XT2.js';
-import { d as defineCustomElement$7 } from './p-DIxFOW85.js';
-import { d as defineCustomElement$6 } from './p-BVcTj6fF.js';
-import { d as defineCustomElement$5 } from './p-CtRrVwoy.js';
-import { d as defineCustomElement$4 } from './p-DFoE5OTe.js';
-import { d as defineCustomElement$3 } from './p-Dq55XDgV.js';
-import { d as defineCustomElement$2 } from './p-Cq_RwLX7.js';
-
-const dsSelectCss = ".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){:not(:has(.ds-select__oSBnIJ--full-width)).sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__oSBnIJ-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__oSBnIJ-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__oSBnIJ-custom-wrapper.sc-ds-select{position:relative}.ds-select__oSBnIJ-custom.sc-ds-select .ds-options__oSBnIJ.sc-ds-select{display:block}.ds-select__oSBnIJ-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__oSBnIJ-custom-input-container.sc-ds-select:has(.ds-select__oSBnIJ-custom__clear-button:hover) .ds-select__oSBnIJ-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__oSBnIJ-custom.sc-ds-select:not(.ds-select__oSBnIJ-custom--open,.ds-select__oSBnIJ-custom--invalid.sc-ds-select,.ds-select__oSBnIJ-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__oSBnIJ-custom.sc-ds-select:active:not(.ds-select__oSBnIJ-custom--open,.ds-select__oSBnIJ-custom--invalid.sc-ds-select,.ds-select__oSBnIJ-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__oSBnIJ-custom--open.sc-ds-select,.ds-select__oSBnIJ-custom.sc-ds-select:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-select__oSBnIJ-custom--open.sc-ds-select:not(.ds-select__oSBnIJ-custom--open--invalid,.ds-select__oSBnIJ-custom.sc-ds-select:focus-visible--invalid),.ds-select__oSBnIJ-custom.sc-ds-select:focus-visible:not(.ds-select__oSBnIJ-custom--open--invalid,.ds-select__oSBnIJ-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__oSBnIJ-custom--disabled.sc-ds-select{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__oSBnIJ-custom--disabled.sc-ds-select .ds-select__oSBnIJ-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__oSBnIJ-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__oSBnIJ-custom--invalid.sc-ds-select:not(.ds-select__oSBnIJ-custom--invalid--open,.ds-select__oSBnIJ-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__oSBnIJ-custom--invalid.sc-ds-select:not(.ds-select__oSBnIJ-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__oSBnIJ-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__oSBnIJ-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-xSmall)}.ds-select__oSBnIJ-custom--has-icon.sc-ds-select .ds-select__oSBnIJ-custom__selected-option.sc-ds-select{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__oSBnIJ-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__oSBnIJ-custom__selected-option__text.sc-ds-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__oSBnIJ-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__oSBnIJ-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__oSBnIJ-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__oSBnIJ-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__oSBnIJ-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__oSBnIJ-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__oSBnIJ-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__oSBnIJ-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__oSBnIJ-custom__badge-container.sc-ds-select{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__oSBnIJ-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__oSBnIJ-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__oSBnIJ-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__oSBnIJ-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
-
-const selectIdGenerator = idGenerator('ds-select');
-const defaultTextFns = {
-    dsPlaceholder: selectAnOption,
-};
-const getTextValue = (key, value) => value || defaultTextFns[key]();
-const DsSelect$1 = proxyCustomElement(class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsMultipleChange = createEvent(this, "dsMultipleChange");
-        this.dsChange = createEvent(this, "dsChange");
-        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
-        this.dsValidity = createEvent(this, "dsValidity");
-        this.dsBlur = createEvent(this, "dsBlur");
-        this.dsFocus = createEvent(this, "dsFocus");
-        this.internals = this.attachInternals();
-    }
-    inheritedAttributes = {};
-    get el() { return this; }
-    internals;
-    dsMultipleChange;
-    dsChange;
-    dsSubmitInvalid;
-    dsValidity;
-    dsBlur;
-    dsFocus;
-    dsForm;
-    dsId = selectIdGenerator.next().value;
-    dsName = this.dsId;
-    dsLabel;
-    dsPlaceholder;
-    dsVariant = 'default';
-    dsClearable = true;
-    dsDisabled = false;
-    dsErrorText = '';
-    dsIcon;
-    dsValue = null;
-    dsLoading = false;
-    dsLoadingText;
-    dsOptionsError = false;
-    dsOptionsErrorTitle;
-    dsOptionsErrorText;
-    dsFullWidth = false;
-    dsRequired = false;
-    activeOption = null;
-    selectedOptions = [];
-    selectedOptionsLabel;
-    isOpen = false;
-    activeIndex = null;
-    hasFocus = false;
-    clearButtonRef;
-    iconRef;
-    badgeRef;
-    badgeContainerOffset = null;
-    texts = {
-        dsPlaceholder: selectAnOption(),
-    };
-    feedback = [];
-    inputValidityId;
-    get isNative() {
-        return this.dsVariant === 'native';
-    }
-    get isMultiple() {
-        return this.dsVariant === 'multiple';
-    }
-    getInputValidityId() {
-        if (!this.inputValidityId) {
-            this.inputValidityId = `${this.dsId}-validity`;
-        }
-        return this.inputValidityId;
-    }
-    setTexts() {
-        this.texts = {
-            dsPlaceholder: getTextValue('dsPlaceholder', this.dsPlaceholder),
-        };
-    }
-    handleInvalid = (e) => {
-        e.preventDefault();
-        this.dsSubmitInvalid.emit({
-            flag: 'customError',
-            message: this.internals?.validationMessage,
-        });
-    };
-    async checkValidity() {
-        return this.internals?.checkValidity();
-    }
-    async getSelectedOption() {
-        if (this.selectedOptions.length === 0) {
-            return null;
-        }
-        return (await this.getSelectedOptions())[0];
-    }
-    async getSelectedOptions() {
-        return await Promise.all(this.selectedOptions?.map(async (option) => ({
-            value: option.dsValue || null,
-            label: (await option.getLabel()) || null,
-            description: option.dsDescription || null,
-        })));
-    }
-    connectedCallback() {
-        if (this.internals?.form && !this.isNative) {
-            this.el.addEventListener('invalid', this.handleInvalid);
-        }
-    }
-    componentWillLoad() {
-        this.setDisableEventEmits(true);
-        this.setTexts();
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, this.isNative
-                ? ['aria-describedby', 'aria-controls', 'aria-haspopup']
-                : ['aria-haspopup', 'aria-expanded', 'aria-disabled', 'aria-labelledby', 'aria-describedby', 'aria-controls', 'aria-activedescendant']),
-        };
-    }
-    componentDidLoad() {
-        if (this.isNative) {
-            this.internals?.setValidity({});
-        }
-        else {
-            this.internals?.setValidity({ valueMissing: this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)) }, atLeastOneOption());
-        }
-        this.value = this.toValue(this.dsValue);
-    }
-    disconnectedCallback() {
-        if (this.internals?.form && !this.isNative) {
-            this.el.addEventListener('invalid', this.handleInvalid);
-        }
-        this.debouncedResetFeedback.cancel();
-    }
-    get DsIcon() {
-        return transformTagName('ds-icon', 'ds-select', this.el);
-    }
-    get DsInputValidity() {
-        return transformTagName('ds-input-validity', 'ds-select', this.el);
-    }
-    get DsOption() {
-        return transformTagName('ds-option', 'ds-select', this.el);
-    }
-    get DsFeedback() {
-        return transformTagName('ds-feedback', 'ds-select', this.el);
-    }
-    customSelectRef;
-    nativeSelectRef;
-    handleEscEvent(event) {
-        if (this.selectedOptions.length > 0 && event.detail.key === 'Tab') {
-            this.clearButtonRef?.setFocus();
-        }
-        else if (['Escape', 'Shift+Tab'].includes(event.detail.key)) {
-            this.customSelectRef?.focus();
-        }
-    }
-    handleLanguageChange() {
-        this.setTexts();
-    }
-    onFocusIn() {
-        this.hasFocus = true;
-    }
-    onFocusOut(e) {
-        const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
-        const lostFocus = !nextFocused || !this.el.contains(nextFocused);
-        if (lostFocus) {
-            this.activeIndex = null;
-            this.hasFocus = false;
-            this.isOpen = false;
-            if (!this.isNative) {
-                this.dsValidity.emit({
-                    flag: this.internals?.validity.valid ? 'valid' : 'customError',
-                    message: this.internals?.validationMessage,
-                });
-            }
-        }
-    }
-    async handleOptionClick(option) {
-        if (!option || option.dsDisabled)
-            return;
-        this.setDisableEventEmits(false);
-        if (this.inValue(option.dsValue) && this.isMultiple) {
-            this.value = this.withoutValue(option.dsValue);
-        }
-        else {
-            this.value = this.isMultiple ? this.withValue(option.dsValue) : this.toValue(option.dsValue);
-        }
-        if (this.isMultiple) {
-            return;
-        }
-        this.activeIndex = null;
-        this.isOpen = false;
-        (this.customSelectRef || this.nativeSelectRef)?.focus();
-    }
-    toggleDropdown() {
-        if (this.dsDisabled)
-            return;
-        this.isOpen = !this.isOpen;
-        if (!this.isOpen) {
-            this.activeIndex = null;
-        }
-    }
-    handleClearSelection() {
-        if (this.dsDisabled)
-            return;
-        this.activeIndex = null;
-        this.setDisableEventEmits(false);
-        this.value = this.toValue(null);
-        this.isOpen = false;
-        (this.customSelectRef || this.nativeSelectRef)?.focus();
-    }
-    handleKeyDown(event) {
-        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.isOpen = true;
-            this.updateActiveIndex();
-            this.scrollToActiveOption();
-            window.requestAnimationFrame(() => {
-                const optionsList = this.el.querySelector(`.${cx('ds-options')}`);
-                optionsList?.focus();
-            });
-        }
-    }
-    scrollToActiveOption() {
-        if (this.activeIndex === null)
-            return;
-        const optionsList = this.el.querySelector(`.${cx('ds-options')}`);
-        const allOptions = optionsList?.querySelectorAll(`.${cx('ds-option')}`);
-        if (!allOptions || this.activeIndex >= allOptions.length)
-            return;
-        const activeOption = allOptions[this.activeIndex];
-        if (activeOption) {
-            window.requestAnimationFrame(() => {
-                activeOption.focus();
-                activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
-            });
-        }
-    }
-    getBadgeContainerWidthOffset = async () => {
-        await componentOnReady(this.clearButtonRef);
-        await componentOnReady(this.badgeRef);
-        const clearButtonWidth = this.clearButtonRef?.getBoundingClientRect().width || 0;
-        const badgeContainerWidth = this.badgeRef?.getBoundingClientRect().width || 0;
-        this.badgeContainerOffset = clearButtonWidth && badgeContainerWidth ? clearButtonWidth + badgeContainerWidth : null;
-    };
-    getAllOptions() {
-        return Array.from(this.el.querySelectorAll(this.DsOption));
-    }
-    getFocusIndex() {
-        const options = this.getAllOptions();
-        if (this.getValueItem(0)?.trim() !== '') {
-            const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.getValueItem(0)));
-            if (selectedIndex !== -1) {
-                return selectedIndex;
-            }
-        }
-        return options.findIndex(opt => !opt.dsDisabled);
-    }
-    updateActiveIndex() {
-        const focusIndex = this.getFocusIndex();
-        if (focusIndex !== -1) {
-            this.activeIndex = focusIndex;
-        }
-    }
-    activeIndexObserver(newValue) {
-        const options = this.getAllOptions();
-        this.activeOption = newValue !== null ? options[newValue] : null;
-        options.forEach((opt, idx) => {
-            opt.dsActive = idx === this.activeIndex;
-            opt.dsSelected = this.inValue(opt.dsValue);
-        });
-    }
-    clearButtonRefObserver() {
-        this.getBadgeContainerWidthOffset();
-    }
-    textPropObserver(newValue, _oldValue, propName) {
-        this.texts = {
-            ...this.texts,
-            [propName]: getTextValue(propName, newValue),
-        };
-    }
-    valueObserver(newValue) {
-        if (this.isNative)
-            return;
-        this.setSelectedOptionsFromValue(newValue);
-    }
-    dsValueObserver(newValue) {
-        this.value = this.toValue(newValue);
-    }
-    selectedOptionsObserver(newValue, oldValue) {
-        const newValues = newValue.map(opt => opt.dsValue);
-        const oldValues = oldValue?.map(opt => opt.dsValue) || [];
-        const removedValues = oldValues.filter(val => !newValues.includes(val));
-        const addedValues = newValues.filter(val => !oldValues.includes(val));
-        const hasChanged = removedValues.length > 0 || addedValues.length > 0;
-        oldValue?.forEach(opt => (opt.dsSelected = false));
-        newValue.forEach(opt => (opt.dsSelected = true));
-        const shouldEmit = this.getShouldEmit([hasChanged]);
-        this.setDisableEventEmits(true);
-        if (shouldEmit) {
-            this.dsMultipleChange.emit({ values: newValues, added: addedValues, removed: removedValues });
-            this.dsChange.emit(newValues[0] || null);
-        }
-        this.dsValidity.emit({
-            flag: this.internals?.validity.valid ? 'valid' : 'customError',
-            message: this.internals?.validationMessage,
-        });
-    }
-    hasFocusObserver(newValue) {
-        if (newValue) {
-            this.dsFocus.emit();
-        }
-        else {
-            this.dsBlur.emit();
-        }
-    }
-    resetFeedback = () => {
-        this.feedback = [];
-        forceUpdate(this);
-    };
-    debouncedResetFeedback = debounce(this.resetFeedback, FEEDBACK_RESET_TIMEOUT);
-    appendFeedback = (key, message) => {
-        this.feedback = [...this.feedback, { key, message }];
-        this.debouncedResetFeedback();
-    };
-    removeFeedback = (key) => {
-        this.feedback = this.feedback.filter(item => item.key !== key);
-    };
-    getFeedbackMessage = () => {
-        return this.feedback.length > 0 ? this.feedback[this.feedback.length - 1]?.message : '';
-    };
-    optionsMessagePropertyObserver(newValue, _oldValue, propName) {
-        if (!newValue) {
-            this.removeFeedback(propName);
-            if (this.feedback.length === 0) {
-                this.appendFeedback('default', thereAreOptionsToBrowse());
-            }
-            return;
-        }
-        if (propName === 'dsLoading' && newValue) {
-            this.appendFeedback(propName, this.dsLoadingText || loadingOptions());
-            return;
-        }
-        if (propName === 'dsOptionsError' && newValue) {
-            this.appendFeedback(propName, this.dsOptionsErrorText || `${weCouldNotLoadOptions()} ${tryAgainOrIfTheProblemPersists()}`);
-            return;
-        }
-    }
-    setSelectedOptionsFromValue = async (values) => {
-        if (!values || values.length === 0) {
-            await this.setSelectedOptions([]);
-            return;
-        }
-        const options = this.getAllOptions().filter(opt => values.includes(opt.dsValue));
-        if (options.length === 0) {
-            console.warn(`ds-select: No options found matching dsValues "${values.join(', ')}"`);
-            return;
-        }
-        await this.setSelectedOptions(options);
-    };
-    setSelectedOptions = async (options) => {
-        if (!this.isMultiple && this.activeOption) {
-            this.activeOption.dsActive = false;
-        }
-        this.internals?.setValidity({ valueMissing: this.dsRequired && options.length === 0 }, atLeastOneOption());
-        this.selectedOptions = options;
-        this.selectedOptionsLabel = options.length > 0 ? (await Promise.all(options.map(opt => opt.getLabel()))).join(', ') : '';
-        this.getBadgeContainerWidthOffset();
-    };
-    renderNativeSelect() {
-        const DsSelectNative = transformTagName('ds-select-native', 'ds-select', this.el);
-        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
-                this.value = this.toValue(e.detail);
-            }, onDsValidity: (e) => {
-                this.dsValidity.emit(e.detail);
-            }, onDsSubmitInvalid: (e) => {
-                this.dsSubmitInvalid.emit(e.detail);
-            }, ...this.inheritedAttributes }, h("slot", { name: "label" }), h("slot", { name: "native" })));
-    }
-    renderCustomSelect(baseClass) {
-        const noneSelected = this.selectedOptions.length === 0;
-        const labelId = `${this.dsId}-label`;
-        const badgeId = `${this.dsId}-badge`;
-        const selectedOptionId = `${this.dsId}-selected-option`;
-        const ariaDescribedBy = this.dsErrorText ? this.getInputValidityId() : undefined;
-        const optionsContainerId = `ds-select-options-${this.dsId}`;
-        const customSelectClass = `${baseClass}-custom`;
-        const DsBadge = transformTagName('ds-badge', 'ds-select', this.el);
-        const DsButton = transformTagName('ds-button', 'ds-select', this.el);
-        const DsOptions = transformTagName('ds-options', 'ds-select', this.el);
-        const DsOptionsMessage = transformTagName('ds-options-message', 'ds-select', this.el);
-        const DsControlLabel = transformTagName('ds-control-label', 'ds-select', this.el);
-        const clearButtonAriaLabel = removeSelection(true);
-        return (h("div", { style: {
-                '--badge-container-offset': this.badgeContainerOffset ? `${this.badgeContainerOffset}px` : undefined,
-            } }, h(DsControlLabel, { dsId: labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, onClick: () => {
-                this.customSelectRef?.focus();
-                this.toggleDropdown();
-            } }, h("slot", { name: "label" })), h("div", { class: `${customSelectClass}-wrapper` }, h("div", { class: `${customSelectClass}-input-container` }, h("div", { id: this.dsId, ref: el => (this.customSelectRef = el), class: classNames(`${customSelectClass}`, {
-                [`${baseClass}--full-width`]: this.dsFullWidth,
-                [`${customSelectClass}--open`]: this.isOpen,
-                [`${customSelectClass}--none-selected`]: noneSelected,
-                [`${customSelectClass}--disabled`]: this.dsDisabled,
-                [`${customSelectClass}--invalid`]: !!this.dsErrorText,
-                [`${customSelectClass}--has-icon`]: !!this.dsIcon,
-            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${labelId} ${badgeId}` : labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${this.dsId}-option-${this.activeIndex}` : undefined, onClick: () => {
-                if (!this.dsDisabled) {
-                    this.toggleDropdown();
-                }
-            }, onKeyDown: event => {
-                if (!this.dsDisabled) {
-                    this.handleKeyDown(event);
-                }
-            } }, h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && h(this.DsIcon, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon }), h("span", { id: selectedOptionId, class: classNames(`${customSelectClass}__selected-option__text`, {
-                [`${customSelectClass}__selected-option__text--none-selected`]: noneSelected,
-                [`${customSelectClass}__selected-option__text--disabled`]: this.dsDisabled,
-            }) }, this.selectedOptionsLabel || this.texts.dsPlaceholder)), h(this.DsIcon, { ref: el => {
-                this.iconRef = el;
-            }, class: {
-                [`${customSelectClass}__dropdown-icon`]: true,
-                [`${customSelectClass}__dropdown-icon--has-clear-button`]: this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled,
-            }, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: `${customSelectClass}__badge-container` }, h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (h(DsButton, { ref: el => {
-                this.clearButtonRef = el;
-            }, class: `${customSelectClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: event => {
-                event.stopPropagation();
-                this.handleClearSelection();
-            }, onKeyDown: event => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.handleClearSelection();
-                }
-            }, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: selectedOptionId }))), h("div", { id: optionsContainerId, class: {
-                [`${customSelectClass}__options-container`]: true,
-                [`${customSelectClass}__options-container--open`]: this.isOpen,
-            }, onClick: e => {
-                const option = e.target.closest(this.DsOption);
-                this.handleOptionClick(option);
-            } }, h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText }), h(DsOptions, { dsActiveIndex: this.activeIndex, onDsActiveIndexChange: e => {
-                this.activeIndex = e.detail;
-            }, onDsEsc: () => {
-                this.isOpen = false;
-            }, dsLabelId: labelId, dsAriaMultiselectable: this.isMultiple }, h("slot", null)))), this.internals?.form &&
-            this.internals?.validity.valid &&
-            this.selectedOptions.map(option => h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { id: this.getInputValidityId(), dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
-    }
-    render() {
-        const baseClass = cx('ds-select');
-        return (h(Host, { key: '9fcca0b6884e5e3af688877d5cd922cd63da2e0a', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'f412bab458ed1029a85133848f0117ffca0ff304', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "activeIndex": ["activeIndexObserver"],
-        "clearButtonRef": ["clearButtonRefObserver"],
-        "badgeRef": ["clearButtonRefObserver"],
-        "dsPlaceholder": ["textPropObserver"],
-        "value": ["valueObserver"],
-        "dsValue": ["dsValueObserver"],
-        "selectedOptions": ["selectedOptionsObserver"],
-        "hasFocus": ["hasFocusObserver"],
-        "dsLoading": ["optionsMessagePropertyObserver"],
-        "dsOptionsError": ["optionsMessagePropertyObserver"]
-    }; }
-    static get style() { return dsSelectCss; }
-}, [326, "ds-select", {
-        "dsForm": [1, "ds-form"],
-        "dsId": [1, "ds-id"],
-        "dsName": [1, "ds-name"],
-        "dsLabel": [1, "ds-label"],
-        "dsPlaceholder": [1, "ds-placeholder"],
-        "dsVariant": [1, "ds-variant"],
-        "dsClearable": [4, "ds-clearable"],
-        "dsDisabled": [4, "ds-disabled"],
-        "dsErrorText": [1, "ds-error-text"],
-        "dsIcon": [1, "ds-icon"],
-        "dsValue": [1, "ds-value"],
-        "dsLoading": [4, "ds-loading"],
-        "dsLoadingText": [1, "ds-loading-text"],
-        "dsOptionsError": [4, "ds-options-error"],
-        "dsOptionsErrorTitle": [1, "ds-options-error-title"],
-        "dsOptionsErrorText": [1, "ds-options-error-text"],
-        "dsFullWidth": [4, "ds-full-width"],
-        "dsRequired": [4, "ds-required"],
-        "value": [32],
-        "activeOption": [32],
-        "selectedOptions": [32],
-        "selectedOptionsLabel": [32],
-        "isOpen": [32],
-        "activeIndex": [32],
-        "hasFocus": [32],
-        "clearButtonRef": [32],
-        "iconRef": [32],
-        "badgeRef": [32],
-        "badgeContainerOffset": [32],
-        "texts": [32],
-        "feedback": [32],
-        "checkValidity": [64],
-        "getSelectedOption": [64],
-        "getSelectedOptions": [64]
-    }, [[0, "dsEsc", "handleEscEvent"], [16, "dsLanguageChange", "handleLanguageChange"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"]], {
-        "activeIndex": ["activeIndexObserver"],
-        "clearButtonRef": ["clearButtonRefObserver"],
-        "badgeRef": ["clearButtonRefObserver"],
-        "dsPlaceholder": ["textPropObserver"],
-        "value": ["valueObserver"],
-        "dsValue": ["dsValueObserver"],
-        "selectedOptions": ["selectedOptionsObserver"],
-        "hasFocus": ["hasFocusObserver"],
-        "dsLoading": ["optionsMessagePropertyObserver"],
-        "dsOptionsError": ["optionsMessagePropertyObserver"]
-    }]);
-declareComponentDependencies([h("ds-select-native", null), h("ds-icon", { dsName: "" }), h("ds-input-validity", null), h("ds-button", null), h("ds-options", null), h("ds-control-label", null), h("ds-feedback", null)]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-select", "ds-assistive-text", "ds-button", "ds-control-label", "ds-feedback", "ds-icon", "ds-input-validity", "ds-options", "ds-select-native", "ds-spinner", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsSelect$1);
-            }
-            break;
-        case "ds-assistive-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ds-control-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "ds-feedback":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ds-input-validity":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ds-options":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ds-select-native":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsSelect = DsSelect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsSelect, defineCustomElement };
+import{p as s,M as e,c as t,f as i,h as o,d,t as l}from"./p-D7drWwKe.js";import{c as r}from"./p-BfTCfPZ1.js";import{i as a,t as c,c as n,b as h,a as p,d as u}from"./p-J5Ghj1_T.js";import{k as _,c as b,f as v,l as m,w as g,b as f,r as x,h as E}from"./p-DBW_vEKT.js";import{c as S}from"./p-DgTb4Jpc.js";import{i as F,a as y}from"./p-BecId8t2.js";import{F as P}from"./p-BT1Kxodd.js";import{m as w}from"./p-xR0yDVYB.js";import{d as O}from"./p-B3JeAI4k.js";import{d as J}from"./p-Bg8W_xlr.js";import{d as k}from"./p-Dib6BujO.js";import{d as C}from"./p-C3JZK1na.js";import{d as I}from"./p-cBjVr9Tq.js";import{d as L}from"./p-BRKwvv98.js";import{d as T}from"./p-qyZAXct-.js";import{d as D}from"./p-DrkUGssP.js";import{d as R}from"./p-CGJXc6RW.js";import{d as V}from"./p-B9VvQC9G.js";import{d as B}from"./p-tTA4zhDH.js";const j=a("ds-select"),A={dsPlaceholder:_},z=(s,e)=>e||A[s](),W=s(class extends(e(w,O)){constructor(s){super(!1),!1!==s&&this.__registerHost(),this.dsMultipleChange=t(this,"dsMultipleChange",7),this.dsChange=t(this,"dsChange",7),this.dsSubmitInvalid=t(this,"dsSubmitInvalid",7),this.dsValidity=t(this,"dsValidity",7),this.dsBlur=t(this,"dsBlur",7),this.dsFocus=t(this,"dsFocus",7),this.internals=this.attachInternals()}inheritedAttributes={};get el(){return this}internals;dsMultipleChange;dsChange;dsSubmitInvalid;dsValidity;dsBlur;dsFocus;dsForm;dsId=j.next().value;dsName=this.dsId;dsLabel;dsPlaceholder;dsVariant="default";dsClearable=!0;dsDisabled=!1;dsErrorText="";dsIcon;dsValue=null;dsLoading=!1;dsLoadingText;dsOptionsError=!1;dsOptionsErrorTitle;dsOptionsErrorText;dsFullWidth=!1;dsRequired=!1;activeOption=null;selectedOptions=[];selectedOptionsLabel;isOpen=!1;activeIndex=null;hasFocus=!1;clearButtonRef;iconRef;badgeRef;badgeContainerOffset=null;texts={dsPlaceholder:_()};feedback=[];inputValidityId;get isNative(){return"native"===this.dsVariant}get isMultiple(){return"multiple"===this.dsVariant}getInputValidityId(){return this.inputValidityId||(this.inputValidityId=this.dsId+"-validity"),this.inputValidityId}setTexts(){this.texts={dsPlaceholder:z("dsPlaceholder",this.dsPlaceholder)}}handleInvalid=s=>{s.preventDefault(),this.dsSubmitInvalid.emit({flag:"customError",message:this.internals?.validationMessage})};async checkValidity(){return this.internals?.checkValidity()}async getSelectedOption(){return 0===this.selectedOptions.length?null:(await this.getSelectedOptions())[0]}async getSelectedOptions(){return await Promise.all(this.selectedOptions?.map((async s=>({value:s.dsValue||null,label:await s.getLabel()||null,description:s.dsDescription||null}))))}connectedCallback(){this.internals?.form&&!this.isNative&&this.el.addEventListener("invalid",this.handleInvalid)}componentWillLoad(){this.setDisableEventEmits(!0),this.setTexts(),this.inheritedAttributes={...y(this,this.el),...F(this.el,this.isNative?["aria-describedby","aria-controls","aria-haspopup"]:["aria-haspopup","aria-expanded","aria-disabled","aria-labelledby","aria-describedby","aria-controls","aria-activedescendant"])}}componentDidLoad(){this.isNative?this.internals?.setValidity({}):this.internals?.setValidity({valueMissing:this.dsRequired&&(!this.dsValue||Array.isArray(this.dsValue)&&0===this.dsValue.length)},b()),this.value=this.toValue(this.dsValue)}disconnectedCallback(){this.internals?.form&&!this.isNative&&this.el.addEventListener("invalid",this.handleInvalid),this.debouncedResetFeedback.cancel()}get DsIcon(){return c("ds-icon","ds-select",this.el)}get DsInputValidity(){return c("ds-input-validity","ds-select",this.el)}get DsOption(){return c("ds-option","ds-select",this.el)}get DsFeedback(){return c("ds-feedback","ds-select",this.el)}customSelectRef;nativeSelectRef;handleEscEvent(s){this.selectedOptions.length>0&&"Tab"===s.detail.key?this.clearButtonRef?.setFocus():["Escape","Shift+Tab"].includes(s.detail.key)&&this.customSelectRef?.focus()}handleLanguageChange(){this.setTexts()}onFocusIn(){this.hasFocus=!0}onFocusOut(s){const e=s&&"relatedTarget"in s?s.relatedTarget:null;(!e||!this.el.contains(e))&&(this.activeIndex=null,this.hasFocus=!1,this.isOpen=!1,this.isNative||this.dsValidity.emit({flag:this.internals?.validity.valid?"valid":"customError",message:this.internals?.validationMessage}))}async handleOptionClick(s){s&&!s.dsDisabled&&(this.setDisableEventEmits(!1),this.value=this.inValue(s.dsValue)&&this.isMultiple?this.withoutValue(s.dsValue):this.isMultiple?this.withValue(s.dsValue):this.toValue(s.dsValue),this.isMultiple||(this.activeIndex=null,this.isOpen=!1,(this.customSelectRef||this.nativeSelectRef)?.focus()))}toggleDropdown(){this.dsDisabled||(this.isOpen=!this.isOpen,this.isOpen||(this.activeIndex=null))}handleClearSelection(){this.dsDisabled||(this.activeIndex=null,this.setDisableEventEmits(!1),this.value=this.toValue(null),this.isOpen=!1,(this.customSelectRef||this.nativeSelectRef)?.focus())}handleKeyDown(s){"ArrowDown"!==s.key&&"ArrowUp"!==s.key&&"Enter"!==s.key&&" "!==s.key||(s.preventDefault(),this.isOpen=!0,this.updateActiveIndex(),window.requestAnimationFrame((()=>{const s=this.el.querySelector("."+S("ds-options"));s?.focus()})))}getBadgeContainerWidthOffset=async()=>{await n(this.clearButtonRef),await n(this.badgeRef);const s=this.clearButtonRef?.getBoundingClientRect().width||0,e=this.badgeRef?.getBoundingClientRect().width||0;this.badgeContainerOffset=s&&e?s+e:null};getAllOptions(){return Array.from(this.el.querySelectorAll(this.DsOption))}getFocusIndex(){const s=this.getAllOptions();if(""!==this.getValueItem(0)?.trim()){const e=s.findIndex((s=>s.dsValue+""==this.getValueItem(0)+""));if(-1!==e)return e}return s.findIndex((s=>!s.dsDisabled))}updateActiveIndex(){const s=this.getFocusIndex();-1!==s&&(this.activeIndex=s)}activeIndexObserver(s){const e=this.getAllOptions();this.activeOption=null!==s?e[s]:null,e.forEach(((s,e)=>{s.dsActive=e===this.activeIndex,s.dsSelected=this.inValue(s.dsValue)}))}clearButtonRefObserver(){this.getBadgeContainerWidthOffset()}textPropObserver(s,e,t){this.texts={...this.texts,[t]:z(t,s)}}valueObserver(s){this.isNative||this.setSelectedOptionsFromValue(s)}dsValueObserver(s){this.value=this.toValue(s)}selectedOptionsObserver(s,e){const t=s.map((s=>s.dsValue)),i=e?.map((s=>s.dsValue))||[],o=i.filter((s=>!t.includes(s))),d=t.filter((s=>!i.includes(s))),l=o.length>0||d.length>0;e?.forEach((s=>s.dsSelected=!1)),s.forEach((s=>s.dsSelected=!0));const r=this.getShouldEmit([l]);this.setDisableEventEmits(!0),r&&(this.dsMultipleChange.emit({values:t,added:d,removed:o}),this.dsChange.emit(t[0]||null)),this.dsValidity.emit({flag:this.internals?.validity.valid?"valid":"customError",message:this.internals?.validationMessage})}hasFocusObserver(s){s?this.dsFocus.emit():this.dsBlur.emit()}resetFeedback=()=>{this.feedback=[],i(this)};debouncedResetFeedback=h(this.resetFeedback,P);appendFeedback=(s,e)=>{this.feedback=[...this.feedback,{key:s,message:e}],this.debouncedResetFeedback()};removeFeedback=s=>{this.feedback=this.feedback.filter((e=>e.key!==s))};getFeedbackMessage=()=>this.feedback.length>0?this.feedback[this.feedback.length-1]?.message:"";optionsMessagePropertyObserver(s,e,t){if(!s)return this.removeFeedback(t),void(0===this.feedback.length&&this.appendFeedback("default",v()));"dsLoading"===t&&s?this.appendFeedback(t,this.dsLoadingText||m()):"dsOptionsError"===t&&s&&this.appendFeedback(t,this.dsOptionsErrorText||`${g()} ${f()}`)}setSelectedOptionsFromValue=async s=>{if(!s||0===s.length)return void await this.setSelectedOptions([]);const e=this.getAllOptions().filter((e=>s.includes(e.dsValue)));0!==e.length?await this.setSelectedOptions(e):console.warn(`ds-select: No options found matching dsValues "${s.join(", ")}"`)};setSelectedOptions=async s=>{!this.isMultiple&&this.activeOption&&(this.activeOption.dsActive=!1),this.internals?.setValidity({valueMissing:this.dsRequired&&0===s.length},b()),this.selectedOptions=s,this.selectedOptionsLabel=s.length>0?(await Promise.all(s.map((s=>s.getLabel())))).join(", "):"",this.getBadgeContainerWidthOffset()};renderNativeSelect(){const s=c("ds-select-native","ds-select",this.el);return o(s,{dsId:this.dsId,dsLabel:this.dsLabel,dsPlaceholder:this.texts.dsPlaceholder,dsIcon:this.dsIcon,dsName:this.dsName||this.dsId,dsDisabled:this.dsDisabled,dsErrorText:this.dsErrorText,dsRequired:this.dsRequired,dsFullWidth:this.dsFullWidth,dsValue:this.getValueItem(0)||"",onDsChange:s=>{this.value=this.toValue(s.detail)},onDsValidity:s=>{this.dsValidity.emit(s.detail)},onDsSubmitInvalid:s=>{this.dsSubmitInvalid.emit(s.detail)},...this.inheritedAttributes},o("slot",{name:"label"}),o("slot",{name:"native"}))}renderCustomSelect(s){const e=0===this.selectedOptions.length,t=this.dsId+"-label",i=this.dsId+"-badge",d=this.dsId+"-selected-option",l=this.dsErrorText?this.getInputValidityId():void 0,a="ds-select-options-"+this.dsId,n=s+"-custom",h=c("ds-badge","ds-select",this.el),p=c("ds-button","ds-select",this.el),u=c("ds-options","ds-select",this.el),_=c("ds-options-message","ds-select",this.el),b=c("ds-control-label","ds-select",this.el),v=x(!0);return o("div",{style:{"--badge-container-offset":this.badgeContainerOffset?this.badgeContainerOffset+"px":void 0}},o(b,{dsId:t,dsHtmlFor:this.dsId,dsLabel:this.dsLabel,dsRequired:this.dsRequired,onClick:()=>{this.customSelectRef?.focus(),this.toggleDropdown()}},o("slot",{name:"label"})),o("div",{class:n+"-wrapper"},o("div",{class:n+"-input-container"},o("div",{id:this.dsId,ref:s=>this.customSelectRef=s,class:r(""+n,{[s+"--full-width"]:this.dsFullWidth,[n+"--open"]:this.isOpen,[n+"--none-selected"]:e,[n+"--disabled"]:this.dsDisabled,[n+"--invalid"]:!!this.dsErrorText,[n+"--has-icon"]:!!this.dsIcon}),tabIndex:this.dsDisabled?-1:0,role:"combobox","aria-required":this.dsRequired?"true":"false","aria-haspopup":"listbox","aria-expanded":this.isOpen+"","aria-disabled":this.dsDisabled+"","aria-labelledby":this.isMultiple&&this.selectedOptions?.length>0?`${t} ${i}`:t,"aria-describedby":l,"aria-controls":a,"aria-activedescendant":null!==this.activeIndex?`${this.dsId}-option-${this.activeIndex}`:void 0,onClick:()=>{this.dsDisabled||this.toggleDropdown()},onKeyDown:s=>{this.dsDisabled||this.handleKeyDown(s)}},o("div",{class:n+"__selected-option"},this.dsIcon&&o(this.DsIcon,{class:n+"__selected-option__placeholder-icon",dsName:this.dsIcon}),o("span",{id:d,class:r(n+"__selected-option__text",{[n+"__selected-option__text--none-selected"]:e,[n+"__selected-option__text--disabled"]:this.dsDisabled})},this.selectedOptionsLabel||this.texts.dsPlaceholder)),o(this.DsIcon,{ref:s=>{this.iconRef=s},class:{[n+"__dropdown-icon"]:!0,[n+"__dropdown-icon--has-clear-button"]:this.dsClearable&&this.selectedOptionsLabel&&!this.dsDisabled},dsName:this.isOpen?"keyboard_arrow_up":"keyboard_arrow_down"})),this.isMultiple&&this.selectedOptions?.length>0&&o("div",{class:n+"__badge-container"},o(h,{ref:s=>this.badgeRef=s,dsId:i,dsText:""+this.selectedOptions.length,dsHiddenAssistiveText:E()})),this.dsClearable&&this.selectedOptionsLabel&&!this.dsDisabled&&o(p,{ref:s=>{this.clearButtonRef=s},class:n+"__clear-button",dsVariant:"supplementary",dsIcon:"cancel_fill",dsColour:"black",dsIconTitle:v,dsIconAriaLabel:v,onClick:s=>{s.stopPropagation(),this.handleClearSelection()},onKeyDown:s=>{"Enter"!==s.key&&" "!==s.key||(s.preventDefault(),s.stopPropagation(),this.handleClearSelection())},dsAriaLabel:v,dsAriaDescribedby:d})),o("div",{id:a,class:{[n+"__options-container"]:!0,[n+"__options-container--open"]:this.isOpen},onClick:s=>{const e=s.target.closest(this.DsOption);this.handleOptionClick(e)}},o(_,{dsLoading:this.dsLoading,dsLoadingText:this.dsLoadingText,dsError:this.dsOptionsError,dsErrorTitle:this.dsOptionsErrorTitle,dsErrorText:this.dsOptionsErrorText}),o(u,{dsActiveIndex:this.activeIndex,onDsActiveIndexChange:s=>{this.activeIndex=s.detail},onDsEsc:()=>{this.isOpen=!1},dsLabelId:t,dsAriaMultiselectable:this.isMultiple},o("slot",null)))),this.internals?.form&&this.internals?.validity.valid&&this.selectedOptions.map((s=>o("input",{type:"hidden",name:this.dsName,value:s.dsValue,key:s.dsValue}))),o(this.DsInputValidity,{id:this.getInputValidityId(),dsText:this.dsErrorText,dsType:"error"}),o(this.DsFeedback,{dsSrOnly:!0,dsSrOnlyTag:"span"},this.getFeedbackMessage()))}render(){const s=S("ds-select");return o(d,{key:"3d3b24db037bfcc1799c04694dd66226cbf7db51",...p("name",this.isNative?void 0:this.dsName)},o("div",{key:"3ee46f44fb1489380eb1759a1ada5f8f7493f678",tabIndex:-1},this.isNative?this.renderNativeSelect():this.renderCustomSelect(s)))}static get formAssociated(){return!0}static get watchers(){return{activeIndex:[{activeIndexObserver:0}],clearButtonRef:[{clearButtonRefObserver:0}],badgeRef:[{clearButtonRefObserver:0}],dsPlaceholder:[{textPropObserver:0}],value:[{valueObserver:0}],dsValue:[{dsValueObserver:0}],selectedOptions:[{selectedOptionsObserver:0}],hasFocus:[{hasFocusObserver:0}],dsLoading:[{optionsMessagePropertyObserver:0}],dsOptionsError:[{optionsMessagePropertyObserver:0}]}}static get style(){return".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){:not(:has(.ds-select__SPFJ1E--full-width)).sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__SPFJ1E-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__SPFJ1E-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__SPFJ1E-custom-wrapper.sc-ds-select{position:relative}.ds-select__SPFJ1E-custom.sc-ds-select .ds-options__SPFJ1E.sc-ds-select{display:block}.ds-select__SPFJ1E-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__SPFJ1E-custom-input-container.sc-ds-select:has(.ds-select__SPFJ1E-custom__clear-button:hover) .ds-select__SPFJ1E-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__SPFJ1E-custom.sc-ds-select:not(.ds-select__SPFJ1E-custom--open,.ds-select__SPFJ1E-custom--invalid.sc-ds-select,.ds-select__SPFJ1E-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__SPFJ1E-custom.sc-ds-select:active:not(.ds-select__SPFJ1E-custom--open,.ds-select__SPFJ1E-custom--invalid.sc-ds-select,.ds-select__SPFJ1E-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__SPFJ1E-custom--open.sc-ds-select,.ds-select__SPFJ1E-custom.sc-ds-select:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-select__SPFJ1E-custom--open.sc-ds-select:not(.ds-select__SPFJ1E-custom--open--invalid,.ds-select__SPFJ1E-custom.sc-ds-select:focus-visible--invalid),.ds-select__SPFJ1E-custom.sc-ds-select:focus-visible:not(.ds-select__SPFJ1E-custom--open--invalid,.ds-select__SPFJ1E-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__SPFJ1E-custom--disabled.sc-ds-select{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__SPFJ1E-custom--disabled.sc-ds-select .ds-select__SPFJ1E-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__SPFJ1E-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-custom--invalid.sc-ds-select:not(.ds-select__SPFJ1E-custom--invalid--open,.ds-select__SPFJ1E-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__SPFJ1E-custom--invalid.sc-ds-select:not(.ds-select__SPFJ1E-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__SPFJ1E-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__SPFJ1E-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-xSmall)}.ds-select__SPFJ1E-custom--has-icon.sc-ds-select .ds-select__SPFJ1E-custom__selected-option.sc-ds-select{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__SPFJ1E-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__SPFJ1E-custom__selected-option__text.sc-ds-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__SPFJ1E-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__SPFJ1E-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__SPFJ1E-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__SPFJ1E-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__SPFJ1E-custom__badge-container.sc-ds-select{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__SPFJ1E-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__SPFJ1E-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__SPFJ1E-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__SPFJ1E-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}"}},[838,"ds-select",{dsForm:[1,"ds-form"],dsId:[1,"ds-id"],dsName:[1,"ds-name"],dsLabel:[1,"ds-label"],dsPlaceholder:[1,"ds-placeholder"],dsVariant:[1,"ds-variant"],dsClearable:[4,"ds-clearable"],dsDisabled:[4,"ds-disabled"],dsErrorText:[1,"ds-error-text"],dsIcon:[1,"ds-icon"],dsValue:[1,"ds-value"],dsLoading:[4,"ds-loading"],dsLoadingText:[1,"ds-loading-text"],dsOptionsError:[4,"ds-options-error"],dsOptionsErrorTitle:[1,"ds-options-error-title"],dsOptionsErrorText:[1,"ds-options-error-text"],dsFullWidth:[4,"ds-full-width"],dsRequired:[4,"ds-required"],value:[32],activeOption:[32],selectedOptions:[32],selectedOptionsLabel:[32],isOpen:[32],activeIndex:[32],hasFocus:[32],clearButtonRef:[32],iconRef:[32],badgeRef:[32],badgeContainerOffset:[32],texts:[32],feedback:[32],checkValidity:[64],getSelectedOption:[64],getSelectedOptions:[64]},[[0,"dsEsc","handleEscEvent"],[16,"dsLanguageChange","handleLanguageChange"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]],{activeIndex:[{activeIndexObserver:0}],clearButtonRef:[{clearButtonRefObserver:0}],badgeRef:[{clearButtonRefObserver:0}],dsPlaceholder:[{textPropObserver:0}],value:[{valueObserver:0}],dsValue:[{dsValueObserver:0}],selectedOptions:[{selectedOptionsObserver:0}],hasFocus:[{hasFocusObserver:0}],dsLoading:[{optionsMessagePropertyObserver:0}],dsOptionsError:[{optionsMessagePropertyObserver:0}]}]);u([o("ds-select-native",null),o("ds-icon",{dsName:""}),o("ds-input-validity",null),o("ds-button",null),o("ds-options",null),o("ds-control-label",null),o("ds-feedback",null)]);const M=W,N=function(){"undefined"!=typeof customElements&&["ds-select","ds-assistive-text","ds-button","ds-control-label","ds-feedback","ds-icon","ds-input-validity","ds-options","ds-select-native","ds-spinner","ds-visually-hidden"].forEach((s=>{switch(s){case"ds-select":customElements.get(l(s))||customElements.define(l(s),W);break;case"ds-assistive-text":customElements.get(l(s))||J();break;case"ds-button":customElements.get(l(s))||k();break;case"ds-control-label":customElements.get(l(s))||C();break;case"ds-feedback":customElements.get(l(s))||I();break;case"ds-icon":customElements.get(l(s))||L();break;case"ds-input-validity":customElements.get(l(s))||T();break;case"ds-options":customElements.get(l(s))||D();break;case"ds-select-native":customElements.get(l(s))||R();break;case"ds-spinner":customElements.get(l(s))||V();break;case"ds-visually-hidden":customElements.get(l(s))||B()}}))};export{M as DsSelect,N as defineCustomElement}