globuswebcomponents 2.4.9 → 2.5.1

package/dist/cjs/gb-nav-bar.cjs.entry.js

@@ -0,0 +1,185 @@
+'use strict';
+
+var index = require('./index-CmQuD5Lz.js');
+
+const gbNavBarCss = ".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}";
+
+const GbNavBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.navBarItemClicked = index.createEvent(this, "navBarItemClicked");
+        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 = index.getAssetPath(`assets/top_bar_pattern.svg`);
+        return (index.h("div", { key: '8f8b6721da122967cc29ab5d891184525e5e50a1', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (index.h("div", { key: 'c1b3d2f8424cd40c3effa8dbfa7fcc6d7b727254', class: "pattern" }, index.h("img", { key: '5fd5f3d91ea85565474259694a57f83ffec04424', src: patternSrc, alt: "" }))), index.h("div", { key: '52d2e5d90605780c8b6f29c8d9c723dbab2f711b', class: "top_bar_content" }, index.h("div", { key: '7d5a004b4a6f73235c83ab375c2ebac0fe4ed242', style: { visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' } }, this.internalItems.map(tab => (index.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 })))), index.h("div", { key: 'd1d33577914aa4a7115946359f16f7272a3f69c4', class: `content ${this.dropdownOpen ? 'shown' : ''}`, ref: el => (this.containerEl = el) }, (this.measured ? this.visibleItems : this.internalItems).map(tab => (index.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 && (index.h("div", { key: '0c56eb6fe022df94f197c9ba2457109db08e0a2b', class: "more" }, index.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 && (index.h("div", { key: '7e14edae47a3d7ae650364b37988cfc3d69dae45', class: "dropdown_menu" }, this.overflowItems.map(tab => (index.h("gb-dropdown-items-with-shortcut", { icon: true, state: "default", iconSrc: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index, true) })))))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "tabs": ["onTabsChanged"]
+    }; }
+};
+GbNavBar.style = gbNavBarCss;
+
+exports.gb_nav_bar = GbNavBar;
+//# sourceMappingURL=gb-nav-bar.entry.cjs.js.map
+
+//# sourceMappingURL=gb-nav-bar.cjs.entry.js.map

package/dist/cjs/gb-nav-bar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gb-nav-bar.entry.cjs.js","mappings":"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","names":["getAssetPath","h"],"sources":["src/components/gb-nav-bar/gb-nav-bar.css?tag=gb-nav-bar&encapsulation=shadow","src/components/gb-nav-bar/gb-nav-bar.tsx"],"sourcesContent":[".top_bar_div {\r\n  display: flex;\r\n  width: 100%;\r\n  height: 5rem;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n}\r\n\r\n.top_bar_div.border.plain_background {\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.border.colored_background {\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.colored_background {\r\n  background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);\r\n}\r\n\r\n.top_bar_div.plain_background {\r\n  background: var(--color-surface);\r\n}\r\n\r\n.top_bar_content {\r\n  display: flex;\r\n  padding: 0rem 2rem;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  flex: 1 0 0;\r\n  align-self: stretch;\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  flex: 1 0 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.content.shown {\r\n  overflow: visible;\r\n}\r\n\r\n.pattern {\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n.more {\r\n  position: relative;\r\n}\r\n\r\n.dropdown_menu {\r\n  position: absolute;\r\n  top: 112%;\r\n  right: 0;\r\n\r\n  display: flex;\r\n  width: fit-content;\r\n  min-width: 10rem;\r\n  padding-right: var(--spacing-2);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  align-items: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-sm);\r\n  position: absolute;\r\n  gap: var(--spacing-none);\r\n  transition: 1s ease-in-out;\r\n  z-index: 9;\r\n}\r\n","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"],"version":3}

package/dist/cjs/gb-nav-bar.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-nav-bar.entry.cjs.js","sources":["src/components/gb-nav-bar/gb-nav-bar.css?tag=gb-nav-bar&encapsulation=shadow","src/components/gb-nav-bar/gb-nav-bar.tsx"],"sourcesContent":[".top_bar_div {\r\n  display: flex;\r\n  width: 100%;\r\n  height: 5rem;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n}\r\n\r\n.top_bar_div.border.plain_background {\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.border.colored_background {\r\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.top_bar_div.colored_background {\r\n  background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);\r\n}\r\n\r\n.top_bar_div.plain_background {\r\n  background: var(--color-surface);\r\n}\r\n\r\n.top_bar_content {\r\n  display: flex;\r\n  padding: 0rem 2rem;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  flex: 1 0 0;\r\n  align-self: stretch;\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  flex: 1 0 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.content.shown {\r\n  overflow: visible;\r\n}\r\n\r\n.pattern {\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n.more {\r\n  position: relative;\r\n}\r\n\r\n.dropdown_menu {\r\n  position: absolute;\r\n  top: 112%;\r\n  right: 0;\r\n\r\n  display: flex;\r\n  width: fit-content;\r\n  min-width: 10rem;\r\n  padding-right: var(--spacing-2);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  align-items: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-shadow: var(--shadow-sm);\r\n  position: absolute;\r\n  gap: var(--spacing-none);\r\n  transition: 1s ease-in-out;\r\n  z-index: 9;\r\n}\r\n","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"],"names":["getAssetPath","h"],"mappings":"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"}

package/dist/cjs/gb-notification-content.cjs.entry.js

@@ -13,7 +13,7 @@ const GbNotificationContent = class {
     }
     render() {
         const iconSrc = index.getAssetPath(`${this.icon}`);
-        return (index.h("div", { key: '408122f8cc423eab31ebd3dddbe82f2027f32ef8', class: "notification_container" }, index.h("div", { key: 'd068381a1a793d0f712f5299563a2e3aeb6641da', class: "notification_title" }, this.icon && (index.h("div", { key: '4211f9d5299376e175eeffb3c6238ee6b7c045d9', class: "icon" }, index.h("img", { key: '93fa4485dcff20aeffa1db36c71024ba6f0b0db0', src: iconSrc, alt: "Icon" }))), index.h("label", { key: 'c8693c747847fe6f2e3790e7144a7f29a3862341' }, this.label), index.h("span", { key: 'c26ca09d722dc74e4586cb8cedc99c983e4f514f', class: "time" }, this.time)), index.h("div", { key: 'a940edc4670f184e1c1079e075ed47bb3ced9f2d', class: "supporting_text" }, index.h("p", { key: '4f74ad7972bf4142c668fb89e0c7280b2d26ce05', class: "text-sm-regular" }, this.supportingText))));
+        return (index.h("div", { key: '0e4971bdbd45550f2d0d1c25557c67a92e9a64ab', class: "notification_container" }, index.h("div", { key: 'ddd814ea177da9122483d7f103a7ee55b9430617', class: "notification_title" }, this.icon && (index.h("div", { key: '91fc0ee01c3a6e1ef1cff7fbe32a46e1a85d7f86', class: "icon" }, index.h("img", { key: '3d2321a1bcbc73d6a87ef443e171da5680e6b7ad', src: iconSrc, alt: "Icon" }))), index.h("label", { key: 'b40732bc9eee7a5ba583d783d25a056ee4e38a0b' }, this.label), index.h("span", { key: '4d3b5be45ee40e0ec353b2b140aafed617d00df1', class: "time" }, this.time)), index.h("div", { key: '7cc91b3f6629d7b58b99f1c4f0d8abd1fa904b72', class: "supporting_text" }, index.h("p", { key: 'de6a0c01290069fe9e67b4eba34f95ebcc6bf210', class: "text-sm-regular" }, this.supportingText))));
     }
 };
 GbNotificationContent.style = gbNotificationContentCss;

package/dist/cjs/gb-notification-pane.cjs.entry.js

@@ -56,9 +56,9 @@ const GbNotificationPane = class {
     render() {
         const patternSrc = index.getAssetPath(`assets/notification_background_pattern.svg`);
         const illustrationSrc = index.getAssetPath(`assets/notification_illustration.svg`);
-        return (index.h("div", { key: '80c101aa7104135fb656cf646799d5939cbb9cdd', class: "notification_pane_div" }, this.state === 'empty' && [
-            index.h("div", { key: '249cdd60241315faadd7ce567a7f9ad46f08fde0', class: `container` }, index.h("div", { key: 'e7979b02566f07bda0dcadc416d94fb2dd332ba2', class: "frame" }, index.h("img", { key: '10960662728daa1f15268a64d2a71a773fbd4f0a', src: patternSrc, alt: "", class: "empty_state_pattern" }), index.h("div", { key: '7b043d246dd8b4040e0048adad7da9fea2c47205', class: "empty_state" }, index.h("div", { key: '4ad480b400ab64268f207774529114ed8edffaac', class: "content" }, index.h("img", { key: '12b4241d29a8a8d0677d81a3e41627b96b67d940', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), index.h("div", { key: '43e7397697ced24a278285738c3cf0c4cb683784', class: "text" }, index.h("slot", { key: 'd232a516bdf1aa64c6f50dce0b8f0129fdce6e90', name: "label" }), index.h("slot", { key: '58ad6f095030459268e212a18c09dd57bcff0155', name: "supporting_text" })))))),
-            index.h("div", { key: '4b9135e63e23f4d6c520fe12785c8fe67c57e624', class: `button` }, index.h("gb-button", { key: '5dca6032639f00384af6df0f238ae061f61721fe', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, index.h("p", { key: '7b716164661f7019c444cc39e1ef2758ef712b5a' }, "Mark all as read"))),
+        return (index.h("div", { key: '4bfdeafaa7bf94f01dd1431cc2866cc9900f7e7b', class: "notification_pane_div" }, this.state === 'empty' && [
+            index.h("div", { key: 'dd85f02e421afd7a3a640de11b225963e9df25a1', class: `container` }, index.h("div", { key: '2bfa4288204a11f87e9bf205d820d8f425fda449', class: "frame" }, index.h("img", { key: '8f2e760c4adf12b238c44215ac34178b05f0ccc8', src: patternSrc, alt: "", class: "empty_state_pattern" }), index.h("div", { key: '87d4028451700cd80b34af6f45e952f57ea857fe', class: "empty_state" }, index.h("div", { key: '83d2291f005f0b315181a9a0970de9c266d3c175', class: "content" }, index.h("img", { key: '3237b19705d13b15ad0b1c2e9760862d1b4d19c1', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), index.h("div", { key: '271e2a6d6e31e4af182b6c09ef3157d5c62cf99a', class: "text" }, index.h("slot", { key: '28f85740618a346d913de3b807879e6920ec5f0c', name: "label" }), index.h("slot", { key: '1fcb71bad5c8d8e0ff540bc1c3416eb894177924', name: "supporting_text" })))))),
+            index.h("div", { key: '4ccbb49bf7b98404d2b5bc1d02ecef3ef2bbdc3c', class: `button` }, index.h("gb-button", { key: '7a6c558f2b0adfcb0c7098278f6a252140665171', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, index.h("p", { key: 'ff7ff04188c14d2ac24d5c6358d278da4e4a2e78' }, "Mark all as read"))),
         ], this.state === 'notification_dropdown' && (index.h(index.Fragment, null, this.notifications.length > 0 ? (index.h("div", { class: "notification_dropdown" }, index.h("div", { class: `content_wrapper` }, this.notifications.map(notification => (index.h("gb-notification-content", { label: notification.label, time: notification.time, "supporting-text": notification.desc, icon: notification.icon })))), index.h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, index.h("p", null, "Mark all as read")))) : [index.h("div", { class: `container` }, index.h("div", { class: "frame" }, index.h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), index.h("div", { class: "empty_state" }, index.h("div", { class: "content" }, index.h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), index.h("div", { class: "text" }, index.h("slot", { name: "label" }), index.h("slot", { name: "supporting_text" })))))), index.h("div", { class: `button` }, index.h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, index.h("p", null, "Mark all as read"))),
         ]))));
     }

package/dist/cjs/gb-pagination-dot-group.cjs.entry.js

@@ -11,7 +11,7 @@ const GbPaginationDotGroup = class {
         this.framed = false;
     }
     render() {
-        return (index.h("div", { key: 'ac967b0461743f97f4776f757b97440be3ecc0a8', class: "dot_group_div" }, index.h("div", { key: '45b3ec18397c98125b81c06e587cbafd0c652685' })));
+        return (index.h("div", { key: '83f2fcbf8f6357fcfaa1328e612761cd996875bd', class: "dot_group_div" }, index.h("div", { key: 'e5171c5d2e16a0f3ffcdf5bff02d0f6baa562f73' })));
     }
 };
 GbPaginationDotGroup.style = gbPaginationDotGroupCss;

package/dist/cjs/gb-pagination-dot-indicator.cjs.entry.js

@@ -10,7 +10,7 @@ const GbPaginationDotIndicator = class {
         this.current = false;
     }
     render() {
-        return (index.h("div", { key: '6a26a288b928c7209a56fddf69138f1a28ab6c2e', class: `dot_indicator_div 
+        return (index.h("div", { key: 'd1f6dd69a1eaf3629f8922a860bf66f0ae3294b1', class: `dot_indicator_div 
       ${this.type} ${this.current ? 'current' : ''} 
       ${this.size}` }));
     }