@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-multi-select/diwa-multi-select.js

@@ -0,0 +1,749 @@
+import { Host, forceUpdate, h, } from "@stencil/core";
+import { getComponentCss } from "./diwa-multi-select-styles";
+/** Module-level counter for unique IDs. */
+let multiSelectIdCounter = 0;
+/**
+ * @component diwa-multi-select
+ *
+ * A fully accessible multi-select dropdown with built-in text filter,
+ * keyboard navigation, and form integration.
+ *
+ * Based on the Diwa multi-select API contract.
+ *
+ * Design token override API:
+ *   --diwa-multi-select-height     Trigger button height (default 40px)
+ *   --diwa-multi-select-height-sm  Trigger height when compact (default 32px)
+ *
+ * Usage:
+ *   <diwa-multi-select name="fruits" label="Fruits">
+ *     <diwa-multi-select-option value="apple">Apple</diwa-multi-select-option>
+ *     <diwa-multi-select-option value="banana">Banana</diwa-multi-select-option>
+ *   </diwa-multi-select>
+ *
+ * @slot default         — diwa-multi-select-option elements
+ * @slot label           — Custom label content (overrides the label prop)
+ * @slot description     — Custom description content
+ * @slot message         — Custom message content
+ * @slot selected        — Custom selected-value display in the trigger button
+ * @slot filter          — Custom filter input; disables the built-in filter
+ * @slot options-status  — Loading / no-results / error content for async patterns
+ */
+export class DiwaMultiSelect {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Theme — cascades down to child options. */
+        this.theme = 'dark';
+        /** HTML name attribute — identifies the field in form submissions. */
+        this.name = '';
+        /** Currently selected values. Mutable — updated on user interaction. */
+        this.value = [];
+        /** Validation state. */
+        this.state = 'none';
+        /** Hides the label visually while keeping it accessible. */
+        this.hideLabel = false;
+        /** Disables interaction. */
+        this.disabled = false;
+        /** Marks the field as required. */
+        this.required = false;
+        /** Compact variant — reduces the trigger height. */
+        this.compact = false;
+        /**
+         * Preferred direction for the dropdown panel.
+         * `'auto'` detects viewport space and flips upward if needed.
+         */
+        this.dropdownDirection = 'auto';
+        // ──────────────────────────────────────────────────────────────
+        // Internal state
+        // ──────────────────────────────────────────────────────────────
+        this.isOpen = false;
+        this.filterText = '';
+        this.hasFilterResults = true;
+        this.dropdownClass = 'dropdown';
+        // ──────────────────────────────────────────────────────────────
+        // Private refs / tracking
+        // ──────────────────────────────────────────────────────────────
+        this.internalId = `diwa-ms-${++multiSelectIdCounter}`;
+        this.options = [];
+        this.highlightedIndex = -1;
+        this.hasCustomFilterSlot = false;
+        this.hasCustomSelectedSlot = false;
+        this.onClickOutside = (e) => {
+            if (!this.isOpen)
+                return;
+            const path = e.composedPath();
+            if (!path.includes(this.host)) {
+                this.isOpen = false;
+                this.blur.emit();
+            }
+        };
+        this.onTriggerClick = () => {
+            if (this.disabled)
+                return;
+            this.isOpen = !this.isOpen;
+        };
+        this.onTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (!this.isOpen) {
+                if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.isOpen = true;
+                }
+                return;
+            }
+            switch (e.key) {
+                case 'Escape':
+                case 'Tab': {
+                    e.preventDefault();
+                    this.isOpen = false;
+                    this.triggerEl.focus();
+                    break;
+                }
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    const visible = this.getVisibleOptions();
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, visible.length - 1);
+                    this.applyHighlight();
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    this.applyHighlight();
+                    break;
+                }
+                case 'Home': {
+                    e.preventDefault();
+                    this.highlightedIndex = 0;
+                    this.applyHighlight();
+                    break;
+                }
+                case 'End': {
+                    e.preventDefault();
+                    const vis = this.getVisibleOptions();
+                    this.highlightedIndex = vis.length - 1;
+                    this.applyHighlight();
+                    break;
+                }
+                case 'Enter':
+                case ' ': {
+                    e.preventDefault();
+                    const current = this.getVisibleOptions()[this.highlightedIndex];
+                    if (current && !current.disabled) {
+                        current.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+                    }
+                    break;
+                }
+            }
+        };
+        this.onFilterInput = (e) => {
+            var _a;
+            const term = e.target.value.toLowerCase();
+            this.filterText = term;
+            let anyVisible = false;
+            for (const opt of this.options) {
+                const text = ((_a = opt.textContent) !== null && _a !== void 0 ? _a : '').toLowerCase();
+                const match = text.includes(term);
+                opt.style.display = match ? '' : 'none';
+                if (match)
+                    anyVisible = true;
+            }
+            this.hasFilterResults = anyVisible;
+            // Reset highlight to first visible
+            this.highlightedIndex = 0;
+            this.applyHighlight();
+        };
+        this.onResetClick = (e) => {
+            e.stopPropagation();
+            this.value = [];
+            this.syncSelectionFromValue();
+            this.change.emit({ name: this.name, value: [] });
+            forceUpdate(this.host);
+            this.triggerEl.focus();
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Watchers
+    // ──────────────────────────────────────────────────────────────
+    onThemeChange() {
+        this.syncChildThemes();
+    }
+    onCompactChange() {
+        this.syncChildCompact();
+    }
+    onValueChange() {
+        this.syncSelectionFromValue();
+    }
+    onIsOpenChange(open) {
+        this.toggle.emit({ open });
+        if (open) {
+            this.updateDropdownDirection();
+            // Move highlight to first selected option, or first option
+            this.highlightedIndex = this.getFirstHighlightIndex();
+            this.applyHighlight();
+            // Focus filter when opening
+            requestAnimationFrame(() => {
+                var _a;
+                if (!this.hasCustomFilterSlot) {
+                    (_a = this.filterInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            });
+        }
+        else {
+            this.clearHighlight();
+            this.highlightedIndex = -1;
+            if (!this.hasCustomFilterSlot) {
+                this.resetFilter();
+            }
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Lifecycle
+    // ──────────────────────────────────────────────────────────────
+    connectedCallback() {
+        document.addEventListener('mousedown', this.onClickOutside, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.onClickOutside, true);
+    }
+    componentWillLoad() {
+        this.hasCustomFilterSlot = this.host.querySelector('[slot="filter"]') !== null;
+        this.hasCustomSelectedSlot = this.host.querySelector('[slot="selected"]') !== null;
+    }
+    componentDidLoad() {
+        this.collectOptions();
+        this.syncSelectionFromValue();
+        this.syncChildThemes();
+        this.syncChildCompact();
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Public methods
+    // ──────────────────────────────────────────────────────────────
+    /** Programmatically opens the dropdown. */
+    async open() {
+        this.isOpen = true;
+    }
+    /** Programmatically closes the dropdown. */
+    async close() {
+        this.isOpen = false;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Event listeners
+    // ──────────────────────────────────────────────────────────────
+    onOptionUpdate(e) {
+        e.stopPropagation();
+        const { value, selected } = e.detail;
+        if (selected) {
+            if (!this.value.includes(value)) {
+                this.value = [...this.value, value];
+            }
+        }
+        else {
+            this.value = this.value.filter((v) => v !== value);
+        }
+        this.syncSelectionFromValue();
+        this.change.emit({ name: this.name, value: this.value });
+        forceUpdate(this.host);
+    }
+    onSlotChange() {
+        this.collectOptions();
+        this.syncSelectionFromValue();
+        this.syncChildThemes();
+        this.syncChildCompact();
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Private helpers
+    // ──────────────────────────────────────────────────────────────
+    collectOptions() {
+        this.options = Array.from(this.host.querySelectorAll('diwa-multi-select-option'));
+    }
+    syncSelectionFromValue() {
+        const valueSet = new Set(this.value);
+        for (const opt of this.options) {
+            const shouldBeSelected = valueSet.has(opt.value);
+            if (opt.selected !== shouldBeSelected) {
+                opt.selected = shouldBeSelected;
+                forceUpdate(opt);
+            }
+        }
+    }
+    syncChildThemes() {
+        for (const opt of this.options) {
+            if (opt.theme !== this.theme) {
+                opt.theme = this.theme;
+                forceUpdate(opt);
+            }
+        }
+    }
+    syncChildCompact() {
+        for (const opt of this.options) {
+            if (opt.compact !== this.compact) {
+                opt.compact = this.compact;
+                forceUpdate(opt);
+            }
+        }
+    }
+    getVisibleOptions() {
+        return this.options.filter((o) => !o.disabled && o.style.display !== 'none');
+    }
+    getFirstHighlightIndex() {
+        const visible = this.getVisibleOptions();
+        const firstSelected = visible.findIndex((o) => o.selected);
+        return firstSelected >= 0 ? firstSelected : 0;
+    }
+    applyHighlight() {
+        const visible = this.getVisibleOptions();
+        visible.forEach((opt, i) => {
+            opt.highlighted = i === this.highlightedIndex;
+        });
+    }
+    clearHighlight() {
+        for (const opt of this.options) {
+            if (opt.highlighted)
+                opt.highlighted = false;
+        }
+        this.highlightedIndex = -1;
+    }
+    updateDropdownDirection() {
+        if (this.dropdownDirection !== 'auto') {
+            this.dropdownClass = this.dropdownDirection === 'up' ? 'dropdown dropdown--up' : 'dropdown';
+            return;
+        }
+        const rect = this.triggerEl.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        this.dropdownClass = spaceBelow < 260 ? 'dropdown dropdown--up' : 'dropdown';
+    }
+    resetFilter() {
+        this.filterText = '';
+        if (this.filterInputEl)
+            this.filterInputEl.value = '';
+        this.hasFilterResults = true;
+        for (const opt of this.options) {
+            opt.style.display = '';
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Computed display values
+    // ──────────────────────────────────────────────────────────────
+    get selectedLabels() {
+        return this.options
+            .filter((o) => this.value.includes(o.value))
+            .map((o) => { var _a; return ((_a = o.textContent) !== null && _a !== void 0 ? _a : '').trim(); })
+            .filter(Boolean)
+            .join(', ');
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const labelId = `${this.internalId}-label`;
+        const listboxId = `${this.internalId}-listbox`;
+        const hintId = `${this.internalId}-hint`;
+        const hasMessage = !!this.message && this.state !== 'none';
+        const hasValue = this.value.length > 0;
+        return (h(Host, { key: 'b64a8c41ae771f58d8ca8778ddb3f943f1e2cac4', "data-theme": this.theme }, h("style", { key: 'd8cc4112b8378f11e5a91874adc6ae3f1e422fa4', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: '53f49aa986fd9f05e73314cc650995afa8b97bb2', class: "label", id: labelId, part: "label" }, h("slot", { key: '7c2f4c19f4d25ca64bfa28f4a4a3f5234594c763', name: "label" }, this.label), this.required && h("span", { key: 'bbd11f3b58d7821ca7ab7ebc8eb0a05e3618a5e9', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '92a55e0597c3802a2f986d0b9ba10d41ed33356a', class: "description", part: "description" }, h("slot", { key: '0365a7975834cb125e1b65ce482874d99f69af2a', name: "description" }, this.description))), h("div", { key: '293c6bd35a70f57a7e2b0efa930fa61578ab3752', class: "trigger", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId, "aria-labelledby": this.label ? labelId : undefined, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-describedby": hasMessage ? hintId : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.triggerEl = el), part: "trigger" }, h("span", { key: '146365e26a7513974361dfa9dc26410e5e174fd8', class: `trigger__value${!hasValue ? ' trigger__placeholder' : ''}`, part: "value" }, this.hasCustomSelectedSlot ? (h("slot", { name: "selected" })) : hasValue ? (this.selectedLabels) : (this.label || 'Select options')), hasValue && (h("button", { key: 'b1a5018fb507d2d4d4d822af191bef24c6fa558e', class: "trigger__reset", type: "button", "aria-label": "Reset selection", onClick: this.onResetClick, onKeyDown: (e) => {
+                if (e.key === 'Tab')
+                    this.isOpen = false;
+            }, part: "reset" }, "\u2715")), h("span", { key: '4dbbf50468fc96323e3bd9c92b25e3f34e2ad344', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '0b4f50afe6b0cd6d1ffccb3a8acf5709a8734477', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1c582d3bcf18af529b1d8b2a581f9ef7ad13858e', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'f98fd7dd9d6325a2eafb21880d10d12f4517dc4e', class: this.dropdownClass, role: "dialog", "aria-label": this.label, "aria-hidden": this.isOpen ? undefined : 'true', part: "dropdown" }, this.hasCustomFilterSlot ? (h("div", { class: "filter" }, h("slot", { name: "filter" }))) : (h("div", { class: "filter" }, h("input", { class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", autocomplete: "off", value: this.filterText, onInput: this.onFilterInput, onKeyDown: this.onTriggerKeyDown, ref: (el) => (this.filterInputEl = el), part: "filter-input" }))), h("div", { key: 'edd1c19900c332574d972424a62d117d10cbcda6', class: "options", id: listboxId, role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", part: "options" }, !this.hasFilterResults && (h("div", { key: 'e03ac0ea8790a73bcc15f71fee27c773a1e323f9', class: "no-results", role: "alert", "aria-live": "polite" }, "No results found")), h("slot", { key: '71bd34a1ca8e20245f7bf87bf4cd7be8c5814556', name: "options-status" }), h("slot", { key: 'a7c8ebb35860740c3c19b5f8910b18bf923bc7ff', onSlotchange: () => this.onSlotChange() }))), hasMessage && (h("span", { key: '671515ab8d44ac2fef5cd5f5a398c945de4b2b6e', id: hintId, class: "message", part: "message", "aria-live": this.state === 'error' ? 'polite' : undefined }, h("slot", { key: 'f93922457797ae8cfeb378b3338b537907267c93', name: "message" }, this.message)))));
+    }
+    static get is() { return "diwa-multi-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MultiSelectTheme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "MultiSelectTheme": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-multi-select/types.ts::MultiSelectTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme \u2014 cascades down to child options."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description shown below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML name attribute \u2014 identifies the field in form submissions."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected values. Mutable \u2014 updated on user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MultiSelectState",
+                    "resolved": "\"error\" | \"none\" | \"success\"",
+                    "references": {
+                        "MultiSelectState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-multi-select/types.ts::MultiSelectState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / validation message shown below the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the label visually while keeping it accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the field as required."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact variant \u2014 reduces the trigger height."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "dropdownDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MultiSelectDropdownDirection",
+                    "resolved": "\"auto\" | \"down\" | \"up\"",
+                    "references": {
+                        "MultiSelectDropdownDirection": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-multi-select/types.ts::MultiSelectDropdownDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred direction for the dropdown panel.\r\n`'auto'` detects viewport space and flips upward if needed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dropdown-direction",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "filterText": {},
+            "hasFilterResults": {},
+            "dropdownClass": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection changes."
+                },
+                "complexType": {
+                    "original": "MultiSelectChangeEventDetail",
+                    "resolved": "{ name: string; value: string[]; }",
+                    "references": {
+                        "MultiSelectChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-multi-select/types.ts::MultiSelectChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "toggle",
+                "name": "toggle",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown opens or closes."
+                },
+                "complexType": {
+                    "original": "MultiSelectToggleEventDetail",
+                    "resolved": "{ open: boolean; }",
+                    "references": {
+                        "MultiSelectToggleEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-multi-select/types.ts::MultiSelectToggleEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "blur",
+                "name": "blur",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the component loses focus (dropdown closes via click-outside)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically opens the dropdown.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically closes the dropdown.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "theme",
+                "methodName": "onThemeChange"
+            }, {
+                "propName": "compact",
+                "methodName": "onCompactChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "onIsOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "diwaMultiSelectOptionUpdate",
+                "method": "onOptionUpdate",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "slotchange",
+                "method": "onSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=diwa-multi-select.js.map