@dubai-design-system/components-js 3.12.10 → 3.12.11

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

@@ -3,10 +3,7 @@ export class DdaBreadcrumb {
     constructor() {
         this.design = 'text'; // Default to text design
         this.separator = 'chevron_right'; // Default to chevron separator
-        this.aria_label = '';
         this.custom_class = '';
-        this.dataBreadcrumbs = '';
-        this.useNavigator = 'false';
         this.breadcrumbs = [];
     }
     componentWillLoad() {
@@ -16,21 +13,17 @@ export class DdaBreadcrumb {
         }
     }
     render() {
-        return (h(Host, { key: '4cf53dd9f6d34c360a7915785b197aa2b16fb300' }, h("div", { key: 'fe8d24e4289a9957f94cd482a0516015a0a6dd5d', class: this.component_mode }, h("nav", { key: '0fa89857a63016fb9dc700aec9d1de84e90c157d', "aria-label": this.aria_label, class: `${this.custom_class}` }, h("ol", { key: 'adc2b223eb03a4f270406360ec402028b482d99e', class: "dda-breadcrumb" }, this.breadcrumbs &&
-            this.breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", {
-                //  href={crumb.url}
-                href: this.useNavigator == "true" ? 'javascript:void(0)' : crumb.url, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(crumb.url) : ""
-            }, this.design !== 'text' && (h("i", { class: `material-icons`, "aria-hidden": "true" }, crumb.icon)), this.design !== 'icon' && h("span", null, crumb.text)), index < this.breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined`, "aria-hidden": "true" }, this.separator))))))))));
+        return (h(Host, { key: '3b2fb277fddd52159d3df33176c255cc93827b89' }, h("div", { key: '4b8d65186e70be644326d300ad581e20b7c2f9e5', class: this.component_mode }, h("nav", { key: '57730ad06b7854a068b8cb7b626678d4e4dee341', "aria-label": "breadcrumb", class: `${this.custom_class}` }, h("ol", { key: '1b286c52f35bcd99c1d65f56eac8a19b0486ef33', class: "dda-breadcrumb" }, this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", { href: crumb.url }, this.design !== 'text' && h("i", { class: `material-icons` }, crumb.icon), this.design !== 'icon' && h("span", null, crumb.text)), index < this.breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined` }, this.separator))))))))));
     }
     static get is() { return "dda-breadcrumb"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-breadcrumb.css"]
+            "$": ["dda-breadcrumb.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-breadcrumb.css"]
+            "$": ["dda-breadcrumb.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -51,8 +44,8 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "design",
                 "reflect": false,
+                "attribute": "design",
                 "defaultValue": "'text'"
             },
             "separator": {
@@ -71,30 +64,10 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "separator",
                 "reflect": false,
+                "attribute": "separator",
                 "defaultValue": "'chevron_right'"
             },
-            "aria_label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "aria_label",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "custom_class": {
                 "type": "string",
                 "mutable": false,
@@ -111,8 +84,8 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -131,69 +104,10 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
-            },
-            "dataBreadcrumbs": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "data-breadcrumbs",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "useNavigator": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'true' | 'false'",
-                    "resolved": "\"false\" | \"true\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "use-navigator",
                 "reflect": false,
-                "defaultValue": "'false'"
+                "attribute": "component_mode"
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "navigatorClick",
-                "name": "navigatorClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-breadcrumb.js.map

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

@@ -24,9 +24,6 @@ export default {
             options: ['chevron_right', 'pen_size_2'],
             description: 'Separator style of the breadcrumbs',
         },
-        aria_label: {
-            control: { type: 'text' },
-        },
         custom_class: {
             control: { type: 'text' },
         },
@@ -39,21 +36,20 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-breadcrumb\` component, pass the following props:
-
-\`\`\`html
-<dda-breadcrumb
-    design="text"
-    separator="chevron_right"
-    aria_label="Page breadcrumb"
-    custom_class=""
-    component_mode=""
-    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},
-                        {"text":"Library","icon":"menu_book","url":"/library"},
-                        {"text":"Data","icon":"storage"}]'
-></dda-breadcrumb>
-  \`\`\`
+                component: `
+To use the \`dda-breadcrumb\` component, pass the following props:
+
+\`\`\`html
+<dda-breadcrumb
+    design="text"
+    separator="chevron_right"
+    custom_class=""
+    component_mode=""
+    data-breadcrumbs='[{"text":"Home","icon":"home","url":"/"},
+                        {"text":"Library","icon":"menu_book","url":"/library"},
+                        {"text":"Data","icon":"storage"}]'
+></dda-breadcrumb>
+  \`\`\`
 `,
             },
         },
@@ -77,7 +73,6 @@ TextOnly.args = {
         { text: 'Library', icon: 'menu_book', url: '/library' },
         { text: 'Datas', icon: 'storage' },
     ],
-    aria_label: 'Page information navigation',
     custom_class: '',
     component_mode: '',
 };
@@ -90,7 +85,6 @@ IconText.args = {
         { text: 'Library', icon: 'menu_book', url: '/library' },
         { text: 'Datas', icon: 'storage' },
     ],
-    aria_label: 'Page information navigation',
     custom_class: '',
     component_mode: '',
 };
