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

package/dist/collection/components/dda-link-button/dda-link-button.js

@@ -26,9 +26,9 @@ export class DdaLinkButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '6aae9c6ab22b9159960f5932e2d6e6cbd67e4edb' }, h("a", { key: '04f9782dd21b79aa5f171d2b10b5840e0a1f4709',
+        return (h(Host, { key: 'c05598ead44c09c1cd4d3a8699639c4012e37847' }, h("a", { key: '6f136a098f42b34d122ad5f6731334091b587938',
             //   type={this.type}
-            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: 'e3af0ae9d55e0568949e82168bbae14f686996eb', class: "material-icons" }, this.start_icon), h("slot", { key: '523845466779822d4ae58a0475de83262a873c72' }), this.end_icon && h("i", { key: 'e3b1251c9bda412fdea9e34ab22288525e5b09b7', class: "material-icons" }, this.end_icon))));
+            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '8c073887eae47a0303486aaa79cab227e726cbbe', class: "material-icons  material-symbols-outlined" }, this.start_icon), h("slot", { key: 'e320db9c64f86fe64dd33937b446cab933672689' }), this.end_icon && h("i", { key: 'c5f7efefa3751d2d9fae3afb1ba24226bd9f54ba', class: "material-icons  material-symbols-outlined" }, this.end_icon))));
     }
     static get is() { return "dda-link-button"; }
     static get originalStyleUrls() {
@@ -59,8 +59,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'button'"
             },
             "disabled": {
@@ -79,8 +79,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "start_icon": {
@@ -99,8 +99,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "start_icon",
                 "reflect": false,
+                "attribute": "start_icon",
                 "defaultValue": "''"
             },
             "end_icon": {
@@ -119,8 +119,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "end_icon",
                 "reflect": false,
+                "attribute": "end_icon",
                 "defaultValue": "''"
             },
             "aria_label": {
@@ -139,8 +139,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
                 "reflect": false,
+                "attribute": "aria_label",
                 "defaultValue": "''"
             },
             "button_color": {
@@ -159,8 +159,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_color",
                 "reflect": false,
+                "attribute": "button_color",
                 "defaultValue": "'primary'"
             },
             "size": {
@@ -179,8 +179,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "button_shape": {
                 "type": "string",
@@ -198,8 +198,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_shape",
                 "reflect": false,
+                "attribute": "button_shape",
                 "defaultValue": "''"
             },
             "icon_button_shape": {
@@ -218,8 +218,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon_button_shape",
                 "reflect": false,
+                "attribute": "icon_button_shape",
                 "defaultValue": "''"
             },
             "gap": {
@@ -238,8 +238,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gap",
-                "reflect": false
+                "reflect": false,
+                "attribute": "gap"
             },
             "custom_class": {
                 "type": "string",
@@ -257,8 +257,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "href": {
@@ -277,8 +277,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
+                "attribute": "href",
                 "defaultValue": "'#'"
             },
             "component_mode": {
@@ -297,8 +297,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -316,10 +316,9 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             }
         };
     }
 }
-//# sourceMappingURL=dda-link-button.js.map

package/dist/collection/components/dda-link-button/dda-link-button.stories.js

@@ -4,22 +4,22 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-link-button\` component, pass the following props:
-
-\`\`\`html
-<dda-link-button
-    button_color="default-primary"
-    start_icon="sentiment_satisfied"
-    end_icon="arrow_forward"
-    custom_class=""
-    href=""
-    component_mode=""
-    button_id="link-button"
-    aria_label="link-Button"
-    >Button
-</dda-link-button>
-  \`\`\`
+                component: `
+To use the \`dda-link-button\` component, pass the following props:
+
+\`\`\`html
+<dda-link-button
+    button_color="default-primary"
+    start_icon="sentiment_satisfied"
+    end_icon="arrow_forward"
+    custom_class=""
+    href=""
+    component_mode=""
+    button_id="link-button"
+    aria_label="link-Button"
+    >Button
+</dda-link-button>
+  \`\`\`
 `,
             },
         },
@@ -144,4 +144,3 @@ IconButton.args = {
     button_id: 'link-button',
     aria_label: 'link-Button',
 };
-//# sourceMappingURL=dda-link-button.stories.js.map

package/dist/collection/components/dda-number-field/dda-number-field.js

@@ -34,6 +34,21 @@ export class DdaNumberField {
             return [];
         }
     }
