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

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

@@ -13,6 +13,7 @@ export class DdaButton {
         this.button_shape = '';
         this.icon_button_shape = '';
         this.custom_class = ''; // Custom class prop
+        this.button_name = '';
     }
     render() {
         const buttonClass = [
@@ -25,7 +26,7 @@ export class DdaButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '1905f8852f1104c752a1782a542d95a77ff1f0f5' }, h("button", { key: '4d69e965e5f0f99e474222c9108e2c77cf6adee0', id: this.button_id, type: this.type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label, onClick: this.clickHandler }, this.start_icon && h("i", { key: 'f5a8e54d8235053b827b152f17431cc9cf2dec63', class: "material-icons" }, this.start_icon), h("slot", { key: '2ab3cc8742c54a70b3d85193e3c80462efd5d08b' }), this.end_icon && h("i", { key: 'cefbd205620e5fefb191050b0f277f8614ebee57', class: "material-icons" }, this.end_icon))));
+        return (h(Host, { key: '7ca601d66dd70e18be4348ed1c6fefe1d564ddc3' }, h("button", { key: '76f6ffc16cdbc36d375b232247e1fe568695e81f', id: this.button_id, type: this.type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label, onClick: this.clickHandler, name: this.button_name }, this.start_icon && h("i", { key: 'd0d51f02bb5bca06a17bca151c356d3ffd6aa8ea', class: "material-icons  material-symbols-outlined" }, this.start_icon), h("slot", { key: 'f9f5b57e2063cb1b6faae31cb39705d451dc14aa' }), this.end_icon && h("i", { key: '133fa4595380dfca13e29628fcbfe7b59501ab8f', class: "material-icons  material-symbols-outlined" }, this.end_icon))));
     }
     static get is() { return "dda-button"; }
     static get originalStyleUrls() {
@@ -56,8 +57,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'button'"
             },
             "disabled": {
@@ -76,8 +77,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "start_icon": {
@@ -96,8 +97,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "start_icon",
                 "reflect": false,
+                "attribute": "start_icon",
                 "defaultValue": "''"
             },
             "end_icon": {
@@ -116,8 +117,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "end_icon",
                 "reflect": false,
+                "attribute": "end_icon",
                 "defaultValue": "''"
             },
             "aria_label": {
@@ -136,8 +137,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
                 "reflect": false,
+                "attribute": "aria_label",
                 "defaultValue": "''"
             },
             "button_color": {
@@ -156,8 +157,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_color",
                 "reflect": false,
+                "attribute": "button_color",
                 "defaultValue": "'primary'"
             },
             "size": {
@@ -176,8 +177,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "button_shape": {
                 "type": "string",
@@ -195,8 +196,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_shape",
                 "reflect": false,
+                "attribute": "button_shape",
                 "defaultValue": "''"
             },
             "icon_button_shape": {
@@ -215,8 +216,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon_button_shape",
                 "reflect": false,
+                "attribute": "icon_button_shape",
                 "defaultValue": "''"
             },
             "gap": {
@@ -235,8 +236,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gap",
-                "reflect": false
+                "reflect": false,
+                "attribute": "gap"
             },
             "custom_class": {
                 "type": "string",
@@ -254,8 +255,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -274,8 +275,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -293,8 +294,28 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
+            },
+            "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": "button_name",
+                "defaultValue": "''"
             },
             "clickHandler": {
                 "type": "unknown",
@@ -321,4 +342,3 @@ export class DdaButton {
         };
     }
 }
-//# sourceMappingURL=dda-button.js.map

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

@@ -4,22 +4,23 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-button\` component, pass the following props:
-
-\`\`\`html
-<dda-button
-    button_color="default-primary"
-    start_icon="sentiment_satisfied"
-    end_icon="arrow_forward"
-    custom_class=""
-    component_mode=""
-    button_id="button"
-    aria_label="button"
-    onclick="console.log('clicked')"
-    >Button
-</dda-button>
-  \`\`\`
+                component: `
+To use the \`dda-button\` component, pass the following props:
+
+\`\`\`html
+<dda-button
+    button_color="default-primary"
+    start_icon="sentiment_satisfied"
+    end_icon="arrow_forward"
+    custom_class=""
+    component_mode=""
+    button_id="button"
+    aria_label="button"
+    onclick="console.log('clicked')"
+    button_name="button"
+    >Button
+</dda-button>
+  \`\`\`
 `,
             },
         },