@@ -103,8 +97,6 @@ IconOnly.args = {
         { text: 'Library', icon: 'menu_book', url: '/library' },
         { text: 'Data', icon: 'storage' },
     ],
-    aria_label: 'Page information navigation',
     custom_class: '',
     component_mode: '',
 };
-//# sourceMappingURL=dda-breadcrumb.stories.js.map

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

@@ -1,36 +1,20 @@
 import { Host, h } from "@stencil/core";
 export class DdaButton {
     constructor() {
-        this.button_type = 'button';
+        /** Type of button, e.g., "button", "submit" */
+        this.type = 'button';
+        /** Disable the button */
         this.disabled = false;
-        this.start_icon_family = '';
+        /** Icon class for the starting icon */
         this.start_icon = '';
-        this.button_text = '';
-        this.end_icon_family = '';
-        this.end_icon = '';
+        this.end_icon = ''; // icon class
         this.aria_label = '';
-        this.button_color = 'primary';
+        this.button_color = 'primary'; // e.g., 'primary', 'error'
         this.button_shape = '';
         this.icon_button_shape = '';
-        this.custom_class = '';
+        this.custom_class = ''; // Custom class prop
         this.button_name = '';
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return;
-            this.buttonClick.emit({
-                event,
-                id: this.button_id,
-                value: this.value,
-                name: this.button_name,
-            });
-        };
     }
-    // private handleKeyDown = (event: KeyboardEvent) => {
-    //   if (event.key === 'Enter' || event.key === ' ') {
-    //     event.preventDefault();
-    //     this.handleClick(event as unknown as MouseEvent);
-    //   }
-    // };
     render() {
         const buttonClass = [
             'dda-btn',
@@ -39,17 +23,25 @@ export class DdaButton {
             this.button_shape ? `btn-shape-${this.button_shape}` : '',
             this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',
             this.gap ? `dda-gap-${this.gap}` : '',
-            this.custom_class,
+            this.custom_class, // Include custom class
             this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return (h(Host, { key: 'f8165afa9d362801c0c5d254ac5cf55e6256fb99' }, h("button", { key: 'b710cca1999559fb1c78a42403f28683c1b4241b', id: this.button_id, type: this.button_type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label || this.button_text, name: this.button_name, value: this.value, onClick: this.handleClick }, this.start_icon && (h("i", { key: 'e78fa8e8a81c807edb5e7d4ce40a0be09dd933be', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.start_icon)), this.button_text, this.end_icon && (h("i", { key: '9dc3acc424c0414e143628045c14d4b2b92eee1c', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.end_icon)))));
+        ].filter(Boolean).join(' ');
+        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() {
+        return {
+            "$": ["../../global/dda-button.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/dda-button.css", "../../global/global.css"]
+        };
+    }
     static get properties() {
         return {
-            "button_type": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -61,12 +53,12 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Type of button, e.g., \"button\", \"submit\""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'button'"
             },
             "disabled": {
@@ -81,34 +73,14 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disable the button"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "start_icon_family": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "start_icon_family",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "start_icon": {
                 "type": "string",
                 "mutable": false,
@@ -121,52 +93,12 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "start_icon",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "button_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button_text",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "end_icon_family": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
+                    "text": "Icon class for the starting icon"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "end_icon_family",
                 "reflect": false,
+                "attribute": "start_icon",
                 "defaultValue": "''"
             },
             "end_icon": {
@@ -185,8 +117,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "end_icon",
                 "reflect": false,
+                "attribute": "end_icon",
                 "defaultValue": "''"
             },
             "aria_label": {
@@ -205,8 +137,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
                 "reflect": false,
+                "attribute": "aria_label",
                 "defaultValue": "''"
             },
             "button_color": {
@@ -225,8 +157,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_color",
                 "reflect": false,
+                "attribute": "button_color",
                 "defaultValue": "'primary'"
             },
             "size": {
@@ -245,8 +177,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "button_shape": {
                 "type": "string",
@@ -264,8 +196,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_shape",
                 "reflect": false,
+                "attribute": "button_shape",
                 "defaultValue": "''"
             },
             "icon_button_shape": {
@@ -284,8 +216,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon_button_shape",
                 "reflect": false,
+                "attribute": "icon_button_shape",
                 "defaultValue": "''"
             },
             "gap": {
@@ -304,8 +236,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gap",
-                "reflect": false
+                "reflect": false,
+                "attribute": "gap"
             },
             "custom_class": {
                 "type": "string",
@@ -323,8 +255,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -343,8 +275,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -362,8 +294,8 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "button_name": {
                 "type": "string",
@@ -381,53 +313,32 @@ export class DdaButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_name",
                 "reflect": false,
+                "attribute": "button_name",
                 "defaultValue": "''"
             },
-            "value": {
-                "type": "string",
+            "clickHandler": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Function to be called on button click"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "value",
-                "reflect": false
+                "setter": false
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "buttonClick",
-                "name": "buttonClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ event: MouseEvent, id: string, value: string, name: string }",
-                    "resolved": "{ event: MouseEvent; id: string; value: string; name: string; }",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
-    }
 }
-//# sourceMappingURL=dda-button.js.map