@uh-design-system/component-library 0.7.1 → 0.7.2-rc.0

package/dist/collection/components/01-base-components/ds-combobox/ds-combobox.js

@@ -0,0 +1,689 @@
+import { Fragment, h } from "@stencil/core";
+import classNames from "classnames";
+import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
+import { noResultsFound, removeSelection, searchOrSelectAnOption } from "../../../utils/controls/controlUtils";
+const comboboxIdGenerator = idGenerator('ds-combobox');
+export class DsCombobox {
+    el;
+    inputRef;
+    clearButtonRef;
+    optionsListRef;
+    optionsListInnerRef;
+    labelId;
+    assistiveTextId;
+    inputId;
+    buttonId;
+    optionsId;
+    inputValidityId;
+    GROUP_ITERATION_STOP = 1000;
+    dsFilterChange;
+    dsChange;
+    dsId = comboboxIdGenerator.next().value;
+    dsLabel;
+    dsAssistiveText;
+    dsIcon;
+    dsPlaceholder;
+    dsPlaceholderHidden = false;
+    dsDisabled = false;
+    dsAriaLabel;
+    dsClearable = true;
+    dsErrorText;
+    dsFilteringStrategy = 'dynamic';
+    dsLoading = false;
+    dsOptionsError = false;
+    dsNoResults;
+    isOpen = false;
+    activeOption = null;
+    selectedOption = null;
+    inputValue = '';
+    hasTopScrim = false;
+    hasBottomScrim = false;
+    hasTopScrimDark = false;
+    noResults = false;
+    selectedOptionObserver(newValue, oldValue) {
+        if (oldValue) {
+            oldValue.dsSelected = false;
+        }
+        if (newValue) {
+            newValue.dsSelected = true;
+        }
+        this.dsChange.emit(newValue?.dsValue || null);
+    }
+    inputValueObserver(newValue) {
+        this.dsFilterChange.emit(newValue);
+    }
+    isOpenObserver(newValue) {
+        if (!newValue) {
+            this.setInputValue(this.selectedOption);
+            this.getAllGroups().forEach(group => {
+                group.dsHidden = false;
+            });
+            this.getAllOptions().forEach(option => {
+                option.dsHidden = false;
+            });
+        }
+    }
+    onDsOptionClick(event) {
+        this.setSelectedOption(event.detail);
+        this.isOpen = false;
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    }
+    onFocusOut(e) {
+        const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
+        if (this.isOpen && (!nextFocused || !this.el.contains(nextFocused))) {
+            this.isOpen = false;
+            this.noResults = false;
+        }
+    }
+    componentWillLoad() {
+        this.labelId = `${this.dsId}-label`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
+        this.inputId = `${this.dsId}-input`;
+        this.buttonId = `${this.dsId}-button`;
+        this.optionsId = `${this.dsId}-options`;
+        this.inputValidityId = `${this.dsId}-input-validity`;
+        const groups = this.getAllGroups();
+        groups.forEach(group => {
+            group.dsMouseDownPreventDefault = true;
+        });
+        this.hasTopScrimDark = groups.length > 0;
+        this.getAllOptions().forEach(option => {
+            option.dsFocusOnActiveChange = false;
+            option.dsMouseDownPreventDefault = true;
+        });
+    }
+    componentDidLoad() {
+        this.updateScrimClasses();
+    }
+    componentDidUpdate() {
+        this.updateScrimClasses();
+    }
+    setSelectedOption = (option) => {
+        if (option) {
+            option.dsActive = false;
+        }
+        this.selectedOption = option;
+        this.activeOption = null;
+        this.setInputValue(option);
+    };
+    setActiveOption = (option) => {
+        if (!option)
+            return;
+        if (this.activeOption) {
+            this.activeOption.dsActive = false;
+        }
+        option.dsActive = true;
+        this.activeOption = option;
+        this.activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
+    };
+    setInputValue = async (option) => {
+        if (typeof option === 'string') {
+            this.inputValue = option;
+            return;
+        }
+        this.inputValue = (await option?.dsGetLabel()) || '';
+    };
+    getAllGroups = () => Array.from(this.el.querySelectorAll(transformTagName('ds-option-group', 'ds-combobox', this.el)));
+    getAllOptions = () => Array.from(this.el.querySelectorAll(transformTagName('ds-option', 'ds-combobox', this.el)));
+    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');
+    getOption = (selector, wrapFn) => async (option = this.activeOption) => {
+        const elementSibling = option?.[selector];
+        if (!elementSibling || !this.elementIsOption(elementSibling)) {
+            const group = await option?.dsGetGroup();
+            if (group && this.elementIsGroup(group)) {
+                let groupSibling = group[selector];
+                let count = 0;
+                while (groupSibling && count++ < this.GROUP_ITERATION_STOP) {
+                    if (this.elementIsGroup(groupSibling) && !groupSibling.dsHidden) {
+                        break;
+                    }
+                    groupSibling = groupSibling[selector];
+                }
+                if (groupSibling && this.elementIsGroup(groupSibling) && !groupSibling.dsHidden) {
+                    const options = Array.from(groupSibling.querySelectorAll(transformTagName('ds-option', 'ds-combobox', this.el))).filter(this.isSelectableOption);
+                    if (options?.length) {
+                        return selector === 'nextElementSibling' ? options[0] : options[options.length - 1];
+                    }
+                }
+            }
+            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();
+                if (this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) {
+                    this.setSelectedOption(this.activeOption);
+                    this.isOpen = false;
+                    setTimeout(() => {
+                        this.inputRef?.select();
+                    }, 0);
+                }
+                break;
+            }
+            case 'Down':
+            case 'ArrowDown': {
+                this.onNavigationKeyDown(this.getNextOption)(event, this.activeOption);
+                break;
+            }
+            case 'Up':
+            case 'ArrowUp': {
+                this.onNavigationKeyDown(this.getPreviousOption)(event, this.activeOption);
+                break;
+            }
+            case 'Home': {
+                this.onNavigationKeyDown(this.getFirstOption)(event);
+                break;
+            }
+            case 'End': {
+                this.onNavigationKeyDown(this.getLastOption)(event);
+                break;
+            }
+            case 'Tab': {
+                this.isOpen = false;
+                if ((this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) || this.selectedOption) {
+                    if (this.activeOption) {
+                        this.setSelectedOption(this.activeOption);
+                    }
+                    if (!event.shiftKey && this.dsClearable) {
+                        setTimeout(() => {
+                            this.clearButtonRef?.dsFocus();
+                        }, 0);
+                    }
+                }
+                break;
+            }
+            case 'Esc':
+            case 'Escape': {
+                this.inputRef?.blur();
+                break;
+            }
+            default: {
+                this.isOpen = true;
+                break;
+            }
+        }
+    };
+    updateGroupVisibility = async (option) => {
+        const group = await option.dsGetGroup();
+        if (group) {
+            group.dsHidden = !(await group.dsHasVisibleOptions());
+        }
+    };
+    handleInput = (event) => {
+        this.setInputValue(event.target.value);
+        if (this.dsFilteringStrategy === 'static') {
+            return;
+        }
+        let hiddenOptionsCount = 0;
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(option => {
+            option.dsHidden = !option.textContent?.toLowerCase().includes(this.inputValue.toLowerCase());
+            if (option.dsHidden) {
+                hiddenOptionsCount++;
+            }
+            this.updateGroupVisibility(option);
+        });
+        this.noResults = hiddenOptionsCount === allOptions.length;
+    };
+    openCombobox = () => {
+        this.isOpen = true;
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    };
+    handleFocus = () => {
+        if (this.dsDisabled)
+            return;
+        this.openCombobox();
+    };
+    handleToggleButtonClick = (event) => {
+        event.stopPropagation();
+        if (this.dsDisabled)
+            return;
+        if (this.isOpen) {
+            this.inputRef?.blur();
+            this.isOpen = false;
+            return;
+        }
+        this.openCombobox();
+    };
+    handleClearButtonClick = (event) => {
+        event.stopPropagation();
+        this.setInputValue('');
+        this.setSelectedOption(null);
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    };
+    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 ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
+        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 baseClass = 'ds-combobox';
+        const headerClass = `${baseClass}-header`;
+        const inputContainerClass = `${baseClass}__input-container`;
+        const optionsContainerClass = `${baseClass}__options-container`;
+        return (h(Fragment, { key: '8916d9afb3be79808c357a668b20e23cb31c623a' }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '65a4494fa15a8e5026a7c4fd286842a826db4a3f', class: headerClass }, this.dsLabel && (h("label", { key: '264850a7cac05f208cfb22b6a37ade1fa0194c91', id: this.labelId, class: `${headerClass}__label`, htmlFor: this.inputId }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: '2d010d71d3fd2d2e4bd1398b5198e35446f3e88e', class: `${headerClass}__assistive-text`, id: this.assistiveTextId }, this.dsAssistiveText)))), h("div", { key: '44cdeb371609ba414bf9df9892c2b278018ad5ad', class: classNames(baseClass, {
+                [`${baseClass}--open`]: this.isOpen,
+            }) }, h("div", { key: 'e74f0981e53dab6fd3d34e0c0d5da0871cc38ab9', class: classNames(inputContainerClass, {
+                [`${inputContainerClass}--disabled`]: this.dsDisabled,
+                [`${inputContainerClass}--invalid`]: !!this.dsErrorText,
+                [`${inputContainerClass}--open`]: this.isOpen,
+            }), onClick: () => {
+                if (this.dsDisabled)
+                    return;
+                this.openCombobox();
+            } }, this.dsIcon && h(DsIcon, { key: '7a0f2512a614dcedb9efadf2302a96e715a23869', class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), h("input", { key: 'b907d654b48732788d09dde89e3876c05e4b2490', id: this.inputId, class: `${inputContainerClass}__input`, ref: el => (this.inputRef = el), type: "text", role: "combobox", "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, "aria-describedby": ariaDescribedBy, placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || searchOrSelectAnOption(), disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onFocus: this.handleFocus, value: this.inputValue }), this.dsClearable && this.selectedOption && !this.dsDisabled && (h(DsButton, { key: '12988f1f26597e09d32e0a747242bc4cb34f5cc4', ref: el => (this.clearButtonRef = el), class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: this.handleClearButtonClick, "aria-label": removeSelection(true) })), h("div", { key: '3093ac0659ff38e55b0dc8848edf82ade9f6e033', id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabindex: -1, "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { key: '3505aebedd49a4240bc8ca5dbab1e6de01853a70', class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { key: '9c8e84f47d66479e3c2987d13eca01c9c71c9784', class: classNames(optionsContainerClass, {
+                [`${optionsContainerClass}--open`]: this.isOpen,
+            }) }, h("div", { key: '50132ed72650a586595e994c1947e43ec5294d98', ref: el => (this.optionsListRef = el), id: this.optionsId, class: classNames(`${optionsContainerClass}__options`), role: "listbox", "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId }, h("div", { key: 'c6b7d61be01aa913246003d5f8be0f688bd446fc', ref: el => (this.optionsListInnerRef = el), class: `${optionsContainerClass}__options__inner`, onScroll: this.handleScroll }, h("div", { key: 'ff6c9c62155c0fa29524fdd72257ca127590b121', 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(DsOptionsMessage, { key: '819df9db4c208e0758c3b239950ecf87ca0263a6', dsLoading: this.dsLoading, dsError: this.dsOptionsError, dsNoResults: this.dsNoResults || this.noResults, dsNoResultsTitle: this.dsNoResults || this.noResults ? noResultsFound(this.inputValue) : undefined }), h("slot", { key: '7f5e4b7082429e1d27eaf6ecde90cb07dd67d41e' }), h("div", { key: '882836a1a9644f0c7b7f5fe7a97a7809afec170e', class: classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
+                [`${optionsContainerClass}__options__inner__bottom-scrim--visible`]: this.hasBottomScrim,
+            }), "aria-hidden": "true" }))))), !!this.dsErrorText && h(DsInputValidity, { key: 'bb10e6890e8a48145f8fcb53031d9db822dcbab0', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+    }
+    static get is() { return "ds-combobox"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-combobox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsId": {
+                "type": "string",
+                "attribute": "ds-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique `id` attribute of the combobox element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "comboboxIdGenerator.next().value as string"
+            },
+            "dsLabel": {
+                "type": "string",
+                "attribute": "ds-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsAssistiveText": {
+                "type": "string",
+                "attribute": "ds-assistive-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for additional information shown below label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsIcon": {
+                "type": "string",
+                "attribute": "ds-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display at the start of the combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsPlaceholder": {
+                "type": "string",
+                "attribute": "ds-placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `placeholder` attribute of the `input` element of the rendered combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsPlaceholderHidden": {
+                "type": "boolean",
+                "attribute": "ds-placeholder-hidden",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, hides the placeholder text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsDisabled": {
+                "type": "boolean",
+                "attribute": "ds-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `disabled` attribute of the `input` element of the rendered combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsAriaLabel": {
+                "type": "string",
+                "attribute": "ds-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-label` attribute of the `input` element of the rendered combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsClearable": {
+                "type": "boolean",
+                "attribute": "ds-clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, allows the user to clear the selected option."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "dsErrorText": {
+                "type": "string",
+                "attribute": "ds-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message shown below the combobox.\nIf set, the combobox is shown in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsFilteringStrategy": {
+                "type": "string",
+                "attribute": "ds-filtering-strategy",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dynamic' | 'static'",
+                    "resolved": "\"dynamic\" | \"static\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines combobox's filtering stategy:\n- \"dynamic\" options are filtered\n- \"static\" options are not filtered\n\nBoth options emit the `dsFilterChange` event on user input.\nUse this event to filter options using \"static\" strategy."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'dynamic'"
+            },
+            "dsLoading": {
+                "type": "boolean",
+                "attribute": "ds-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a loading spinner and text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsOptionsError": {
+                "type": "boolean",
+                "attribute": "ds-options-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows an options error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsNoResults": {
+                "type": "boolean",
+                "attribute": "ds-no-results",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When using \"static\" filtering strategy use this property to indicate\nthat there are no results for the current search."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "activeOption": {},
+            "selectedOption": {},
+            "inputValue": {},
+            "hasTopScrim": {},
+            "hasBottomScrim": {},
+            "hasTopScrimDark": {},
+            "noResults": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsFilterChange",
+                "name": "dsFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when user interacts with the search input."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when user selects an option."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedOption",
+                "methodName": "selectedOptionObserver"
+            }, {
+                "propName": "inputValue",
+                "methodName": "inputValueObserver"
+            }, {
+                "propName": "isOpen",
+                "methodName": "isOpenObserver"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "dsOptionClick",
+                "method": "onDsOptionClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+declareComponentDependencies([h("ds-icon", null), h("ds-button", null), h("ds-options-message", null), h("ds-input-validity", null)]);