@@ -69,6 +70,10 @@ To use the \`dda-button\` component, pass the following props:
         onclick: {
             control: { type: 'text' },
             description: 'event handler for button',
+        },
+        button_name: {
+            control: { type: 'text' },
+            description: 'Name of the button',
         }
     },
 };
@@ -90,6 +95,7 @@ DefaultPrimary.args = {
     button_id: 'button',
     aria_label: 'button',
     onclick: "console.log('clicked')",
+    button_name: 'button',
 };
 export const ErrorPrimary = Template.bind({});
 ErrorPrimary.args = {
@@ -102,6 +108,7 @@ ErrorPrimary.args = {
     button_id: 'button',
     aria_label: 'button',
     onclick: "alert('Hello! I am an alert box!!')",
+    button_name: 'button',
 };
 export const SurfacePrimary = Template.bind({});
 SurfacePrimary.args = {
@@ -114,6 +121,7 @@ SurfacePrimary.args = {
     button_id: 'button',
     aria_label: 'button',
     onclick: "console.log('clicked')",
+    button_name: 'button',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -126,6 +134,7 @@ Disabled.args = {
     button_id: 'button',
     aria_label: 'button',
     onclick: "console.log('clicked')",
+    button_name: 'button',
 };
 export const IconButton = Template.bind({});
 IconButton.args = {
@@ -138,5 +147,5 @@ IconButton.args = {
     button_id: 'button',
     aria_label: 'button',
     onclick: "console.log('clicked')",
+    button_name: 'button',
 };
-//# sourceMappingURL=dda-button.stories.js.map

package/dist/collection/components/dda-checkbox/dda-checkbox.css

@@ -1,120 +1,120 @@
-.dda-checkbox-container {
-  display: inline-flex;
-  align-items: center;
-}
-
-.dda-checkbox-container input[type="checkbox"] {
-  width: 0;
-  height: 0;
-  position: absolute;
-  opacity: 0;
-}
-
-.dda-checkbox-container label {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-.dda-checkbox-container i,
-.dda-checkbox-container svg {
-  display: flex;
-  color: var(--dda-color-primary-40);
-  border: solid 2px var(--dda-color-primary-40);
-  justify-content: center;
-  align-items: center;
-}
-
-.light-mode.dda-checkbox-container i,
-.light-mode.dda-checkbox-container svg{
-  color: var(--dda-primary-40);
-  border: solid 2px var(--dda-primary-40);
-}
-
-.dda-checkbox-square i,
-.dda-checkbox-square svg {
-  border-radius: 6px;
-}
-
-.dda-checkbox-rounded i,
-.dda-checkbox-rounded svg {
-  border-radius: 22px;
-}
-
-
-.dda-checkbox-sm label i,
-.dda-checkbox-sm label svg {
-  width: 16px;
-  height: 16px;
-  font-size: 12px;
-}
-
-.dda-checkbox-md label i,
-.dda-checkbox-md label svg {
-  width: 20px;
-  height: 20px;
-  font-size: 16px;
-}
-
-.dda-checkbox-lg label i,
-.dda-checkbox-lg label svg {
-  width: 22px;
-  height: 22px;
-  font-size: 19px;
-}
-
-.dda-checkbox-container input[type="checkbox"]:checked~label i,
-.dda-checkbox-container input[type="checkbox"]:checked~label svg {
-  background: var(--dda-color-primary-40);
-  color: var(--dda-neutral-100);
-}
-
-.dda-checkbox-container input[type="checkbox"]:checked:focus-within~label i,
-.dda-checkbox-container input[type="checkbox"]:checked:focus-within~label svg {
-  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
-  -moz-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
-  box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
-}
-
-.dda-checkbox-container label p {
-  margin: 0px;
-}
-
-.dda-checkbox-title {
-  font-size: var(--dda-fs-body-lg);
-  color: var(--dda-on-surface-0);
-  font-weight: var(--dda-fw-500);
-  display: block;
-}
-
-.light-mode .dda-checkbox-title{
-  color: var(--dda-neutral-0);
-}
-
-.dda-checkbox-lg label .dda-checkbox-title {
-  font-size: var(--dda-fs-title-sm);
-}
-
-.dda-checkbox-supporting {
-  display: block;
-  font-size: var(--dda-fs-label-lg);
-  color: var(--dda-on-surface-variant-30);
-}
-
-.light-mode  .dda-checkbox-supporting {
-  color: var(--dda-neutral-variant-30);
-}
-
-.dda-checkbox-lg label .dda-checkbox-supporting {
-  font-size: var(--dda-fs-body-lg);
-}
-
-.dda-checkbox-disabled i,
-.dda-checkbox-disabled svg{
-  color: var(--dda-neutral-70);
-  border: solid 2px var(--dda-surface-90);
-}
-.dda-checkbox-container.dda-checkbox-disabled{
-  pointer-events: none;
+.dda-checkbox-container {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dda-checkbox-container input[type="checkbox"] {
+  width: 0;
+  height: 0;
+  position: absolute;
+  opacity: 0;
+}
+
+.dda-checkbox-container label {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.dda-checkbox-container i,
+.dda-checkbox-container svg {
+  display: flex;
+  color: var(--dda-color-primary-40);
+  border: solid 2px var(--dda-color-primary-40);
+  justify-content: center;
+  align-items: center;
+}
+
+.light-mode.dda-checkbox-container i,
+.light-mode.dda-checkbox-container svg{
+  color: var(--dda-primary-40);
+  border: solid 2px var(--dda-primary-40);
+}
+
+.dda-checkbox-square i,
+.dda-checkbox-square svg {
+  border-radius: 6px;
+}
+
+.dda-checkbox-rounded i,
+.dda-checkbox-rounded svg {
+  border-radius: 22px;
+}
+
+
+.dda-checkbox-sm label i,
+.dda-checkbox-sm label svg {
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+}
+
+.dda-checkbox-md label i,
+.dda-checkbox-md label svg {
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+}
+
+.dda-checkbox-lg label i,
+.dda-checkbox-lg label svg {
+  width: 22px;
+  height: 22px;
+  font-size: 19px;
+}
+
+.dda-checkbox-container input[type="checkbox"]:checked~label i,
+.dda-checkbox-container input[type="checkbox"]:checked~label svg {
+  background: var(--dda-color-primary-40);
+  color: var(--dda-neutral-100);
+}
+
+.dda-checkbox-container input[type="checkbox"]:checked:focus-within~label i,
+.dda-checkbox-container input[type="checkbox"]:checked:focus-within~label svg {
+  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
+  -moz-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
+  box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
+}
+
+.dda-checkbox-container label p {
+  margin: 0px;
+}
+
+.dda-checkbox-title {
+  font-size: var(--dda-fs-body-lg);
+  color: var(--dda-on-surface-0);
+  font-weight: var(--dda-fw-500);
+  display: block;
+}
+
+.light-mode .dda-checkbox-title{
+  color: var(--dda-neutral-0);
+}
+
+.dda-checkbox-lg label .dda-checkbox-title {
+  font-size: var(--dda-fs-title-sm);
+}
+
+.dda-checkbox-supporting {
+  display: block;
+  font-size: var(--dda-fs-label-lg);
+  color: var(--dda-on-surface-variant-30);
+}
+
+.light-mode  .dda-checkbox-supporting {
+  color: var(--dda-neutral-variant-30);
+}
+
+.dda-checkbox-lg label .dda-checkbox-supporting {
+  font-size: var(--dda-fs-body-lg);
+}
+
+.dda-checkbox-disabled i,
+.dda-checkbox-disabled svg{
+  color: var(--dda-neutral-70);
+  border: solid 2px var(--dda-surface-90);
+}
+.dda-checkbox-container.dda-checkbox-disabled{
+  pointer-events: none;
 }

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

@@ -12,7 +12,7 @@ export class DdaCheckbox {
             this.checkbox_status ? `dda-checkbox-${this.checkbox_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'fcce97219ce52e2135f3b947482f657b99dfed60' }, h("div", { key: '32f5f851dc8419268e2e2a80246a65617cd6baf2', class: checkboxClass }, h("input", { key: '09c290f05b27130e412a72a58f5da7c8d7400847', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '9b5971e4ec07f8e0b338fa9a3c2329901f50b2ac', htmlFor: this.input_id }, h("i", { key: '8fc8e2b50e709a6ee9f77c9f595a84f504da9daf', class: "material-icons" }, "check"), h("p", { key: '04e7cccd0db34d158091b1f3600b248a0c69b7bf' }, h("span", { key: 'ac556f4c281d128ad199df9f9dc5e35356b44fb6', class: "dda-checkbox-title" }, this.title_text), this.supporting && h("span", { key: '31f86b6f91ac0507b6ee997a8261faaf327e21fa', class: "dda-checkbox-supporting" }, this.supporting))))));
