globuswebcomponents 2.4.9 → 2.5.0

package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js

@@ -3,43 +3,36 @@ export class GbHorizontalTabs {
     constructor() {
         this.fullWidth = false;
         this.badge = false;
-        this.firstTabName = '';
-        this.secondTabName = '';
-        this.thirdTabName = '';
-        this.fourthTabName = '';
-        this.fifthTabName = '';
-        this.sixthTabName = '';
-        this.seventhTabName = '';
-        this.eighthTabName = '';
-        this.ninthTabName = '';
-        this.tenthTabName = '';
-        this.eleventhTabName = '';
-        this.twelfthTabName = '';
-        this.thirteenthTabName = '';
-        this.fourteenthTabName = '';
-        this.fifteenthTabName = '';
-        this.sixteenthTabName = '';
-        this.seventeenthTabName = '';
-        this.eighteenthTabName = '';
-        this.nineteenthTabName = '';
-        this.twentiethTabName = '';
+        this.tabs = [
+        // {
+        //   name: 'First',
+        //   index: 0,
+        //   badgeCount: '5',
+        // },
+        // {
+        //   name: 'Second',
+        //   index: 1,
+        //   badgeCount: '10',
+        // },
+        ];
+        this.internalTabs = [...this.tabs];
         this.internalActiveIndex = 0;
     }
     setActiveIndex(_oldValue, newValue) {
-        // console.log('totalPages changed from', oldValue, 'to', newValue);
         this.internalActiveIndex = newValue;
-        // this.generatePages();
+    }
+    onTabsChanged(newTabs) {
+        this.internalTabs = newTabs;
     }
     componentWillRender() {
         this.internalActiveIndex = this.activeIndex;
-        // setTimeout(() => {this.internalActiveIndex = 2}, 2000)
     }
     async handleTabClick(index) {
         this.activeIndex = index;
         this.tabItemClicked.emit(index);
     }
     render() {
-        return (h("div", { key: '5a38ebead293b7c856a045a6745f35c8724870d7', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, h("gb-tab-button-base", { key: '3c603fa6ddab309a88bc1b72a0554a574f3b83b7', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(0), current: this.internalActiveIndex === 0, "tab-name": this.firstTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'd56fd3d22576745bbde124b884b73138e75641d1', slot: "count", name: "first_tab_count" })), h("gb-tab-button-base", { key: '6c8d314cd8ed64a13c7eab52b8c1902cf19668fc', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(1), current: this.internalActiveIndex === 1, "tab-name": this.secondTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'd265dfe0fddcffe58067d44b223b2c282236b70b', slot: "count", name: "second_tab_count" })), this.thirdTabName && (h("gb-tab-button-base", { key: '4208f2b99db16fd331055077a21992d272681976', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(2), current: this.internalActiveIndex === 2, "tab-name": this.thirdTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'd44e704870e8f02d7c66c70c05078f98115fabe5', slot: "count", name: "third_tab_count" }))), this.fourthTabName && (h("gb-tab-button-base", { key: '71dd698adc8547a9c12b2a5525bfee1d288de816', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(3), current: this.internalActiveIndex === 3, "tab-name": this.fourthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'b10362c279d13467bbbbd43c595221b57da8221b', slot: "count", name: "fourth_tab_count" }))), this.fifthTabName && (h("gb-tab-button-base", { key: '9e67c205e0cc5004ef132388f85658d0a0ce994c', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(4), current: this.internalActiveIndex === 4, "tab-name": this.fifthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '1960820fb15d96c1a6aa24abaabb9ce5fbac27bb', slot: "count", name: "fifth_tab_count" }))), this.sixthTabName && (h("gb-tab-button-base", { key: 'f7e10dbcaaeb6baa292ed09097f19238a96a9ad4', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(5), current: this.internalActiveIndex === 5, "tab-name": this.sixthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '3a72baf48cc2effea6f69bd31a8e406762d4acac', slot: "count", name: "sixth_tab_count" }))), this.seventhTabName && (h("gb-tab-button-base", { key: '3f440d0b889e69b286301bffdce883c73000a7f3', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(6), current: this.internalActiveIndex === 6, "tab-name": this.seventhTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '48fb7967859f20c1cdad3b10e8719d639d38d505', slot: "count", name: "seventh_tab_count" }))), this.eighthTabName && (h("gb-tab-button-base", { key: '9a7a51bf5649525ae06302a241b5b277447a88d2', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(7), current: this.internalActiveIndex === 7, "tab-name": this.eighthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '824f1b970325f9b91732d855e66bdfe74dc038f2', slot: "count", name: "eighth_tab_count" }))), this.ninthTabName && (h("gb-tab-button-base", { key: 'd55e31011c745acb5848207d70df386f90402609', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(8), current: this.internalActiveIndex === 8, "tab-name": this.ninthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '4df30a2c223c7ea84137ef28d9272d5ba38ec276', slot: "count", name: "ninth_tab_count" }))), this.tenthTabName && (h("gb-tab-button-base", { key: '782619d9086acd62607178dd477a403d03bbad5b', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(9), current: this.internalActiveIndex === 9, "tab-name": this.tenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '59eb87a390c45455e637e2a13c8fe819d4069dff', slot: "count", name: "tenth_tab_count" }))), this.eleventhTabName && (h("gb-tab-button-base", { key: '528296054f27035b86617c39c6928a6cef06283b', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(10), current: this.internalActiveIndex === 10, "tab-name": this.eleventhTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '8e71bcc4513322f28a21fdcae28d98552dd1634a', slot: "count", name: "eleventh_tab_count" }))), this.twelfthTabName && (h("gb-tab-button-base", { key: 'dd9f415845766e5d2b40d3b512db0502dd75d7b2', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(11), current: this.internalActiveIndex === 11, "tab-name": this.twelfthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '76094c1e9e17a81d7fe1028e2f57a178e0b9f04e', slot: "count", name: "twelfth_tab_count" }))), this.thirteenthTabName && (h("gb-tab-button-base", { key: 'bb9e2ad06a2651771e921200ee6bb08271144bf5', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(12), current: this.internalActiveIndex === 12, "tab-name": this.thirteenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '542297cd1226829aecc850a88cdc60a7ea1b7f9f', slot: "count", name: "thirteenth_tab_count" }))), this.fourteenthTabName && (h("gb-tab-button-base", { key: 'fc2ea159f9641f404538ad6fb2120d5bc489cad3', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(13), current: this.internalActiveIndex === 13, "tab-name": this.fourteenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '64af958445b2a2063d9f7e537876e5f6019d241b', slot: "count", name: "fourteenth_tab_count" }))), this.fifteenthTabName && (h("gb-tab-button-base", { key: '35201a76fd39782f963fa5cacff82a4d31c22b5e', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(14), current: this.internalActiveIndex === 14, "tab-name": this.fifteenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '3d787104eb133d9ed5888cf144780aaeae2ed6e2', slot: "count", name: "fifteenth_tab_count" }))), this.sixteenthTabName && (h("gb-tab-button-base", { key: 'aadafaf945a6bb65b2f13731a2cbe8f397fb82d6', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(15), current: this.internalActiveIndex === 15, "tab-name": this.sixteenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'dea1c3e62cbbc1fb7c232e92fcb8dbbf52b35adc', slot: "count", name: "sixteenth_tab_count" }))), this.seventeenthTabName && (h("gb-tab-button-base", { key: '2f2cca4e897b8782cc4ca5cbbe072385a5256ce4', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(16), current: this.internalActiveIndex === 16, "tab-name": this.seventeenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'f809ff44d43b0ea3c858d16ed5e4eb2eb97c3006', slot: "count", name: "seventeenth_tab_count" }))), this.eighteenthTabName && (h("gb-tab-button-base", { key: '0474895bb5c54147616bb9c06d9d3d4a676ba08d', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(17), current: this.internalActiveIndex === 17, "tab-name": this.eighteenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'e804d6a17548111f917cd2d26f3dd4ff5b29ad47', slot: "count", name: "eighteenth_tab_count" }))), this.nineteenthTabName && (h("gb-tab-button-base", { key: '510e6f03a73a2c87aaa27701c65c6ac8e0285bf7', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(18), current: this.internalActiveIndex === 18, "tab-name": this.nineteenthTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: 'd4b2b1a4a1775303308c1008ff4ec0b07aac6635', slot: "count", name: "nineteenth_tab_count" }))), this.twentiethTabName && (h("gb-tab-button-base", { key: '11b5cc958a489158031dba2beb77dfe6761ebb34', class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(19), current: this.internalActiveIndex === 19, "tab-name": this.twentiethTabName, badge: this.badge, alignment: "horizontal" }, h("slot", { key: '2943f88d246a50eddc6aeb83d00b6089136fc30f', slot: "count", name: "twentieth_tab_count" })))));
+        return (h("div", { key: 'c39a8dcb5e33ff2ff2a2d7d2e2118bc4039a593f', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount))))));
     }
     static get is() { return "gb-horizontal-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -145,372 +138,12 @@ export class GbHorizontalTabs {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "firstTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "first-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "secondTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "second-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "thirdTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "third-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "fourthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "fourth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "fifthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "fifth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "sixthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "sixth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "seventhTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "seventh-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "eighthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "eighth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "ninthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "ninth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "tenthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "tenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "eleventhTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "eleventh-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "twelfthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "twelfth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "thirteenthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "thirteenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "fourteenthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "fourteenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "fifteenthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "fifteenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "sixteenthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "sixteenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "seventeenthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "seventeenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "eighteenthTabName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "eighteenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "nineteenthTabName": {
-                "type": "string",
-                "mutable": false,
+            "activeIndex": {
+                "type": "number",
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
@@ -521,16 +154,15 @@ export class GbHorizontalTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "nineteenth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "active-index",
+                "reflect": false
             },
-            "twentiethTabName": {
-                "type": "string",
+            "tabs": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "{ name: string; index: number; badgeCount?: string }[]",
+                    "resolved": "{ name: string; index: number; badgeCount?: string; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -541,33 +173,13 @@ export class GbHorizontalTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "twentieth-tab-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "activeIndex": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "active-index",
-                "reflect": false
+                "defaultValue": "[\r\n    // {\r\n    //   name: 'First',\r\n    //   index: 0,\r\n    //   badgeCount: '5',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n  ]"
             }
         };
     }
     static get states() {
         return {
+            "internalTabs": {},
             "internalActiveIndex": {}
         };
     }
