@dubai-design-system/components-js 4.1.0 → 5.0.1

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

@@ -52,28 +52,38 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the right input of the range slider',
         },
+        left_input_name: {
+            control: { type: 'text' },
+            description: 'Name for the left input of the range slider',
+        },
+        right_input_name: {
+            control: { type: 'text' },
+            description: 'Name for the right input of the range slider',
+        }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-range-slider\` component, pass the following props:
-
-  \`\`\`html
-<dda-range-slider
-    min="0"
-    max="100"
-    step="1"
-    initial_min="20"
-    initial_max="80"
-    custom_class=""
-    component_mode=""
-    left_input_id="left_input"
-    right_input_id="right_input"
-    left_aria_label="minimum-value"
-    right_aria_label="maximum-value"
-></dda-range-slider>
-  \`\`\`
+                component: `
+  To use the \`dda-range-slider\` component, pass the following props:
+
+  \`\`\`html
+<dda-range-slider
+    min="0"
+    max="100"
+    step="1"
+    initial_min="20"
+    initial_max="80"
+    custom_class=""
+    component_mode=""
+    left_input_id="left_input"
+    right_input_id="right_input"
+    left_aria_label="minimum-value"
+    right_aria_label="maximum-value"
+    left_input_name="left_input"
+    right_input_name="right_input"
+></dda-range-slider>
+  \`\`\`
   `,
             },
         },
@@ -99,6 +109,8 @@ Default.args = {
     right_input_id: 'right_input',
     left_aria_label: 'minimum-value',
     right_aria_label: 'maximum-value',
+    left_input_name: 'left_input',
+    right_input_name: 'right_input',
 };
 export const TooltipTop = Template.bind({});
 TooltipTop.args = {
@@ -114,6 +126,8 @@ TooltipTop.args = {
     right_input_id: 'right_input',
     left_aria_label: 'minimum-value',
     right_aria_label: 'maximum-value',
+    left_input_name: 'left_input',
+    right_input_name: 'right_input',
 };
 export const TooltipBottom = Template.bind({});
 TooltipBottom.args = {
@@ -129,5 +143,6 @@ TooltipBottom.args = {
     right_input_id: 'right_input',
     left_aria_label: 'minimum-value',
     right_aria_label: 'maximum-value',
+    left_input_name: 'left_input',
+    right_input_name: 'right_input',
 };
-//# sourceMappingURL=dda-range-slider.stories.js.map

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

@@ -7,14 +7,31 @@ export class DdaSearchInput {
         this.has_error = false; // control error state
         this.custom_class = '';
     }
+    // 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;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    }
     clearInput() {
-        const input = this.el.querySelector('#search');
+        // Was `#search` — the search input's id is now the consumer-supplied
+        // input_id (possibly undefined), so target the stable class instead.
+        const input = this.el.querySelector('.dda-search-field');
         if (input) {
             input.value = '';
         }
     }
     render() {
-        return (h(Host, { key: '39f117abf9e5927105956f6efb03a1a75ff5117f' }, h("div", { key: '00e4ae19742d851d24a80cdf9fb7658648520287', 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: '863581c013027ae48161fd2f4f8d965139beaabd', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '8747946adcf77b1290fa0f4a488327f037bfd834', class: "dda-search-area dda-search-action" }, h("i", { key: 'f424549f9dcf28799dce504b4f213669e617744f', class: "material-icons icon-left" }, "search"), h("input", { key: 'cefa3e39df7eb1e136618f91e34b3fd3e3bff687', "aria-label": this.aria_label, id: 'search', type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder }), h("div", { key: '08dfc093378a0ea54c9350016272f54e3b004f34', class: "dda-search-btngroup" }, h("button", { key: 'cadfe8c59fc9ae68cfe109af883e71d61a9087a9', "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '6b5d3b237dead703492bd33423f9aa15d2850ad4', class: "material-icons" }, "close")), this.show_button && (h("button", { key: '1987188c71e8d10790f4e8e05db9d02c1fca6e82', type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: '76aad94d4c5f8a1ee938545645a8127f1333c065', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'fb034e8db0a019186d2d76261642f22bc04ba60c', class: "dda-error-message" }, this.error_message))));
+        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))));
     }
     static get is() { return "dda-search-input"; }
     static get originalStyleUrls() {
@@ -45,8 +62,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
+                "attribute": "placeholder",
                 "defaultValue": "'Search'"
             },
             "label": {
@@ -65,8 +82,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "size": {
                 "type": "string",
@@ -84,8 +101,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'sm'"
             },
             "error_message": {
@@ -104,8 +121,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "show_button": {
                 "type": "boolean",
@@ -123,8 +140,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show_button",
                 "reflect": false,
+                "attribute": "show_button",
                 "defaultValue": "false"
             },
             "helper_text": {
@@ -143,8 +160,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "input_status": {
                 "type": "string",
@@ -162,8 +179,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_status"
             },
             "has_error": {
                 "type": "boolean",
@@ -181,8 +198,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has_error",
                 "reflect": false,
+                "attribute": "has_error",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -201,8 +218,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -221,8 +238,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -240,8 +257,27 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
+            },
+            "input_id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -259,8 +295,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "button_aria_label": {
                 "type": "string",
@@ -278,11 +314,67 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_aria_label"
+            },
+            "search_input_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_input_name"
+            },
+            "close_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close_button_name"
+            },
+            "search_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_button_name"
             }
         };
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-search-input.js.map

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

@@ -49,6 +49,10 @@ export default {
             control: { type: 'text' },
             description: 'default',
         },
+        input_id: {
+            control: { type: 'text' },
+            description: 'Id for the search input field. The visible label targets this, not button_id (F-017).',
+        },
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for the search input',
@@ -60,31 +64,47 @@ export default {
         onchange: {
             control: { type: 'text' },
             description: 'onchange event for the search field',
-        }
+        },
+        search_input_name: {
+            control: { type: 'text' },
+            description: 'Name for the search input field',
+        },
+        close_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the close button',
+        },
+        search_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the search button',
+        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-search-input\` component, pass the following props:
-
-  \`\`\`html
-<dda-search-input
-    placeholder="Search"
-    label="Search"
-    size="default"
-    helper_text="Helper or footer text"
-    error_message=""
-    show_button="false"
-    has_error="false"
-    custom_class=""
-    component_mode=""
-    button_id="button"
-    aria_label="search-input"
-    button_aria_label="clear-search"
-    onchange="console.log('changed')"
-></dda-search-input>
-  \`\`\`
+                component: `
+  To use the \`dda-search-input\` component, pass the following props:
+
+  \`\`\`html
+<dda-search-input
+    placeholder="Search"
+    label="Search"
+    size="default"
+    helper_text="Helper or footer text"
+    error_message=""
+    show_button="false"
+    has_error="false"
+    custom_class=""
+    component_mode=""
+    button_id="button"
+    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"
+></dda-search-input>
+  \`\`\`
   `,
             },
         },
@@ -109,9 +129,13 @@ Default.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    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",
 };
 export const WithButton = Template.bind({});
 WithButton.args = {
@@ -125,9 +149,13 @@ WithButton.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    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",
 };
 export const WithError = Template.bind({});
 WithError.args = {
@@ -140,9 +168,13 @@ WithError.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    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",
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -156,8 +188,11 @@ Disabled.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
+    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",
 };
-//# sourceMappingURL=dda-search-input.stories.js.map