+        return (h(Host, { key: '4b8e8376bf784fd0ed1e918f0b5fdc4ebe7fd7ed' }, h("div", { key: 'f66aca291d7c0098979177e971aa758b82a5ffc9', class: checkboxClass }, h("input", { key: 'f243f679de75b492775c6e3a0b1ca1f0f3bfe423', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: 'f0c6cc39d19009132332d9c01a901b23c8f0a18c', htmlFor: this.input_id }, h("i", { key: 'b378cfa8cc108dcd6394472563afef4c3c87de13', class: "material-icons  material-symbols-outlined" }, "check"), h("p", { key: '416beeef5a24297c00221c6bfebef2778f0f26ac' }, h("span", { key: 'c62bf2fb6a703cace37b092d5f493ee1944f3e73', class: "dda-checkbox-title" }, this.title_text), this.supporting && h("span", { key: '846a087c01f8277af1f512c1de76e11a2fb95748', class: "dda-checkbox-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-checkbox"; }
     static get originalStyleUrls() {
@@ -43,8 +43,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "title_text"
             },
             "supporting": {
                 "type": "string",
@@ -62,8 +62,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "supporting",
-                "reflect": false
+                "reflect": false,
+                "attribute": "supporting"
             },
             "group_name": {
                 "type": "string",
@@ -81,8 +81,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "group_name"
             },
             "input_id": {
                 "type": "string",
@@ -100,8 +100,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "checked": {
                 "type": "boolean",
@@ -119,8 +119,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
-                "reflect": false
+                "reflect": false,
+                "attribute": "checked"
             },
             "checkbox_status": {
                 "type": "string",
@@ -138,8 +138,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checkbox_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "checkbox_status"
             },
             "size": {
                 "type": "string",
@@ -157,8 +157,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "style_type": {
                 "type": "string",
@@ -176,8 +176,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "style_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "style_type"
             },
             "custom_class": {
                 "type": "string",
@@ -195,8 +195,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -215,8 +215,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -234,10 +234,9 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             }
         };
     }
 }
-//# sourceMappingURL=dda-checkbox.js.map

package/dist/collection/components/dda-checkbox/dda-checkbox.stories.js

@@ -58,24 +58,24 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-checkbox\` component, pass the following props:
-
-\`\`\`html
-<dda-checkbox
-    title_text="Checkbox Title"
-    checked="false"
-    size="md"
-    style_type="square"
-    supporting="Supporting Text"
-    group_name="checkboxgroup"
-    input_id="testId"
-    custom_class=""
-    component_mode=""
-    aria_label="checkbox"
-    onclick="console.log('Checkbox clicked')"
-></dda-checkbox>
-  \`\`\`
+                component: `
+To use the \`dda-checkbox\` component, pass the following props:
+
+\`\`\`html
+<dda-checkbox
+    title_text="Checkbox Title"
+    checked="false"
+    size="md"
+    style_type="square"
+    supporting="Supporting Text"
+    group_name="checkboxgroup"
+    input_id="testId"
+    custom_class=""
+    component_mode=""
+    aria_label="checkbox"
+    onclick="console.log('Checkbox clicked')"
+></dda-checkbox>
+  \`\`\`
 `,
             },
         },
@@ -115,4 +115,3 @@ checkboxRounded.args = {
     aria_label: 'checkbox',
     onclick: "",
 };
-//# sourceMappingURL=dda-checkbox.stories.js.map