globuswebcomponents 1.8.4 → 1.8.6

package/dist/collection/components/gb-table-header/gb-table-header.js

@@ -0,0 +1,317 @@
+import { h } from "@stencil/core";
+export class GbTableHeader {
+    constructor() {
+        this.showFilter = false;
+        this.showColumnOptions = false;
+        this.tableHeading = false;
+        this.showSearch = false;
+        this.showExport = false;
+        this.showRefreshButton = false;
+        this.tableHeadingLabel = '';
+        this.filterCount = '';
+        this.width = window.innerWidth;
+        this.showExportDropdown = false;
+        this.handleResize = () => {
+            this.width = window.innerWidth;
+            this.updateButtonIcon();
+        };
+    }
+    componentWillLoad() {
+        this.updateButtonIcon(); // Set initial variant
+        window.addEventListener('resize', this.handleResize);
+    }
+    toggleDropdown() {
+        this.showExportDropdown = !this.showExportDropdown;
+    }
+    updateButtonIcon() {
+        this.buttonIcon = this.width < 1007 ? 'only' : 'default';
+    }
+    emitValue(inputValue) {
+        console.log(inputValue.detail);
+    }
+    onFilterButtonClicked() {
+        this.filterButtonClicked.emit();
+    }
+    emitSelection(selection) {
+        console.log(selection);
+        this.exportClicked.emit(selection);
+    }
+    onRefreshButtonClicked() {
+        this.refreshButtonClicked.emit();
+    }
+    render() {
+        return (h("div", { key: 'cb2b02bd222e513709edf356f0e9b6a388903b9e', class: "table_header_div" }, h("div", { key: 'c1413b889c832bc076a9e350ea0faa2f2bfee44a', class: "table_header_content" }, this.tableHeading && h("p", { key: '03a41a450a34917b3adf4d6569415c42499ce4db', class: "text-lg-semi-bold" }, this.tableHeadingLabel), h("div", { key: '9322fdd6f8d8c05097b1d6ea128134296e41f5db', class: "actions" }, this.showSearch && (h("div", { key: 'c3e774b9ebbd32f4c2c5ae39818999a61ce99594', class: "input_field" }, h("gb-input-field", { key: 'fc57853bf81f3120a131f5184e3279b283a0fc7f', size: "sm", type: "icon_leading", "icon-swap": "assets/search-01.svg", placeholder: "Search", onInputValueChanged: this.emitValue.bind(this) }))), h("div", { key: '5dc774c3046fcd0429b10e9aa21a683084da3c4d', class: "action" }, this.showColumnOptions && (h("gb-button", { key: 'c2d29ff42cee4afda7ab2c24bcae4a65854fee8b', size: "md", hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/column-insert.svg" }, h("p", { key: '06fc57b4bf3f7998656895c45360e9492fd485f7' }, "Columns"))), this.showFilter && (h("gb-filter-button", { key: '7b6f2ad3fff274fd6cabc5e1a9f35d70adced5d3', state: this.filterState, "icon-only": this.width <= 1007 ? true : false, onClick: () => this.onFilterButtonClicked() }, h("p", { key: '5ac26fd7d9ff3e6dc124efb656096a6b4feefd96', slot: "filter_count" }, this.filterCount))), this.showExport && (h("div", { key: '0b03c3d4d779db3cb931146910ef387b6571ba46', class: "export" }, h("gb-button", { key: 'dbd4be35c92722d882285caa2b7291e6b725f92b', size: "md", hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/file-export.svg", "icon-trailing": this.width <= 1007 ? false : true, "icon-trailing-swap": "assets/arrow-down-01.svg", onClick: () => this.toggleDropdown() }, h("p", { key: 'acff8052a2a13b0dbc5a78ed8683f49623c1a51d' }, "Export")), this.showExportDropdown && h("gb-export-dropdown", { key: '689e46b5571d49c7b06f4e62d5a609c93e7475f5', onExportClicked: () => this.emitSelection.bind(this), class: "dropdown" }))), this.showRefreshButton && (h("div", { key: '8fd4d15e17c4d9977f1ad1bd49cc27ff43521b37', class: "refresh_button" }, h("gb-button", { key: 'a0d16d9b7b06a812808559ea7dc8efd39aa5b4de', size: "md", hierarchy: "secondary_gray", icon: this.width <= 1007 ? 'only' : 'default', "icon-leading": true, "icon-leading-swap": "assets/refresh.svg", onClick: () => this.onRefreshButtonClicked() }))))))));
+    }
+    static get is() { return "gb-table-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-table-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-table-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-filter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showColumnOptions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-column-options",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tableHeading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "table-heading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showExport": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-export",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showRefreshButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-refresh-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tableHeadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "table-heading-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "filterCount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-count",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "filterState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateType",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\"",
+                    "references": {
+                        "StateType": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-state",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "width": {},
+            "buttonIcon": {},
+            "showExportDropdown": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputValueChanged",
+                "name": "inputValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "filterButtonClicked",
+                "name": "filterButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "exportClicked",
+                "name": "exportClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "refreshButtonClicked",
+                "name": "refreshButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=gb-table-header.js.map

package/dist/collection/components/gb-table-header/gb-table-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-table-header.js","sourceRoot":"","sources":["../../../src/components/gb-table-header/gb-table-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\r\nimport { StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-table-header',\r\n  styleUrl: 'gb-table-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbTableHeader {\r\n  @Prop() showFilter: boolean = false;\r\n  @Prop() showColumnOptions: boolean = false;\r\n  @Prop() tableHeading: boolean = false;\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() showExport: boolean = false;\r\n  @Prop() showRefreshButton: boolean = false;\r\n  @Prop() tableHeadingLabel: string = '';\r\n  @Prop() filterCount: string = '';\r\n  @Prop() filterState: StateType;\r\n  @State() width: number = window.innerWidth;\r\n  @State() buttonIcon: 'default' | 'only';\r\n  @State() showExportDropdown: boolean = false;\r\n  @Event() inputValueChanged: EventEmitter<void>;\r\n  @Event() filterButtonClicked: EventEmitter<void>;\r\n  @Event() exportClicked: EventEmitter<void>;\r\n  @Event() refreshButtonClicked: EventEmitter<void>;\r\n\r\n  componentWillLoad() {\r\n    this.updateButtonIcon(); // Set initial variant\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  toggleDropdown() {\r\n    this.showExportDropdown = !this.showExportDropdown;\r\n  }\r\n\r\n  private handleResize = () => {\r\n    this.width = window.innerWidth;\r\n    this.updateButtonIcon();\r\n  };\r\n\r\n  private updateButtonIcon() {\r\n    this.buttonIcon = this.width < 1007 ? 'only' : 'default';\r\n  }\r\n\r\n  emitValue(inputValue) {\r\n    console.log(inputValue.detail);\r\n  }\r\n\r\n  onFilterButtonClicked() {\r\n    this.filterButtonClicked.emit();\r\n  }\r\n\r\n  emitSelection(selection) {\r\n    console.log(selection);\r\n    this.exportClicked.emit(selection);\r\n  }\r\n\r\n  onRefreshButtonClicked() {\r\n    this.refreshButtonClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"table_header_div\">\r\n        <div class=\"table_header_content\">\r\n          {this.tableHeading && <p class=\"text-lg-semi-bold\">{this.tableHeadingLabel}</p>}\r\n          <div class=\"actions\">\r\n            {this.showSearch && (\r\n              <div class=\"input_field\">\r\n                <gb-input-field\r\n                  size=\"sm\"\r\n                  type=\"icon_leading\"\r\n                  icon-swap=\"assets/search-01.svg\"\r\n                  placeholder=\"Search\"\r\n                  onInputValueChanged={this.emitValue.bind(this)}\r\n                ></gb-input-field>\r\n              </div>\r\n            )}\r\n            <div class=\"action\">\r\n              {this.showColumnOptions && (\r\n                <gb-button size=\"md\" hierarchy=\"secondary_gray\" icon={this.width <= 1007 ? 'only' : 'default'} icon-leading={true} icon-leading-swap=\"assets/column-insert.svg\">\r\n                  <p>Columns</p>\r\n                </gb-button>\r\n              )}\r\n              {this.showFilter && (\r\n                <gb-filter-button state={this.filterState} icon-only={this.width <= 1007 ? true : false} onClick={() => this.onFilterButtonClicked()}>\r\n                  <p slot=\"filter_count\">{this.filterCount}</p>\r\n                </gb-filter-button>\r\n              )}\r\n              {this.showExport && (\r\n                <div class=\"export\">\r\n                  <gb-button\r\n                    size=\"md\"\r\n                    hierarchy=\"secondary_gray\"\r\n                    icon={this.width <= 1007 ? 'only' : 'default'}\r\n                    icon-leading={true}\r\n                    icon-leading-swap=\"assets/file-export.svg\"\r\n                    icon-trailing={this.width <= 1007 ? false : true}\r\n                    icon-trailing-swap=\"assets/arrow-down-01.svg\"\r\n                    onClick={() => this.toggleDropdown()}\r\n                  >\r\n                    <p>Export</p>\r\n                  </gb-button>\r\n                  {this.showExportDropdown && <gb-export-dropdown onExportClicked={() => this.emitSelection.bind(this)} class=\"dropdown\"></gb-export-dropdown>}\r\n                </div>\r\n              )}\r\n              {this.showRefreshButton && (\r\n                <div class=\"refresh_button\">\r\n                  <gb-button\r\n                    size=\"md\"\r\n                    hierarchy=\"secondary_gray\"\r\n                    icon={this.width <= 1007 ? 'only' : 'default'}\r\n                    icon-leading={true}\r\n                    icon-leading-swap=\"assets/refresh.svg\"\r\n                    onClick={() => this.onRefreshButtonClicked()}\r\n                  ></gb-button>\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-tag/gb-tag.js

@@ -22,7 +22,7 @@ export class GbTag {
     }
     render() {
         const flagSwap = getAssetPath(`${this.flagSwap}`);
-        return (h("div", { key: '944ef5c03c471056d3b7e3d20102a946d3f79449', class: `container ${this.size}` }, h("div", { key: '37670750696b44552c0b51d2607c90909a20aae9', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: '1f55e8795ad69aa66748320b7726654397623177', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: 'efdce9ac06eb025828695fd765607e9ec4d33887', class: "icon left-icon" }, h("img", { key: 'fd16004e1ccd7aca3fd4fbe325126fe9641b0f9a', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '7e38a26f1bdda07a6c95a3a19592f2fc982646b0', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: '682b6ac6c55717a98bfb8084c3b690b5c33eb9c8', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: 'bbd2c83ccde1ce367172e60c164bf173ac38d734', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: '92fed2179331beca3ae3f222fae1e067e76b5401', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: '8886875440ae10e82595c7fe4d26c2b117204e23', class: "label" }, h("slot", { key: '6e9c8ef9e46ea22f81a08918d07dbf63b7e6130a' })), this.action === 'count' && (h("gb-tag-count", { key: '93d4af4c65239c6b43fa07b1e07cb0cf31f2f667', size: this.size }, h("slot", { key: '009cc1895040432a09c9b016ea321f27a0959c35', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: 'b32fccefafec59d6dfc17df144b7600d59d5c494', size: this.size, onClick: () => this.onTagClose() })));
+        return (h("div", { key: 'a858a9db7a65514002c509d735dbfb7f8005b124', class: `container ${this.size}` }, h("div", { key: 'dd859b8dc8a7dbed4d1fbbb57de05d9d77cfc630', class: `content ${this.size}` }, this.checkbox && h("gb-tag-checkbox", { key: '735233f58e8068b98cfcbc01aaf368dacf2d1092', size: this.size }), this.icon === 'false' && h(Fragment, null), this.icon === 'country' && (h("div", { key: '8227d70722c35305daf00bcf4c4d45b9491743b2', class: "icon left-icon" }, h("img", { key: '9b9a3db8e06b1175fc430296d95f03d77ab8a700', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: 'ddb14389685588e211421d28b63cc88b907bfde3', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, h("slot", { key: '5c719f3446c625258dda3862a5b779a154a12c51', name: "initials", slot: "initials" }))), this.icon === 'dot' && (h("svg", { key: '6194cc9c4b3809ffa5665f7a30e65e32e6bf9545', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'a6627440afc5837eaff0f241f1a553df2c6e7290', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("div", { key: '640b4ab697a51471ed0baf636c7949a9b75c519c', class: "label" }, h("slot", { key: 'f40db1b614f12ed23ec6da06136cc5967d35e478' })), this.action === 'count' && (h("gb-tag-count", { key: '216cfa5c7847edd0e19a7a3e8551e7462fb50a40', size: this.size }, h("slot", { key: 'dcc8507e26ed69eab281dcd03cb207280bd54e97', slot: "count", name: "count" })))), this.action === 'X_close' && h("gb-tag-close", { key: 'a158c8fbb080e24b9ce3cb34ececf22efb8c6bb8', size: this.size, onClick: () => this.onTagClose() })));
     }
     static get is() { return "gb-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-checkbox/gb-tag-checkbox.js

@@ -6,7 +6,7 @@ export class GbTagCheckbox {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '6d997f9093ed83ad5eebfc39d20012712a7809ce', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '6a0b2655aa1167dc93e46e0f4e166b3af688229e', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: '1a481c13a15a56169b8d0f8bb6fea974dc91ff72', class: `custom-checkbox ${this.size}` }, h("svg", { key: '67e84a3837206287adce80e5044425fa6ad906c3', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'e77c2a0219526e315059e2fe423b14d466ba2611', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("label", { key: '63bb54df7ddabd54eb908e32cad39fd7af869e82', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '9861fc12f57bab24fd7e0822289a40c083254dc9', type: "checkbox", checked: this.checked, disabled: this.disabled }), h("span", { key: '6568e97ee96f1c0ab4b38b312e98efe55210ff36', class: `custom-checkbox ${this.size}` }, h("svg", { key: '5c9a63bc45d599d578229e498bdaacc2f26f53ee', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'd1b597d8e4d7d1f92634055c4c0ce6bcb40faf5e', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "gb-tag-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-close/gb-tag-close.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbTagClose {
     render() {
-        return (h("div", { key: 'def3824d1a4626e0a3b593f7688bcb8f48efeead', class: this.size }, h("svg", { key: '616c2905696186e08fe3895f9f3705bae961692b', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: 'cfded1eea0613a51d2dd776755411c5820b78ed6', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: 'c32bd8d7d0d1323dae466cab0d22869f5b95cff6', class: this.size }, h("svg", { key: '4696f104154bffb4c88ad66c641e49b8ad8c16ce', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: '48903eb298bb1b2f28437d5613c905ae312a18cd', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-tag-close"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tag-count/gb-tag-count.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbTagCount {
     render() {
-        return (h("div", { key: 'b2729c95b16d28ee4b9a126a29a75a9139b1d614', class: this.size }, h("slot", { key: 'e88f4ba5cf7fc68e586c9d7a0fc9d0bfff5745d4', name: "count" })));
+        return (h("div", { key: 'f287986e2a975b4bf8875c6e371115fccfb0eadb', class: this.size }, h("slot", { key: '058d6601fc06a6305d51f71bd0b9022b48313fbb', name: "count" })));
     }
     static get is() { return "gb-tag-count"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js

@@ -184,14 +184,14 @@ export class GbTextareaInputField {
         }
     }
     render() {
-        return (h("div", { key: '46bc5837787a533a7e7e978a7a4489895cadfe25', class: "textarea_container" }, h("div", { key: '0a7c4043120cbc295ccf347b6d1fb8dc6739bbd6', class: "input_with_label" }, this.showLabel && h("p", { key: '01ee6eff457b7464972439fb4a6f7832e2d52b0a', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '0dbfa6fbfafc778773130dfb65266a2d7924265f', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: '6d96ed9d2570725543627012d85655023b43bdb1', class: "textarea_tags" }, h("div", { key: '9209621cbe1a27bdba6639c35b470fac80fa49d9', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: '81c60ab96eaabc5eb7124c55d8144ed700c9b776', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
+        return (h("div", { key: 'e07efcf4fb25b5997606f28cce55e0058e739a00', class: "textarea_container" }, h("div", { key: 'daf81f5e8795daffec19ccf1eb15c344acefa31a', class: "input_with_label" }, this.showLabel && h("p", { key: 'd8ec363fc5c9f4e2e0ab4dde85cdbdf7b1e1125c', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: 'b95056339da758bc7fdc84284f1bb5131023ba5d', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: 'f9707204097dcaa0e41fa7ebd56494a63c266281', class: "textarea_tags" }, h("div", { key: '88e2db55fac09b27b927c822e1b4d56f6c4f9139', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: 'd226bebcdd727ce3a8fcd938675559bb9bf159db', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
             .split(' ')
             .map(part => part.charAt(0).toUpperCase())
-            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: '258e2fc47fb669e2cf8e9c75cebe11ec45d9db0c', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: '06345e55db1b531713e2fe24252247e8d01560a1', class: "input_field" }, h("input", { key: '7e8eab2c2072b35c6bf5d02229a4dcca2072a754', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
+            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: 'b0823bbe1032fe4e7c25de54ebbe8554bcbc3547', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: '3c6b860f79927897b0ab83977e44e3972a70b5f9', class: "input_field" }, h("input", { key: 'a95432d685913c4dc38c46958859c2a739d0ba7a', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
             // placeholder={this.placeholderText}
-            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: '7d8a3f84daa09fbc0360c6ae5814d414f99d8919', class: "help_icon" }, h("svg", { key: 'bab64a5962380b664ce84c1fc5142aad92b792b7', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'e2a237c1885d08a253b92dc6f83a0bb1cf215bf4', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: 'b7d7a268f7af36d69f780028313b13c0cad4947f', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
+            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: '37a73a541043dda2742520b8b114687e240861f4', class: "help_icon" }, h("svg", { key: '4137a7e6dcf4dcb797a51e933df8edf72ee0bd60', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '046d357baef6349a5b42dced6024a74d78fa022c', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: 'c63d3c7b42026eb038676e5d8ff952fcb26de9c1', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
             ? [h("p", { slot: "name" }, item.objectName), h("p", { slot: "supporting_text" }, item.objectValue)]
-            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: 'eb02cd520c73a819af0140a1f5c9401f535f8516', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
+            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: '1c6091b23850104b1c69dd4aebd29c70566b6d5b', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
     }
     static get is() { return "gb-textarea-input-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js

@@ -16,7 +16,7 @@ export class GbThemeTab {
         const systemIconSrc = getAssetPath(`assets/laptop.svg`);
         const sunSrc = getAssetPath(`assets/sun-02.svg`);
         const moonSrc = getAssetPath(`assets/moon-02.svg`);
-        return (h("div", { key: '1b8c4ae3b5a78298dbca0d76cbfb379d9150e8c6', class: `theme_tab_div` }, h("div", { key: '7f2d826cc6ceffc8d396b782431eadaa281e2f6b', class: "tab" }, h("gb-icon-button-base", { key: '6b979fc97fd82783e6c1dba6df653bb4fd0c56c2', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: 'df7523bdaaa12db849b81e3193568ade86b5e9b5', class: "tab" }, h("gb-icon-button-base", { key: 'b5cdae44ac33e163c0c08145ee3f986451a9d146', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: '6be135e9af512ad93ca744496ca0ce998035ee5f', class: "tab" }, h("gb-icon-button-base", { key: '827e9e3870fce878684dffe1f206a2aed6c5a7e3', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
+        return (h("div", { key: 'b28506c4c482a87b4328ca8b2b42fb0714ebc4ab', class: `theme_tab_div` }, h("div", { key: '01223dba3d9f1b0035c63c7ba285b073a25c1588', class: "tab" }, h("gb-icon-button-base", { key: 'd9e77751a004530ec5f8a4907bf74c4a9934dc47', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: '21b83bc3a9f345329ea05d2db866ee1c2b714457', class: "tab" }, h("gb-icon-button-base", { key: '0209c0d455fd7ed369c1d4fb9c9c8278bbd79ee3', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: '62652eb88fbea6b18b57cab49dc72c986f78a5cd', class: "tab" }, h("gb-icon-button-base", { key: 'f8aba02a0d3aae05c0bff0689d04593531483367', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
     }
     static get is() { return "gb-theme-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -56,14 +56,29 @@ export class GbThemeTab {
                 "setter": false,
                 "attribute": "theme",
                 "reflect": false
+            },
+            "currentActiveTab": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "current-active-tab",
+                "reflect": false,
+                "defaultValue": "'system'"
             }
         };
     }
-    static get states() {
-        return {
-            "currentActiveTab": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "themeTabClicked",

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-theme-tab.js","sourceRoot":"","sources":["../../../src/components/gb-theme-tab/gb-theme-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQtG,MAAM,OAAO,UAAU;IALvB;QAQW,qBAAgB,GAAW,QAAQ,CAAC;KA4C9C;IAzCC,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,oCAAoC;QACpC,IAAI,CAAC,EAAE,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,EAAE,KAAK,EAAE;YACjB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,cAAc;SAC/B,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACxD,MAAM,MAAM,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;QAEnD,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EAAqB,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAwB,CACrK,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-theme-tab',\r\n  styleUrl: 'gb-theme-tab.css',\r\n  shadow: true,\r\n})\r\nexport class GbThemeTab {\r\n  @Prop({ mutable: true }) theme: ThemeTypes;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n  @State() currentActiveTab: string = 'system';\r\n  @Element() el: HTMLElement;\r\n\r\n  tabClicked(theme: string) {\r\n    this.currentActiveTab = theme;\r\n    // this.themeTabClicked.emit(theme);\r\n    this.el.dispatchEvent(\r\n      new CustomEvent('themeChange', {\r\n        detail: { theme },\r\n        bubbles: true,\r\n        composed: true, // This is key\r\n      }),\r\n    );    \r\n  }\r\n\r\n  render() {\r\n    const systemIconSrc = getAssetPath(`assets/laptop.svg`);\r\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\r\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\r\n\r\n    return (\r\n      <div class={`theme_tab_div`}>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'system' ? true : false}\r\n            icon={systemIconSrc}\r\n            label=\"System\"\r\n            onClick={() => this.tabClicked('system')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'light' ? true : false}\r\n            icon={sunSrc}\r\n            label=\"Light\"\r\n            onClick={() => this.tabClicked('light')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base current={this.currentActiveTab === 'dark' ? true : false} icon={moonSrc} label=\"Dark\" onClick={() => this.tabClicked('dark')}></gb-icon-button-base>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-theme-tab.js","sourceRoot":"","sources":["../../../src/components/gb-theme-tab/gb-theme-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,UAAU;IALvB;QAQ2B,qBAAgB,GAAW,QAAQ,CAAC;KA4C9D;IAzCC,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,oCAAoC;QACpC,IAAI,CAAC,EAAE,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,EAAE,KAAK,EAAE;YACjB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,cAAc;SAC/B,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACxD,MAAM,MAAM,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;QAEnD,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EAAqB,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAwB,CACrK,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, getAssetPath, h } from '@stencil/core';\r\nimport { ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-theme-tab',\r\n  styleUrl: 'gb-theme-tab.css',\r\n  shadow: true,\r\n})\r\nexport class GbThemeTab {\r\n  @Prop({ mutable: true }) theme: ThemeTypes;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n  @Prop({ mutable: true }) currentActiveTab: string = 'system';\r\n  @Element() el: HTMLElement;\r\n\r\n  tabClicked(theme: string) {\r\n    this.currentActiveTab = theme;\r\n    // this.themeTabClicked.emit(theme);\r\n    this.el.dispatchEvent(\r\n      new CustomEvent('themeChange', {\r\n        detail: { theme },\r\n        bubbles: true,\r\n        composed: true, // This is key\r\n      }),\r\n    );    \r\n  }\r\n\r\n  render() {\r\n    const systemIconSrc = getAssetPath(`assets/laptop.svg`);\r\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\r\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\r\n\r\n    return (\r\n      <div class={`theme_tab_div`}>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'system' ? true : false}\r\n            icon={systemIconSrc}\r\n            label=\"System\"\r\n            onClick={() => this.tabClicked('system')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'light' ? true : false}\r\n            icon={sunSrc}\r\n            label=\"Light\"\r\n            onClick={() => this.tabClicked('light')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base current={this.currentActiveTab === 'dark' ? true : false} icon={moonSrc} label=\"Dark\" onClick={() => this.tabClicked('dark')}></gb-icon-button-base>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-toast/gb-toast.js

@@ -54,7 +54,7 @@ export class GbToast {
         }
     }
     render() {
-        return (h("div", { key: '013713b0a00ea3d139d9d78b4f455019690fc4ea', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: 'fa28297e53acdf982d4ce289d99c5c6b1e44ead1', class: `icon_container` }, h("svg", { key: 'b398c56f93337a6b313a0a24150b537d7430df8c', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: 'cd046f7fe9604184569ee3db68a107b185241b4f', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: 'd33a07881cc5c42cb1b3ffa5901852011e045ab2', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: '849cfb84f85b4a83fe98f04fe6dfa47b6a1c8ff7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '84359dea26036467879480cee3efa42daddcdf86', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: '03f1192e6bcdb13e99ac1b3a2f83dfa1c8ac2ae3', class: `text ${this.size}` }, h("slot", { key: '7776583e414a894a4110321054133bfab430e28f', name: "main_text" }), this.showSupportingText && h("slot", { key: '198771468567c5bf82750558cb63e4f7976f739c', name: "supporting_text" })), this.actions && (h("div", { key: '70d3f0250c31504d66c692d0265826304610d40a', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: '10006e1bd77409989ff6a08d95fd51a2f605d09b', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: 'b5f195b13ea5feac2c7f06e2ac4c020819994a9a', class: `container ${this.breakpoint}` }, h("div", { key: 'fdc87c38afa5cecb3a62d02146fb7d5f0573c78e', class: `full_width_content ${this.breakpoint}` }, h("div", { key: 'ff1a7b9fdc8b0f8e30e4acf242925357c00f61f9', class: `inner_content ${this.breakpoint}` }, h("div", { key: '6844874bc12d57e8f52b9014a5c6f1367e9d9220', class: `icon_container` }, h("svg", { key: 'bb03fde445e3bd94564039c7958eb949dddd70e4', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: 'ab702e8b13670f03a3efaea638d661de695f6c92', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '1ae5c4cacc5d7bb14146bf83ab9f9bbdd08c8737', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'dbe589c309d3f355dec0c62e311339eb4996adb3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '94178a54e23b7f5a6d3f71f62cd4ec2fb0e6d29a', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: '0a3c12e032e821bfba577cd64f3f011f4be0f09e', name: "main_text" }), this.showSupportingText && h("slot", { key: '36dcc9290a1be687b1b19a53064a7a7e9b05c340', name: "supporting_text" }))), this.actions && (h("div", { key: '3615542dd39c9c43fe80ef599ca2ff5bc9743d8a', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: 'fb8146475f5d05a17551430c88b86cef1448f775', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}`, onClick: () => this.closeToast() }))))));
+        return (h("div", { key: 'ec29a186c6b565acd11c238e6e835696b34579f8', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: '136fe98eff1a693d0e55887b5510e5c7afa8d896', class: `icon_container` }, h("svg", { key: '1863f6e7d0c1229ccc095c91a46830836424300b', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: 'cd8a5daceb17539dc3666614020c7d552d777822', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: 'a4f811ff57479f700b5ea2eb18fac5e34c83169f', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'f7c585fa3ee2f0f3bfe4cad029508d84e77581da', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '5610b1f420ee3009103d3e68001d4407aadd8f8c', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: '5d08eb0926990eaed27402bb7f9af6e7837cf204', class: `text ${this.size}` }, h("slot", { key: '14d697799c2a596c5909444c6586b4698c2bb60c', name: "main_text" }), this.showSupportingText && h("slot", { key: '8396465942fc5993203dbbe84f27149ba52acff6', name: "supporting_text" })), this.actions && (h("div", { key: '7abc819d3b24d5c99bda2f9a26400d30d745b79f', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: 'cf550c3b5113a9a41d1fbbf42084d2a431211661', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: 'b6eb18257f7a5a557e3db8ec5339c3dc66d1db2f', class: `container ${this.breakpoint}` }, h("div", { key: 'ac06cc10dda64769690af5cf852ee75c19b31916', class: `full_width_content ${this.breakpoint}` }, h("div", { key: 'e8b17168812504819198b3a2ffa0673d7d8d52de', class: `inner_content ${this.breakpoint}` }, h("div", { key: '3396f4f204e70f1ee94fe7680755d1ffd83dc89c', class: `icon_container` }, h("svg", { key: 'd10297b86d6bbd54ba802ff88329bf4666232feb', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '512e86740e50348e4038f07acdbe92da8afae4b1', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '77e243a67431f3c1d284579a25ba0335c39dc064', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: '0593ea25bea9125caa96b4661b1f0399043285bc', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: 'd6b0573150716c470b7fecd4daac008cf25924f2', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: '111641b6e72aa73ed9fa37746e9476b766d2766c', name: "main_text" }), this.showSupportingText && h("slot", { key: 'cd05460fcfd1392a7eae43ca7376cac03049ac9d', name: "supporting_text" }))), this.actions && (h("div", { key: 'e0373212c336ed60896a5face063d82a1fb1b5ef', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: '3ea421fbbd1e8d30c68dedad13e6b1fb7ab80341', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}`, onClick: () => this.closeToast() }))))));
     }
     static get is() { return "gb-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-toast-button/gb-toast-button.js

@@ -5,7 +5,7 @@ export class GbToastButton {
         slottedContent.classList.add('text-sm-semi-bold');
     }
     render() {
-        return (h("div", { key: '1fe83dac6ed24c65d94da19dc15149dd9d34edd8', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: '72c3a4e29c0bada05ed66d85f272f971ba761ecd' })));
+        return (h("div", { key: '51c6daf175acc052f831f0837df2298d3d379c18', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: 'a2e44255abc6ffcbb97fa40620795d66b708dbe4' })));
     }
     static get is() { return "gb-toast-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-toggle/gb-toggle.js

@@ -34,7 +34,7 @@ export class GbToggle {
         }
     }
     render() {
-        return (h("div", { key: '49662ad67f7bb3d90f46596bc810a5ba162d9ccc', class: `toggle_div ${this.size}` }, h("div", { key: '9b9e033ea77ea6c6fbd48eb247e69fbbd3410323', class: "toggle_base" }, h("gb-toggle-base", { key: '081cf6c880d708223d14213149e9375ce0b70c41', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '1afbea9fdd489583a873f763c73b08d838aaff93', class: "text" }, h("slot", { key: 'd2461e51e2d102655034cc15f4407ea46c0c2cc8', name: "main_text" }), this.supportingText && (h("slot", { key: '7104c221bd7f734c4fb50ec8f6d6287c9826412b', name: "supporting_text" }))))));
+        return (h("div", { key: '5c43da6422d049becc4a82841a57846e68be6051', class: `toggle_div ${this.size}` }, h("div", { key: '8483ba25446ea40d3c8c70fab4a9c85e36e2aaf0', class: "toggle_base" }, h("gb-toggle-base", { key: '6468dd403542b9140afc1fe6e884f90caa817004', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: 'b0ca9ce5d2fd4d74e67ced7df75ef9307950f977', class: "text" }, h("slot", { key: 'a03a4418b0e995411597aa1254f072a6530b1719', name: "main_text" }), this.supportingText && (h("slot", { key: '6f6d705cef3647e171dc83ac420754fda5ed9343', name: "supporting_text" }))))));
     }
     static get is() { return "gb-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-toggle-base/gb-toggle-base.js

@@ -11,8 +11,8 @@ export class GbToggleBase {
     }
     render() {
         return [
-            h("input", { key: 'f9595e1fea6296f017ade457df41959c0df4252f', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
-            h("label", { key: '893c843d1a24b70bfd31c07b86875bc84323a64d', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
+            h("input", { key: '6a8914cfc174442552106e42d2f52edb09451dcd', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
+            h("label", { key: 'c62738da346a376f21d7212328894a5a8b721919', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
         ];
     }
     static get is() { return "gb-toggle-base"; }

package/dist/collection/components/gb-token-field-compact/gb-token-field-compact.js

@@ -5,7 +5,7 @@ export class GbTokenFieldCompact {
         this.supportingText = '';
     }
     render() {
-        return (h("div", { key: 'ee44aed7aa4368118014b4639e7626d805dc3857', class: this.size }, h("div", { key: '3e0a4806b2efc73d3ae03674bd6a23ab89d3eb70', class: "input-with-label" }, this.showLabel && (h("label", { key: '6c5fe9a7a3f0492bcd11751732e82dac0ced2f88' }, this.label)), this.digits === 4 && (h("div", { key: 'fb158eb806ff0edf84f0da55e9d337b9d6de21ab', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '35accdaec4e1fa3f67740ba4d7ed3c51614fb7f4', size: this.size }), h("gb-mega-input-field-base", { key: 'd7e2a990511c21fadd3e853073f470a79d8b63a7', size: this.size }), h("gb-mega-input-field-base", { key: '23dbcb64f9988c34b7583686d446e6481031c415', size: this.size }), h("gb-mega-input-field-base", { key: 'c66928af7d049a51eeec54d994ba4d9a6f2e5b73', size: this.size }))), this.digits === 6 && (h("div", { key: '82a16aeb566f155f7e604d331c3b92f93252c44d', class: "input-wrapper" }, h("div", { key: 'da23b759bc06079717b95653c2b9545cb068c9aa', class: "first=section" }, h("gb-mega-input-field-base", { key: '28fc68912a7ed6beaced99814495c050b8706a14', size: this.size }), h("gb-mega-input-field-base", { key: 'ab9e3f052ce86c1e32a5509ca6c34e9e0e090062', size: this.size }), h("gb-mega-input-field-base", { key: '9c052dfc90c6e8abba1de1e9277e8e519f21e0e3', size: this.size })), h("div", { key: 'ca102e73cabe4bda6f55399edb075b8e792fee02', class: "second=section" }, h("gb-mega-input-field-base", { key: '2fd62da83adf71874321b8c78a0816a14df71f39', size: this.size }), h("gb-mega-input-field-base", { key: '392c40608b7e3496e368623672d2fb76c27a20e1', size: this.size }), h("gb-mega-input-field-base", { key: '2e1ff211ae287072bd70499847242f4f75a4d690', size: this.size })))), this.digits === 8 && (h("div", { key: '0cf4038808b721aeef435c3cf7509ed77ddd0630', class: "input-wrapper" }, h("div", { key: '3729fa412e897dbced218acd25863545ee7fbca4', class: "first=section" }, h("gb-mega-input-field-base", { key: '56682c58e8975bbd4d2d1e1b5bfb6eb79b0972e8', size: this.size }), h("gb-mega-input-field-base", { key: 'bfc0ccee8e6cc67a21f513fd3d494e1ac9575f8d', size: this.size }), h("gb-mega-input-field-base", { key: '9deca03312f8f2e74f2a1ca5d012c9f0b489c909', size: this.size }), h("gb-mega-input-field-base", { key: '8fa4e8cd07e59785465c917911c89481b20af083', size: this.size })), h("div", { key: 'c35a98d1030bc386a18495d5ff6d1e2276d6cdc8', class: "second=section" }, h("gb-mega-input-field-base", { key: '63e1454711ea2a06232f2f7f12a34ceaf9457d91', size: this.size }), h("gb-mega-input-field-base", { key: 'a8be8161c1ad590f3d8b30e64b4a666be3f4608d', size: this.size }), h("gb-mega-input-field-base", { key: '144750b2459fa5bbd2ab27aeda3ac861b50e8925', size: this.size }), h("gb-mega-input-field-base", { key: '6ea961e4a9443cc01eefed609e76f1f89cc79525', size: this.size }))))), h("p", { key: 'bea1c0a42c4bd411e4c530c70fb01709fd67ccc8' }, this.supportingText)));
+        return (h("div", { key: 'a43cc70c0877d75b568d737a046862357bda83a0', class: this.size }, h("div", { key: '162a4727406ca05e62ada3024a158b79cb26cf0e', class: "input-with-label" }, this.showLabel && (h("label", { key: 'd78df7809d2cd913322626a37d72223b7ded7153' }, this.label)), this.digits === 4 && (h("div", { key: '00ff8dfa393fb96dd1818c03eafc32bac3ef4bf5', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'f8f4307d8057e5e6fe2aec3e1b0bf39b4007552f', size: this.size }), h("gb-mega-input-field-base", { key: '67d9498aa5c3688196b23dd3342ad0318265d602', size: this.size }), h("gb-mega-input-field-base", { key: '07c35e5bfbaa342be99f568bc5a76a4baa7f5997', size: this.size }), h("gb-mega-input-field-base", { key: 'dd3737b31acce1444a559c8903601ca588e67524', size: this.size }))), this.digits === 6 && (h("div", { key: '07dd37fd1d1d1d9860deedd8ee6b33b238c98286', class: "input-wrapper" }, h("div", { key: '971633a4640b8a618318091d29b94217d1537d06', class: "first=section" }, h("gb-mega-input-field-base", { key: 'b6006f47ce5e31b9a168fa4abd1fcc572f127a77', size: this.size }), h("gb-mega-input-field-base", { key: '18d0acf835c1a2f23f82d88233548b09367f58eb', size: this.size }), h("gb-mega-input-field-base", { key: '5d1f3636b549b9b693640ba5d878d0837860fc2b', size: this.size })), h("div", { key: 'bb0e44bdf3d9aec45e7f902e5472e89977e93d50', class: "second=section" }, h("gb-mega-input-field-base", { key: 'c31c6d91f7ab777e979197cbe220a053cba304a3', size: this.size }), h("gb-mega-input-field-base", { key: '63880fd22b6119621df8f34df04521ba34727b4d', size: this.size }), h("gb-mega-input-field-base", { key: 'c09ff241c930fde566461d368d9fef885749a715', size: this.size })))), this.digits === 8 && (h("div", { key: '3073684458be60a556ab5c40adda80dd18e10e37', class: "input-wrapper" }, h("div", { key: 'bf37664a2837c2bc82e82729049a16475889b6a9', class: "first=section" }, h("gb-mega-input-field-base", { key: 'de1aebfd9b92ecc0b3f80adfea7a6cb29a19755a', size: this.size }), h("gb-mega-input-field-base", { key: '457b7aeeda5d8815826c9e8cbbb1a9a18c5aeb51', size: this.size }), h("gb-mega-input-field-base", { key: '9c752bc051a16157b1e69ce9cfc033d0476d8d21', size: this.size }), h("gb-mega-input-field-base", { key: 'd832dec249f517307d0d21e645a318300dcf24eb', size: this.size })), h("div", { key: '501fdde0a1ef042f3886466cc720bec73d198088', class: "second=section" }, h("gb-mega-input-field-base", { key: '0635915cce3d0d56f7d5340ca0beedf0ceb0a9dc', size: this.size }), h("gb-mega-input-field-base", { key: '80a8e59179ebc1834c595855ad2086ab9094c098', size: this.size }), h("gb-mega-input-field-base", { key: 'ddaad5ffdd81526e132feb2e9ac9e40053ec446e', size: this.size }), h("gb-mega-input-field-base", { key: '87cfdc3821e39300d822f028bd6ed0b2163feabf', size: this.size }))))), h("p", { key: '77de1a9092c884ba44f511328c4f30f97e19ddc8' }, this.supportingText)));
     }
     static get is() { return "gb-token-field-compact"; }
     static get encapsulation() { return "shadow"; }