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

package/dist/components/ds-combobox.js

@@ -1,832 +1 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, f as forceUpdate, h, F as Fragment } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { i as idGenerator, t as transformTagName, b as debounce, a as ifDefined, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { n as noResultsFound, t as tryADifferentSearchTerm, f as thereAreOptionsToBrowse, l as loadingOptions, w as weCouldNotLoadOptions, b as tryAgainOrIfTheProblemPersists, c as atLeastOneOption, r as removeSelection, s as searchOrSelectAnOption, h as selections, m as multiselectable } from './p-BGV-ubOj.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { a as inheritAttributes, i as inheritAriaAttributes } from './p-BecId8t2.js';
-import { S as SCRIM_HEIGHT, F as FEEDBACK_RESET_TIMEOUT, b as FEEDBACK_SET_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$a } from './p-BtwuVYMk.js';
-import { d as defineCustomElement$9 } from './p-CBTcmEBq.js';
-import { d as defineCustomElement$8 } from './p-cVo5wigC.js';
-import { d as defineCustomElement$7 } from './p-3TYR8XT2.js';
-import { d as defineCustomElement$6 } from './p-DIxFOW85.js';
-import { d as defineCustomElement$5 } from './p-BVcTj6fF.js';
-import { d as defineCustomElement$4 } from './p-DojNivUE.js';
-import { d as defineCustomElement$3 } from './p-Dq55XDgV.js';
-import { d as defineCustomElement$2 } from './p-Cq_RwLX7.js';
-
-const dsComboboxCss = ".sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h:not(:has(.ds-combobox__oSBnIJ--full-width)){width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__oSBnIJ__input-container.sc-ds-combobox{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:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__oSBnIJ__input-container--disabled.sc-ds-combobox{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-combobox__oSBnIJ__input-container--disabled.sc-ds-combobox .ds-combobox__oSBnIJ__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__oSBnIJ__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__oSBnIJ__input-container--invalid.sc-ds-combobox:not(.ds-combobox__oSBnIJ__input-container--open):not(.ds-combobox__oSBnIJ__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__oSBnIJ__input-container--invalid.sc-ds-combobox:not(.ds-combobox__oSBnIJ__input-container--open):not(.ds-combobox__oSBnIJ__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__oSBnIJ__input-container.sc-ds-combobox:active:not(.ds-combobox__oSBnIJ__input-container--invalid,.ds-combobox__oSBnIJ__input-container--disabled.sc-ds-combobox,.ds-combobox__oSBnIJ__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__oSBnIJ__input-container.sc-ds-combobox:not(.ds-combobox__oSBnIJ__input-container--open,.ds-combobox__oSBnIJ__input-container.sc-ds-combobox:has(>.ds-combobox__oSBnIJ__input-container__clear-button>button:focus),.ds-combobox__oSBnIJ__input-container--invalid.sc-ds-combobox,.ds-combobox__oSBnIJ__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__oSBnIJ__input-container.sc-ds-combobox:has(>.ds-combobox__oSBnIJ__input-container__input:focus),.ds-combobox__oSBnIJ__input-container.sc-ds-combobox:has(>.ds-combobox__oSBnIJ__input-container__clear-button>button:focus){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-combobox__oSBnIJ__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-combobox__oSBnIJ__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__oSBnIJ__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__oSBnIJ__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__oSBnIJ__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__oSBnIJ__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__oSBnIJ__input-container__icon.sc-ds-combobox+.ds-combobox__oSBnIJ__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__oSBnIJ__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__oSBnIJ__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__oSBnIJ__input-container__clear-button.sc-ds-combobox,.ds-combobox__oSBnIJ__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__oSBnIJ__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__oSBnIJ__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__oSBnIJ__input-container__toggle-button__icon.sc-ds-combobox{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:inherit;z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-combobox__oSBnIJ__options-container.sc-ds-combobox{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-combobox__oSBnIJ__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__oSBnIJ__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__oSBnIJ__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__oSBnIJ__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__oSBnIJ__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__oSBnIJ__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__oSBnIJ__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__oSBnIJ__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__oSBnIJ__options-container__options__inner__top-scrim--dark.sc-ds-combobox{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:var(--ds-shadow-overflow)}.ds-combobox__oSBnIJ__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
-
-const comboboxIdGenerator = idGenerator('ds-combobox');
-const DsCombobox$1 = proxyCustomElement(class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsFilterChange = createEvent(this, "dsFilterChange");
-        this.dsMultipleChange = createEvent(this, "dsMultipleChange");
-        this.dsChange = createEvent(this, "dsChange");
-        this.dsSelectedOptionValueChange = createEvent(this, "dsSelectedOptionValueChange");
-        this.dsSelectedOptionRemoved = createEvent(this, "dsSelectedOptionRemoved");
-        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
-        this.dsValidity = createEvent(this, "dsValidity");
-        this.dsBlur = createEvent(this, "dsBlur");
-        this.dsFocus = createEvent(this, "dsFocus");
-        this.internals = this.attachInternals();
-    }
-    get el() { return this; }
-    inheritedAttributes = {};
-    internals;
-    inputRef;
-    optionsListRef;
-    optionsListInnerRef;
-    observer;
-    badgeId;
-    labelId;
-    assistiveTextId;
-    buttonId;
-    optionsId;
-    inputValidityId;
-    GROUP_ITERATION_STOP = 1000;
-    dsFilterChange;
-    dsMultipleChange;
-    dsChange;
-    dsSelectedOptionValueChange;
-    dsSelectedOptionRemoved;
-    dsSubmitInvalid;
-    dsValidity;
-    dsBlur;
-    dsFocus;
-    dsVariant = 'default';
-    dsForm;
-    dsId = comboboxIdGenerator.next().value;
-    dsName = this.dsId;
-    dsLabel;
-    dsAssistiveText;
-    dsIcon;
-    dsPlaceholder;
-    dsPlaceholderHidden = false;
-    dsDisabled = false;
-    dsAriaLabel;
-    dsClearable = true;
-    dsErrorText;
-    dsFilteringStrategy = 'dynamic';
-    dsLoading = false;
-    dsLoadingText;
-    dsOptionsError = false;
-    dsOptionsErrorTitle;
-    dsOptionsErrorText;
-    dsNoResults = false;
-    dsNoResultsTitle;
-    dsNoResultsText;
-    dsValue = null;
-    dsRequired = false;
-    dsOptional = false;
-    dsOptionalText;
-    dsFullWidth = false;
-    isOpen = false;
-    activeOption = null;
-    selectedOptions = [];
-    inputValue = '';
-    hasTopScrim = false;
-    hasBottomScrim = false;
-    hasTopScrimDark = false;
-    noResults = false;
-    hasFocus = false;
-    feedback = [];
-    forceUpdateInputValue = false;
-    preventImmediateOpen = false;
-    get DsBadge() {
-        return transformTagName('ds-badge', 'ds-combobox', this.el);
-    }
-    get DsOptionGroupTag() {
-        return transformTagName('ds-option-group', 'ds-combobox', this.el);
-    }
-    get DsOptionTag() {
-        return transformTagName('ds-option', 'ds-combobox', this.el);
-    }
-    get DsFeedback() {
-        return transformTagName('ds-feedback', 'ds-combobox', this.el);
-    }
-    getNoResultsTitle(value) {
-        if (!this.dsNoResults && !this.noResults)
-            return;
-        return this.dsNoResultsTitle || noResultsFound(value);
-    }
-    get noResultsText() {
-        if (!this.dsNoResults && !this.noResults)
-            return;
-        return this.dsNoResultsText || tryADifferentSearchTerm();
-    }
-    get isMultiple() {
-        return this.dsVariant === 'multiple';
-    }
-    async setFocus() {
-        this.inputRef?.focus();
-        this.dsFocus.emit();
-    }
-    async checkValidity() {
-        return this.internals?.checkValidity();
-    }
-    async getOptions() {
-        return this.getAllOptions();
-    }
-    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,
-        })));
-    }
-    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,
-        });
-        if (this.forceUpdateInputValue) {
-            this.forceUpdateInputValue = false;
-            this.setInputValue();
-        }
-    }
-    inputValueObserver(newValue) {
-        if (this.dsNoResults || this.noResults) {
-            this.debouncedResetFeedback.cancel();
-            const propName = this.dsNoResults ? 'dsNoResults' : 'noResults';
-            this.debouncedAppendFeedback(propName, [this.getNoResultsTitle(newValue), this.noResultsText].filter(Boolean).join(' '));
-        }
-        this.dsFilterChange.emit(newValue);
-    }
-    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.removeFeedback(key);
-        this.feedback = [...this.feedback, { key, message }];
-        this.debouncedResetFeedback();
-    };
-    removeFeedback = (key) => {
-        this.feedback = this.feedback.filter(item => item.key !== key);
-    };
-    debouncedAppendFeedback = debounce(this.appendFeedback, FEEDBACK_SET_TIMEOUT);
-    getFeedbackMessage = () => {
-        return this.feedback.length > 0 ? this.feedback[this.feedback.length - 1]?.message : '';
-    };
-    statusPropertyObserver(newValue, _oldValue, propName) {
-        if (!newValue) {
-            this.debouncedAppendFeedback.cancel();
-            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;
-        }
-        if ((propName === 'dsNoResults' && (newValue || this.noResults)) || (propName === 'noResults' && (newValue || this.dsNoResults))) {
-            this.appendFeedback(propName, [this.getNoResultsTitle(this.inputValue), this.noResultsText].filter(Boolean).join(' '));
-            return;
-        }
-    }
-    ariaAttributeObserver(newValue, _oldValue, propName) {
-        this.inheritedAttributes = {
-            ...this.inheritedAttributes,
-            [propName]: newValue,
-        };
-        forceUpdate(this);
-    }
-    valueObserver(newValue) {
-        this.setSelectedOptionsFromValue(newValue);
-    }
-    dsValueObserver(newValue) {
-        this.forceUpdateInputValue = !this.isOpen;
-        this.value = this.toValue(newValue);
-    }
-    isOpenObserver(newValue) {
-        if (newValue) {
-            document.addEventListener('click', this.handleClickOutside);
-            return;
-        }
-        document.removeEventListener('click', this.handleClickOutside);
-    }
-    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.closeCombobox('select');
-    }
-    onDsClick(event) {
-        this.handleOptionClick(event.target);
-    }
-    onDsMounted(event) {
-        const option = event.target;
-        option.dsFocusOnActiveChange = false;
-        option.dsMouseDownPreventDefault = true;
-    }
-    onDsValueChange(event) {
-        if (this.selectedOptions.some(opt => opt.dsValue === event.detail.oldValue)) {
-            const valueWithoutOld = this.withoutValue(event.detail.oldValue);
-            this.value = event.detail.newValue ? [...(valueWithoutOld || []), event.detail.newValue] : valueWithoutOld;
-        }
-    }
-    onDsLabelChange(event) {
-        if (this.selectedOptions.some(opt => opt.dsValue === event.detail.value)) {
-            this.setInputValue(this.inputValue.replace(event.detail.oldLabel, event.detail.newLabel));
-        }
-    }
-    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.hasFocus = false;
-            this.unsetActiveOption();
-            this.closeCombobox('blur');
-            this.dsValidity.emit({
-                flag: this.internals?.validity.valid ? 'valid' : 'customError',
-                message: this.internals?.validationMessage,
-            });
-        }
-    }
-    componentWillLoad() {
-        this.setDisableEventEmits(true);
-        this.badgeId = `${this.dsId}-badge`;
-        this.labelId = `${this.dsId}-label`;
-        this.assistiveTextId = `${this.dsId}-assistive-text`;
-        this.buttonId = `${this.dsId}-button`;
-        this.optionsId = `${this.dsId}-options`;
-        this.inputValidityId = `${this.dsId}-input-validity`;
-        this.inheritedAttributes = {
-            ...inheritAriaAttributes(this.el, ['aria-autocomplete', 'aria-activedescendant', 'aria-expanded', 'aria-controls', 'aria-describedby']),
-            ...inheritAttributes(this, this.el),
-        };
-        const groups = this.getAllGroups();
-        groups.forEach(group => {
-            group.dsMouseDownPreventDefault = true;
-        });
-        this.hasTopScrimDark = groups.length > 0;
-    }
-    componentDidLoad() {
-        this.updateScrimClasses();
-        this.internals?.setValidity({ valueMissing: this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)) }, atLeastOneOption(), this.inputRef);
-        this.forceUpdateInputValue = Array.isArray(this.dsValue) ? this.dsValue.length > 0 : !!this.dsValue;
-        this.value = this.toValue(this.dsValue);
-        this.observer = new MutationObserver(mutations => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
-                    const options = Array.from(mutation.removedNodes).filter(node => node.nodeType === Node.ELEMENT_NODE && this.elementIsOption(node));
-                    if (options.some(option => this.inValue(option.dsValue))) {
-                        this.dsSelectedOptionRemoved.emit();
-                        this.value = this.withoutValues(options.map(option => option.dsValue));
-                    }
-                }
-            }
-        });
-        this.observer.observe(this.optionsListRef, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    componentDidUpdate() {
-        this.updateScrimClasses();
-    }
-    handleInvalid = (e) => {
-        e.preventDefault();
-        this.dsSubmitInvalid.emit({
-            flag: 'customError',
-            message: this.internals?.validationMessage,
-        });
-    };
-    connectedCallback() {
-        if (this.internals?.form) {
-            this.el.addEventListener('invalid', this.handleInvalid);
-        }
-    }
-    disconnectedCallback() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-        if (this.internals?.form) {
-            this.el.removeEventListener('invalid', this.handleInvalid);
-        }
-        document.removeEventListener('click', this.handleClickOutside);
-        this.debouncedResetFeedback.cancel();
-        this.debouncedAppendFeedback.cancel();
-    }
-    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-combobox: No options found matching dsValues "${values.join(', ')}"`);
-            return;
-        }
-        await this.setSelectedOptions(options);
-    };
-    setSelectedOptions = async (options) => {
-        if (!this.isMultiple) {
-            this.unsetActiveOption();
-        }
-        this.internals?.setValidity({ valueMissing: this.dsRequired && options.length === 0 }, atLeastOneOption(), this.inputRef);
-        this.selectedOptions = options;
-    };
-    unsetActiveOption = () => {
-        if (!this.activeOption)
-            return;
-        this.activeOption.dsActive = false;
-        this.activeOption = null;
-    };
-    scrollToActiveOption = () => {
-        if (!this.activeOption)
-            return;
-        const optionsListInnerRect = this.optionsListInnerRef?.getBoundingClientRect();
-        const optionRect = this.activeOption.getBoundingClientRect();
-        if (!optionsListInnerRect || !optionRect)
-            return;
-        if (this.hasBottomScrim && optionRect.bottom > optionsListInnerRect.bottom - SCRIM_HEIGHT) {
-            this.optionsListInnerRef.scrollTop += optionRect.bottom - (optionsListInnerRect.bottom - SCRIM_HEIGHT);
-            return;
-        }
-        if (this.hasTopScrim && optionRect.top < optionsListInnerRect.top + SCRIM_HEIGHT) {
-            this.optionsListInnerRef.scrollTop -= optionsListInnerRect.top + SCRIM_HEIGHT - optionRect.top;
-            return;
-        }
-    };
-    setActiveOption = (option) => {
-        if (!option)
-            return;
-        const hadActiveOption = !!this.activeOption;
-        this.unsetActiveOption();
-        option.dsActive = true;
-        this.activeOption = option;
-        if (!hadActiveOption) {
-            this.activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
-            return;
-        }
-        this.scrollToActiveOption();
-    };
-    setInputValue = async (newValue) => {
-        if (typeof newValue === 'string') {
-            this.inputValue = newValue;
-            return;
-        }
-        this.inputValue = this.selectedOptions.length > 0 ? (await Promise.all(this.selectedOptions.map(opt => opt.getLabel()))).join(', ') : '';
-    };
-    getAllGroups = () => Array.from(this.el.querySelectorAll(this.DsOptionGroupTag));
-    getAllOptions = () => Array.from(this.el.querySelectorAll(this.DsOptionTag));
-    isSelectableOption = (option) => !option.dsDisabled && !option.dsHidden;
-    getSelectableOptions = () => this.getAllOptions().filter(this.isSelectableOption);
-    elementIs = (tagName) => (element) => element?.tagName.toLowerCase() === transformTagName(tagName, 'ds-combobox', this.el);
-    elementIsOption = this.elementIs('ds-option');
-    elementIsGroup = this.elementIs('ds-option-group');
-    findFirstSelectableOptionInGroup = (element, selector) => {
-        const options = Array.from(element.querySelectorAll(this.DsOptionTag)).filter(this.isSelectableOption);
-        if (options?.length) {
-            return selector === 'nextElementSibling' ? options[0] : options[options.length - 1];
-        }
-    };
-    getOption = (selector, wrapFn) => async (option = this.activeOption) => {
-        const elementSibling = option?.[selector];
-        if (!elementSibling || !this.elementIsOption(elementSibling)) {
-            const group = await option?.getGroup();
-            if (group && this.elementIsGroup(group)) {
-                let groupSibling = group[selector];
-                let count = 0;
-                while (groupSibling && count++ < this.GROUP_ITERATION_STOP) {
-                    if ((this.elementIsOption(groupSibling) && !groupSibling.dsDisabled) ||
-                        (this.elementIsGroup(groupSibling) && !groupSibling.dsHidden)) {
-                        break;
-                    }
-                    groupSibling = groupSibling[selector];
-                }
-                if (groupSibling && this.elementIsOption(groupSibling) && !groupSibling.dsDisabled) {
-                    return groupSibling;
-                }
-                if (groupSibling && this.elementIsGroup(groupSibling) && !groupSibling.dsHidden) {
-                    const option = this.findFirstSelectableOptionInGroup(groupSibling, selector);
-                    if (option) {
-                        return option;
-                    }
-                }
-            }
-            else if (elementSibling && this.elementIsGroup(elementSibling) && !elementSibling.dsHidden) {
-                const option = this.findFirstSelectableOptionInGroup(elementSibling, selector);
-                if (option) {
-                    return option;
-                }
-            }
-            return await wrapFn();
-        }
-        if (!this.isSelectableOption(elementSibling)) {
-            return await this.getOption(selector, wrapFn)(elementSibling);
-        }
-        return elementSibling;
-    };
-    getFirstOption = async () => {
-        return this.getSelectableOptions()?.[0] || null;
-    };
-    getLastOption = async () => {
-        const options = this.getSelectableOptions();
-        return options?.[options.length - 1] || null;
-    };
-    getNextOption = this.getOption('nextElementSibling', this.getFirstOption);
-    getPreviousOption = this.getOption('previousElementSibling', this.getLastOption);
-    onNavigationKeyDown = (getOptionFn) => async (event, option) => {
-        event.preventDefault();
-        if (!this.isOpen) {
-            this.isOpen = true;
-        }
-        this.setActiveOption(await getOptionFn(option));
-    };
-    handleKeyDown = (event) => {
-        switch (event.key) {
-            case 'Enter': {
-                event.preventDefault();
-                this.openCombobox('');
-                if (this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) {
-                    this.handleOptionClick(this.activeOption);
-                }
-                break;
-            }
-            case 'Down':
-            case 'ArrowDown': {
-                this.openCombobox('');
-                this.onNavigationKeyDown(this.getNextOption)(event, this.activeOption);
-                break;
-            }
-            case 'Up':
-            case 'ArrowUp': {
-                this.openCombobox('');
-                this.onNavigationKeyDown(this.getPreviousOption)(event, this.activeOption);
-                break;
-            }
-            case 'Home': {
-                this.openCombobox();
-                this.onNavigationKeyDown(this.getFirstOption)(event);
-                break;
-            }
-            case 'End': {
-                this.openCombobox();
-                this.onNavigationKeyDown(this.getLastOption)(event);
-                break;
-            }
-            case 'Tab': {
-                const hadActiveOption = !!this.activeOption;
-                this.unsetActiveOption();
-                let closeEvent;
-                if (hadActiveOption && event.shiftKey) {
-                    closeEvent = 'focus';
-                    this.preventImmediateOpen = this.isOpen;
-                }
-                this.closeCombobox(closeEvent);
-                break;
-            }
-            case 'Esc':
-            case 'Escape': {
-                if (this.isOpen) {
-                    this.closeCombobox('select');
-                    return;
-                }
-                this.inputRef?.setSelectionRange(this.inputRef?.value?.length, this.inputRef?.value?.length);
-                break;
-            }
-            case 'Shift': {
-                if (event.repeat) {
-                    break;
-                }
-                break;
-            }
-            default: {
-                this.openCombobox();
-                break;
-            }
-        }
-    };
-    updateGroupVisibility = async (option) => {
-        const group = await option.getGroup();
-        if (group) {
-            group.dsHidden = !(await group.hasVisibleOptions());
-        }
-    };
-    handleClickOutside = (event) => {
-        if (this.el.contains(event.target))
-            return;
-        this.closeCombobox('blur');
-    };
-    handleInput = async (event) => {
-        await this.setInputValue(event.target.value);
-        if (this.dsFilteringStrategy === 'static')
-            return;
-        let hiddenOptionsCount = 0;
-        const allOptions = this.getAllOptions();
-        allOptions.forEach(option => {
-            option.dsHidden = [option.textContent, option.dsLabel, option.dsDescription].every(text => !text?.toLowerCase().includes(this.inputValue.toLowerCase()));
-            if (option.dsHidden) {
-                hiddenOptionsCount++;
-            }
-            this.updateGroupVisibility(option);
-        });
-        this.noResults = hiddenOptionsCount === allOptions.length;
-    };
-    openCombobox = async (nextInputValue) => {
-        if (this.isOpen)
-            return;
-        if (typeof nextInputValue === 'string') {
-            await this.setInputValue(nextInputValue);
-        }
-        this.isOpen = true;
-        this.inputRef?.focus();
-    };
-    closeCombobox = async (event, nextInputValue) => {
-        if (!this.isOpen)
-            return;
-        this.getAllGroups().forEach(group => {
-            group.dsHidden = false;
-        });
-        this.getAllOptions().forEach(option => {
-            option.dsHidden = false;
-            option.dsActive = false;
-        });
-        this.unsetActiveOption();
-        await this.setInputValue(nextInputValue);
-        this.isOpen = false;
-        this.noResults = false;
-        if (event) {
-            requestAnimationFrame(() => {
-                this.inputRef?.[event]();
-            });
-        }
-    };
-    handleFocus = () => {
-        if (this.dsDisabled)
-            return;
-        if (this.selectedOptions?.length === 0 && !this.preventImmediateOpen) {
-            this.openCombobox();
-            return;
-        }
-        this.preventImmediateOpen = false;
-        this.inputRef?.select();
-    };
-    handleToggleButtonClick = async (event) => {
-        event.stopPropagation();
-        if (this.dsDisabled)
-            return;
-        if (this.isOpen) {
-            this.closeCombobox('focus');
-            return;
-        }
-        this.openCombobox();
-    };
-    handleClearButtonClick = (event) => {
-        event.stopPropagation();
-        this.unsetActiveOption();
-        this.setDisableEventEmits(false);
-        this.value = this.toValue(null);
-        if (this.isOpen) {
-            this.closeCombobox('focus', '');
-            return;
-        }
-        this.setInputValue('');
-        this.inputRef?.focus();
-    };
-    updateScrimClasses = () => {
-        const wrapper = this.optionsListRef;
-        const scrollEl = this.optionsListInnerRef;
-        if (!wrapper || !scrollEl)
-            return;
-        this.hasTopScrim = scrollEl.scrollTop !== 0;
-        this.hasBottomScrim = Math.ceil(scrollEl.scrollTop + scrollEl.clientHeight) < scrollEl.scrollHeight;
-    };
-    handleScroll = () => {
-        this.updateScrimClasses();
-    };
-    render() {
-        const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
-        const ariaLabel = this.dsAriaLabel || attrAriaLabel;
-        const listBoxAriaLabel = (() => {
-            const multiselectableLabel = this.isMultiple ? multiselectable() : undefined;
-            return this.dsLabel ? multiselectableLabel : [ariaLabel, multiselectableLabel].filter(Boolean).join(' ');
-        })();
-        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
-        const clearButtonAriaLabel = removeSelection(true);
-        const DsIcon = transformTagName('ds-icon', 'ds-combobox', this.el);
-        const DsButton = transformTagName('ds-button', 'ds-combobox', this.el);
-        const DsOptionsMessage = transformTagName('ds-options-message', 'ds-combobox', this.el);
-        const DsInputValidity = transformTagName('ds-input-validity', 'ds-combobox', this.el);
-        const DsControlLabel = transformTagName('ds-control-label', 'ds-combobox', this.el);
-        const baseClass = cx('ds-combobox');
-        const inputContainerClass = `${baseClass}__input-container`;
-        const optionsContainerClass = `${baseClass}__options-container`;
-        return (h(Fragment, null, h(DsControlLabel, { dsId: this.labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { name: "label" }), h("slot", { name: "assistiveText" })), h("div", { class: classNames(baseClass, {
-                [`${baseClass}--full-width`]: this.dsFullWidth,
-                [`${baseClass}--open`]: this.isOpen,
-            }) }, h("div", { class: classNames(inputContainerClass, {
-                [`${inputContainerClass}--disabled`]: this.dsDisabled,
-                [`${inputContainerClass}--invalid`]: !!this.dsErrorText,
-                [`${inputContainerClass}--open`]: this.isOpen,
-            }), onMouseDown: e => {
-                if (e.target !== this.inputRef) {
-                    e.preventDefault();
-                }
-            }, onClick: () => {
-                if (this.dsDisabled)
-                    return;
-                this.openCombobox('');
-            } }, this.dsIcon && h(DsIcon, { class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), h("input", { ref: el => (this.inputRef = el), class: `${inputContainerClass}__input`, id: this.dsId, form: this.dsForm, type: "text", placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || searchOrSelectAnOption(), disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onFocus: this.handleFocus, value: this.inputValue, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${this.labelId} ${this.badgeId}` : this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: classNames(`${inputContainerClass}__badge-container`, {
-                [`${inputContainerClass}__badge-container--padded`]: this.dsDisabled || !this.dsClearable,
-            }) }, h(this.DsBadge, { dsId: this.badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections(), dsVariant: this.dsDisabled ? 'disabled' : 'default' }))), this.dsClearable && this.selectedOptions?.length > 0 && !this.dsDisabled && (h(DsButton, { class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: this.handleClearButtonClick, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: this.dsId })), h("div", { id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabIndex: -1, "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { class: classNames(optionsContainerClass, {
-                [`${optionsContainerClass}--open`]: this.isOpen,
-            }) }, h("div", { ref: el => (this.optionsListRef = el), class: classNames(`${optionsContainerClass}__options`) }, h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText, dsNoResults: this.dsNoResults || this.noResults, dsNoResultsTitle: this.getNoResultsTitle(this.inputValue), dsNoResultsText: this.dsNoResultsText }), h("div", { id: this.optionsId, class: `${optionsContainerClass}__options__inner`, tabIndex: -1, role: "listbox", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll, "aria-multiselectable": this.isMultiple ? 'true' : 'false', "aria-label": listBoxAriaLabel, "aria-labelledby": this.dsLabel && [this.labelId, this.optionsId].join(' ') }, h("div", { class: classNames(`${optionsContainerClass}__options__inner__top-scrim`, {
-                [`${optionsContainerClass}__options__inner__top-scrim--dark`]: this.hasTopScrimDark,
-                [`${optionsContainerClass}__options__inner__top-scrim--visible`]: this.hasTopScrim,
-            }), "aria-hidden": "true" }), h("slot", null), h("div", { class: classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
-                [`${optionsContainerClass}__options__inner__bottom-scrim--visible`]: this.hasBottomScrim,
-            }), "aria-hidden": "true" }))))), 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(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "selectedOptions": ["selectedOptionsObserver"],
-        "inputValue": ["inputValueObserver"],
-        "hasFocus": ["hasFocusObserver"],
-        "dsLoading": ["statusPropertyObserver"],
-        "dsOptionsError": ["statusPropertyObserver"],
-        "dsNoResults": ["statusPropertyObserver"],
-        "noResults": ["statusPropertyObserver"],
-        "aria-label": ["ariaAttributeObserver"],
-        "value": ["valueObserver"],
-        "dsValue": ["dsValueObserver"],
-        "isOpen": ["isOpenObserver"]
-    }; }
-    static get style() { return dsComboboxCss; }
-}, [326, "ds-combobox", {
-        "dsVariant": [1, "ds-variant"],
-        "dsForm": [1, "ds-form"],
-        "dsId": [1, "ds-id"],
-        "dsName": [1, "ds-name"],
-        "dsLabel": [1, "ds-label"],
-        "dsAssistiveText": [1, "ds-assistive-text"],
-        "dsIcon": [1, "ds-icon"],
-        "dsPlaceholder": [1, "ds-placeholder"],
-        "dsPlaceholderHidden": [4, "ds-placeholder-hidden"],
-        "dsDisabled": [4, "ds-disabled"],
-        "dsAriaLabel": [1, "ds-aria-label"],
-        "dsClearable": [4, "ds-clearable"],
-        "dsErrorText": [1, "ds-error-text"],
-        "dsFilteringStrategy": [1, "ds-filtering-strategy"],
-        "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"],
-        "dsNoResults": [4, "ds-no-results"],
-        "dsNoResultsTitle": [1, "ds-no-results-title"],
-        "dsNoResultsText": [1, "ds-no-results-text"],
-        "dsValue": [1, "ds-value"],
-        "dsRequired": [4, "ds-required"],
-        "dsOptional": [4, "ds-optional"],
-        "dsOptionalText": [1, "ds-optional-text"],
-        "dsFullWidth": [4, "ds-full-width"],
-        "value": [32],
-        "isOpen": [32],
-        "activeOption": [32],
-        "selectedOptions": [32],
-        "inputValue": [32],
-        "hasTopScrim": [32],
-        "hasBottomScrim": [32],
-        "hasTopScrimDark": [32],
-        "noResults": [32],
-        "hasFocus": [32],
-        "feedback": [32],
-        "setFocus": [64],
-        "checkValidity": [64],
-        "getOptions": [64],
-        "getSelectedOption": [64],
-        "getSelectedOptions": [64]
-    }, [[0, "dsClick", "onDsClick"], [0, "dsMounted", "onDsMounted"], [0, "dsValueChange", "onDsValueChange"], [0, "dsLabelChange", "onDsLabelChange"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"]], {
-        "selectedOptions": ["selectedOptionsObserver"],
-        "inputValue": ["inputValueObserver"],
-        "hasFocus": ["hasFocusObserver"],
-        "dsLoading": ["statusPropertyObserver"],
-        "dsOptionsError": ["statusPropertyObserver"],
-        "dsNoResults": ["statusPropertyObserver"],
-        "noResults": ["statusPropertyObserver"],
-        "aria-label": ["ariaAttributeObserver"],
-        "value": ["valueObserver"],
-        "dsValue": ["dsValueObserver"],
-        "isOpen": ["isOpenObserver"]
-    }]);
-declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-button", null), h("ds-options-message", null), h("ds-input-validity", null), h("ds-control-label", null), h("ds-feedback", null)]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-combobox", "ds-assistive-text", "ds-button", "ds-control-label", "ds-feedback", "ds-icon", "ds-input-validity", "ds-options-message", "ds-spinner", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-combobox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsCombobox$1);
-            }
-            break;
-        case "ds-assistive-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "ds-control-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ds-feedback":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ds-input-validity":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ds-options-message":
-            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 DsCombobox = DsCombobox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsCombobox, defineCustomElement };
+import{p as s,M as t,c as i,f as o,h as e,F as n,t as a}from"./p-D7drWwKe.js";import{c as r}from"./p-BfTCfPZ1.js";import{i as d,t as c,b as l,a as h,d as b}from"./p-J5Ghj1_T.js";import{n as _,t as u,f as p,l as m,w as x,b as g,c as v,r as f,s as O,h as S,m as y}from"./p-DBW_vEKT.js";import{c as F}from"./p-DgTb4Jpc.js";import{a as E,i as k}from"./p-BecId8t2.js";import{S as P,F as w,b as C}from"./p-BT1Kxodd.js";import{m as J}from"./p-xR0yDVYB.js";import{d as T}from"./p-B3JeAI4k.js";import{d as I}from"./p-Bg8W_xlr.js";import{d as V}from"./p-Dib6BujO.js";import{d as A}from"./p-C3JZK1na.js";import{d as R}from"./p-cBjVr9Tq.js";import{d as D}from"./p-BRKwvv98.js";import{d as L}from"./p-qyZAXct-.js";import{d as N}from"./p-Dsn8-G8T.js";import{d as j}from"./p-B9VvQC9G.js";import{d as B}from"./p-tTA4zhDH.js";const M=d("ds-combobox"),W=s(class extends(t(J,T)){constructor(s){super(!1),!1!==s&&this.__registerHost(),this.dsFilterChange=i(this,"dsFilterChange",7),this.dsMultipleChange=i(this,"dsMultipleChange",7),this.dsChange=i(this,"dsChange",7),this.dsSelectedOptionValueChange=i(this,"dsSelectedOptionValueChange",7),this.dsSelectedOptionRemoved=i(this,"dsSelectedOptionRemoved",7),this.dsSubmitInvalid=i(this,"dsSubmitInvalid",7),this.dsValidity=i(this,"dsValidity",7),this.dsBlur=i(this,"dsBlur",7),this.dsFocus=i(this,"dsFocus",7),this.internals=this.attachInternals()}get el(){return this}inheritedAttributes={};internals;inputRef;optionsListRef;optionsListInnerRef;observer;badgeId;labelId;assistiveTextId;buttonId;optionsId;inputValidityId;GROUP_ITERATION_STOP=1e3;dsFilterChange;dsMultipleChange;dsChange;dsSelectedOptionValueChange;dsSelectedOptionRemoved;dsSubmitInvalid;dsValidity;dsBlur;dsFocus;dsVariant="default";dsForm;dsId=M.next().value;dsName=this.dsId;dsLabel;dsAssistiveText;dsIcon;dsPlaceholder;dsPlaceholderHidden=!1;dsDisabled=!1;dsAriaLabel;dsClearable=!0;dsErrorText;dsFilteringStrategy="dynamic";dsLoading=!1;dsLoadingText;dsOptionsError=!1;dsOptionsErrorTitle;dsOptionsErrorText;dsNoResults=!1;dsNoResultsTitle;dsNoResultsText;dsValue=null;dsRequired=!1;dsOptional=!1;dsOptionalText;dsFullWidth=!1;isOpen=!1;activeOption=null;selectedOptions=[];inputValue="";hasTopScrim=!1;hasBottomScrim=!1;hasTopScrimDark=!1;noResults=!1;hasFocus=!1;feedback=[];forceUpdateInputValue=!1;preventImmediateOpen=!1;get DsBadge(){return c("ds-badge","ds-combobox",this.el)}get DsOptionGroupTag(){return c("ds-option-group","ds-combobox",this.el)}get DsOptionTag(){return c("ds-option","ds-combobox",this.el)}get DsFeedback(){return c("ds-feedback","ds-combobox",this.el)}getNoResultsTitle(s){if(this.dsNoResults||this.noResults)return this.dsNoResultsTitle||_(s)}get noResultsText(){if(this.dsNoResults||this.noResults)return this.dsNoResultsText||u()}get isMultiple(){return"multiple"===this.dsVariant}async setFocus(){this.inputRef?.focus(),this.dsFocus.emit()}async checkValidity(){return this.internals?.checkValidity()}async getOptions(){return this.getAllOptions()}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}))))}selectedOptionsObserver(s,t){const i=s.map((s=>s.dsValue)),o=t?.map((s=>s.dsValue))||[],e=o.filter((s=>!i.includes(s))),n=i.filter((s=>!o.includes(s))),a=e.length>0||n.length>0;t?.forEach((s=>s.dsSelected=!1)),s.forEach((s=>s.dsSelected=!0));const r=this.getShouldEmit([a]);this.setDisableEventEmits(!0),r&&(this.dsMultipleChange.emit({values:i,added:n,removed:e}),this.dsChange.emit(i[0]||null)),this.dsValidity.emit({flag:this.internals?.validity.valid?"valid":"customError",message:this.internals?.validationMessage}),this.forceUpdateInputValue&&(this.forceUpdateInputValue=!1,this.setInputValue())}inputValueObserver(s){(this.dsNoResults||this.noResults)&&(this.debouncedResetFeedback.cancel(),this.debouncedAppendFeedback(this.dsNoResults?"dsNoResults":"noResults",[this.getNoResultsTitle(s),this.noResultsText].filter(Boolean).join(" "))),this.dsFilterChange.emit(s)}hasFocusObserver(s){s?this.dsFocus.emit():this.dsBlur.emit()}resetFeedback=()=>{this.feedback=[],o(this)};debouncedResetFeedback=l(this.resetFeedback,w);appendFeedback=(s,t)=>{this.removeFeedback(s),this.feedback=[...this.feedback,{key:s,message:t}],this.debouncedResetFeedback()};removeFeedback=s=>{this.feedback=this.feedback.filter((t=>t.key!==s))};debouncedAppendFeedback=l(this.appendFeedback,C);getFeedbackMessage=()=>this.feedback.length>0?this.feedback[this.feedback.length-1]?.message:"";statusPropertyObserver(s,t,i){if(!s)return this.debouncedAppendFeedback.cancel(),this.removeFeedback(i),void(0===this.feedback.length&&this.appendFeedback("default",p()));"dsLoading"===i&&s?this.appendFeedback(i,this.dsLoadingText||m()):"dsOptionsError"===i&&s?this.appendFeedback(i,this.dsOptionsErrorText||`${x()} ${g()}`):("dsNoResults"===i&&(s||this.noResults)||"noResults"===i&&(s||this.dsNoResults))&&this.appendFeedback(i,[this.getNoResultsTitle(this.inputValue),this.noResultsText].filter(Boolean).join(" "))}ariaAttributeObserver(s,t,i){this.inheritedAttributes={...this.inheritedAttributes,[i]:s},o(this)}valueObserver(s){this.setSelectedOptionsFromValue(s)}dsValueObserver(s){this.forceUpdateInputValue=!this.isOpen,this.value=this.toValue(s)}isOpenObserver(s){s?document.addEventListener("click",this.handleClickOutside):document.removeEventListener("click",this.handleClickOutside)}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.closeCombobox("select"))}onDsClick(s){this.handleOptionClick(s.target)}onDsMounted(s){const t=s.target;t.dsFocusOnActiveChange=!1,t.dsMouseDownPreventDefault=!0}onDsValueChange(s){if(this.selectedOptions.some((t=>t.dsValue===s.detail.oldValue))){const t=this.withoutValue(s.detail.oldValue);this.value=s.detail.newValue?[...t||[],s.detail.newValue]:t}}onDsLabelChange(s){this.selectedOptions.some((t=>t.dsValue===s.detail.value))&&this.setInputValue(this.inputValue.replace(s.detail.oldLabel,s.detail.newLabel))}onFocusIn(){this.hasFocus=!0}onFocusOut(s){const t=s&&"relatedTarget"in s?s.relatedTarget:null;(!t||!this.el.contains(t))&&(this.hasFocus=!1,this.unsetActiveOption(),this.closeCombobox("blur"),this.dsValidity.emit({flag:this.internals?.validity.valid?"valid":"customError",message:this.internals?.validationMessage}))}componentWillLoad(){this.setDisableEventEmits(!0),this.badgeId=this.dsId+"-badge",this.labelId=this.dsId+"-label",this.assistiveTextId=this.dsId+"-assistive-text",this.buttonId=this.dsId+"-button",this.optionsId=this.dsId+"-options",this.inputValidityId=this.dsId+"-input-validity",this.inheritedAttributes={...k(this.el,["aria-autocomplete","aria-activedescendant","aria-expanded","aria-controls","aria-describedby"]),...E(this,this.el)};const s=this.getAllGroups();s.forEach((s=>{s.dsMouseDownPreventDefault=!0})),this.hasTopScrimDark=s.length>0}componentDidLoad(){this.updateScrimClasses(),this.internals?.setValidity({valueMissing:this.dsRequired&&(!this.dsValue||Array.isArray(this.dsValue)&&0===this.dsValue.length)},v(),this.inputRef),this.forceUpdateInputValue=Array.isArray(this.dsValue)?this.dsValue.length>0:!!this.dsValue,this.value=this.toValue(this.dsValue),this.observer=new MutationObserver((s=>{for(const t of s)if("childList"===t.type&&t.removedNodes.length>0){const s=Array.from(t.removedNodes).filter((s=>s.nodeType===Node.ELEMENT_NODE&&this.elementIsOption(s)));s.some((s=>this.inValue(s.dsValue)))&&(this.dsSelectedOptionRemoved.emit(),this.value=this.withoutValues(s.map((s=>s.dsValue))))}})),this.observer.observe(this.optionsListRef,{childList:!0,subtree:!0})}componentDidUpdate(){this.updateScrimClasses()}handleInvalid=s=>{s.preventDefault(),this.dsSubmitInvalid.emit({flag:"customError",message:this.internals?.validationMessage})};connectedCallback(){this.internals?.form&&this.el.addEventListener("invalid",this.handleInvalid)}disconnectedCallback(){this.observer&&this.observer.disconnect(),this.internals?.form&&this.el.removeEventListener("invalid",this.handleInvalid),document.removeEventListener("click",this.handleClickOutside),this.debouncedResetFeedback.cancel(),this.debouncedAppendFeedback.cancel()}setSelectedOptionsFromValue=async s=>{if(!s||0===s.length)return void await this.setSelectedOptions([]);const t=this.getAllOptions().filter((t=>s.includes(t.dsValue)));0!==t.length?await this.setSelectedOptions(t):console.warn(`ds-combobox: No options found matching dsValues "${s.join(", ")}"`)};setSelectedOptions=async s=>{this.isMultiple||this.unsetActiveOption(),this.internals?.setValidity({valueMissing:this.dsRequired&&0===s.length},v(),this.inputRef),this.selectedOptions=s};unsetActiveOption=()=>{this.activeOption&&(this.activeOption.dsActive=!1,this.activeOption=null)};scrollToActiveOption=()=>{if(!this.activeOption)return;const s=this.optionsListInnerRef?.getBoundingClientRect(),t=this.activeOption.getBoundingClientRect();s&&t&&(this.hasBottomScrim&&t.bottom>s.bottom-P?this.optionsListInnerRef.scrollTop+=t.bottom-(s.bottom-P):this.hasTopScrim&&t.top<s.top+P&&(this.optionsListInnerRef.scrollTop-=s.top+P-t.top))};setActiveOption=s=>{if(!s)return;const t=!!this.activeOption;this.unsetActiveOption(),s.dsActive=!0,this.activeOption=s,t?this.scrollToActiveOption():this.activeOption.scrollIntoView({behavior:"instant",block:"center"})};setInputValue=async s=>{this.inputValue="string"!=typeof s?this.selectedOptions.length>0?(await Promise.all(this.selectedOptions.map((s=>s.getLabel())))).join(", "):"":s};getAllGroups=()=>Array.from(this.el.querySelectorAll(this.DsOptionGroupTag));getAllOptions=()=>Array.from(this.el.querySelectorAll(this.DsOptionTag));isSelectableOption=s=>!s.dsDisabled&&!s.dsHidden;getSelectableOptions=()=>this.getAllOptions().filter(this.isSelectableOption);elementIs=s=>t=>t?.tagName.toLowerCase()===c(s,"ds-combobox",this.el);elementIsOption=this.elementIs("ds-option");elementIsGroup=this.elementIs("ds-option-group");findFirstSelectableOptionInGroup=(s,t)=>{const i=Array.from(s.querySelectorAll(this.DsOptionTag)).filter(this.isSelectableOption);if(i?.length)return"nextElementSibling"===t?i[0]:i[i.length-1]};getOption=(s,t)=>async(i=this.activeOption)=>{const o=i?.[s];if(!o||!this.elementIsOption(o)){const e=await(i?.getGroup());if(e&&this.elementIsGroup(e)){let t=e[s],i=0;for(;t&&i++<this.GROUP_ITERATION_STOP&&!(this.elementIsOption(t)&&!t.dsDisabled||this.elementIsGroup(t)&&!t.dsHidden);)t=t[s];if(t&&this.elementIsOption(t)&&!t.dsDisabled)return t;if(t&&this.elementIsGroup(t)&&!t.dsHidden){const i=this.findFirstSelectableOptionInGroup(t,s);if(i)return i}}else if(o&&this.elementIsGroup(o)&&!o.dsHidden){const t=this.findFirstSelectableOptionInGroup(o,s);if(t)return t}return await t()}return this.isSelectableOption(o)?o:await this.getOption(s,t)(o)};getFirstOption=async()=>this.getSelectableOptions()?.[0]||null;getLastOption=async()=>{const s=this.getSelectableOptions();return s?.[s.length-1]||null};getNextOption=this.getOption("nextElementSibling",this.getFirstOption);getPreviousOption=this.getOption("previousElementSibling",this.getLastOption);onNavigationKeyDown=s=>async(t,i)=>{t.preventDefault(),this.isOpen||(this.isOpen=!0),this.setActiveOption(await s(i))};handleKeyDown=s=>{switch(s.key){case"Enter":s.preventDefault(),this.openCombobox(""),!this.activeOption||this.activeOption.dsDisabled||this.activeOption.dsHidden||this.handleOptionClick(this.activeOption);break;case"Down":case"ArrowDown":this.openCombobox(""),this.onNavigationKeyDown(this.getNextOption)(s,this.activeOption);break;case"Up":case"ArrowUp":this.openCombobox(""),this.onNavigationKeyDown(this.getPreviousOption)(s,this.activeOption);break;case"Home":this.openCombobox(),this.onNavigationKeyDown(this.getFirstOption)(s);break;case"End":this.openCombobox(),this.onNavigationKeyDown(this.getLastOption)(s);break;case"Tab":{const t=!!this.activeOption;let i;this.unsetActiveOption(),t&&s.shiftKey&&(i="focus",this.preventImmediateOpen=this.isOpen),this.closeCombobox(i);break}case"Esc":case"Escape":if(this.isOpen)return void this.closeCombobox("select");this.inputRef?.setSelectionRange(this.inputRef?.value?.length,this.inputRef?.value?.length);break;case"Shift":if(s.repeat)break;break;default:this.openCombobox()}};updateGroupVisibility=async s=>{const t=await s.getGroup();t&&(t.dsHidden=!await t.hasVisibleOptions())};handleClickOutside=s=>{this.el.contains(s.target)||this.closeCombobox("blur")};handleInput=async s=>{if(await this.setInputValue(s.target.value),"static"===this.dsFilteringStrategy)return;let t=0;const i=this.getAllOptions();i.forEach((s=>{s.dsHidden=[s.textContent,s.dsLabel,s.dsDescription].every((s=>!s?.toLowerCase().includes(this.inputValue.toLowerCase()))),s.dsHidden&&t++,this.updateGroupVisibility(s)})),this.noResults=t===i.length};openCombobox=async s=>{this.isOpen||("string"==typeof s&&await this.setInputValue(s),this.isOpen=!0,this.inputRef?.focus())};closeCombobox=async(s,t)=>{this.isOpen&&(this.getAllGroups().forEach((s=>{s.dsHidden=!1})),this.getAllOptions().forEach((s=>{s.dsHidden=!1,s.dsActive=!1})),this.unsetActiveOption(),await this.setInputValue(t),this.isOpen=!1,this.noResults=!1,s&&requestAnimationFrame((()=>{this.inputRef?.[s]()})))};handleFocus=()=>{this.dsDisabled||(0!==this.selectedOptions?.length||this.preventImmediateOpen?(this.preventImmediateOpen=!1,this.inputRef?.select()):this.openCombobox())};handleToggleButtonClick=async s=>{s.stopPropagation(),this.dsDisabled||(this.isOpen?this.closeCombobox("focus"):this.openCombobox())};handleClearButtonClick=s=>{s.stopPropagation(),this.unsetActiveOption(),this.setDisableEventEmits(!1),this.value=this.toValue(null),this.isOpen?this.closeCombobox("focus",""):(this.setInputValue(""),this.inputRef?.focus())};updateScrimClasses=()=>{const s=this.optionsListInnerRef;this.optionsListRef&&s&&(this.hasTopScrim=0!==s.scrollTop,this.hasBottomScrim=Math.ceil(s.scrollTop+s.clientHeight)<s.scrollHeight)};handleScroll=()=>{this.updateScrimClasses()};render(){const{"aria-label":s,...t}=this.inheritedAttributes,i=this.dsAriaLabel||s,o=(()=>{const s=this.isMultiple?y():void 0;return this.dsLabel?s:[i,s].filter(Boolean).join(" ")})(),a=[!!this.dsAssistiveText&&this.assistiveTextId,!!this.dsErrorText&&this.inputValidityId].filter(Boolean).join(" "),d=f(!0),l=c("ds-icon","ds-combobox",this.el),b=c("ds-button","ds-combobox",this.el),_=c("ds-options-message","ds-combobox",this.el),u=c("ds-input-validity","ds-combobox",this.el),p=c("ds-control-label","ds-combobox",this.el),m=F("ds-combobox"),x=m+"__input-container",g=m+"__options-container";return e(n,null,e(p,{dsId:this.labelId,dsHtmlFor:this.dsId,dsLabel:this.dsLabel,dsRequired:this.dsRequired,dsOptional:this.dsOptional,dsOptionalText:this.dsOptionalText,dsAssistiveText:this.dsAssistiveText,dsAssistiveTextId:this.assistiveTextId},e("slot",{name:"label"}),e("slot",{name:"assistiveText"})),e("div",{class:r(m,{[m+"--full-width"]:this.dsFullWidth,[m+"--open"]:this.isOpen})},e("div",{class:r(x,{[x+"--disabled"]:this.dsDisabled,[x+"--invalid"]:!!this.dsErrorText,[x+"--open"]:this.isOpen}),onMouseDown:s=>{s.target!==this.inputRef&&s.preventDefault()},onClick:()=>{this.dsDisabled||this.openCombobox("")}},this.dsIcon&&e(l,{class:x+"__icon",dsName:this.dsIcon}),e("input",{ref:s=>this.inputRef=s,class:x+"__input",id:this.dsId,form:this.dsForm,type:"text",placeholder:this.dsPlaceholderHidden?void 0:this.dsPlaceholder||O(),disabled:this.dsDisabled,onKeyDown:this.handleKeyDown,onInput:this.handleInput,onFocus:this.handleFocus,value:this.inputValue,role:"combobox","aria-required":this.dsRequired?"true":"false","aria-autocomplete":"list","aria-activedescendant":this.activeOption?.dsId||"","aria-label":this.dsLabel?void 0:i,"aria-labelledby":this.isMultiple&&this.selectedOptions?.length>0?`${this.labelId} ${this.badgeId}`:this.labelId,"aria-expanded":this.isOpen+"","aria-controls":this.optionsId,...h("aria-describedby",a),...t}),this.isMultiple&&this.selectedOptions?.length>0&&e("div",{class:r(x+"__badge-container",{[x+"__badge-container--padded"]:this.dsDisabled||!this.dsClearable})},e(this.DsBadge,{dsId:this.badgeId,dsText:""+this.selectedOptions.length,dsHiddenAssistiveText:S(),dsVariant:this.dsDisabled?"disabled":"default"})),this.dsClearable&&this.selectedOptions?.length>0&&!this.dsDisabled&&e(b,{class:x+"__clear-button",dsVariant:"supplementary",dsIcon:"cancel_fill",dsColour:"black",dsIconTitle:d,dsIconAriaLabel:d,onClick:this.handleClearButtonClick,dsAriaLabel:d,dsAriaDescribedby:this.dsId}),e("div",{id:this.buttonId,class:x+"__toggle-button",role:"button",tabIndex:-1,"aria-label":this.dsLabel?void 0:i,"aria-labelledby":this.dsLabel&&this.labelId,"aria-expanded":this.isOpen+"","aria-controls":this.optionsId,onClick:this.handleToggleButtonClick},e(l,{class:x+"__toggle-button__icon",dsName:this.isOpen?"keyboard_arrow_up":"keyboard_arrow_down"}))),e("div",{class:r(g,{[g+"--open"]:this.isOpen})},e("div",{ref:s=>this.optionsListRef=s,class:r(g+"__options")},e(_,{dsLoading:this.dsLoading,dsLoadingText:this.dsLoadingText,dsError:this.dsOptionsError,dsErrorTitle:this.dsOptionsErrorTitle,dsErrorText:this.dsOptionsErrorText,dsNoResults:this.dsNoResults||this.noResults,dsNoResultsTitle:this.getNoResultsTitle(this.inputValue),dsNoResultsText:this.dsNoResultsText}),e("div",{id:this.optionsId,class:g+"__options__inner",tabIndex:-1,role:"listbox",ref:s=>this.optionsListInnerRef=s,onScroll:this.handleScroll,"aria-multiselectable":this.isMultiple?"true":"false","aria-label":o,"aria-labelledby":this.dsLabel&&[this.labelId,this.optionsId].join(" ")},e("div",{class:r(g+"__options__inner__top-scrim",{[g+"__options__inner__top-scrim--dark"]:this.hasTopScrimDark,[g+"__options__inner__top-scrim--visible"]:this.hasTopScrim}),"aria-hidden":"true"}),e("slot",null),e("div",{class:r(g+"__options__inner__bottom-scrim",{[g+"__options__inner__bottom-scrim--visible"]:this.hasBottomScrim}),"aria-hidden":"true"}))))),this.internals?.form&&this.internals?.validity.valid&&this.selectedOptions.map((s=>e("input",{type:"hidden",name:this.dsName,value:s.dsValue,key:s.dsValue}))),e(u,{id:this.inputValidityId,dsText:this.dsErrorText,dsType:"error"}),e(this.DsFeedback,{dsSrOnly:!0,dsSrOnlyTag:"span"},this.getFeedbackMessage()))}static get formAssociated(){return!0}static get watchers(){return{selectedOptions:[{selectedOptionsObserver:0}],inputValue:[{inputValueObserver:0}],hasFocus:[{hasFocusObserver:0}],dsLoading:[{statusPropertyObserver:0}],dsOptionsError:[{statusPropertyObserver:0}],dsNoResults:[{statusPropertyObserver:0}],noResults:[{statusPropertyObserver:0}],"aria-label":[{ariaAttributeObserver:0}],value:[{valueObserver:0}],dsValue:[{dsValueObserver:0}],isOpen:[{isOpenObserver:0}]}}static get style(){return".sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h:not(:has(.ds-combobox__SPFJ1E--full-width)){width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__SPFJ1E__input-container.sc-ds-combobox{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:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__SPFJ1E__input-container--disabled.sc-ds-combobox{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-combobox__SPFJ1E__input-container--disabled.sc-ds-combobox .ds-combobox__SPFJ1E__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__SPFJ1E__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__SPFJ1E__input-container--invalid.sc-ds-combobox:not(.ds-combobox__SPFJ1E__input-container--open):not(.ds-combobox__SPFJ1E__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__SPFJ1E__input-container--invalid.sc-ds-combobox:not(.ds-combobox__SPFJ1E__input-container--open):not(.ds-combobox__SPFJ1E__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__SPFJ1E__input-container.sc-ds-combobox:active:not(.ds-combobox__SPFJ1E__input-container--invalid,.ds-combobox__SPFJ1E__input-container--disabled.sc-ds-combobox,.ds-combobox__SPFJ1E__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__SPFJ1E__input-container.sc-ds-combobox:not(.ds-combobox__SPFJ1E__input-container--open,.ds-combobox__SPFJ1E__input-container.sc-ds-combobox:has(>.ds-combobox__SPFJ1E__input-container__clear-button>button:focus),.ds-combobox__SPFJ1E__input-container--invalid.sc-ds-combobox,.ds-combobox__SPFJ1E__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__SPFJ1E__input-container.sc-ds-combobox:has(>.ds-combobox__SPFJ1E__input-container__input:focus),.ds-combobox__SPFJ1E__input-container.sc-ds-combobox:has(>.ds-combobox__SPFJ1E__input-container__clear-button>button:focus){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-combobox__SPFJ1E__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-combobox__SPFJ1E__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__SPFJ1E__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__SPFJ1E__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__SPFJ1E__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__SPFJ1E__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__SPFJ1E__input-container__icon.sc-ds-combobox+.ds-combobox__SPFJ1E__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__SPFJ1E__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__SPFJ1E__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__SPFJ1E__input-container__clear-button.sc-ds-combobox,.ds-combobox__SPFJ1E__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__SPFJ1E__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__SPFJ1E__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__SPFJ1E__input-container__toggle-button__icon.sc-ds-combobox{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:inherit;z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-combobox__SPFJ1E__options-container.sc-ds-combobox{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-combobox__SPFJ1E__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__SPFJ1E__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__SPFJ1E__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim--dark.sc-ds-combobox{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:var(--ds-shadow-overflow)}.ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}"}},[838,"ds-combobox",{dsVariant:[1,"ds-variant"],dsForm:[1,"ds-form"],dsId:[1,"ds-id"],dsName:[1,"ds-name"],dsLabel:[1,"ds-label"],dsAssistiveText:[1,"ds-assistive-text"],dsIcon:[1,"ds-icon"],dsPlaceholder:[1,"ds-placeholder"],dsPlaceholderHidden:[4,"ds-placeholder-hidden"],dsDisabled:[4,"ds-disabled"],dsAriaLabel:[1,"ds-aria-label"],dsClearable:[4,"ds-clearable"],dsErrorText:[1,"ds-error-text"],dsFilteringStrategy:[1,"ds-filtering-strategy"],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"],dsNoResults:[4,"ds-no-results"],dsNoResultsTitle:[1,"ds-no-results-title"],dsNoResultsText:[1,"ds-no-results-text"],dsValue:[1,"ds-value"],dsRequired:[4,"ds-required"],dsOptional:[4,"ds-optional"],dsOptionalText:[1,"ds-optional-text"],dsFullWidth:[4,"ds-full-width"],value:[32],isOpen:[32],activeOption:[32],selectedOptions:[32],inputValue:[32],hasTopScrim:[32],hasBottomScrim:[32],hasTopScrimDark:[32],noResults:[32],hasFocus:[32],feedback:[32],setFocus:[64],checkValidity:[64],getOptions:[64],getSelectedOption:[64],getSelectedOptions:[64]},[[0,"dsClick","onDsClick"],[0,"dsMounted","onDsMounted"],[0,"dsValueChange","onDsValueChange"],[0,"dsLabelChange","onDsLabelChange"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]],{selectedOptions:[{selectedOptionsObserver:0}],inputValue:[{inputValueObserver:0}],hasFocus:[{hasFocusObserver:0}],dsLoading:[{statusPropertyObserver:0}],dsOptionsError:[{statusPropertyObserver:0}],dsNoResults:[{statusPropertyObserver:0}],noResults:[{statusPropertyObserver:0}],"aria-label":[{ariaAttributeObserver:0}],value:[{valueObserver:0}],dsValue:[{dsValueObserver:0}],isOpen:[{isOpenObserver:0}]}]);b([e("ds-icon",{dsName:""}),e("ds-button",null),e("ds-options-message",null),e("ds-input-validity",null),e("ds-control-label",null),e("ds-feedback",null)]);const z=W,G=function(){"undefined"!=typeof customElements&&["ds-combobox","ds-assistive-text","ds-button","ds-control-label","ds-feedback","ds-icon","ds-input-validity","ds-options-message","ds-spinner","ds-visually-hidden"].forEach((s=>{switch(s){case"ds-combobox":customElements.get(a(s))||customElements.define(a(s),W);break;case"ds-assistive-text":customElements.get(a(s))||I();break;case"ds-button":customElements.get(a(s))||V();break;case"ds-control-label":customElements.get(a(s))||A();break;case"ds-feedback":customElements.get(a(s))||R();break;case"ds-icon":customElements.get(a(s))||D();break;case"ds-input-validity":customElements.get(a(s))||L();break;case"ds-options-message":customElements.get(a(s))||N();break;case"ds-spinner":customElements.get(a(s))||j();break;case"ds-visually-hidden":customElements.get(a(s))||B()}}))};export{z as DsCombobox,G as defineCustomElement}