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

package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.stories.js

@@ -4,9 +4,17 @@ import accessibility_icon from "../../../public_images/icn-complaints.svg";
 import happy_icon from "../../../public_images/icn-happy.svg";
 import chat_icn from "../../../public_images/icn-chat_bubble_outline.svg";
 import grid_view from "../../../public_images/icn-grid-view.svg";
+import location_pin from "../../../public_images/icn-location-pin.svg";
+import news_pin from "../../../public_images/icn-news.svg";
 export default {
     title: 'Components/Sticky Footer',
     tags: ['autodocs'],
+    argTypes: {
+        hideMiddleSection: {
+            control: { type: 'boolean' },
+            description: 'Hides the middle section of the footer',
+        }
+    },
     component: 'dda-sticky-footer',
     parameters: {
         docs: {
@@ -16,59 +24,61 @@ export default {
         },
     },
 };
-const Template = args => `
-  <dda-sticky-footer
-    happiness-icon-href="${args.happinessIconHref}"
-    happiness-icon-src="${args.happinessIconSrc}"
-    happiness-icon-alt="${args.happinessIconAlt}"
-    happiness-icon-tooltip="${args.happinessIconTooltip}"
-
-    accessibility-icon-href="${args.accessibilityIconHref}"
-    accessibility-icon-src="${args.accessibilityIconSrc}"
-    accessibility-icon-alt="${args.accessibilityIconAlt}"
-    accessibility-icon-tooltip="${args.accessibilityIconTooltip}"
-
-    services-icon-href="${args.servicesIconHref}"
-    services-icon-src="${args.servicesIconSrc}"
-    services-icon-alt="${args.servicesIconAlt}"
-    services-icon-tooltip="${args.servicesIconTooltip}"
-    services-icon-text="${args.servicesIconText}"
-
-    first-logo-href="${args.firstLogoHref}"
-    first-logo-src="${args.firstLogoSrc}"
-    first-logo-alt="${args.firstLogoAlt}"
-    first-logo-tooltip="${args.firstLogoTooltip}"
-
-    second-logo-href="${args.secondLogoHref}"
-    second-logo-src="${args.secondLogoSrc}"
-    second-logo-alt="${args.secondLogoAlt}"
-    second-logo-tooltip="${args.secondLogoTooltip}"
-
-    third-logo-href="${args.thirdLogoHref}"
-    third-logo-src="${args.thirdLogoSrc}"
-    third-logo-alt="${args.thirdLogoAlt}"
-    third-logo-tooltip="${args.thirdLogoTooltip}"
-
-    location-button-href="${args.locationButtonHref}"
-    location-button-text="${args.locationButtonText}"
-    location-button-icon="${args.locationButtonIcon}"
-
-
-    news-button-href="${args.newsButtonHref}"
-    news-button-text="${args.newsButtonText}"
-    news-button-icon="${args.newsButtonIcon}"
-
-
-    ai-icon-href="${args.aiIconHref}"
-    ai-icon-src="${args.aiIconSrc}"
-    ai-icon-alt="${args.aiIconAlt}"
-    ai-icon-tooltip="${args.aiIconTooltip}"
-
-    chat-icon-href="${args.chatIconHref}"
-    chat-icon-src="${args.chatIconSrc}"
-    chat-icon-alt="${args.chatIconAlt}"
-    chat-icon-tooltip="${args.chatIconTooltip}"
-  ></dda-sticky-footer>
+const Template = args => `
+  <dda-sticky-footer
+    happiness-icon-href="${args.happinessIconHref}"
+    happiness-icon-src="${args.happinessIconSrc}"
+    happiness-icon-alt="${args.happinessIconAlt}"
+    happiness-icon-tooltip="${args.happinessIconTooltip}"
+
+    accessibility-icon-href="${args.accessibilityIconHref}"
+    accessibility-icon-src="${args.accessibilityIconSrc}"
+    accessibility-icon-alt="${args.accessibilityIconAlt}"
+    accessibility-icon-tooltip="${args.accessibilityIconTooltip}"
+
+    services-icon-href="${args.servicesIconHref}"
+    services-icon-src="${args.servicesIconSrc}"
+    services-icon-alt="${args.servicesIconAlt}"
+    services-icon-tooltip="${args.servicesIconTooltip}"
+    services-icon-text="${args.servicesIconText}"
+
+    first-logo-href="${args.firstLogoHref}"
+    first-logo-src="${args.firstLogoSrc}"
+    first-logo-alt="${args.firstLogoAlt}"
+    first-logo-tooltip="${args.firstLogoTooltip}"
+
+    second-logo-href="${args.secondLogoHref}"
+    second-logo-src="${args.secondLogoSrc}"
+    second-logo-alt="${args.secondLogoAlt}"
+    second-logo-tooltip="${args.secondLogoTooltip}"
+
+    third-logo-href="${args.thirdLogoHref}"
+    third-logo-src="${args.thirdLogoSrc}"
+    third-logo-alt="${args.thirdLogoAlt}"
+    third-logo-tooltip="${args.thirdLogoTooltip}"
+
+    location-button-href="${args.locationButtonHref}"
+    location-button-text="${args.locationButtonText}"
+    location-button-icon="${args.locationButtonIcon}"
+    location-logo-src="${args.locationButtonSrc}"
+
+    news-button-href="${args.newsButtonHref}"
+    news-button-text="${args.newsButtonText}"
+    news-button-icon="${args.newsButtonIcon}"
+    news-logo-src="${args.newsButtonSrc}"
+
+    ai-icon-href="${args.aiIconHref}"
+    ai-icon-src="${args.aiIconSrc}"
+    ai-icon-alt="${args.aiIconAlt}"
+    ai-icon-tooltip="${args.aiIconTooltip}"
+
+    chat-icon-href="${args.chatIconHref}"
+    chat-icon-src="${args.chatIconSrc}"
+    chat-icon-alt="${args.chatIconAlt}"
+    chat-icon-tooltip="${args.chatIconTooltip}"
+
+    hide-middle-section="${args.hideMiddleSection}"
+  ></dda-sticky-footer>
 `;
 export const Default = Template.bind({});
 Default.args = {
@@ -99,10 +109,12 @@ Default.args = {
     thirdLogoTooltip: 'Logo 3',
     locationButtonHref: '#',
     locationButtonText: 'Location',
-    locationButtonIcon: '',
+    locationButtonSrc: location_pin,
+    locationButtonIcon: 'location_on',
     newsButtonHref: '#',
     newsButtonText: 'News',
-    newsButtonIcon: '',
+    newsButtonSrc: news_pin,
+    newsButtonIcon: 'news_on',
     aiIconHref: '#',
     aiIconSrc: digital_ai,
     aiIconAlt: 'Digital AI',
@@ -111,5 +123,5 @@ Default.args = {
     chatIconSrc: chat_icn,
     chatIconAlt: 'Online Chat',
     chatIconTooltip: 'Online Chat',
+    hideMiddleSection: false,
 };
-//# sourceMappingURL=dda-sticky-footer.stories.js.map

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

@@ -1,120 +1,120 @@
-.dda-tabs-container {
-  display: inline-flex;
-}
-
-.dda-tab-item {
-  background: transparent;
-  display: inline-flex;
-  font-size: 16px;
-  color: var(--dda-on-surface-0);
-  gap: 6px;
-  align-items: center;
-  border: 0;
-  border-radius: 8px;
-  padding: 10px 16px;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.25s ease-in-out;
-}
-
-.light-mode .dda-tab-item{
-  color: var(--dda-neutral-0);
-}
-
-.dda-tab-item i {
-  font-size: 22px;
-  color: var(--dda-neutral-variant-30);
-}
-
-.dda-tab-item.active span,
-.dda-tab-item:hover span {
-  font-weight: var(--dda-fw-500);
-}
-
-.dda-tab-default .dda-tab-item.active,
-.dda-tab-default .dda-tab-item:hover {
-  background: var(--dda-neutral-variant-94);
-  color: var(--dda-color-primary-40);
-}
-
-.light-mode.dda-tab-default .dda-tab-item.active,
-.light-mode.dda-tab-default .dda-tab-item:hover {
-  color: var(--dda-primary-40);
-}
-
-.dda-tab-default .dda-tab-item.active i,
-.dda-tab-default .dda-tab-item:hover i {
-  color: var(--dda-color-primary-40);
-}
-
-.dda-tab-filed .dda-tab-item.active,
-.dda-tab-filed .dda-tab-item:hover {
-  background: var(--dda-color-primary-40);
-  color: var(--dda-neutral-100);
-}
-
-.light-mode.dda-tab-filed .dda-tab-item.active,
-.light-mode.dda-tab-filed .dda-tab-item:hover {
-  background: var(--dda-primary-40);
-}
-
-.dda-tab-filed .dda-tab-item.active i,
-.dda-tab-filed .dda-tab-item:hover i {
-  color: var(--dda-neutral-100);
-}
-
-.dda-tab-underline {
-  border-bottom: solid 1px var(--dda-neutral-90);
-}
-
-
-.dda-tab-underline .dda-tab-item::after,
-.dda-tab-underline-filled .dda-tab-item::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0;
-  height: 4px;
-  background-color: var(--dda-color-primary-40);
-  border-radius: 8px 8px 0px 0px;
-  transform: translateX(-50%);
-  transition: all 0.25s ease-in-out;
-}
-.light-mode.dda-tab-underline .dda-tab-item::after,
-.light-mode.dda-tab-underline-filled .dda-tab-item::after{
-  background-color: var(--dda-primary-40);
-}
-.dda-tab-underline .dda-tab-item:hover::after,
-.dda-tab-underline .dda-tab-item.active::after,
-.dda-tab-underline-filled .dda-tab-item:hover::after,
-.dda-tab-underline-filled .dda-tab-item.active::after{
-  width: calc(100% - 32px);
-}
-
-.dda-tab-underline .dda-tab-item.active,
-.dda-tab-underline .dda-tab-item.active i,
-.dda-tab-underline-filled .dda-tab-item.active,
-.dda-tab-underline-filled .dda-tab-item.active i,
-.dda-tab-underline .dda-tab-item:hover,
-.dda-tab-underline .dda-tab-item:hover i,
-.dda-tab-underline-filled .dda-tab-item:hover,
-.dda-tab-underline-filled .dda-tab-item:hover i {
-  color: var(--dda-color-primary-40);
-}
-
-.light-mode.dda-tab-underline .dda-tab-item.active,
-.light-mode.dda-tab-underline .dda-tab-item.active i,
-.light-mode.dda-tab-underline-filled .dda-tab-item.active,
-.light-mode.dda-tab-underline-filled .dda-tab-item.active i,
-.light-mode.dda-tab-underline .dda-tab-item:hover,
-.light-mode.dda-tab-underline .dda-tab-item:hover i,
-.light-mode.dda-tab-underline-filled .dda-tab-item:hover,
-.light-mode.dda-tab-underline-filled .dda-tab-item:hover i {
-  color: var(--dda-primary-40);
-}
-
-.dda-tab-underline-filled .dda-tab-item.active,
-.dda-tab-underline-filled .dda-tab-item:hover {
-  background: var(--dda-neutral-variant-94);
+.dda-tabs-container {
+  display: inline-flex;
+}
+
+.dda-tab-item {
+  background: transparent;
+  display: inline-flex;
+  font-size: 16px;
+  color: var(--dda-on-surface-0);
+  gap: 6px;
+  align-items: center;
+  border: 0;
+  border-radius: 8px;
+  padding: 10px 16px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.25s ease-in-out;
+}
+
+.light-mode .dda-tab-item{
+  color: var(--dda-neutral-0);
+}
+
+.dda-tab-item i {
+  font-size: 22px;
+  color: var(--dda-neutral-variant-30);
+}
+
+.dda-tab-item.active span,
+.dda-tab-item:hover span {
+  font-weight: var(--dda-fw-500);
+}
+
+.dda-tab-default .dda-tab-item.active,
+.dda-tab-default .dda-tab-item:hover {
+  background: var(--dda-neutral-variant-94);
+  color: var(--dda-color-primary-40);
+}
+
+.light-mode.dda-tab-default .dda-tab-item.active,
+.light-mode.dda-tab-default .dda-tab-item:hover {
+  color: var(--dda-primary-40);
+}
+
+.dda-tab-default .dda-tab-item.active i,
+.dda-tab-default .dda-tab-item:hover i {
+  color: var(--dda-color-primary-40);
+}
+
+.dda-tab-filed .dda-tab-item.active,
+.dda-tab-filed .dda-tab-item:hover {
+  background: var(--dda-color-primary-40);
+  color: var(--dda-neutral-100);
+}
+
+.light-mode.dda-tab-filed .dda-tab-item.active,
+.light-mode.dda-tab-filed .dda-tab-item:hover {
+  background: var(--dda-primary-40);
+}
+
+.dda-tab-filed .dda-tab-item.active i,
+.dda-tab-filed .dda-tab-item:hover i {
+  color: var(--dda-neutral-100);
+}
+
+.dda-tab-underline {
+  border-bottom: solid 1px var(--dda-neutral-90);
+}
+
+
+.dda-tab-underline .dda-tab-item::after,
+.dda-tab-underline-filled .dda-tab-item::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 4px;
+  background-color: var(--dda-color-primary-40);
+  border-radius: 8px 8px 0px 0px;
+  transform: translateX(-50%);
+  transition: all 0.25s ease-in-out;
+}
+.light-mode.dda-tab-underline .dda-tab-item::after,
+.light-mode.dda-tab-underline-filled .dda-tab-item::after{
+  background-color: var(--dda-primary-40);
+}
+.dda-tab-underline .dda-tab-item:hover::after,
+.dda-tab-underline .dda-tab-item.active::after,
+.dda-tab-underline-filled .dda-tab-item:hover::after,
+.dda-tab-underline-filled .dda-tab-item.active::after{
+  width: calc(100% - 32px);
+}
+
+.dda-tab-underline .dda-tab-item.active,
+.dda-tab-underline .dda-tab-item.active i,
+.dda-tab-underline-filled .dda-tab-item.active,
+.dda-tab-underline-filled .dda-tab-item.active i,
+.dda-tab-underline .dda-tab-item:hover,
+.dda-tab-underline .dda-tab-item:hover i,
+.dda-tab-underline-filled .dda-tab-item:hover,
+.dda-tab-underline-filled .dda-tab-item:hover i {
+  color: var(--dda-color-primary-40);
+}
+
+.light-mode.dda-tab-underline .dda-tab-item.active,
+.light-mode.dda-tab-underline .dda-tab-item.active i,
+.light-mode.dda-tab-underline-filled .dda-tab-item.active,
+.light-mode.dda-tab-underline-filled .dda-tab-item.active i,
+.light-mode.dda-tab-underline .dda-tab-item:hover,
+.light-mode.dda-tab-underline .dda-tab-item:hover i,
+.light-mode.dda-tab-underline-filled .dda-tab-item:hover,
+.light-mode.dda-tab-underline-filled .dda-tab-item:hover i {
+  color: var(--dda-primary-40);
+}
+
+.dda-tab-underline-filled .dda-tab-item.active,
+.dda-tab-underline-filled .dda-tab-item:hover {
+  background: var(--dda-neutral-variant-94);
 }

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

@@ -1,22 +1,44 @@
 import { h, Host } from "@stencil/core";
 export class DdaTabs {
     constructor() {
-        this.type = 'text'; // Default to text type
-        this.hover_style = 'dda-tab-default'; // Default to light background hover style
-        this.border_bottom = false; // Default to no border-bottom
+        this.type = 'text';
+        this.hover_style = 'dda-tab-default';
+        this.border_bottom = false;
         this.custom_class = '';
+        this.tab_texts = '["Tab 1", "Tab 2", "Tab 3"]'; // Keep it as a string
+        this.tab_icons = '["sentiment_satisfied", "sentiment_satisfied", "sentiment_satisfied"]';
+        this.tabhandler = (index) => {
+            this.tabClick.emit(index);
+        };
         this.active_tab = 0;
-        this.tabs = [
-            { title: 'Tab 1', icon: 'sentiment_satisfied' },
-            { title: 'Tab 2', icon: 'sentiment_satisfied' },
-            { title: 'Tab 3', icon: 'sentiment_satisfied' },
-        ];
+    }
+    // Parse the stringified array to an actual array
+    get parsedTabs() {
+        try {
+            return JSON.parse(this.tab_texts); // Parse the string into an array
+        }
+        catch (error) {
+            console.error("Error parsing tab_texts:", error);
+            return ['Tab 1', 'Tab 2', 'Tab 3']; // Fallback to default
+        }
+    }
+    get parsedIcons() {
+        try {
+            return JSON.parse(this.tab_icons); // Parse the string into an array
+        }
+        catch (error) {
+            console.error("Error parsing tabicons:", error);
+            return ["sentiment_satisfied", "sentiment_satisfied", "sentiment_satisfied"]; // Fallback to default
+        }
     }
     setActiveTab(index) {
         this.active_tab = index;
+        if (this.tabClick) {
+            this.tabhandler(index);
+        }
     }
     render() {
-        return (h(Host, { key: 'e73367823d6faabe08c7efc76a60a202648176f6' }, h("div", { key: '7bf6e938d9ca75b109b0292bf037b36b79fe0bd9', class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.tabs.map((tab, index) => (h("button", { id: this.button_id, "aria-label": this.aria_label, type: "button", class: `dda-tab-item  ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons` }, tab.icon), h("span", null, tab.title)))))));
+        return (h(Host, { key: '64c80c8f7d18c478dbbbe2ffe9209bbf4f186747' }, h("div", { key: '677b141249edd4ec826c83a83c523b271b078d31', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons` }, this.parsedIcons[index] || ""), h("span", null, title)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {
@@ -47,15 +69,15 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "hover_style": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' |'dda-tab-underline-filled'",
+                    "original": "'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' | 'dda-tab-underline-filled'",
                     "resolved": "\"dda-tab-default\" | \"dda-tab-filed\" | \"dda-tab-underline\" | \"dda-tab-underline-filled\"",
                     "references": {}
                 },
@@ -67,8 +89,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hover_style",
                 "reflect": false,
+                "attribute": "hover_style",
                 "defaultValue": "'dda-tab-default'"
             },
             "border_bottom": {
@@ -87,8 +109,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "border_bottom",
                 "reflect": false,
+                "attribute": "border_bottom",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -107,8 +129,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -127,8 +149,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -146,8 +168,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "aria_label": {
                 "type": "string",
@@ -165,8 +187,67 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
+            },
+            "tab_texts": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tab_texts",
+                "defaultValue": "'[\"Tab 1\", \"Tab 2\", \"Tab 3\"]'"
+            },
+            "tab_icons": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tab_icons",
+                "defaultValue": "'[\"sentiment_satisfied\", \"sentiment_satisfied\", \"sentiment_satisfied\"]'"
+            },
+            "button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button_name"
             }
         };
     }
@@ -175,5 +256,22 @@ export class DdaTabs {
             "active_tab": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "tabClick",
+                "name": "tabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }
-//# sourceMappingURL=dda-tabs.js.map