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

package/dist/collection/components/dda-range-slider/dda-range-slider.js

@@ -1,12 +1,22 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaRangeSlider {
     constructor() {
+        /** Lowest value of the range. */
         this.min = 0;
+        /** Highest value of the range. */
         this.max = 100;
+        /** Step between selectable values. */
         this.step = 1;
+        /** Start value of the lower (left) handle. Read only when the component loads. */
         this.initial_min = 0;
+        /** Start value of the upper (right) handle. Read only when the component loads. */
         this.initial_max = 100;
+        /** Extra CSS classes added to the slider container. */
         this.custom_class = '';
+        // Fallback id base so each wrapping label points at a real input when no
+        // left_input_id/right_input_id is passed (WAVE "Orphaned form label").
+        this.fallbackId = uniqueId('dda-range-slider');
     }
     componentWillLoad() {
         this.min_value = this.initial_min;
@@ -28,10 +38,12 @@ export class DdaRangeSlider {
         return ((value - this.min) / (this.max - this.min)) * 100;
     }
     render() {
-        return (h(Host, { key: '80a768ff1c3149aa7e863bbe8fe4936f6c39ff43' }, h("div", { key: 'ec21fa68c81ef52b6d41a2dd73232f2da367b59a', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '01837c6961c25dae8dd22722ccffb88dc6740c48', class: "dda-range-slider" }, h("div", { key: '21e0c50619dff33b4552a1b2cfaacd6d5ee4259a', class: "dda-range-slider-track", style: {
+        const leftId = this.left_input_id || `${this.fallbackId}-min`;
+        const rightId = this.right_input_id || `${this.fallbackId}-max`;
+        return (h(Host, { key: '3a72a25212a511d65f982a0606cd8cd0e6cd1d66' }, h("div", { key: '8eb7a5199e81bc5bf437d5dfe61e4eec7b732753', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '6b303ab598aff66a693b645d350fea4eaa470bac', class: "dda-range-slider" }, h("div", { key: '3904d63ade7e2251d9ea424c015bf4aab74eae77', class: "dda-range-slider-track", style: {
                 left: `${this.getPercentage(this.min_value)}%`,
                 right: `${100 - this.getPercentage(this.max_value)}%`,
-            } }, h("span", { key: '697d15494be5b1b2223c6994f5757449b8137d0a', class: "min-label" }, this.min_value, "%"), h("span", { key: 'cf9fb2c9a32acadf8aa39ba3bfe81eb669c3d5b6', class: "max-label" }, this.max_value, "%")), h("label", { key: '11d8300e01852e9ea304489a60611ad311318a8a', htmlFor: this.left_input_id }, h("input", { key: '11d5bf0e71ad6c1e6486baf367cc77b82b487a15', id: this.left_input_id, name: this.left_input_name, "aria-label": this.left_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("label", { key: 'c0985baf70eba826197503254da107693d7a21bc', htmlFor: this.right_input_id }, h("input", { key: '2b3c8aed413ef9615dca183c089c4840fdf83ab6', id: this.right_input_id, name: this.right_input_name, "aria-label": this.right_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
+            } }, h("span", { key: '0d1038171b37eebb70862e3dec81773a069f8d39', class: "min-label" }, this.min_value, "%"), h("span", { key: 'ee925f1eb9de817c30fb1b24669e05088d2735c8', class: "max-label" }, this.max_value, "%")), h("span", { key: '29d65987c630c9d67453ad3f3566a3ecdf55357b' }, h("input", { key: '4a6db59b2ef1ca6cfde2acc1ab52046afb2d786f', id: leftId, name: this.left_input_name, "aria-label": this.left_aria_label || 'Minimum', type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("span", { key: '02fb3162cb1566304e1d25794d61bd760b02bd3c' }, h("input", { key: '46022edc3c2b069ba5f240ea0e7945326cf7459c', id: rightId, name: this.right_input_name, "aria-label": this.right_aria_label || 'Maximum', type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {
@@ -58,7 +70,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Lowest value of the range."
                 },
                 "getter": false,
                 "setter": false,
@@ -78,7 +90,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Highest value of the range."
                 },
                 "getter": false,
                 "setter": false,
@@ -98,7 +110,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Step between selectable values."
                 },
                 "getter": false,
                 "setter": false,
@@ -118,7 +130,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Start value of the lower (left) handle. Read only when the component loads."
                 },
                 "getter": false,
                 "setter": false,
@@ -138,7 +150,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Start value of the upper (right) handle. Read only when the component loads."
                 },
                 "getter": false,
                 "setter": false,
@@ -158,7 +170,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Not used by the current version; it has no effect."
                 },
                 "getter": false,
                 "setter": false,
@@ -177,7 +189,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Value labels shown as tooltips: `top` or `bottom`. Without it, plain labels show below the track."
                 },
                 "getter": false,
                 "setter": false,
@@ -196,7 +208,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the slider container."
                 },
                 "getter": false,
                 "setter": false,
@@ -216,7 +228,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the slider, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -235,7 +247,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the lower (left) range input. When it is not set, the component generates a unique id."
                 },
                 "getter": false,
                 "setter": false,
@@ -254,7 +266,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the upper (right) range input. When it is not set, the component generates a unique id."
                 },
                 "getter": false,
                 "setter": false,
@@ -273,7 +285,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the lower (left) range input, e.g. `Minimum amount`. When it is empty, the name is `Minimum`."
                 },
                 "getter": false,
                 "setter": false,
@@ -292,7 +304,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the upper (right) range input, e.g. `Maximum amount`. When it is empty, the name is `Maximum`."
                 },
                 "getter": false,
                 "setter": false,
@@ -311,7 +323,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the lower (left) range input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -330,7 +342,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the upper (right) range input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/dda-search-input/dda-search-input.js

@@ -1,19 +1,33 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaSearchInput {
     constructor() {
+        /** Placeholder text of the search input. */
         this.placeholder = 'Search';
-        this.size = 'sm'; // default to small size
-        this.show_button = false; // control to show/hide search button
-        this.has_error = false; // control error state
+        /** Size. `small` shows a smaller field; other values show the default size. */
+        this.size = 'sm';
+        /** Shows a "Search" button after the clear button. */
+        this.show_button = false;
+        /** Shows the error colors. */
+        this.has_error = false;
+        /** Extra CSS classes added to the field container. */
         this.custom_class = '';
+        /** Accessible name of the clear button. `button_aria_label` wins when set. */
+        this.clear_button_label = 'Clear search';
+        // Per-instance fallback, so the label, helper and error text stay linked
+        // to the search input when the consumer omits input_id.
+        this.fallbackId = uniqueId('dda-search-input');
+    }
+    // F-016: ids derived from the search input id (the consumer-supplied
+    // input_id, or the generated fallback), same pattern as dda-input.
+    get inputId() {
+        return this.input_id || this.fallbackId;
     }
-    // F-016: ids derived from the consumer-supplied input_id, same pattern as
-    // dda-input/dda-select.
     get helperId() {
-        return this.input_id ? `${this.input_id}-helper` : undefined;
+        return `${this.inputId}-helper`;
     }
     get errorId() {
-        return this.input_id ? `${this.input_id}-error` : undefined;
+        return `${this.inputId}-error`;
     }
     get describedBy() {
         const ids = [
@@ -24,14 +38,15 @@ export class DdaSearchInput {
     }
     clearInput() {
         // Was `#search` — the search input's id is now the consumer-supplied
-        // input_id (possibly undefined), so target the stable class instead.
+        // input_id or a generated one, so target the stable class instead.
         const input = this.el.querySelector('.dda-search-field');
         if (input) {
             input.value = '';
         }
     }
     render() {
-        return (h(Host, { key: 'defadb63674c2c2a74ff001a33c46e1b70884362' }, h("div", { key: '6b485070024fe6138c6964aafd30ac31f76add42', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '71564d0889be28002cedf12d11159be2c0fc6ad8', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'edd31c93a5098642a98952e9e786a1f52cef5f57', class: "dda-search-area dda-search-action" }, h("i", { key: '708fbf189d534e27c1a26c9491389c6caae0826d', class: "material-icons icon-left" }, "search"), h("input", { key: '8e1a5df3baf8c894a474047ff041db15191bc874', name: this.search_input_name, "aria-label": this.aria_label, id: this.input_id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '622e7a0ee2b0659ced993f533369e27bab553d6b', class: "dda-search-btngroup" }, h("button", { key: 'f508784161c13624b4cc30baaa05c031c6dbbbe4', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '6680303fc0fe51810eaf1e2f2f509ac894fc0a8a', class: "material-icons  material-symbols-outlined" }, "close")), this.show_button && (h("button", { key: '37c5dce6caff03bca2b018f2a789b5de2614aded', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'ca5d52ea2953f2de298b6dbbca209697b006220f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '2c7e0710441d65ed6a4652fc3962629c4a644b05', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.inputId;
+        return (h(Host, { key: '63dd0ce5b1ba526bc4f2b79cd4646f433bf7f5b1' }, h("div", { key: '4b19e3abcdd6e920b8146484f1e859c449eb6f56', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '54f45f95ae269e974064a01d9453934ef25f1f82', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '51b6460a3a04c80947ce2a9f68cbd472d2dac945', class: "dda-search-area dda-search-action" }, h("i", { key: '2d19436afd728672b1dee78a5888a66a9418e929', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: 'a28e11d99e628aeb122c857bad226bea62881a1f', name: this.search_input_name, "aria-label": this.aria_label, id: id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'd0064ab0d27ad86ef26d048a604de6d93f290c60', class: "dda-search-btngroup" }, h("button", { key: 'a6e9f7288c8ff9123553e80f74e36467bc6f5b43', name: this.close_button_name, "aria-label": this.button_aria_label || this.clear_button_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '2676bd651dd8fffd3f6ebf76dc812bfb0272e003', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.show_button && (h("button", { key: '455e7da64da6df0b345ad44559a8a403b44d07f8', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'fe5fbeb25377cf89d4d1fa3520d4c11fd44eb55c', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '8538814d841caf3e75b0f4edb33c5d53d442b792', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-search-input"; }
     static get originalStyleUrls() {
@@ -58,7 +73,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text of the search input."
                 },
                 "getter": false,
                 "setter": false,
@@ -78,7 +93,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visible label text, linked to the search input through `input_id` (or a generated id)."
                 },
                 "getter": false,
                 "setter": false,
@@ -97,7 +112,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size. `small` shows a smaller field; other values show the default size."
                 },
                 "getter": false,
                 "setter": false,
@@ -117,7 +132,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the field. When set, the input gets `aria-invalid=\"true\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -136,7 +151,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows a \"Search\" button after the clear button."
                 },
                 "getter": false,
                 "setter": false,
@@ -156,7 +171,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the field and linked with `aria-describedby`."
                 },
                 "getter": false,
                 "setter": false,
@@ -175,7 +190,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Status style. `disabled` shows the disabled styling only; it does not set the native `disabled` attribute."
                 },
                 "getter": false,
                 "setter": false,
@@ -194,7 +209,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows the error colors."
                 },
                 "getter": false,
                 "setter": false,
@@ -214,7 +229,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -234,7 +249,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +268,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the clear button."
                 },
                 "getter": false,
                 "setter": false,
@@ -272,7 +287,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the search input. Also used for the label `for` and the helper and error text ids. Optional: an id is generated when it is not set."
                 },
                 "getter": false,
                 "setter": false,
@@ -291,7 +306,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the search input. Use it when there is no visible label."
                 },
                 "getter": false,
                 "setter": false,
@@ -310,7 +325,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the clear button, e.g. `Clear search`."
                 },
                 "getter": false,
                 "setter": false,
@@ -329,7 +344,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the search input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -348,13 +363,33 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the clear button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "close_button_name"
             },
+            "clear_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the clear button. `button_aria_label` wins when set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear_button_label",
+                "defaultValue": "'Clear search'"
+            },
             "search_button_name": {
                 "type": "string",
                 "mutable": false,
@@ -367,7 +402,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the \"Search\" button."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/dda-search-input/dda-search-input.stories.js

@@ -61,10 +61,6 @@ export default {
             control: { type: 'text' },
             describe: 'Aria label for the clear button',
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the search field',
-        },
         search_input_name: {
             control: { type: 'text' },
             description: 'Name for the search input field',
@@ -99,7 +95,6 @@ export default {
     input_id="search"
     aria_label="search-input"
     button_aria_label="clear-search"
-    onchange="console.log('changed')"
     search_input_name="search-input"
     close_button_name="close-button"
     search_button_name="search-button"
@@ -132,7 +127,6 @@ Default.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
@@ -152,7 +146,6 @@ WithButton.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
@@ -171,7 +164,6 @@ WithError.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
@@ -191,7 +183,6 @@ Disabled.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",