@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/collection/components/forms/select/select.js

@@ -0,0 +1,1051 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h } from "@stencil/core";
+import { inheritAttributes, Logger, OneOf, Type, stopEventBubbling, raf, watchInvalidTextSlot, setFormValue, } from "../../../utils/index";
+import { defaultConfig, ListenToConfig } from "../../../global/index";
+import { Field } from "../input/field.util";
+import { INPUT_COLORS } from "../input/input.interfaces";
+import { SelectPickerController, buildSlimData } from "./select.picker";
+/**
+ * Select renders an accessible single- or multi-select dropdown backed by Slim Select,
+ * with full form association and the standard DS field wrapper (label, description, validation).
+ *
+ * @slot - Optional ds-select-option / ds-select-optgroup elements, as an HTML-only alternative
+ * to the options / optionGroups props. Ignored whenever options or optionGroups is non-empty.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
+ * @part inner - The inner wrapper element containing label, control, and description.
+ * @part label - The label element.
+ * @part control - The control container wrapping the slim-select trigger.
+ * @part description - The description / validation message element.
+ */
+export class DsSelect {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.initialValue = null;
+        this.selectId = `ds-select-${SelectIds++}`;
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.slottedOptions = [];
+        this.hasInvalidTextSlotContent = false;
+        this.slottedOptionGroups = [];
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * The current value of the select.
+         * In single mode: `string | null`.
+         * In multiple mode: `string[]` (array of selected values). As an HTML attribute, multiple
+         * values can also be passed as a comma-separated string, e.g. `value="it,ch"`.
+         */
+        this.value = null;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.selectId;
+        /**
+         * The label displayed above the select field.
+         */
+        this.label = '';
+        /**
+         * The description displayed below the select field.
+         */
+        this.description = '';
+        /**
+         * Defines the color state of the select field.
+         */
+        this.color = 'primary';
+        /**
+         * If `true`, the component renders in an invalid state.
+         */
+        this.invalid = false;
+        /**
+         * Validation message shown when `invalid` is true.
+         */
+        this.invalidText = '';
+        /**
+         * If `true`, the user must select a value before submitting the form.
+         */
+        this.required = true;
+        /**
+         * If `true`, the select is non-interactive and excluded from form submission.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the value cannot be changed by the user.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user can select multiple options.
+         * The `value` prop and `dsChange` event will carry a `string[]` instead of `string | null`.
+         */
+        this.multiple = false;
+        /**
+         * If `true`, a search input is shown inside the dropdown to filter options.
+         */
+        this.searchable = false;
+        /**
+         * If `true`, a clear button is shown inside the trigger that resets the value to `null` (single mode only).
+         */
+        this.clearable = false;
+        /**
+         * Placeholder text shown when no option is selected.
+         */
+        this.placeholder = '';
+        /**
+         * The list of selectable options (flat).
+         * Use `optionGroups` when options should be grouped under a label.
+         * If both are set, `optionGroups` takes precedence.
+         */
+        this.options = [];
+        /**
+         * The list of option groups. Each group has a `label` and an `options` array.
+         * When set, `options` is ignored.
+         */
+        this.optionGroups = [];
+        /**
+         * If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration
+         * applies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op
+         * in other framework integrations.
+         */
+        this.autoInvalidOff = false;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleSlotChange = () => {
+            this.readOptionsFromSlot();
+            this.refreshSlimData();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    valueChanged(newVal) {
+        const normalized = this.normalizeValue(newVal);
+        if (normalized !== newVal) {
+            this.value = normalized;
+            return;
+        }
+        this.syncFormValue(normalized);
+        if (!this.picker)
+            return;
+        this.picker.setSelected(normalized !== null && normalized !== void 0 ? normalized : []);
+    }
+    disabledChanged() {
+        this.syncDisabledState();
+    }
+    readonlyChanged() {
+        this.syncDisabledState();
+    }
+    optionsChanged() {
+        this.refreshSlimData();
+    }
+    optionGroupsChanged() {
+        this.refreshSlimData();
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.value = this.normalizeValue(this.value);
+        this.initialValue = this.value;
+        this.syncFormValue(this.value);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    }
+    componentDidLoad() {
+        if (!this.selectEl || !this.popupEl || !this.el.shadowRoot)
+            return;
+        // `multiple` may not yet reflect its final attribute-derived value at connectedCallback time,
+        // so a comma-separated string value can slip through un-split. Re-normalize here, once every
+        // prop is guaranteed settled, before it's baked into the picker's initial selection.
+        const normalizedValue = this.normalizeValue(this.value);
+        if (normalizedValue !== this.value)
+            this.value = normalizedValue;
+        this.readOptionsFromSlot();
+        // `slim-select` (the picker library) uses `MutationObserver` unconditionally during setup —
+        // unavailable in Node's SSR mock-doc (`@baloise/ds-core/hydrate`). The picker only matters for
+        // user interaction, which SSR output can't have, so skip it there.
+        if (typeof MutationObserver === 'undefined') {
+            this.syncFormValue(this.value);
+            this.initialValue = this.value;
+            return;
+        }
+        this.picker = new SelectPickerController({
+            selectEl: this.selectEl,
+            popupEl: this.popupEl,
+            shadowRoot: this.el.shadowRoot,
+            triggerId: this.selectId,
+            language: this.language,
+            placeholder: this.placeholder,
+            searchable: this.searchable,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            multiple: this.multiple,
+            clearable: this.clearable,
+            data: this.buildSlimData(),
+            onChange: newVal => this.handleAfterChange(newVal),
+            onOpen: () => {
+                this.focused = true;
+                this.dsFocus.emit(new FocusEvent('focus'));
+            },
+            onClose: () => {
+                this.focused = false;
+                this.dsBlur.emit(new FocusEvent('blur'));
+            },
+        });
+        this.syncFormValue(this.value);
+        this.initialValue = this.value;
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.picker = undefined;
+        (_b = this.disconnectInvalidTextSlotWatcher) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToClick(ev) {
+        if ((this.disabled || this.readonly) && ev.target === this.el) {
+            stopEventBubbling(ev);
+        }
+    }
+    listenToReset(ev) {
+        const form = ev.target;
+        if (form === null || form === void 0 ? void 0 : form.contains(this.el)) {
+            this.value = this.initialValue;
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        var _a;
+        this.language = state.language;
+        this.region = state.region;
+        if (this.searchable) {
+            (_a = this.picker) === null || _a === void 0 ? void 0 : _a.updateSearchPlaceholder(state.language);
+        }
+    }
+    /**
+     * Opens the select dropdown.
+     */
+    async open() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.open();
+    }
+    /**
+     * Closes the select dropdown.
+     */
+    async close() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    /**
+     * Sets focus on the select trigger.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Removes focus from the select trigger.
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    handleAfterChange(newVal) {
+        var _a, _b;
+        const selected = newVal.filter(o => !o.placeholder);
+        if (this.multiple) {
+            const values = selected.map(o => o.value);
+            this.syncFormValue(values);
+            this.value = values;
+            this.dsChange.emit(values);
+        }
+        else {
+            const value = (_b = (_a = selected[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+            this.syncFormValue(value);
+            this.value = value;
+            this.dsChange.emit(value);
+            raf(() => { var _a; return (_a = this.picker) === null || _a === void 0 ? void 0 : _a.close(); });
+        }
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    // Attributes are always strings, so `value="it,ch"` arrives as a single string in
+    // multiple mode. Split it into the `string[]` the rest of the component expects.
+    normalizeValue(val) {
+        if (this.multiple && typeof val === 'string') {
+            return val
+                .split(',')
+                .map(v => v.trim())
+                .filter(v => v.length > 0);
+        }
+        return val;
+    }
+    refreshSlimData() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setData(this.buildSlimData());
+    }
+    buildSlimData() {
+        const options = this.options.length > 0 ? this.options : this.slottedOptions;
+        const optionGroups = this.optionGroups.length > 0 ? this.optionGroups : this.slottedOptionGroups;
+        return buildSlimData(options, optionGroups, this.placeholder, this.value);
+    }
+    // Reads ds-select-option / ds-select-optgroup light-DOM children (the HTML-only alternative
+    // to the options / optionGroups props) into the same shape those props use.
+    readOptionsFromSlot() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+        if (!slot)
+            return;
+        const assignedElements = slot.assignedElements({ flatten: true });
+        const optgroups = assignedElements.filter(el => el.tagName.toLowerCase() === 'ds-select-optgroup');
+        if (optgroups.length > 0) {
+            this.slottedOptionGroups = optgroups.map(el => ({
+                label: el.label,
+                options: this.mapSelectOptionElements(Array.from(el.querySelectorAll('ds-select-option'))),
+            }));
+            this.slottedOptions = [];
+        }
+        else {
+            const options = assignedElements.filter(el => el.tagName.toLowerCase() === 'ds-select-option');
+            this.slottedOptions = this.mapSelectOptionElements(options);
+            this.slottedOptionGroups = [];
+        }
+    }
+    mapSelectOptionElements(elements) {
+        return elements.map(el => {
+            var _a, _b;
+            const option = el;
+            return {
+                label: (_b = (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '',
+                value: option.value,
+                disabled: option.disabled,
+            };
+        });
+    }
+    syncFormValue(val) {
+        if (Array.isArray(val)) {
+            const formData = new FormData();
+            val.forEach(v => formData.append(this.name, v));
+            setFormValue(this.internals, formData);
+        }
+        else {
+            setFormValue(this.internals, val);
+        }
+    }
+    syncDisabledState() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || this.readonly);
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        return (h(Field, { key: 'c1be4f6a3654ace10f8c3e78b1b8c5d128ffab71', disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.selectId, onClick: ev => this.dsClick.emit(ev) }, h("select", Object.assign({ key: '1dfc380ceaa9db51f6322c19dc56a81e11266164', name: this.name, multiple: this.multiple, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1, ref: el => (this.selectEl = el) }, this.inheritedAttributes)), h("div", { key: 'f9cc1d0153b96bd595b001aa75762bb8a9f548cd', id: "popup", class: {
+                'is-multiple': this.multiple,
+            }, ref: el => (this.popupEl = el) }, h("slot", { key: '9b6821041f187c6770ac55e0391495a7ec420bfb', onSlotchange: this.handleSlotChange }))));
+    }
+    static get is() { return "ds-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[] | null",
+                    "resolved": "null | string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the select.\nIn single mode: `string | null`.\nIn multiple mode: `string[]` (array of selected values). As an HTML attribute, multiple\nvalues can also be passed as a comma-separated string, e.g. `value=\"it,ch\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the control, which is submitted with the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "this.selectId"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed above the select field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description displayed below the select field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputColor",
+                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InputColor": {
+                            "location": "import",
+                            "path": "../input/input.interfaces",
+                            "id": "src/components/forms/input/input.interfaces.ts::InputColor",
+                            "referenceLocation": "InputColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color state of the select field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the component renders in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation message shown when `invalid` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-text",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must select a value before submitting the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the select is non-interactive and excluded from form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the value cannot be changed by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user can select multiple options.\nThe `value` prop and `dsChange` event will carry a `string[]` instead of `string | null`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, a search input is shown inside the dropdown to filter options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, a clear button is shown inside the trigger that resets the value to `null` (single mode only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when no option is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./select.interfaces",
+                            "id": "src/components/forms/select/select.interfaces.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list of selectable options (flat).\nUse `optionGroups` when options should be grouped under a label.\nIf both are set, `optionGroups` takes precedence."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "optionGroups": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOptionGroup[]",
+                    "resolved": "SelectOptionGroup[]",
+                    "references": {
+                        "SelectOptionGroup": {
+                            "location": "import",
+                            "path": "./select.interfaces",
+                            "id": "src/components/forms/select/select.interfaces.ts::SelectOptionGroup",
+                            "referenceLocation": "SelectOptionGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list of option groups. Each group has a `label` and an `options` array.\nWhen set, `options` is ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "autoInvalidOff": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration\napplies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op\nin other framework integrations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "auto-invalid-off",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "language": {},
+            "region": {},
+            "slottedOptions": {},
+            "hasInvalidTextSlotContent": {},
+            "slottedOptionGroups": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected value changes.\nSingle mode: `string | null`. Multiple mode: `string[]`."
+                },
+                "complexType": {
+                    "original": "SelectChangeDetail",
+                    "resolved": "null | string | string[]",
+                    "references": {
+                        "SelectChangeDetail": {
+                            "location": "import",
+                            "path": "./select.interfaces",
+                            "id": "src/components/forms/select/select.interfaces.ts::SelectChangeDetail",
+                            "referenceLocation": "SelectChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control receives focus."
+                },
+                "complexType": {
+                    "original": "SelectFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "SelectFocusDetail": {
+                            "location": "import",
+                            "path": "./select.interfaces",
+                            "id": "src/components/forms/select/select.interfaces.ts::SelectFocusDetail",
+                            "referenceLocation": "SelectFocusDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus."
+                },
+                "complexType": {
+                    "original": "SelectBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "SelectBlurDetail": {
+                            "location": "import",
+                            "path": "./select.interfaces",
+                            "id": "src/components/forms/select/select.interfaces.ts::SelectBlurDetail",
+                            "referenceLocation": "SelectBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsClick",
+                "name": "dsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the host element is clicked."
+                },
+                "complexType": {
+                    "original": "SelectClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "SelectClickDetail": {
+                            "location": "import",
+                            "path": "./select.interfaces",
+                            "id": "src/components/forms/select/select.interfaces.ts::SelectClickDetail",
+                            "referenceLocation": "SelectClickDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the select dropdown.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the select dropdown.",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the select trigger.",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the select trigger.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
+                "propName": "readonly",
+                "methodName": "readonlyChanged"
+            }, {
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }, {
+                "propName": "optionGroups",
+                "methodName": "optionGroupsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "listenToClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "reset",
+                "method": "listenToReset",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    Logger('select'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DsSelect.prototype, "createLogger", null);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "name", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "description", void 0);
+__decorate([
+    OneOf(INPUT_COLORS),
+    __metadata("design:type", String)
+], DsSelect.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "invalidText", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "multiple", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "searchable", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "clearable", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "placeholder", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "autoInvalidOff", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], DsSelect.prototype, "configChanged", null);
+let SelectIds = 0;