+    // 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;
+    }
     render() {
         const containerClass = [
             'dda-input-container',
@@ -45,7 +60,7 @@ export class DdaNumberField {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'c9fb87e53ed68ac2cdc5567e3587e24e65b535e5' }, h("div", { key: '3ad462b9283c24f28ebd04ac5d4e94b69a3ab01c', class: containerClass }, this.label && h("label", { key: 'a5583a207b641ae6148a5702b42aa183c0240dd2', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '7ef44c9d5836d5f89c7eef24a8918f214caa8922', class: "dda-input-field-group dda-number-field" }, h("input", { key: '9c6ddb3eeaa73a94172eb04e799e2dc2c7d03f26', id: this.input_id, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input" }), h("div", { key: 'a8b10527dea33f25aab2f6766d3d7463e4f2e654', class: "dda-input-dropdown-btn" }, h("button", { key: '07bc42203ca7931a4f524d1793ec18f7f69f1140', type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: 'a64c830dc988bdffe0cca5e97c7db039d16bebc4', class: `material-icons` }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '97cfcbb911fc57c665730793d5c2d1ff615d02a5', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'ceeb9da8ccf6a54dba933ecf60f17800d962f6f7', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'fa4ccde1418d246432357069f9470826f7b26a61', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '478d056b97c8fbbdeab9479d91a35b5065729f5a' }, h("div", { key: '99371519b6ecc1e1621f81b5fdaa5fdccde6bbdf', class: containerClass }, this.label && h("label", { key: '94a2fd311083fcd85676c608c5ae14c4e0347c0e', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '0c0d94451f0a1ccff97cef278c5c4bc3fc17e147', class: "dda-input-field-group dda-number-field" }, h("input", { key: 'b93aae1d972d9aee4fc6a62f6040c35720723916', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '6275bae648bd43980e705530296b2b8c90899cb1', class: "dda-input-dropdown-btn" }, h("button", { key: 'b7a956128c59b5147531a4ce85b5b86ea7137e47', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: '8a1d3737250c5ff33c37c97825b48d106f0c5196', class: `material-icons` }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: 'd260c7d405316fa6f4bcf8ab7480f6287ebf35e1', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'eb8f3492e3603259b31b6c35ced9aac4d52eb4e4', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '9c074b68b234cae9882e14aaca175e5f865d24ee', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-number-field"; }
     static get originalStyleUrls() {
@@ -76,8 +91,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "label": {
                 "type": "string",
@@ -95,8 +110,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "value": {
                 "type": "string",
@@ -114,8 +129,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "helper_text": {
                 "type": "string",
@@ -133,8 +148,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "error_message": {
                 "type": "string",
@@ -152,8 +167,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "validation_type": {
                 "type": "string",
@@ -171,8 +186,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "size": {
                 "type": "string",
@@ -190,8 +205,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "input_status": {
                 "type": "string",
@@ -209,8 +224,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_status"
             },
             "currencies": {
                 "type": "string",
@@ -228,8 +243,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "currencies",
-                "reflect": false
+                "reflect": false,
+                "attribute": "currencies"
             },
             "selected_currency": {
                 "type": "string",
@@ -247,8 +262,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected_currency",
                 "reflect": false,
+                "attribute": "selected_currency",
                 "defaultValue": "'USD'"
             },
             "custom_class": {
@@ -267,8 +282,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -287,8 +302,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -306,8 +321,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -325,8 +340,65 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
+            },
+            "input_name": {
+                "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_name"
+            },
+            "toggle_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle_button_name"
+            },
+            "currency_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "currency_button_name"
             }
         };
     }
@@ -337,4 +409,3 @@ export class DdaNumberField {
         };
     }
 }
-//# sourceMappingURL=dda-number-field.js.map

package/dist/collection/components/dda-number-field/dda-number-field.stories.js

@@ -65,33 +65,45 @@ export default {
         onchange: {
             control: { type: 'text' },
             description: 'onchange event for the number field',
-        }
+        },
+        input_name: {
+            control: { type: 'text' },
+            description: 'Name of the input field',
+        },
+        toggle_button_name: {
+            control: { type: 'text' },
+            description: 'Name of the toggle button',
+        },
+        currency_button_name: {
+            control: { type: 'text' },
+            description: 'Name of the currency selector',
+        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-number-field\` component, pass the following props:
-  
-  \`\`\`html
-<dda-number-field
-    label="Amount"
-    value=""
-    placeholder="Enter amount"
-    helper_text="Helper or footer text"
-    error_message=""
-    validation_type="normal"
-    size="medium"
-    input_status="normal"
-    selected_currency="USD"
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    aria_label="input"
-    currencies='["USD","EUR","GBP","AED","PKR"]'
-    onchange="console.log('changed')"
-></dda-number-field>
-    \`\`\`
+                component: `
+  To use the \`dda-number-field\` component, pass the following props:
+  
+  \`\`\`html
+<dda-number-field
+    label="Amount"
+    value=""
+    placeholder="Enter amount"
+    helper_text="Helper or footer text"
+    error_message=""
+    validation_type="normal"
+    size="medium"
+    input_status="normal"
+    selected_currency="USD"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="input"
+    currencies='["USD","EUR","GBP","AED","PKR"]'
+    onchange="console.log('changed')"
+></dda-number-field>
+    \`\`\`
   `,
             },
         },
@@ -122,6 +134,9 @@ Default.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
+    toggle_button_name: 'toggle-button',
+    currency_button_name: 'currency-button',
 };
 export const Small = Template.bind({});
 Small.args = {
@@ -140,6 +155,9 @@ Small.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
+    toggle_button_name: 'toggle-button',
+    currency_button_name: 'currency-button',
 };
 export const Error = Template.bind({});
 Error.args = {
@@ -157,6 +175,9 @@ Error.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
+    toggle_button_name: 'toggle-button',
+    currency_button_name: 'currency-button',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -175,5 +196,7 @@ Disabled.args = {
     input_id: 'input',
     aria_label: 'input',
     onchange: '',
+    input_name: 'input',
+    toggle_button_name: 'toggle-button',
+    currency_button_name: 'currency-button',
 };
-//# sourceMappingURL=dda-number-field.stories.js.map