@dubai-design-system/components-js 5.0.3 → 5.1.1

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

@@ -1,14 +1,20 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class Ddaselect {
     constructor() {
+        /** Disables the select: the list does not open and options cannot be picked. */
         this.disabled = false;
         this.is_open = false;
         //@Prop() validationtype?: string;
+        /** Extra CSS classes added to the field container. */
         this.custom_class = '';
         // F-014: focus target requested by a keyboard interaction (ArrowDown/Up
         // from the trigger) that fires before the listbox exists in the DOM.
         // Consumed by componentDidRender, then cleared.
         this.pendingFocusIndex = null;
+        // Fallback id so the label, list and messages are wired when no button_id
+        // is passed (otherwise ids became "undefined-listbox" and the label had for="").
+        this.fallbackId = uniqueId('dda-select');
         this.onTriggerKeyDown = (event) => {
             if (this.disabled) {
                 return;
@@ -68,15 +74,21 @@ export class Ddaselect {
             }
         };
     }
+    get triggerId() {
+        return this.button_id || this.fallbackId;
+    }
+    get labelId() {
+        return `${this.triggerId}-label`;
+    }
     get listboxId() {
-        return `${this.button_id}-listbox`;
+        return `${this.triggerId}-listbox`;
     }
-    // F-016: same button_id-derived uniqueness pattern as listboxId above.
+    // F-016: same trigger-id-derived uniqueness pattern as listboxId above.
     get helperId() {
-        return this.button_id ? `${this.button_id}-helper` : undefined;
+        return `${this.triggerId}-helper`;
     }
     get errorId() {
-        return this.button_id ? `${this.button_id}-error` : undefined;
+        return `${this.triggerId}-error`;
     }
     get describedBy() {
         const ids = [
@@ -122,10 +134,28 @@ export class Ddaselect {
             trigger.focus();
         }
     }
+    // The label has no `for`: label[for] on a <button> replaces the button text
+    // as its name, so the selected value was not announced. A click on the label
+    // still acts on the trigger, like a native label click did.
+    onHostClick(event) {
+        const target = event.target;
+        if (!target || typeof target.closest !== 'function' || !target.closest('label.dda-input-label')) {
+            return;
+        }
+        const trigger = this.el.querySelector('.dda-select-header');
+        if (trigger) {
+            trigger.focus();
+        }
+        this.toggleSelect();
+    }
     selectOption(option) {
         if (!this.disabled) {
+            const changed = this.selected !== option;
             this.selected = option;
             this.closeAndReturnFocus();
+            if (changed) {
+                this.selectionChange.emit({ value: option });
+            }
         }
     }
     componentDidRender() {
@@ -136,7 +166,8 @@ export class Ddaselect {
         }
     }
     render() {
-        return (h(Host, { key: '24112cb3263994d6e4b7c87a5a1ec75d010c6ee0' }, h("div", { key: '9d49fc8c1905079e83a8949ca8c1f46fa3255401', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '96d14ea8c1174032261945b9bef49f23e6ff55b6', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '0896838d28313f76b1938c225bdf5df1fdbc7849', class: "dda-dropdown-container" }, h("button", { key: 'a224ad80778a6e315735e806a0afbb4fc7c57e93', name: this.toggle_button_name, "aria-label": this.aria_label, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '7ed3bdb440c0a892795af32b1b2f9105633d5af7', class: `material-icons` }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '266c9fc8de36433de06bf289a854c22ab499f0ca', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '62028ea0d45943d0728f71ec58122ab58a554ec7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '30f11a0804b15424e0ca7a8769477f5f4547b191', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.triggerId;
+        return (h(Host, { key: '35fead649fe2206feb1749d1accbdddb2691d09d' }, h("div", { key: 'd41d81d1944c32c379f9289efd276bccf5f25a1a', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '8bd67c36aab4be42289b73f0f95466c0cc3da1f3', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: 'a99b28ef07e8fa4577e12e964eaa4a55c73ced8b', class: "dda-dropdown-container" }, h("button", { key: 'a03cc3709395e13290d78fcbc497d56953fa16ae', name: this.toggle_button_name, "aria-label": this.aria_label, "aria-labelledby": this.label && !this.aria_label ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '6764cc54e1b60305b9a0f3bf528ec6d74dd8433d', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '418cae53a5351d92e5b55186d58b97bd62dc8bcb', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '064eb06fc8dea8656c753aa4372be0a797241a22', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'fbe4f80920eac2f18c99177f2425b443f497e569', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {
@@ -163,7 +194,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label shown above the field. The trigger button is named by the label and its current text."
                 },
                 "getter": false,
                 "setter": false,
@@ -182,7 +213,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Options as a JSON array string, e.g. `'[\"Dubai\",\"Abu Dhabi\",\"Sharjah\"]'`. Invalid JSON shows \"No options available\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -191,7 +222,7 @@ export class Ddaselect {
             },
             "selected": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -201,7 +232,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The selected option. Must match an entry in `options`. The trigger shows \"Select an option\" when it is empty. Updated when the user picks an option. Mutable: the component assigns it."
                 },
                 "getter": false,
                 "setter": false,
@@ -220,7 +251,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disables the select: the list does not open and options cannot be picked."
                 },
                 "getter": false,
                 "setter": false,
@@ -240,7 +271,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation state. `error` shows the error styling."
                 },
                 "getter": false,
                 "setter": false,
@@ -259,7 +290,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown under the field. Also sets `aria-invalid` on the trigger."
                 },
                 "getter": false,
                 "setter": false,
@@ -278,7 +309,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown under the field."
                 },
                 "getter": false,
                 "setter": false,
@@ -297,7 +328,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Field size. `small` gives the compact field; leave empty for the default size."
                 },
                 "getter": false,
                 "setter": false,
@@ -316,7 +347,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -336,7 +367,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -355,7 +386,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the trigger button and the option list. The list falls back to `label`."
                 },
                 "getter": false,
                 "setter": false,
@@ -374,7 +405,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the trigger button. Also used to build the ids of the label, list, helper text and error message, so keep it unique. When it is not set, the component generates a unique id."
                 },
                 "getter": false,
                 "setter": false,
@@ -393,7 +424,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the trigger button."
                 },
                 "getter": false,
                 "setter": false,
@@ -412,7 +443,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of each option button in the list."
                 },
                 "getter": false,
                 "setter": false,
@@ -426,5 +457,32 @@ export class Ddaselect {
             "is_open": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "selectionChange",
+                "name": "selectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new option."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onHostClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }