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

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

@@ -5,31 +5,20 @@ export class DdaTabs {
         this.hover_style = 'dda-tab-default';
         this.border_bottom = false;
         this.custom_class = '';
-        this.button_ids = '["tab-btn-1", "tab-btn-2", "tab-btn-3"]'; // New prop for dynamic button IDs
         this.tab_texts = '["Tab 1", "Tab 2", "Tab 3"]'; // Keep it as a string
         this.tab_icons = '["sentiment_satisfied", "sentiment_satisfied", "sentiment_satisfied"]';
-        this.tab_type = 'dda-horizontal-tab';
-        this.button_values = '["", "", ""]';
-        // private tabhandler = (index) => {
-        //   this.tabClick.emit(index);
-        // };
+        this.tabhandler = (index) => {
+            this.tabClick.emit(index);
+        };
         this.active_tab = 0;
     }
-    get parsedButtonValues() {
-        try {
-            return JSON.parse(this.button_values);
-        }
-        catch (error) {
-            console.error('Error parsing button_values:', error);
-            return ['', '', ''];
-        }
-    }
+    // 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);
+            console.error("Error parsing tab_texts:", error);
             return ['Tab 1', 'Tab 2', 'Tab 3']; // Fallback to default
         }
     }
@@ -38,41 +27,28 @@ export class DdaTabs {
             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
+            console.error("Error parsing tabicons:", error);
+            return ["sentiment_satisfied", "sentiment_satisfied", "sentiment_satisfied"]; // Fallback to default
         }
     }
-    get parsedButtonIds() {
-        try {
-            return JSON.parse(this.button_ids);
-        }
-        catch (error) {
-            console.error('Error parsing button_ids:', error);
-            return ['tab-btn-1', 'tab-btn-2', 'tab-btn-3'];
-        }
-    }
-    // setActiveTab(index: number) {
-    //   this.active_tab = index;
-    //   if (this.tabClick) {
-    //     this.tabhandler(index);
-    //   }
-    // }
     setActiveTab(index) {
         this.active_tab = index;
-        this.tabClick.emit(index);
+        if (this.tabClick) {
+            this.tabhandler(index);
+        }
     }
     render() {
-        return (h(Host, { key: '0efe1c91e591dc0a7a8f2924a5b39cd48a905ab4' }, h("div", { key: 'c82c3e4f31765534c5f797682fe0097202a11a84', role: "tablist", "aria-label": "Tab Navigation", class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode} ${this.tab_type}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.parsedButtonIds[index] || `tab-btn-${index + 1}`, name: this.button_name, "aria-label": title, type: "button", value: this.parsedButtonValues[index] || '', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, role: "tab", "aria-selected": this.active_tab === index ? 'true' : 'false', "aria-controls": `tab-btn-${index + 1}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && (h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || '')), h("span", null, title)))))));
+        return (h(Host, { key: '2e7c1e817a306b08c9ee5a95a79b51db3a878d1a' }, h("div", { key: '3eb168d7413531c14b0062da5f59afe2cf6c692c', 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, "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` }, this.parsedIcons[index] || ""), h("span", null, title)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-tabs.css"]
+            "$": ["dda-tabs.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-tabs.css"]
+            "$": ["dda-tabs.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -93,8 +69,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "hover_style": {
@@ -113,8 +89,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hover_style",
                 "reflect": false,
+                "attribute": "hover_style",
                 "defaultValue": "'dda-tab-default'"
             },
             "border_bottom": {
@@ -133,8 +109,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "border_bottom",
                 "reflect": false,
+                "attribute": "border_bottom",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -153,8 +129,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -173,10 +149,10 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
-            "button_ids": {
+            "button_id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -185,18 +161,17 @@ export class DdaTabs {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_ids",
                 "reflect": false,
-                "defaultValue": "'[\"tab-btn-1\", \"tab-btn-2\", \"tab-btn-3\"]'"
+                "attribute": "button_id"
             },
-            "tab_value": {
+            "aria_label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -212,8 +187,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tab_value",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "tab_texts": {
                 "type": "string",
@@ -231,8 +206,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tab_texts",
                 "reflect": false,
+                "attribute": "tab_texts",
                 "defaultValue": "'[\"Tab 1\", \"Tab 2\", \"Tab 3\"]'"
             },
             "tab_icons": {
@@ -251,8 +226,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tab_icons",
                 "reflect": false,
+                "attribute": "tab_icons",
                 "defaultValue": "'[\"sentiment_satisfied\", \"sentiment_satisfied\", \"sentiment_satisfied\"]'"
             },
             "button_name": {
@@ -271,48 +246,8 @@ export class DdaTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_name",
-                "reflect": false
-            },
-            "tab_type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'dda-horizontal-tab' | 'dda-vertical-tab'",
-                    "resolved": "\"dda-horizontal-tab\" | \"dda-vertical-tab\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "tab_type",
-                "reflect": false,
-                "defaultValue": "'dda-horizontal-tab'"
-            },
-            "button_values": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button_values",
                 "reflect": false,
-                "defaultValue": "'[\"\", \"\", \"\"]'"
+                "attribute": "button_name"
             }
         };
     }
