globuswebcomponents 2.4.9 → 2.5.0

package/dist/collection/components/gb-metric-card/gb-metric-card.js

@@ -2,9 +2,11 @@ import { h } from "@stencil/core";
 export class GbMetricCard {
     constructor() {
         this.showBadge = false;
+        this.icon = '';
+        this.percentage = '';
     }
     render() {
-        return (h("div", { key: '73c5b3e5d3934546f03b0243af0edcf63cda9a6a', class: `metric_card_wrapper ${this.size} ${'radius_' + this.radius}` }, h("div", { key: 'bd5c215f9cc499b5b7bc00d63c5e983b557a948a', class: `icon_and_label ${this.size}` }, h("div", { key: 'f505239adaa5d5d76f9c849dccca49ff074cf9d3', class: "featured_icon" }, h("gb-metric-featured-icon", { key: '414a9ef6763faa9ca0097601eeee06a097dc055e', size: this.size, "featured-icon-style": this.featuredIconStyle, icon: "assets/loading-01.svg", color: this.featuredIconColor })), this.size === 'md' && h("p", { key: '33b0f1dd630d521a7613a4e31a32fd7493ba14ac', class: "heading text-sm-medium" }, this.label)), h("div", { key: '7b10933e243fea2f91c5d6ea253644a124601601', class: "heading_and_number" }, this.size === 'sm' && h("p", { key: 'f6f7bfc42ad704cdaf9ff311f7928e0a4aea161d', class: "heading text-sm-medium" }, this.label), h("div", { key: '24796666ea80795101903281d33056e14e1ef1bd', class: "number_and_badge" }, h("p", { key: 'be48a81f1c41cbce27b68ffa284ae8c86c37dcdb', class: "number display-md-semi-bold" }, this.metric), this.showBadge && (h("gb-badge", { key: 'bcebceb7bf0b0599d3d40cd8f983a4765660d674', size: "lg", type: "pill_color", icon: "false", "icon-trailing-swap": "assets/thumbs-up.svg", color: "gray" }, h("p", { key: '8c99fb06437391081ec66befdf6a10aaacdb75fa' }, "14% of 256")))))));
+        return (h("div", { key: 'd598af4abbbcc29744e744105966d7ce893d906f', class: `metric_card_wrapper ${this.size} ${'radius_' + this.radius}` }, h("div", { key: '35caa55d5ed6cd02e90248da1b5dc59ebdd265d7', class: `icon_and_label ${this.size}` }, h("div", { key: '440c38e64d860f4780e1ed170ada32eab818c8cc', class: "featured_icon" }, h("gb-metric-featured-icon", { key: '9ec0af1cd08a0113c0707daa12cad7f0378233c3', size: this.size, "featured-icon-style": this.featuredIconStyle, icon: this.icon, color: this.featuredIconColor })), this.size === 'md' && h("p", { key: 'ad351a165a5514a9752f84e9d3f078952f38d9b7', class: "heading text-sm-medium" }, this.label)), h("div", { key: '36ad24f6d9e05a21b006824b49c118922614163d', class: "heading_and_number" }, this.size === 'sm' && h("p", { key: '0aaa22678310187e7451fcd67dfd1c98c53ce2a2', class: "heading text-sm-medium" }, this.label), h("div", { key: 'c09d3524aa5e6bdb29d58a25f2a8fdedd5b07bbf', class: "number_and_badge" }, h("p", { key: 'af1611e575c9d0623fd4d429188f493292b31ed1', class: "number display-md-semi-bold" }, this.metric), this.showBadge && (h("gb-badge", { key: 'b9c012336f362f6f71f1ada53bf0afe5c56e14c9', size: "lg", type: "pill_color", color: "gray" }, h("p", { key: 'eb9a0cf69514fc13ebab493ffe8534c066bc0262' }, this.percentage)))))));
     }
     static get is() { return "gb-metric-card"; }
     static get encapsulation() { return "shadow"; }
@@ -177,6 +179,46 @@ export class GbMetricCard {
                 "setter": false,
                 "attribute": "featured-icon-color",
                 "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "percentage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "percentage",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/gb-metric-card/gb-metric-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-metric-card.js","sourceRoot":"","sources":["../../../src/components/gb-metric-card/gb-metric-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,YAAY;IALzB;QAUU,cAAS,GAAY,KAAK,CAAC;KAgCpC;IA5BC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE;YACvE,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,EAAE;gBACvC,4DAAK,KAAK,EAAC,eAAe;oBACxB,gFACE,IAAI,EAAE,IAAI,CAAC,IAAI,yBACM,IAAI,CAAC,iBAAiB,EAC3C,IAAI,EAAC,uBAAuB,EAC5B,KAAK,EAAE,IAAI,CAAC,iBAAiB,GACJ,CACvB;gBACL,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,0DAAG,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAK,CACrE;YACN,4DAAK,KAAK,EAAC,oBAAoB;gBAC5B,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,0DAAG,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAK;gBACzE,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,0DAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,MAAM,CAAK;oBACvD,IAAI,CAAC,SAAS,IAAI,CACjB,iEAAU,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,wBAAoB,sBAAsB,EAAC,KAAK,EAAC,MAAM;wBACvG,yEAAiB,CACR,CACZ,CACG,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\r\nimport { ColorTypes, GeneralSizes, MetricFeaturedIconTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-metric-card',\r\n  styleUrl: 'gb-metric-card.css',\r\n  shadow: true,\r\n})\r\nexport class GbMetricCard {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() radius: GeneralSizes;\r\n  @Prop() label: string;\r\n  @Prop() metric: string;\r\n  @Prop() showBadge: boolean = false;\r\n  @Prop() featuredIconStyle: MetricFeaturedIconTypes;\r\n  @Prop() featuredIconColor: ColorTypes;\r\n\r\n  render() {\r\n    return (\r\n      <div class={`metric_card_wrapper ${this.size} ${'radius_' + this.radius}`}>\r\n        <div class={`icon_and_label ${this.size}`}>\r\n          <div class=\"featured_icon\">\r\n            <gb-metric-featured-icon\r\n              size={this.size}\r\n              featured-icon-style={this.featuredIconStyle}\r\n              icon=\"assets/loading-01.svg\"\r\n              color={this.featuredIconColor}\r\n            ></gb-metric-featured-icon>\r\n          </div>\r\n          {this.size === 'md' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n        </div>\r\n        <div class=\"heading_and_number\">\r\n          {this.size === 'sm' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n          <div class=\"number_and_badge\">\r\n            <p class=\"number display-md-semi-bold\">{this.metric}</p>\r\n            {this.showBadge && (\r\n              <gb-badge size=\"lg\" type=\"pill_color\" icon=\"false\" icon-trailing-swap=\"assets/thumbs-up.svg\" color=\"gray\">\r\n                <p>14% of 256</p>\r\n              </gb-badge>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-metric-card.js","sourceRoot":"","sources":["../../../src/components/gb-metric-card/gb-metric-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,YAAY;IALzB;QAUU,cAAS,GAAY,KAAK,CAAC;QAG3B,SAAI,GAAW,EAAE,CAAC;QAClB,eAAU,GAAW,EAAE,CAAC;KA8BjC;IA5BC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE;YACvE,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,EAAE;gBACvC,4DAAK,KAAK,EAAC,eAAe;oBACxB,gFACE,IAAI,EAAE,IAAI,CAAC,IAAI,yBACM,IAAI,CAAC,iBAAiB,EAC3C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,iBAAiB,GACJ,CACvB;gBACL,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,0DAAG,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAK,CACrE;YACN,4DAAK,KAAK,EAAC,oBAAoB;gBAC5B,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,0DAAG,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAK;gBACzE,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,0DAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,MAAM,CAAK;oBACvD,IAAI,CAAC,SAAS,IAAI,CACjB,iEAAU,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,MAAM;wBAChD,4DAAI,IAAI,CAAC,UAAU,CAAK,CACf,CACZ,CACG,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\r\nimport { ColorTypes, GeneralSizes, MetricFeaturedIconTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-metric-card',\r\n  styleUrl: 'gb-metric-card.css',\r\n  shadow: true,\r\n})\r\nexport class GbMetricCard {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() radius: GeneralSizes;\r\n  @Prop() label: string;\r\n  @Prop() metric: string;\r\n  @Prop() showBadge: boolean = false;\r\n  @Prop() featuredIconStyle: MetricFeaturedIconTypes;\r\n  @Prop() featuredIconColor: ColorTypes;\r\n  @Prop() icon: string = '';\r\n  @Prop() percentage: string = '';\r\n\r\n  render() {\r\n    return (\r\n      <div class={`metric_card_wrapper ${this.size} ${'radius_' + this.radius}`}>\r\n        <div class={`icon_and_label ${this.size}`}>\r\n          <div class=\"featured_icon\">\r\n            <gb-metric-featured-icon\r\n              size={this.size}\r\n              featured-icon-style={this.featuredIconStyle}\r\n              icon={this.icon}\r\n              color={this.featuredIconColor}\r\n            ></gb-metric-featured-icon>\r\n          </div>\r\n          {this.size === 'md' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n        </div>\r\n        <div class=\"heading_and_number\">\r\n          {this.size === 'sm' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n          <div class=\"number_and_badge\">\r\n            <p class=\"number display-md-semi-bold\">{this.metric}</p>\r\n            {this.showBadge && (\r\n              <gb-badge size=\"lg\" type=\"pill_color\" color=\"gray\">\r\n                <p>{this.percentage}</p>\r\n              </gb-badge>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-metric-featured-icon/gb-metric-featured-icon.js

@@ -13,7 +13,7 @@ export class GbMetricFeaturedIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h(Fragment, null, this.featuredIconStyle === 'glassmorphism' && (h("div", { key: '48e0a67cd42a6baea32bfee2e82177ff13cf5998', class: `metric_featured_icon_wrapper ${this.size}` }, h("div", { key: '653ee8098eb15e8b7396ae4ba9f3740979bc4888', class: `icon_glass ${this.size}` }, h("div", { key: '979448de7b76908cdeeb85111a7e18c549ce2eca', class: `icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })), h("div", { key: 'cb21d65e5445066dfa3fee25219fc2f1c26ba840', class: `icon_background ${this.color} ${this.size}` }))), this.featuredIconStyle === 'circular_filled' && (h("div", { key: 'f61b9c0cb2a18463ee99083aeef9a801327cf18e', class: `circular_filled_outer ${this.color} ${this.size}` }, h("div", { key: 'a01d60f92674c44a26dc9969ce961f85b1cec6c4', class: `circular_filled_icon icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })))));
+        return (h(Fragment, null, this.featuredIconStyle === 'glassmorphism' && (h("div", { key: '1b516a2293e9c9d8d3d4f0e1ae0b5d702780e165', class: `metric_featured_icon_wrapper ${this.size}` }, h("div", { key: 'cc558461d7eb27ad352d4e254175b819c06defdc', class: `icon_glass ${this.size}` }, h("div", { key: 'c6287f391fb5358aa68e2c086b437109d7be037c', class: `icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })), h("div", { key: 'daa1479c5031234e316cf160fb0be28ef2f13e7e', class: `icon_background ${this.color} ${this.size}` }))), this.featuredIconStyle === 'circular_filled' && (h("div", { key: 'b6c3d4db5bf877e447a9f225e82de707a62f4e34', class: `circular_filled_outer ${this.color} ${this.size}` }, h("div", { key: '1d42b5236286c176950874beae84b7d631c1facb', class: `circular_filled_icon icon ${this.size} ${this.color}`, innerHTML: this.leadingIconSvg })))));
     }
     static get is() { return "gb-metric-featured-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-nav-bar/gb-nav-bar.css

@@ -0,0 +1,82 @@
+.top_bar_div {
+  display: flex;
+  width: 100%;
+  height: 5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.top_bar_div.border.plain_background {
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+}
+
+.top_bar_div.border.colored_background {
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+}
+
+.top_bar_div.colored_background {
+  background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);
+}
+
+.top_bar_div.plain_background {
+  background: var(--color-surface);
+}
+
+.top_bar_content {
+  display: flex;
+  padding: 0rem 2rem;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1 0 0;
+  overflow: hidden;
+}
+
+.content.shown {
+  overflow: visible;
+}
+
+.pattern {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  mix-blend-mode: multiply;
+}
+
+.more {
+  position: relative;
+}
+
+.dropdown_menu {
+  position: absolute;
+  top: 112%;
+  right: 0;
+
+  display: flex;
+  width: fit-content;
+  min-width: 10rem;
+  padding-right: var(--spacing-2);
+  flex-direction: column;
+  align-items: flex-start;
+  align-items: stretch;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var(--shadow-sm);
+  position: absolute;
+  gap: var(--spacing-none);
+  transition: 1s ease-in-out;
+  z-index: 9;
+}

package/dist/collection/components/gb-nav-bar/gb-nav-bar.js

@@ -0,0 +1,303 @@
+import { getAssetPath, h } from "@stencil/core";
+export class GbNavBar {
+    constructor() {
+        this.items = [
+        // {
+        //   label: 'First',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 0,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 1,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 2,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 3,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 4,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 5,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 6,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 7,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 8,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 9,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 10,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 11,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 12,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 13,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 14,
+        // },
+        // {
+        //   label: 'Second',
+        //   icon: 'assets/star.svg',
+        //   iconOnly: false,
+        //   index: 15,
+        // },
+        ];
+        this.showBorder = true;
+        this.activeIndex = 0;
+        this.internalItems = [...this.items];
+        this.visibleItems = [];
+        this.overflowItems = [];
+        this.measured = false;
+        this.dropdownOpen = false;
+        this.dropdownItemClicked = false;
+        this.handleResize = () => {
+            setTimeout(() => {
+                this.calculateOverflow();
+            }, 0);
+        };
+    }
+    onTabItemClicked(index, clicked) {
+        this.dropdownItemClicked = false;
+        this.activeIndex = index;
+        this.navBarItemClicked.emit(index);
+        if (clicked) {
+            this.dropdownItemClicked = true;
+            this.dropdownOpen = false;
+        }
+    }
+    onTabsChanged(newTabs) {
+        this.internalItems = newTabs;
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.calculateOverflow();
+            this.measured = true;
+            console.log(this.measured);
+        }, 0);
+        window.addEventListener('resize', this.handleResize);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    calculateOverflow() {
+        const hiddenContainer = this.el.shadowRoot.querySelector('[style*="visibility: hidden"]');
+        if (!hiddenContainer)
+            return;
+        let containerWidth = this.containerEl.offsetWidth;
+        let usedWidth = 0;
+        const visible = [];
+        const hidden = [];
+        const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));
+        allItems.forEach((el, i) => {
+            const itemWidth = el.offsetWidth + 16;
+            if (usedWidth + itemWidth < containerWidth - 120) {
+                usedWidth += itemWidth;
+                visible.push(this.internalItems[i]);
+            }
+            else {
+                hidden.push(this.internalItems[i]);
+            }
+        });
+        this.visibleItems = visible;
+        this.overflowItems = hidden;
+    }
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    render() {
+        const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
+        return (h("div", { key: '8f8b6721da122967cc29ab5d891184525e5e50a1', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: 'c1b3d2f8424cd40c3effa8dbfa7fcc6d7b727254', class: "pattern" }, h("img", { key: '5fd5f3d91ea85565474259694a57f83ffec04424', src: patternSrc, alt: "" }))), h("div", { key: '52d2e5d90605780c8b6f29c8d9c723dbab2f711b', class: "top_bar_content" }, h("div", { key: '7d5a004b4a6f73235c83ab375c2ebac0fe4ed242', style: { visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' } }, this.internalItems.map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label })))), h("div", { key: 'd1d33577914aa4a7115946359f16f7272a3f69c4', class: `content ${this.dropdownOpen ? 'shown' : ''}`, ref: el => (this.containerEl = el) }, (this.measured ? this.visibleItems : this.internalItems).map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index) }))), this.measured && this.overflowItems.length > 0 && (h("div", { key: '0c56eb6fe022df94f197c9ba2457109db08e0a2b', class: "more" }, h("gb-nav-bar-item", { key: '0ef9e67c312091e80770547bbf97e13c4843525a', state: this.dropdownItemClicked ? 'active' : 'default', "icon-only": false, category: this.category, icon: "assets/more.svg", label: "More", class: "more_button", onClick: () => this.toggleDropdown() }), this.dropdownOpen && (h("div", { key: '7e14edae47a3d7ae650364b37988cfc3d69dae45', class: "dropdown_menu" }, this.overflowItems.map(tab => (h("gb-dropdown-items-with-shortcut", { icon: true, state: "default", iconSrc: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index, true) })))))))))));
+    }
+    static get is() { return "gb-nav-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-nav-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-nav-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralBackgroundCategories",
+                    "resolved": "\"colored_background\" | \"plain_background\"",
+                    "references": {
+                        "GeneralBackgroundCategories": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralBackgroundCategories"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "category",
+                "reflect": false
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ label: string; icon: string; iconOnly: boolean; index: number }[]",
+                    "resolved": "{ label: string; icon: string; iconOnly: boolean; index: number; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    // {\r\n    //   label: 'First',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 1,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 2,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 3,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 4,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 5,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 6,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 7,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 8,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 9,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 10,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 11,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 12,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 13,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 14,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 15,\r\n    // },\r\n  ]"
+            },
+            "showBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-border",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "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": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalItems": {},
+            "visibleItems": {},
+            "overflowItems": {},
+            "measured": {},
+            "dropdownOpen": {},
+            "dropdownItemClicked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navBarItemClicked",
+                "name": "navBarItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "tabs",
+                "methodName": "onTabsChanged"
+            }];
+    }
+}
+//# sourceMappingURL=gb-nav-bar.js.map

package/dist/collection/components/gb-nav-bar/gb-nav-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-nav-bar.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar/gb-nav-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-nav-bar',\r\n  styleUrl: 'gb-nav-bar.css',\r\n  shadow: true,\r\n})\r\nexport class GbNavBar {\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() items: { label: string; icon: string; iconOnly: boolean; index: number }[] = [\r\n    // {\r\n    //   label: 'First',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 1,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 2,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 3,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 4,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 5,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 6,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 7,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 8,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 9,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 10,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 11,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 12,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 13,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 14,\r\n    // },\r\n    // {\r\n    //   label: 'Second',\r\n    //   icon: 'assets/star.svg',\r\n    //   iconOnly: false,\r\n    //   index: 15,\r\n    // },\r\n  ];\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop({ mutable: true }) activeIndex: number = 0;\r\n  @Element() el: HTMLElement;\r\n  @State() internalItems: { label: string; icon: string; iconOnly: boolean; index: number }[] = [...this.items];\r\n  @State() visibleItems: typeof this.items = [];\r\n  @State() overflowItems: typeof this.items = [];\r\n  @State() measured: boolean = false;\r\n  @State() dropdownOpen: boolean = false;\r\n  @State() dropdownItemClicked: boolean = false;\r\n  @Event() navBarItemClicked: EventEmitter<number>;\r\n\r\n  private containerEl!: HTMLElement;\r\n\r\n  onTabItemClicked(index: number, clicked?: boolean) {\r\n    this.dropdownItemClicked = false;\r\n    this.activeIndex = index;\r\n    this.navBarItemClicked.emit(index);\r\n\r\n    if (clicked) {\r\n      this.dropdownItemClicked = true;\r\n      this.dropdownOpen = false;\r\n    }\r\n  }\r\n\r\n  @Watch('tabs')\r\n  onTabsChanged(newTabs: { label: string; icon: string; iconOnly: boolean; index: number }[]) {\r\n    this.internalItems = newTabs;\r\n  }\r\n\r\n  private handleResize = () => {\r\n    setTimeout(() => {\r\n      this.calculateOverflow();\r\n    }, 0);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    setTimeout(() => {\r\n      this.calculateOverflow();\r\n      this.measured = true;\r\n      console.log(this.measured);\r\n    }, 0);\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  calculateOverflow() {\r\n    const hiddenContainer = this.el.shadowRoot.querySelector('[style*=\"visibility: hidden\"]');\r\n    if (!hiddenContainer) return;\r\n\r\n    let containerWidth = this.containerEl.offsetWidth;\r\n    let usedWidth = 0;\r\n    const visible = [];\r\n    const hidden = [];\r\n\r\n    const allItems = Array.from(hiddenContainer.querySelectorAll('gb-nav-bar-item'));\r\n\r\n    allItems.forEach((el, i) => {\r\n      const itemWidth = (el as HTMLElement).offsetWidth + 16;\r\n      if (usedWidth + itemWidth < containerWidth - 120) {\r\n        usedWidth += itemWidth;\r\n        visible.push(this.internalItems[i]);\r\n      } else {\r\n        hidden.push(this.internalItems[i]);\r\n      }\r\n    });\r\n\r\n    this.visibleItems = visible;\r\n    this.overflowItems = hidden;\r\n  }\r\n\r\n  toggleDropdown() {\r\n    this.dropdownOpen = !this.dropdownOpen;\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);\r\n\r\n    return (\r\n      <div class={`top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}`}>\r\n        {this.category === 'colored_background' && (\r\n          <div class=\"pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n        )}\r\n        <div class=\"top_bar_content\">\r\n          {/* Hidden measurement container for overflow calculation */}\r\n          <div style={{ visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' }}>\r\n            {this.internalItems.map(tab => (\r\n              <gb-nav-bar-item\r\n                state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n                icon-only={tab.iconOnly}\r\n                category={this.category}\r\n                icon={tab.icon}\r\n                label={tab.label}\r\n              ></gb-nav-bar-item>\r\n            ))}\r\n          </div>\r\n          <div class={`content ${this.dropdownOpen ? 'shown' : ''}`} ref={el => (this.containerEl = el)}>\r\n            {(this.measured ? this.visibleItems : this.internalItems).map(tab => (\r\n              <gb-nav-bar-item\r\n                state={this.activeIndex === tab.index ? 'active' : 'default'}\r\n                icon-only={tab.iconOnly}\r\n                category={this.category}\r\n                icon={tab.icon}\r\n                label={tab.label}\r\n                onClick={() => this.onTabItemClicked(tab.index)}\r\n              ></gb-nav-bar-item>\r\n            ))}\r\n            {this.measured && this.overflowItems.length > 0 && (\r\n              <div class=\"more\">\r\n                <gb-nav-bar-item\r\n                  state={this.dropdownItemClicked ? 'active' : 'default'}\r\n                  icon-only={false}\r\n                  category={this.category}\r\n                  icon=\"assets/more.svg\"\r\n                  label=\"More\"\r\n                  class=\"more_button\"\r\n                  onClick={() => this.toggleDropdown()}\r\n                ></gb-nav-bar-item>\r\n                {this.dropdownOpen && (\r\n                  <div class=\"dropdown_menu\">\r\n                    {this.overflowItems.map(tab => (\r\n                      <gb-dropdown-items-with-shortcut\r\n                        icon\r\n                        state=\"default\"\r\n                        iconSrc={tab.icon}\r\n                        label={tab.label}\r\n                        onClick={() => this.onTabItemClicked(tab.index, true)}\r\n                      ></gb-dropdown-items-with-shortcut>\r\n                    ))}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/{gb-top-bar-item/gb-top-bar-item.css → gb-nav-bar-item/gb-nav-bar-item.css}

@@ -2811,15 +2811,19 @@
 
 .icon.plain_background path.has_opacity,
 .icon.plain_background g.has_opacity,
+.icon.plain_background circle.has_opacity,
 .icon.colored_background path.has_opacity,
-.icon.colored_background g.has_opacity {
+.icon.colored_background g.has_opacity,
+.icon.colored_background circle.has_opacity {
   opacity: 0;
 }
 
 .icon.plain_background.active path.has_opacity,
 .icon.plain_background.active g.has_opacity,
+.icon.plain_background.active circle.has_opacity,
 .icon.colored_background.active path.has_opacity,
-.icon.colored_background.active g.has_opacity {
+.icon.colored_background.active g.has_opacity,
+.icon.colored_background.active circle.has_opacity {
   opacity: 0.5;
 }
 
@@ -2846,7 +2850,7 @@
   color: var(--color-text, #4b5565);
 }
 
-.label_text.plain_background {
+.label_text.plain_background.active {
   color: var(--color-text-information-bold, #042f59);
 }
 

package/dist/collection/components/{gb-top-bar-item/gb-top-bar-item.js → gb-nav-bar-item/gb-nav-bar-item.js}

@@ -1,5 +1,5 @@
 import { getAssetPath, h } from "@stencil/core";
-export class GbTopBarItem {
+export class GbNavBarItem {
     constructor() {
         this.iconOnly = false;
         this.label = '';
@@ -17,10 +17,14 @@ export class GbTopBarItem {
         const svgElement = svgDoc.documentElement;
         // Select all path tags with an opacity attribute
         const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');
+        const gWithOpacity = svgElement.querySelectorAll('g[opacity]');
         // Add a class to each
         pathsWithOpacity.forEach(path => {
             path.classList.add('has_opacity');
         });
+        gWithOpacity.forEach(g => {
+            g.classList.add('has_opacity');
+        });
         // Convert the modified SVG back to a string
         const modifiedSvg = svgElement.outerHTML;
         // Save or inject it into your component
@@ -30,18 +34,18 @@ export class GbTopBarItem {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '78e672db84e14713984d16cc3713b5c61f703dfe', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'de82c9003eee3d0c2adbf914316e46ff2a643238', class: `top_bar_content` }, h("div", { key: '89fc01720afc789b54ad3360fcf2b4645346dd87', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: 'e3972b4ad8847963ce719427fa8b62b34d649913', class: "label" }, h("p", { key: 'eb647ea1374ac5592a2ec5e50389485944929e6b', class: `label_text text-md-medium ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '5cc14d828b5e7cd6fe53397034947ac2a2f888e1', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '9d824c11dc95a529d071230713479bfb1b5d11fd', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '3e3bbc248f317400d7ad7a8d4e1c6ac10a15820c', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '9d02f7b001d27f4f1c341b5c71773286e20bd899', slot: "label" }, this.label)))));
+        return (h("div", { key: '43cad936cf7fdcecfd8a60eb76675020cc64e41b', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '475cde522f5383f6a66032a4a74a964f8ee7c2ac', class: `top_bar_content` }, h("div", { key: '1d9d5826f88efc2d3962a348e40b56780cd29e6b', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: '955c82c219eb83509697ce81c43ed05cd430a4ba', class: "label" }, h("p", { key: '353977a8945d986287e01766824a7daadc6f004a', class: `label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: 'd81ff6c44d8a5f564e31aa439cbac1f3bf7eb52f', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '7ea4653a8290c66ae3fbfec59d5d3d64d0018803', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '980a46baee118c9a576f52b88462dd13ab47199b', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: 'b425fb5ae9413f7b53dd379c3631993d354fa1e3', slot: "label" }, this.label)))));
     }
-    static get is() { return "gb-top-bar-item"; }
+    static get is() { return "gb-nav-bar-item"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["gb-top-bar-item.css"]
+            "$": ["gb-nav-bar-item.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["gb-top-bar-item.css"]
+            "$": ["gb-nav-bar-item.css"]
         };
     }
     static get properties() {
@@ -159,4 +163,4 @@ export class GbTopBarItem {
         };
     }
 }
-//# sourceMappingURL=gb-top-bar-item.js.map
+//# sourceMappingURL=gb-nav-bar-item.js.map

package/dist/collection/components/gb-nav-bar-item/gb-nav-bar-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-nav-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-nav-bar-item/gb-nav-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-nav-bar-item',\r\n  styleUrl: 'gb-nav-bar-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbNavBarItem {\r\n  @Prop() state: 'default' | 'active';\r\n  @Prop() iconOnly: boolean = false;\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n  @State() showTooltip: boolean = false;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n\r\n    // Parse SVG into DOM\r\n    const parser = new DOMParser();\r\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n    const svgElement = svgDoc.documentElement;\r\n\r\n    // Select all path tags with an opacity attribute\r\n    const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');\r\n    const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n    // Add a class to each\r\n    pathsWithOpacity.forEach(path => {\r\n      path.classList.add('has_opacity');\r\n    });\r\n\r\n    gWithOpacity.forEach(g => {\r\n      g.classList.add('has_opacity');\r\n    });\r\n\r\n    // Convert the modified SVG back to a string\r\n    const modifiedSvg = svgElement.outerHTML;\r\n\r\n    // Save or inject it into your component\r\n    this.leadingIconSvg = modifiedSvg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`top_bar_item_div ${this.category} ${this.state}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n        <div class={`top_bar_content`}>\r\n          <div class={`icon ${this.category} ${this.state}`} innerHTML={this.leadingIconSvg}></div>\r\n          {!this.iconOnly && (\r\n            <div class=\"label\">\r\n              <p class={`label_text ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'} ${this.category} ${this.state}`}>{this.label}</p>\r\n            </div>\r\n          )}\r\n          {this.state === 'active' && this.category === 'colored_background' && <div class={`bar ${this.category}`}></div>}\r\n          {this.state === 'active' && this.category === 'plain_background' && <div class={`bar ${this.category}`}></div>}\r\n        </div>\r\n        {this.iconOnly && this.showTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"bottom_center\" class=\"tooltip\">\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/{gb-top-bar-sidemenu/gb-top-bar-sidemenu.css → gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.css}

@@ -1,7 +1,7 @@
 .top_bar_sidemenu_div{
     display: flex;
 width: 17.5rem;
-height: 100vh;
+height: 100%;
 padding: var(--spacing-6) var(--spacing-7);
 flex-direction: column;
 justify-content: space-between;