@haiilo/catalyst 12.0.0 → 12.2.0

package/dist/cjs/cat-alert_30.cjs.entry.js

@@ -11286,7 +11286,7 @@ const CatTabs = class {
     }
     onActiveTabChange(id) {
         const index = this.tabs.findIndex(tab => tab.id === id);
-        this.catChange.emit({ id, index });
+        this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });
     }
     onKeydown(event) {
         if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -11326,7 +11326,7 @@ const CatTabs = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h(index.Host, { key: '874b547102901311b51c66aace5a2f91f4d52bbb' }, index.h("div", { key: 'ab2ccbf398bdb5897c71762c9befe63f383a04db', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index$1) => {
+        return (index.h(index.Host, { key: '7465fe19c1c67bd0f2c83ae15ed4d31e1e7610b7' }, index.h("div", { key: '3d0f4c19edd3549d3c9c8f83685b0c852770f594', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index$1) => {
             return (index.h("cat-button", { buttonId: tab.id, part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
@@ -11365,17 +11365,18 @@ const CatTabs = class {
         if (this.moreButton) {
             this.moreButton.style.display = 'inline-flex';
         }
-        const MORE_WIDTH = this.moreButton?.offsetWidth || 0;
+        const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;
         const visibleTabsIndexes = [];
+        const containerWidth = this.hostElement.clientWidth;
         let fittingWidth = 0;
         const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);
-        const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;
-        const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;
+        const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;
+        const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;
         const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);
-        const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;
+        const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;
         const activeTabIsVisible = this.activeTabAlwaysVisible &&
             activeTabIndex > -1 &&
-            activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;
+            activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;
         if (stickyTabIsVisible) {
             fittingWidth += stickyTabWidth;
             visibleTabsIndexes.push(stickyTabIndex.toString());
@@ -11388,12 +11389,13 @@ const CatTabs = class {
             if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {
                 continue;
             }
-            if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {
+            const tabWidth = tab.getBoundingClientRect().width;
+            if (fittingWidth + tabWidth <= containerWidth) {
                 // tab fits within tabs parent
-                fittingWidth += tab.scrollWidth;
+                fittingWidth += tabWidth;
                 visibleTabsIndexes.push(index.toString());
             }
-            else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {
+            else if (fittingWidth + MORE_WIDTH <= containerWidth) {
                 // tab doesn't fit, but more button does
                 break;
             }
@@ -11422,7 +11424,9 @@ const CatTabs = class {
     syncTabs() {
         this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
         this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
-        this.adjustAdaptiveTabs();
+        if (this.adaptive) {
+            this.adjustAdaptiveTabs();
+        }
     }
     click(tab) {
         if (this.canActivate(tab)) {
@@ -11439,7 +11443,9 @@ const CatTabs = class {
         else if (this.canActivate(tab)) {
             this.activeTab = tab.id;
         }
-        this.adjustAdaptiveTabs();
+        if (this.adaptive) {
+            this.adjustAdaptiveTabs();
+        }
     }
     canActivate(tab) {
         return !tab.deactivated && !tab.url && tab.id !== this.activeTab;