@diwacopilot/components 1.0.0

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

@@ -0,0 +1,693 @@
+import { Host, forceUpdate, h, } from "@stencil/core";
+import { getComponentCss } from "./diwa-select-styles";
+/** Module-level counter for unique IDs. */
+let selectIdCounter = 0;
+/**
+ * @component diwa-select
+ *
+ * A fully accessible single-select dropdown with built-in text filter,
+ * keyboard navigation, and form integration.
+ *
+ * Based on the Diwa select API contract.
+ *
+ * Usage:
+ *   <diwa-select name="fruit" label="Favourite fruit">
+ *     <diwa-select-option>Please select…</diwa-select-option>
+ *     <diwa-select-option value="apple">Apple</diwa-select-option>
+ *     <diwa-select-option value="banana">Banana</diwa-select-option>
+ *   </diwa-select>
+ *
+ * @slot default      — diwa-select-option elements
+ * @slot label        — Custom label content (overrides the label prop)
+ * @slot description  — Custom description content
+ * @slot message      — Custom message content
+ */
+export class DiwaSelect {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Theme — cascades down to child options. */
+        this.theme = 'dark';
+        /** HTML name attribute — identifies the field in form submissions. */
+        this.name = '';
+        /** 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.hasFilterResults = true;
+        this.dropdownClass = 'dropdown';
+        // ──────────────────────────────────────────────────────────────
+        // Private refs / tracking
+        // ──────────────────────────────────────────────────────────────
+        this.internalId = `diwa-s-${++selectIdCounter}`;
+        this.options = [];
+        this.highlightedIndex = -1;
+        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();
+            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;
+            this.highlightedIndex = 0;
+            this.applyHighlight();
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Watchers
+    // ──────────────────────────────────────────────────────────────
+    onThemeChange() {
+        this.syncChildThemes();
+    }
+    onValueChange() {
+        this.syncSelectionFromValue();
+    }
+    onIsOpenChange(open) {
+        this.toggle.emit({ open });
+        if (open) {
+            this.updateDropdownDirection();
+            this.highlightedIndex = this.getFirstHighlightIndex();
+            this.applyHighlight();
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.filterInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            this.clearHighlight();
+            this.highlightedIndex = -1;
+            this.resetFilter();
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Lifecycle
+    // ──────────────────────────────────────────────────────────────
+    connectedCallback() {
+        document.addEventListener('mousedown', this.onClickOutside, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.onClickOutside, true);
+    }
+    componentDidLoad() {
+        this.collectOptions();
+        this.syncSelectionFromValue();
+        this.syncChildThemes();
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Public methods
+    // ──────────────────────────────────────────────────────────────
+    /** Programmatically opens the dropdown. */
+    async open() {
+        this.isOpen = true;
+    }
+    /** Programmatically closes the dropdown. */
+    async close() {
+        this.isOpen = false;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Event listeners
+    // ──────────────────────────────────────────────────────────────
+    onOptionUpdate(e) {
+        var _a;
+        e.stopPropagation();
+        this.value = e.detail.value;
+        this.syncSelectionFromValue();
+        this.change.emit({ name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' });
+        this.isOpen = false;
+        forceUpdate(this.host);
+        requestAnimationFrame(() => {
+            this.triggerEl.focus();
+        });
+    }
+    onSlotChange() {
+        this.collectOptions();
+        this.syncSelectionFromValue();
+        this.syncChildThemes();
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Private helpers
+    // ──────────────────────────────────────────────────────────────
+    collectOptions() {
+        this.options = Array.from(this.host.querySelectorAll('diwa-select-option'));
+    }
+    syncSelectionFromValue() {
+        for (const opt of this.options) {
+            const shouldBeSelected = opt.value !== undefined && opt.value === this.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);
+            }
+        }
+    }
+    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() {
+        if (this.filterInputEl)
+            this.filterInputEl.value = '';
+        this.hasFilterResults = true;
+        for (const opt of this.options) {
+            opt.style.display = '';
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Computed display values
+    // ──────────────────────────────────────────────────────────────
+    get selectedLabel() {
+        var _a;
+        const selected = this.options.find((o) => o.value !== undefined && o.value === this.value);
+        return ((_a = selected === null || selected === void 0 ? void 0 : selected.textContent) !== null && _a !== void 0 ? _a : '').trim();
+    }
+    // ──────────────────────────────────────────────────────────────
+    // 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 !== undefined && this.value !== '';
+        const displayLabel = hasValue ? this.selectedLabel : undefined;
+        return (h(Host, { key: '6ac13f8139797b9a4802dbb2ca5c0f2efef83b03', "data-theme": this.theme }, h("style", { key: 'f686db5aa753249a2d4f9b5b315dd47e3ddc26a8', innerHTML: getComponentCss(this.isOpen, this.disabled, this.state, this.compact, this.dropdownClass.includes('--up')) }), (this.label || this.host.querySelector('[slot="label"]')) && (h("span", { key: 'cdf62e4a62423bb2a36d009e9ad9b3c6269b3e12', class: "label", id: labelId, part: "label" }, h("slot", { key: '3e935b34db20515e579b493fbf59530f7c696756', name: "label" }, this.label), this.required && h("span", { key: 'd85f9b81784e63695460dc80c8569363fb35ef98', class: "label__required", "aria-hidden": "true" }, "*"))), (this.description || this.host.querySelector('[slot="description"]')) && (h("span", { key: '48858e2fdb26f2e4004f4e0a6e269a672e4b195b', class: "description", part: "description" }, h("slot", { key: '0ccb1b9edf46c77d66d216a543807c21cd44496d', name: "description" }, this.description))), h("div", { key: '0a937903a8ddafc0a56fb6ccf727a5f802c77580', 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: '48a00505d9cd62e4f3a4070655917c706b4ee2e3', class: `trigger__value${!displayLabel ? ' trigger__placeholder' : ''}`, part: "value" }, displayLabel !== null && displayLabel !== void 0 ? displayLabel : (this.label || 'Select an option')), h("span", { key: '4d5c0157792d93dffe4473bbb5adc7c5982fc996', class: "trigger__chevron", "aria-hidden": "true", part: "chevron" }, h("svg", { key: '802726305d35207d83d2c6ee3d0dd087dd6a33ee', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '658cb6b58e2505e6859b631541aa1b5bd2e76449', points: "6 9 12 15 18 9" })))), h("div", { key: 'b5f575565ed95ecf1a6111f527b1d6d0841e5076', class: this.dropdownClass, role: "listbox", id: listboxId, "aria-multiselectable": "false", "aria-labelledby": this.label ? labelId : undefined, part: "dropdown" }, h("div", { key: 'b51dc6327202a6d0113e03529fe76c52273b3023', class: "filter", part: "filter" }, h("input", { key: '1ad613a67c9c29086688016be3ccce2b260024d8', class: "filter__input", type: "text", placeholder: "Filter options\u2026", "aria-label": "Filter options", onInput: this.onFilterInput, ref: (el) => (this.filterInputEl = el), part: "filter-input" })), h("div", { key: 'abf099e79d273e293cc554cb50b139181af2da8b', class: "options", part: "options" }, !this.hasFilterResults && (h("div", { key: '9f7ffcd99df289bd35549fb548aa835bffbd4af1', class: "no-results", "aria-live": "polite" }, "No options found")), h("slot", { key: '1a56431405d701e4a89d66eb7918ba85245b189b' }))), hasMessage && (h("span", { key: '0a361efb6406ec19bf8ad8e94c4397c78cf5b32c', class: "message", id: hintId, role: "status", part: "message" }, h("slot", { key: 'f114d282d9785713e489a3f3b0fa96480569e184', name: "message" }, this.message)))));
+    }
+    static get is() { return "diwa-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectTheme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "SelectTheme": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-select/types.ts::SelectTheme"
+                        }
+                    }
+                },
+                "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": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value. Mutable \u2014 updated on user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectState",
+                    "resolved": "\"error\" | \"none\" | \"success\"",
+                    "references": {
+                        "SelectState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-select/types.ts::SelectState"
+                        }
+                    }
+                },
+                "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": "SelectDropdownDirection",
+                    "resolved": "\"auto\" | \"down\" | \"up\"",
+                    "references": {
+                        "SelectDropdownDirection": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-select/types.ts::SelectDropdownDirection"
+                        }
+                    }
+                },
+                "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": {},
+            "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": "SelectChangeEventDetail",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {
+                        "SelectChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-select/types.ts::SelectChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "toggle",
+                "name": "toggle",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown opens or closes."
+                },
+                "complexType": {
+                    "original": "SelectToggleEventDetail",
+                    "resolved": "{ open: boolean; }",
+                    "references": {
+                        "SelectToggleEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-select/types.ts::SelectToggleEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "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": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "onIsOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "diwaSelectOptionUpdate",
+                "method": "onOptionUpdate",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "slotchange",
+                "method": "onSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=diwa-select.js.map