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

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

@@ -11,13 +11,9 @@ export class DdaAvatar {
         this.notification_number = 0; // For notification design
         this.custom_class = '';
         this.isOpen = false;
-        this.show_options = true;
-        this.dropdown_enabled = true; // ✅ New prop
     }
     toggleDropdown() {
-        if (this.dropdown_enabled) {
-            this.isOpen = !this.isOpen;
-        }
+        this.isOpen = !this.isOpen;
     }
     selectOption(option) {
         this.selected = option;
@@ -32,7 +28,7 @@ export class DdaAvatar {
         }
     }
     render() {
-        return (h("div", { key: '0d186e215cd77d265ba6a2af8db3cd2ec53269b4', onClick: () => this.toggleDropdown(), class: {
+        return (h("div", { key: '3336e5ff655e5d85a2090ce0fe410921a7ab8466', onClick: () => this.toggleDropdown(), class: {
                 'dda-avatar': true,
                 [`avatar-type-${this.type}`]: true,
                 [`avatar-size-${this.size}`]: true,
@@ -41,21 +37,17 @@ export class DdaAvatar {
                 [`${this.custom_class}`]: true,
                 [`${this.component_mode}`]: true,
                 [`${this.button_name}`]: true,
-                'avatar-dropdown-disabled': !this.dropdown_enabled, // Optional: for visual indication
-            } }, this.isOpen && (h("div", { key: 'ae2702e60ef213fbad698df9babbe646c0010d22', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { id: this.button_id, name: this.button_name, "aria-label": this.aria_label, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: (e) => {
-                e.stopPropagation(); // prevent dropdown toggle on option click
-                this.selectOption(option);
-            } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))), this.type === 'photo' && h("img", { key: '28ea22f66a9136b920a03e08533cb3fbf05496c7', src: this.src, alt: "Avatar" }), this.type === 'icon' && h("i", { key: '65af09133afca158986708833d4a565625d8e9ca', class: `${this.icon} dda-smile` }, "sentiment_satisfied"), this.type === 'text' && h("span", { key: '03e202a1f5929b477b6bfdc279364d32b1552c64', class: "avatar-main-text" }, this.text), this.design === 'status' && h("div", { key: '36e760999d73f131b309840714e793e373d40b5d', class: "status-circle" }), this.design === 'verified' && (h("div", { key: '2b84b11af5971430c391671376289d08e631f619', class: "verified-icon" }, h("span", { key: '929485a17e09efabc46c8f3acbaab05a11498eea', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "verified"))), this.design === 'notification' && (h("div", { key: 'b355fe8f4357c7f63584e023e0e40a578d31ee7b', class: "notification-circle" }, this.notification_number))));
+            } }, this.isOpen && (h("div", { key: '72e9a27a91f3559b9f890389a090875b13c82b81', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { id: this.button_id, name: this.button_name, "aria-label": this.aria_label, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))), this.type === 'photo' && h("img", { key: '21e30d7985b97f0ea9ac0fdcea7e1957d75cc5d2', src: this.src, alt: "Avatar" }), this.type === 'icon' && h("i", { key: '9eb65b6c4511ff039f7728a5567dd558081dbd33', class: `${this.icon} dda-smile` }, "sentiment_satisfied"), this.type === 'text' && h("span", { key: '437c1def3d18a5583a983ad1dfaaaebe338ead22', class: 'avatar-main-text' }, this.text), this.design === 'status' && h("div", { key: '4fc33c2b88249c3a0921c6369d60669796cdba4c', class: "status-circle" }), this.design === 'verified' && h("div", { key: 'd14ea999aebc50b310a4dc92e84167cb8de2c645', class: "verified-icon" }, h("span", { key: '5bb4269d20505c21a5f9acff362a4b238d527e4d', class: "material-icons  material-symbols-outlined" }, "verified")), this.design === 'notification' && h("div", { key: '73237448b74e29d4c505e9b1676d8f1963c63628', class: "notification-circle" }, this.notification_number)));
     }
     static get is() { return "dda-avatar"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-avatar.css"]
+            "$": ["dda-avatar.css", "../../global/input.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-avatar.css"]
+            "$": ["dda-avatar.css", "../../global/input.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -76,8 +68,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'photo'"
             },
             "size": {
@@ -96,8 +88,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "design": {
@@ -116,8 +108,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "design",
                 "reflect": false,
+                "attribute": "design",
                 "defaultValue": "'default'"
             },
             "rounded": {
@@ -136,8 +128,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounded",
                 "reflect": false,
+                "attribute": "rounded",
                 "defaultValue": "'circle'"
             },
             "src": {
@@ -156,8 +148,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "src",
                 "reflect": false,
+                "attribute": "src",
                 "defaultValue": "''"
             },
             "icon": {
@@ -176,8 +168,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
+                "attribute": "icon",
                 "defaultValue": "'material-icons'"
             },
             "text": {
@@ -196,8 +188,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false,
+                "attribute": "text",
                 "defaultValue": "'AB'"
             },
             "notification_number": {
@@ -216,8 +208,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "notification_number",
                 "reflect": false,
+                "attribute": "notification_number",
                 "defaultValue": "0"
             },
             "custom_class": {
@@ -236,8 +228,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "selected": {
@@ -256,28 +248,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
-                "reflect": false
-            },
-            "show_options": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "show_options",
                 "reflect": false,
-                "defaultValue": "true"
+                "attribute": "selected"
             },
             "options": {
                 "type": "string",
@@ -295,8 +267,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
-                "reflect": false
+                "reflect": false,
+                "attribute": "options"
             },
             "component_mode": {
                 "type": "string",
@@ -314,8 +286,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -333,8 +305,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "button_id": {
                 "type": "string",
@@ -352,8 +324,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "button_name": {
                 "type": "string",
@@ -371,28 +343,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_name",
-                "reflect": false
-            },
-            "dropdown_enabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "dropdown_enabled",
                 "reflect": false,
-                "defaultValue": "true"
+                "attribute": "button_name"
             }
         };
     }
@@ -402,4 +354,3 @@ export class DdaAvatar {
         };
     }
 }
-//# sourceMappingURL=dda-avatar.js.map

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

@@ -25,11 +25,7 @@ export default {
         },
         options: {
             control: 'array',
-            description: 'Dropdown options for the avatar dropdown',
-        },
-        dropdown_enabled: {
-            control: 'boolean',
-            description: 'Enable or disable the avatar dropdown',
+            description: 'Dropdown options for the avatar dropdown'
         },
         src: { control: 'text', description: 'Path to the image' },
         icon: { control: 'text', description: 'Material Icons icon class for the avatar' },
@@ -60,47 +56,51 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-avatar\` component, pass the following props:
-
-\`\`\`html
-<dda-avatar
-  type="photo"
-  size="md"
-  design="default"
-  rounded="circle"
-  src="..."
-  icon="..."
-  text="..."
-  options='["Option 1","Option 2"]'
-  dropdown_enabled="true"
-  ...
-></dda-avatar>
-\`\`\`
+                component: `
+To use the \`dda-avatar\` component, pass the following props:
+
+\`\`\`html
+<dda-avatar
+    type="photo"
+    size="md"
+    design="default"
+    rounded="circle"
+    src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
+    icon="sentiment_satisfied"
+    text="AB"
+    options='["Option 1","Option 2","Option 3"]'
+    notification-number="20"
+    custom_class=""
+    component_mode=""
+    aria_label="avatar"
+    button_id="button"
+    button_name=""
+>
+</dda-avatar>
+  \`\`\`
 `,
             },
         },
     },
 };
