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

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

@@ -28,15 +28,22 @@ export class DdaAvatar {
         }
     }
     render() {
-        return (h("div", { key: 'c46e5bc4ad610315a3b3c918c8d50646bd9b84ad', onClick: () => this.toggleDropdown(), class: {
+        const hasOptions = this.parsedOptions.length > 0;
+        const avatarContent = [
+            this.type === 'photo' && h("img", { key: '5455ae34642a1a696172dcb9b6985f9b7fc88df2', src: this.src, alt: "Avatar" }),
+            this.type === 'icon' && h("i", { key: 'ada1e07644b9a96e36335a7490db0451099b6bd0', class: `${this.icon} dda-smile` }, "sentiment_satisfied"),
+            this.type === 'text' && h("span", { key: 'd7cb60a8861f09c69dbcdbca401331f57b0b8805', class: 'avatar-main-text' }, this.text),
+        ];
+        return (h("div", { key: 'aad1a0787cae3bd4eb0db425f16e0c3403f306af', class: {
                 'dda-avatar': true,
                 [`avatar-type-${this.type}`]: true,
                 [`avatar-size-${this.size}`]: true,
                 [`avatar-design-${this.design}`]: true,
                 [`avatar-shape-${this.rounded}`]: true,
                 [`${this.custom_class}`]: true,
-                [`${this.component_mode}`]: true
-            } }, this.isOpen && (h("div", { key: '97c9e9ce792438fc164bae66d6b0283858fff007', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { id: this.button_id, "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: 'ec2c16fddbab490fef22336d1fb539ce4eae9aba', src: this.src, alt: "Avatar" }), this.type === 'icon' && h("i", { key: 'b9706bf686751bead7637a577386a1af131ca233', class: `${this.icon} dda-smile` }, "sentiment_satisfied"), this.type === 'text' && h("span", { key: '1ebaff010668df54150fdec2085c7af9868d8059', class: 'avatar-main-text' }, this.text), this.design === 'status' && h("div", { key: 'ed07c412419c02d12aa853529f4eb68b183c1886', class: "status-circle" }), this.design === 'verified' && h("span", { key: '71ec15333379fb40c76f9c50e96fd9e238f9a206', class: "material-icons verified-icon" }, "check_small"), this.design === 'notification' && h("div", { key: '3580e386dbe182678b64a155fbf682ecf5ccaff6', class: "notification-circle" }, this.notification_number)));
+                [`${this.component_mode}`]: true,
+                [`${this.button_name}`]: true,
+            } }, hasOptions ? (h("button", { type: "button", class: "avatar-trigger", onClick: () => this.toggleDropdown(), "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.aria_label || 'Avatar options' }, avatarContent)) : (h("div", { class: "avatar-trigger" }, avatarContent)), hasOptions && this.isOpen && (h("div", { key: 'aad8ebd1a5df312d76d4051a92a3d2a3aa9e84e6', class: "dda-input-dropdown-list" }, 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))))), this.design === 'status' && h("div", { key: '65373d337dd0c2265c8f787619ab14fdd8be2f53', class: "status-circle" }), this.design === 'verified' && h("div", { key: 'ee627f6d549434ec4faf03affbc14f2a8d1c4ab9', class: "verified-icon" }, h("span", { key: '43dc04d4dbe9ae6889a0a8552a04278ed078bcf2', class: "material-icons  material-symbols-outlined" }, "verified")), this.design === 'notification' && h("div", { key: '35970e35388fbbd3ea4fe5887d7e84bdc2193209', class: "notification-circle" }, this.notification_number)));
     }
     static get is() { return "dda-avatar"; }
     static get originalStyleUrls() {
@@ -67,8 +74,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'photo'"
             },
             "size": {
@@ -87,8 +94,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "design": {
@@ -107,8 +114,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "design",
                 "reflect": false,
+                "attribute": "design",
                 "defaultValue": "'default'"
             },
             "rounded": {
@@ -127,8 +134,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounded",
                 "reflect": false,
+                "attribute": "rounded",
                 "defaultValue": "'circle'"
             },
             "src": {
@@ -147,8 +154,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "src",
                 "reflect": false,
+                "attribute": "src",
                 "defaultValue": "''"
             },
             "icon": {
@@ -167,8 +174,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
+                "attribute": "icon",
                 "defaultValue": "'material-icons'"
             },
             "text": {
@@ -187,8 +194,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false,
+                "attribute": "text",
                 "defaultValue": "'AB'"
             },
             "notification_number": {
@@ -207,8 +214,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "notification_number",
                 "reflect": false,
+                "attribute": "notification_number",
                 "defaultValue": "0"
             },
             "custom_class": {
@@ -227,8 +234,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "selected": {
@@ -247,8 +254,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected"
             },
             "options": {
                 "type": "string",
@@ -266,8 +273,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
-                "reflect": false
+                "reflect": false,
+                "attribute": "options"
             },
             "component_mode": {
                 "type": "string",
@@ -285,8 +292,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -304,8 +311,8 @@ export class DdaAvatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "button_id": {
                 "type": "string",
@@ -323,8 +330,27 @@ export class DdaAvatar {
                 },
                 "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"
             }
         };
     }
@@ -334,4 +360,3 @@ export class DdaAvatar {
         };
     }
 }
-//# sourceMappingURL=dda-avatar.js.map

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

@@ -47,54 +47,60 @@ export default {
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for the avatar component',
-        }
+        },
+        button_name: {
+            control: { type: 'text' },
+            description: 'Button name',
+        },
     },
     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="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"
->
-</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 }) => 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}
-  >
-  </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 = {
@@ -110,7 +116,8 @@ StatusPhoto.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    aria_label: "avatar"
+    aria_label: "avatar",
+    button_name: "button"
 };
 export const StatusIcon = Template.bind({});
 StatusIcon.args = {
@@ -126,7 +133,8 @@ StatusIcon.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    aria_label: "avatar"
+    aria_label: "avatar",
+    button_name: "button"
 };
 export const StatusText = Template.bind({});
 StatusText.args = {
@@ -142,6 +150,6 @@ StatusText.args = {
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    aria_label: "avatar"
+    aria_label: "avatar",
+    button_name: "button"
 };
-//# sourceMappingURL=dda-avatar.stories.js.map

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,58 +1,58 @@
-.dda-breadcrumb {
-  display: inline-flex;
-  align-items: center;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-}
-
-.dda-breadcrumb,
-.breadcrumb-item{
-  gap: 10px;
-}
-
-.breadcrumb-item a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  font-size: var(--dda-fs-body-lg);
-  gap: 4px;
-}
-.breadcrumb-item a span{
-  color: var(--dda-on-surface-0);
-  font-weight: var(--dda-fw-500);
-}
-.light-mode .breadcrumb-item a span{
-  color: var(--dda-neutral-0);
-}
-/**/
-.breadcrumb-item i,
-.breadcrumb-item svg {
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .breadcrumb-item i,
-.light-mode .breadcrumb-item svg {
-  color: var(--dda-neutral-variant-30);
-}
-/**/
-.breadcrumb-item .separator {
-  margin: 0 8px;
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .breadcrumb-item .separator {
-  color: var(--dda-neutral-variant-30);
-}
-/**/
-.breadcrumb-item.active a span{
-  color: var(--dda-on-surface-variant-30);
-  font-weight: var(--dda-fw-400);
-}
-.light-mode .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);
+}

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

@@ -13,7 +13,7 @@ export class DdaBreadcrumb {
         }
     }
     render() {
-        return (h(Host, { key: '69e251154a684540fc965d19abf3ddd152d6a900' }, h("div", { key: '03fe7e7316b7b82405b9c4c35286a6ad30ba71c9', class: this.component_mode }, h("nav", { key: 'da9849a5af245759e6b05512fc55d9d9fbc031c7', "aria-label": "breadcrumb", class: `${this.custom_class}` }, h("ol", { key: '32008ad407f7f4bcb729e2739f102407d6e6a914', class: "dda-breadcrumb" }, this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (h("li", { class: `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` }, 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() {
@@ -44,8 +44,8 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "design",
                 "reflect": false,
+                "attribute": "design",
                 "defaultValue": "'text'"
             },
             "separator": {
@@ -64,8 +64,8 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "separator",
                 "reflect": false,
+                "attribute": "separator",
                 "defaultValue": "'chevron_right'"
             },
             "custom_class": {
@@ -84,8 +84,8 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -104,11 +104,10 @@ export class DdaBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             }
         };
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-breadcrumb.js.map

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

@@ -36,20 +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"
-    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>
+  \`\`\`
 `,
             },
         },
@@ -71,7 +71,7 @@ TextOnly.args = {
     breadcrumbs: [
         { text: 'Home', icon: 'home', url: '/' },
         { text: 'Library', icon: 'menu_book', url: '/library' },
-        { text: 'Data', icon: 'storage' },
+        { text: 'Datas', icon: 'storage' },
     ],
     custom_class: '',
     component_mode: '',
@@ -83,7 +83,7 @@ IconText.args = {
     breadcrumbs: [
         { text: 'Home', icon: 'home', url: '/' },
         { text: 'Library', icon: 'menu_book', url: '/library' },
-        { text: 'Data', icon: 'storage' },
+        { text: 'Datas', icon: 'storage' },
     ],
     custom_class: '',
     component_mode: '',
@@ -100,4 +100,3 @@ IconOnly.args = {
     custom_class: '',
     component_mode: '',
 };
-//# sourceMappingURL=dda-breadcrumb.stories.js.map