@@ -333,11 +268,10 @@ export class DdaTabs {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
                 }
             }];
     }
 }
-//# sourceMappingURL=dda-tabs.js.map

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

@@ -21,22 +21,18 @@ export default {
             options: ['light-mode'],
             description: 'Mode of the tabs component',
         },
-        button_ids: {
-            control: { type: 'array' },
-            description: 'Array of Button IDs for accessibility',
+        button_id: {
+            control: { type: 'text' },
+            description: 'Button ID for accessibility',
         },
-        button_values: {
-            control: { type: 'array' },
-            description: 'Array of values for each tab button',
+        aria_label: {
+            control: { type: 'text' },
+            description: 'Aria label for the tabs component',
         },
         tab_texts: {
             control: { type: 'array' },
             description: 'Array of tab labels',
         },
-        tab_type: {
-            control: { type: 'select' },
-            options: ['dda-horizontal-tab', 'dda-vertical-tab'],
-        },
         onTabClick: {
             action: 'tab-clicked',
             description: 'Callback function when a tab is clicked',
@@ -49,28 +45,28 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-tabs\` component, pass the following props:
-
-  \`\`\`html
-    <dda-tabs
-      type="text"
-      hover_style="dda-tab-default"
-      custom_class=""
-      component_mode=""
-      button_ids='["tab-btn-1", "tab-btn-2", "tab-btn-3"]'
-      tab_texts='["Tab 1", "Tab 2", "Tab 3"]'
-      tab_type='dda-horizontal-tab'
-      onTabClick="handleTabClick"
-      button_name="button"
-    ></dda-tabs>
-
-    <script>
-      function handleTabClick(index) {
-        console.log('Clicked Tab:', index);
-      }
-    </script>
-  \`\`\`
+                component: `
+  To use the \`dda-tabs\` component, pass the following props:
+
+  \`\`\`html
+    <dda-tabs
+      type="text"
+      hover_style="dda-tab-default"
+      custom_class=""
+      component_mode=""
+      button_id="button"
+      aria_label="tabs"
+      tab_texts='["Tab 1", "Tab 2", "Tab 3"]'
+      onTabClick="handleTabClick"
+      button_name="button"
+    ></dda-tabs>
+
+    <script>
+      function handleTabClick(index) {
+        console.log('Clicked Tab:', index);
+      }
+    </script>
+  \`\`\`
   `,
             },
         },
@@ -89,12 +85,11 @@ TextTabs.args = {
     hover_style: 'dda-tab-default',
     custom_class: '',
     component_mode: '',
-    button_ids: ['tab-btn-1', 'tab-btn-2', 'tab-btn-3'],
-    button_values: ["val-1", "val-2", "val-3"],
+    button_id: 'button',
+    aria_label: 'tabs',
     tab_texts: ['Tab 1', 'Tab 2', 'Tab 3'],
-    tab_type: 'dda-horizontal-tab',
-    button_name: 'button',
     onTabClick: (index) => alert(`Tab ${index + 1} clicked!`), // Example event
+    button_name: 'button',
 };
 export const TextIconTabs = Template.bind({});
 TextIconTabs.args = {
@@ -102,11 +97,9 @@ TextIconTabs.args = {
     hover_style: 'dda-tab-default',
     custom_class: '',
     component_mode: '',
-    button_ids: ['tab-btn-1', 'tab-btn-2', 'tab-btn-3'],
-    button_values: ["val-1", "val-2", "val-3"],
+    button_id: 'button',
+    aria_label: 'tabs',
     tab_texts: ['Tab 1', 'Tab 2', 'Tab 3'],
-    tab_type: 'dda-horizontal-tab',
-    button_name: 'button',
     onTabClick: (index) => alert(`Tab ${index + 1} clicked!`), // Example event
+    button_name: 'button',
 };
-//# sourceMappingURL=dda-tabs.stories.js.map