@@ -593,6 +205,9 @@ export class GbHorizontalTabs {
         return [{
                 "propName": "activeIndex",
                 "methodName": "setActiveIndex"
+            }, {
+                "propName": "tabs",
+                "methodName": "onTabsChanged"
             }];
     }
 }

package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-horizontal-tabs',\r\n  styleUrl: 'gb-horizontal-tabs.css',\r\n  shadow: true,\r\n})\r\nexport class GbHorizontalTabs {\r\n  @Prop() type: TabTypes;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop() firstTabName: string = '';\r\n  @Prop() secondTabName: string = '';\r\n  @Prop() thirdTabName: string = '';\r\n  @Prop() fourthTabName: string = '';\r\n  @Prop() fifthTabName: string = '';\r\n  @Prop() sixthTabName: string = '';\r\n  @Prop() seventhTabName: string = '';\r\n  @Prop() eighthTabName: string = '';\r\n  @Prop() ninthTabName: string = '';\r\n  @Prop() tenthTabName: string = '';\r\n  @Prop() eleventhTabName: string = '';\r\n  @Prop() twelfthTabName: string = '';\r\n  @Prop() thirteenthTabName: string = '';\r\n  @Prop() fourteenthTabName: string = '';\r\n  @Prop() fifteenthTabName: string = '';\r\n  @Prop() sixteenthTabName: string = '';\r\n  @Prop() seventeenthTabName: string = '';\r\n  @Prop() eighteenthTabName: string = '';\r\n  @Prop() nineteenthTabName: string = '';\r\n  @Prop() twentiethTabName: string = '';\r\n  @Prop({ mutable: true }) activeIndex: number;\r\n  @State() internalActiveIndex: number = 0;\r\n  @Event() tabItemClicked: EventEmitter<number>;\r\n\r\n  @Watch('activeIndex')\r\n  setActiveIndex(_oldValue: number, newValue: number) {\r\n    // console.log('totalPages changed from', oldValue, 'to', newValue);\r\n    this.internalActiveIndex = newValue;\r\n    // this.generatePages();\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalActiveIndex = this.activeIndex;\r\n    // setTimeout(() => {this.internalActiveIndex = 2}, 2000)\r\n  }\r\n\r\n  async handleTabClick(index: number) {\r\n    this.activeIndex = index;\r\n    this.tabItemClicked.emit(index);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\r\n        <gb-tab-button-base\r\n          class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n          size={this.size}\r\n          full-width={this.fullWidth}\r\n          type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n          onClick={() => this.handleTabClick(0)}\r\n          current={this.internalActiveIndex === 0}\r\n          tab-name={this.firstTabName}\r\n          badge={this.badge}\r\n          alignment=\"horizontal\"\r\n        >\r\n          <slot slot=\"count\" name=\"first_tab_count\"></slot>\r\n        </gb-tab-button-base>\r\n        <gb-tab-button-base\r\n          class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n          size={this.size}\r\n          full-width={this.fullWidth}\r\n          type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n          onClick={() => this.handleTabClick(1)}\r\n          current={this.internalActiveIndex === 1}\r\n          tab-name={this.secondTabName}\r\n          badge={this.badge}\r\n          alignment=\"horizontal\"\r\n        >\r\n          <slot slot=\"count\" name=\"second_tab_count\"></slot>\r\n        </gb-tab-button-base>\r\n        {this.thirdTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(2)}\r\n            current={this.internalActiveIndex === 2}\r\n            tab-name={this.thirdTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"third_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.fourthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(3)}\r\n            current={this.internalActiveIndex === 3}\r\n            tab-name={this.fourthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"fourth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.fifthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(4)}\r\n            current={this.internalActiveIndex === 4}\r\n            tab-name={this.fifthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"fifth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.sixthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(5)}\r\n            current={this.internalActiveIndex === 5}\r\n            tab-name={this.sixthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"sixth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.seventhTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(6)}\r\n            current={this.internalActiveIndex === 6}\r\n            tab-name={this.seventhTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"seventh_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.eighthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(7)}\r\n            current={this.internalActiveIndex === 7}\r\n            tab-name={this.eighthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"eighth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.ninthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(8)}\r\n            current={this.internalActiveIndex === 8}\r\n            tab-name={this.ninthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"ninth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.tenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(9)}\r\n            current={this.internalActiveIndex === 9}\r\n            tab-name={this.tenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"tenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.eleventhTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(10)}\r\n            current={this.internalActiveIndex === 10}\r\n            tab-name={this.eleventhTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"eleventh_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.twelfthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(11)}\r\n            current={this.internalActiveIndex === 11}\r\n            tab-name={this.twelfthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"twelfth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.thirteenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(12)}\r\n            current={this.internalActiveIndex === 12}\r\n            tab-name={this.thirteenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"thirteenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.fourteenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(13)}\r\n            current={this.internalActiveIndex === 13}\r\n            tab-name={this.fourteenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"fourteenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.fifteenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(14)}\r\n            current={this.internalActiveIndex === 14}\r\n            tab-name={this.fifteenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"fifteenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.sixteenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(15)}\r\n            current={this.internalActiveIndex === 15}\r\n            tab-name={this.sixteenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"sixteenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.seventeenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(16)}\r\n            current={this.internalActiveIndex === 16}\r\n            tab-name={this.seventeenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"seventeenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.eighteenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(17)}\r\n            current={this.internalActiveIndex === 17}\r\n            tab-name={this.eighteenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"eighteenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.nineteenthTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(18)}\r\n            current={this.internalActiveIndex === 18}\r\n            tab-name={this.nineteenthTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"nineteenth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n        {this.twentiethTabName && (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(19)}\r\n            current={this.internalActiveIndex === 19}\r\n            tab-name={this.twentiethTabName}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <slot slot=\"count\" name=\"twentieth_tab_count\"></slot>\r\n          </gb-tab-button-base>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-horizontal-tabs.js","sourceRoot":"","sources":["../../../src/components/gb-horizontal-tabs/gb-horizontal-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQtF,MAAM,OAAO,gBAAgB;IAL7B;QAQU,cAAS,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAY,KAAK,CAAC;QAEvB,SAAI,GAA2D;QACrE,IAAI;QACJ,mBAAmB;QACnB,cAAc;QACd,qBAAqB;QACrB,KAAK;QACL,IAAI;QACJ,oBAAoB;QACpB,cAAc;QACd,sBAAsB;QACtB,KAAK;SACN,CAAC;QACO,iBAAY,GAA2D,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACtF,wBAAmB,GAAW,CAAC,CAAC;KA2C1C;IAvCC,cAAc,CAAC,SAAiB,EAAE,QAAgB;QAChD,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;IACtC,CAAC;IAGD,aAAa,CAAC,OAA+D;QAC3E,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9C,CAAC;IAED,KAAK,CAAC,cAAc,CAAC,KAAa;QAChC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,IAChF,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,0BACE,KAAK,EAAE,mBAAmB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9D,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,IAAI,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,qBAAqB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,6BAA6B,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC7I,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,mBAAmB,KAAK,KAAK,cACjC,GAAG,CAAC,IAAI,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAC,YAAY;YAEtB,SAAG,IAAI,EAAC,OAAO,IAAE,GAAG,CAAC,UAAU,CAAK,CACjB,CACtB,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-horizontal-tabs',\r\n  styleUrl: 'gb-horizontal-tabs.css',\r\n  shadow: true,\r\n})\r\nexport class GbHorizontalTabs {\r\n  @Prop() type: TabTypes;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop({ mutable: true }) activeIndex: number;\r\n  @Prop() tabs: { name: string; index: number; badgeCount?: string }[] = [\r\n    // {\r\n    //   name: 'First',\r\n    //   index: 0,\r\n    //   badgeCount: '5',\r\n    // },\r\n    // {\r\n    //   name: 'Second',\r\n    //   index: 1,\r\n    //   badgeCount: '10',\r\n    // },\r\n  ];\r\n  @State() internalTabs: { name: string; index: number; badgeCount?: string }[] = [...this.tabs];\r\n  @State() internalActiveIndex: number = 0;\r\n  @Event() tabItemClicked: EventEmitter<number>;\r\n\r\n  @Watch('activeIndex')\r\n  setActiveIndex(_oldValue: number, newValue: number) {\r\n    this.internalActiveIndex = newValue;\r\n  }\r\n\r\n  @Watch('tabs')\r\n  onTabsChanged(newTabs: { name: string; index: number; badgeCount?: string }[]) {\r\n    this.internalTabs = newTabs;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalActiveIndex = this.activeIndex;\r\n  }\r\n\r\n  async handleTabClick(index: number) {\r\n    this.activeIndex = index;\r\n    this.tabItemClicked.emit(index);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}`}>\r\n        {this.internalTabs.map((tab, index) => (\r\n          <gb-tab-button-base\r\n            class={`tab_button_base ${this.fullWidth ? 'full_width' : ''}`}\r\n            size={this.size}\r\n            full-width={this.fullWidth}\r\n            type={this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type}\r\n            onClick={() => this.handleTabClick(index)}\r\n            current={this.internalActiveIndex === index}\r\n            tab-name={tab.name}\r\n            badge={this.badge}\r\n            alignment=\"horizontal\"\r\n          >\r\n            <p slot=\"count\">{tab.badgeCount}</p>\r\n          </gb-tab-button-base>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-icon-button-base/gb-icon-button-base.js

@@ -17,7 +17,7 @@ export class GbIconButtonBase {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '31910b459a8dbccb9e9147b915006e4d0b31f09a', class: "icon_button_base_container" }, this.showTooltip && (h("gb-tooltip", { key: 'ce57822a2e4267788ccf1e1ad62eee6faceb7a00', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '25df4c83498b7f691e7270499cc6155272ee9dde', slot: "label" }, this.label))), h("div", { key: '07a7ca6ce8e04dc9ee909def6d8917ecdeda9b68', class: `icon_button_base_div ${this.current ? 'current' : ''}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '6f4146742d8aa37a999443ffaeae413e4a7b1810', class: `icon ${this.current ? 'current' : ''}`, innerHTML: this.leadingIconSvg }))));
+        return (h("div", { key: '90121ef382443625b1f35b458c9886e980bf11a4', class: "icon_button_base_container" }, this.showTooltip && (h("gb-tooltip", { key: 'f7a4a843335dca78ef0e010496424af014f9db22', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: 'ea632f823e9a7e7d2941ecb69607085b848f49ca', slot: "label" }, this.label))), h("div", { key: '62f6d44ef73fdc46cda2e2769c58a16da9341836', class: `icon_button_base_div ${this.current ? 'current' : ''}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'df1c812b51a6de51f446dce0b4dc72f57eedf199', class: `icon ${this.current ? 'current' : ''}`, innerHTML: this.leadingIconSvg }))));
     }
     static get is() { return "gb-icon-button-base"; }
     static get encapsulation() { return "shadow"; }