-const Template = ({ type, size, design, rounded, src, icon, text, notification_number, custom_class, options, component_mode, button_id, aria_label, button_name, dropdown_enabled, }) => html `
-  <dda-avatar
-    type=${type}
-    size=${size}
-    design=${design}
-    rounded=${rounded}
-    src=${src}
-    icon=${icon}
-    text=${text}
-    options=${JSON.stringify(options)}
-    notification_number=${notification_number}
-    custom_class=${custom_class}
-    component_mode=${component_mode}
-    aria_label=${aria_label}
-    button_id=${button_id}
-    button_name=${button_name}
-    dropdown_enabled=${dropdown_enabled}
-  >
-  </dda-avatar>
+const Template = ({ type, size, design, rounded, src, icon, text, notification_number, custom_class, options, component_mode, button_id, aria_label, button_name }) => html `
+  <dda-avatar
+    type=${type}
+    size=${size}
+    design=${design}
+    rounded=${rounded}
+    src=${src}
+    icon=${icon}
+    text=${text}
+    options=${JSON.stringify(options)}
+    notification_number=${notification_number}
+    custom_class=${custom_class}
+    component_mode=${component_mode}
+    aria_label=${aria_label}
+    button_id=${button_id}
+    button_name=${button_name}
+  >
+  </dda-avatar>
 `;
 export const StatusPhoto = Template.bind({});
 StatusPhoto.args = {
@@ -112,16 +112,44 @@ StatusPhoto.args = {
     options: ['Option 1', 'Option 2', 'Option 3'],
     src: 'https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg',
     icon: 'material-icons',
-    notification_number: 20,
+    notification_number: '20',
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    aria_label: 'avatar',
-    button_name: 'button',
-    dropdown_enabled: true,
+    aria_label: "avatar",
+    button_name: "button"
 };
 export const StatusIcon = Template.bind({});
-StatusIcon.args = Object.assign(Object.assign({}, StatusPhoto.args), { type: 'icon' });
+StatusIcon.args = {
+    type: 'icon',
+    size: 'md',
+    design: 'default',
+    rounded: 'circle',
+    text: 'AB',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    src: 'https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg',
+    icon: 'material-icons',
+    notification_number: '20',
+    custom_class: '',
+    component_mode: '',
+    button_id: 'button',
+    aria_label: "avatar",
+    button_name: "button"
+};
 export const StatusText = Template.bind({});
-StatusText.args = Object.assign(Object.assign({}, StatusPhoto.args), { type: 'text' });
-//# sourceMappingURL=dda-avatar.stories.js.map
+StatusText.args = {
+    type: 'text',
+    size: 'md',
+    design: 'default',
+    rounded: 'circle',
+    text: 'AB',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    src: 'https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg',
+    icon: 'material-icons',
+    notification_number: '20',
+    custom_class: '',
+    component_mode: '',
+    button_id: 'button',
+    aria_label: "avatar",
+    button_name: "button"
+};

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,90 @@
+import { h, Host } from "@stencil/core";
+export class DdaBanner {
+    constructor() {
+        this.parsedSlides = [];
+    }
+    componentWillLoad() {
+        this.parsedSlides = JSON.parse(this.slides);
+    }
+    render() {
+        return (h(Host, { key: '2cee5be83d942c4478169615a7dd7ab9c02fdc1a' }, h("div", { key: '5e49ec5b1d4aa90d56dff504f271ab52cc61fa72', class: 'dda-banner-slider' }, this.parsedSlides.map((slide) => (h("div", { class: 'dda-banner-slide' }, h("img", { src: slide.image, alt: slide.title, style: { width: this.slider_width, height: this.slider_height } })))))));
+    }
+    static get is() { return "dda-banner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dda-banner.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dda-banner.css", "../../global/global.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "slides": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slides"
+            },
+            "slider_width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slider_width"
+            },
+            "slider_height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slider_height"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedSlides": {}
+        };
+    }
+}

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

@@ -1,61 +1,58 @@
-.dda-breadcrumb {
-  display: inline-flex;
-  align-items: center;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.dda-breadcrumb-item {
-  display: flex;
-  align-items: center;
-}
-
-.dda-breadcrumb,
-.dda-breadcrumb-item{
-  gap: 10px;
-}
-
-.dda-breadcrumb-item a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  font-size: var(--font-caption);
-  gap: 4px;
-}
-.dda-breadcrumb-item a span{
-  color: var(--dda-on-surface-0);
-  font-weight: var(--dda-fw-500);
-}
-.light-mode .dda-breadcrumb-item a span{
-  color: var(--dda-neutral-0);
-}
-/**/
-.dda-breadcrumb-item i,
-.dda-breadcrumb-item svg {
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .dda-breadcrumb-item i,
-.light-mode .dda-breadcrumb-item svg {
-  color: var(--dda-neutral-variant-30);
-}
-:root[dir='rtl'] .dda-breadcrumb-item > i{
-  transform: rotate(180deg);
-}
-/**/
-.dda-breadcrumb-item .separator {
-  margin: 0 8px;
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .dda-breadcrumb-item .separator {
-  color: var(--dda-neutral-variant-30);
-}
-/**/
-.dda-breadcrumb-item.active a span{
-  color: var(--dda-on-surface-variant-30);
-  font-weight: var(--dda-fw-400);
-}
-.light-mode .dda-breadcrumb-item.active a span{
-  color: var(--dda-neutral-variant-30);
-}
+.dda-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.dda-breadcrumb-item {
+  display: flex;
+  align-items: center;
+}
+
+.dda-breadcrumb,
+.dda-breadcrumb-item{
+  gap: 10px;
+}
+
+.dda-breadcrumb-item a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  font-size: var(--dda-fs-body-lg);
+  gap: 4px;
+}
+.dda-breadcrumb-item a span{
+  color: var(--dda-on-surface-0);
+  font-weight: var(--dda-fw-500);
+}
+.light-mode .dda-breadcrumb-item a span{
+  color: var(--dda-neutral-0);
+}
+/**/
+.dda-breadcrumb-item i,
+.dda-breadcrumb-item svg {
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .dda-breadcrumb-item i,
+.light-mode .dda-breadcrumb-item svg {
+  color: var(--dda-neutral-variant-30);
+}
+/**/
+.dda-breadcrumb-item .separator {
+  margin: 0 8px;
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .dda-breadcrumb-item .separator {
+  color: var(--dda-neutral-variant-30);
+}
+/**/
+.dda-breadcrumb-item.active a span{
+  color: var(--dda-on-surface-variant-30);
+  font-weight: var(--dda-fw-400);
+}
+.light-mode .dda-breadcrumb-item.active a span{
+  color: var(--dda-neutral-variant-30);
+}