@haiilo/catalyst 14.0.2 → 14.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  // -- Reset
2
- @import 'sanitize.css/sanitize.css';
3
- @import 'sanitize.css/reduce-motion.css';
2
+ @use 'sanitize.css/sanitize.css';
3
+ @use 'sanitize.css/reduce-motion.css';
4
4
 
5
5
  // -- Core
6
6
  @import 'core/form';
@@ -11443,7 +11443,9 @@ const CatTabs = class {
11443
11443
  this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
11444
11444
  this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
11445
11445
  if (this.adaptive) {
11446
- this.adjustAdaptiveTabs();
11446
+ requestAnimationFrame(() => {
11447
+ this.adjustAdaptiveTabs();
11448
+ });
11447
11449
  }
11448
11450
  }
11449
11451
  click(tab) {
@@ -191,7 +191,9 @@ export class CatTabs {
191
191
  this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
192
192
  this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
193
193
  if (this.adaptive) {
194
- this.adjustAdaptiveTabs();
194
+ requestAnimationFrame(() => {
195
+ this.adjustAdaptiveTabs();
196
+ });
195
197
  }
196
198
  }
197
199
  click(tab) {
@@ -1 +1 @@
1
- {"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n * @part more - An optional more button to display additional tabs.\n */\n@Component({\n tag: 'cat-tabs',\n styleUrl: 'cat-tabs.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTabs {\n private mutationObserver?: MutationObserver;\n private moreDropdown?: HTMLCatDropdownElement;\n private moreButton?: HTMLCatButtonElement;\n private readonly resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());\n\n @Element() hostElement!: HTMLElement;\n\n @State() tabs: HTMLCatTabElement[] = [];\n @State() hiddenTabs: HTMLCatTabElement[] = [];\n\n /**\n * The ID of the active tab.\n */\n @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n /**\n * The alignment of the tabs.\n */\n @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n /**\n * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.\n */\n @Prop() adaptive = false;\n\n /**\n * Whether the active tab should always be visible. Applied when adaptive is enabled.\n * Has less priority than sticky if there is no space to show both.\n */\n @Prop() activeTabAlwaysVisible = false;\n\n componentWillLoad(): void {\n this.syncTabs();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n\n if (this.adaptive) {\n this.resizedObserver.observe(this.hostElement);\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Watch('activeTab')\n onActiveTabChange(id: string) {\n const index = this.tabs.findIndex(tab => tab.id === id);\n this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n }\n\n /**\n * Activates the tab with the given id.\n *\n * @param id The tab id.\n */\n @Method()\n async setActive(id: string): Promise<void> {\n this.activate(this.tabs.find(tab => tab.id === id));\n }\n\n /**\n * Activates the tab with the given index.\n *\n * @param index The tab index.\n */\n @Method()\n async setActiveIndex(index: number): Promise<void> {\n this.activate(this.tabs[index]);\n }\n\n /**\n * Recalculates visible and hidden adaptive tabs.\n */\n @Method()\n async updateAdaptiveTabs(): Promise<void> {\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n /**\n * Emitted when active tab is changed.\n */\n @Event() catChange!: EventEmitter<{ id: string; index: number; fromDropdown: boolean }>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div role=\"tablist\" class=\"cat-tab-list\">\n {this.tabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <cat-button\n buttonId={tab.id}\n part=\"tab\"\n class={{\n 'cat-tab': true,\n 'cat-tab-active': tab.id === this.activeTab,\n 'cat-tab-error': tab.error,\n 'cat-tab-sticky': tab.sticky\n }}\n active={tab.id === this.activeTab}\n color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n variant=\"text\"\n icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n iconOnly={tab.iconOnly}\n iconRight={tab.iconRight}\n url={tab.url}\n disabled={tab.deactivated}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n data-dropdown-no-close\n >\n {tab.label}\n </cat-button>\n );\n })}\n {this.adaptive ? (\n <cat-dropdown ref={el => (this.moreDropdown = el as HTMLCatDropdownElement)}>\n <cat-button\n ref={el => (this.moreButton = el as HTMLCatButtonElement)}\n class={{\n 'cat-tab-more-button': true,\n 'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)\n }}\n iconRight\n icon={this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined'}\n slot=\"trigger\"\n part=\"more\"\n variant=\"text\"\n color={this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary'}\n >\n {i18n.t('tabs.more')}\n </cat-button>\n <nav slot=\"content\">\n <ul>\n {this.hiddenTabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <li>\n <cat-button\n class=\"cat-nav-item\"\n active={tab.id === this.activeTab}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n >\n {tab.label}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n ) : null}\n </div>\n </Host>\n );\n }\n\n private adjustAdaptiveTabs() {\n const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab') as NodeListOf<HTMLCatButtonElement>;\n if (!tabs?.length) {\n return;\n }\n\n // show all hidden tabs for correct calculation\n for (const tab of tabs) {\n tab.style.display = 'inline-flex';\n }\n // show hidden \"more\" button for correct calculation\n if (this.moreButton) {\n this.moreButton.style.display = 'inline-flex';\n }\n\n const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;\n const visibleTabsIndexes: string[] = [];\n const containerWidth = this.hostElement.clientWidth;\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n if (stickyTabIsVisible) {\n fittingWidth += stickyTabWidth;\n visibleTabsIndexes.push(stickyTabIndex.toString());\n }\n\n if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {\n fittingWidth += activeTabWidth;\n visibleTabsIndexes.push(activeTabIndex.toString());\n }\n\n for (const [index, tab] of tabs.entries()) {\n if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {\n continue;\n }\n\n const tabWidth = tab.getBoundingClientRect().width;\n\n if (fittingWidth + tabWidth <= containerWidth) {\n // tab fits within tabs parent\n fittingWidth += tabWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= containerWidth) {\n // tab doesn't fit, but more button does\n break;\n } else {\n // tab doesn't fit and more button doesn't fit either\n // remove last fitting tab so that more button fits\n visibleTabsIndexes.pop();\n break;\n }\n }\n\n this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));\n\n if (this.moreButton) {\n if (this.tabs.length > visibleTabsIndexes.length) {\n this.moreButton.style.display = 'inline-flex';\n } else {\n this.moreButton.style.display = 'none';\n }\n }\n for (const [index, tab] of tabs.entries()) {\n if (!visibleTabsIndexes.includes(index.toString())) {\n tab.style.display = 'none';\n }\n }\n }\n\n private syncTabs() {\n this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private click(tab: HTMLCatTabElement) {\n if (this.canActivate(tab)) {\n tab.click();\n if (!tab.noActive) {\n this.activate(tab);\n }\n }\n }\n\n private activate(tab?: HTMLCatTabElement) {\n if (!tab) {\n this.activeTab = '';\n } else if (this.canActivate(tab)) {\n this.activeTab = tab.id;\n }\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private canActivate(tab: HTMLCatTabElement) {\n return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n }\n}\n"]}
1
+ {"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n * @part more - An optional more button to display additional tabs.\n */\n@Component({\n tag: 'cat-tabs',\n styleUrl: 'cat-tabs.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTabs {\n private mutationObserver?: MutationObserver;\n private moreDropdown?: HTMLCatDropdownElement;\n private moreButton?: HTMLCatButtonElement;\n private readonly resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());\n\n @Element() hostElement!: HTMLElement;\n\n @State() tabs: HTMLCatTabElement[] = [];\n @State() hiddenTabs: HTMLCatTabElement[] = [];\n\n /**\n * The ID of the active tab.\n */\n @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n /**\n * The alignment of the tabs.\n */\n @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n /**\n * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.\n */\n @Prop() adaptive = false;\n\n /**\n * Whether the active tab should always be visible. Applied when adaptive is enabled.\n * Has less priority than sticky if there is no space to show both.\n */\n @Prop() activeTabAlwaysVisible = false;\n\n componentWillLoad(): void {\n this.syncTabs();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n\n if (this.adaptive) {\n this.resizedObserver.observe(this.hostElement);\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Watch('activeTab')\n onActiveTabChange(id: string) {\n const index = this.tabs.findIndex(tab => tab.id === id);\n this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n }\n\n /**\n * Activates the tab with the given id.\n *\n * @param id The tab id.\n */\n @Method()\n async setActive(id: string): Promise<void> {\n this.activate(this.tabs.find(tab => tab.id === id));\n }\n\n /**\n * Activates the tab with the given index.\n *\n * @param index The tab index.\n */\n @Method()\n async setActiveIndex(index: number): Promise<void> {\n this.activate(this.tabs[index]);\n }\n\n /**\n * Recalculates visible and hidden adaptive tabs.\n */\n @Method()\n async updateAdaptiveTabs(): Promise<void> {\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n /**\n * Emitted when active tab is changed.\n */\n @Event() catChange!: EventEmitter<{ id: string; index: number; fromDropdown: boolean }>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div role=\"tablist\" class=\"cat-tab-list\">\n {this.tabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <cat-button\n buttonId={tab.id}\n part=\"tab\"\n class={{\n 'cat-tab': true,\n 'cat-tab-active': tab.id === this.activeTab,\n 'cat-tab-error': tab.error,\n 'cat-tab-sticky': tab.sticky\n }}\n active={tab.id === this.activeTab}\n color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n variant=\"text\"\n icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n iconOnly={tab.iconOnly}\n iconRight={tab.iconRight}\n url={tab.url}\n disabled={tab.deactivated}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n data-dropdown-no-close\n >\n {tab.label}\n </cat-button>\n );\n })}\n {this.adaptive ? (\n <cat-dropdown ref={el => (this.moreDropdown = el as HTMLCatDropdownElement)}>\n <cat-button\n ref={el => (this.moreButton = el as HTMLCatButtonElement)}\n class={{\n 'cat-tab-more-button': true,\n 'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)\n }}\n iconRight\n icon={this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined'}\n slot=\"trigger\"\n part=\"more\"\n variant=\"text\"\n color={this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary'}\n >\n {i18n.t('tabs.more')}\n </cat-button>\n <nav slot=\"content\">\n <ul>\n {this.hiddenTabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <li>\n <cat-button\n class=\"cat-nav-item\"\n active={tab.id === this.activeTab}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n >\n {tab.label}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n ) : null}\n </div>\n </Host>\n );\n }\n\n private adjustAdaptiveTabs() {\n const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab') as NodeListOf<HTMLCatButtonElement>;\n if (!tabs?.length) {\n return;\n }\n\n // show all hidden tabs for correct calculation\n for (const tab of tabs) {\n tab.style.display = 'inline-flex';\n }\n // show hidden \"more\" button for correct calculation\n if (this.moreButton) {\n this.moreButton.style.display = 'inline-flex';\n }\n\n const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;\n const visibleTabsIndexes: string[] = [];\n const containerWidth = this.hostElement.clientWidth;\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n if (stickyTabIsVisible) {\n fittingWidth += stickyTabWidth;\n visibleTabsIndexes.push(stickyTabIndex.toString());\n }\n\n if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {\n fittingWidth += activeTabWidth;\n visibleTabsIndexes.push(activeTabIndex.toString());\n }\n\n for (const [index, tab] of tabs.entries()) {\n if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {\n continue;\n }\n\n const tabWidth = tab.getBoundingClientRect().width;\n\n if (fittingWidth + tabWidth <= containerWidth) {\n // tab fits within tabs parent\n fittingWidth += tabWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= containerWidth) {\n // tab doesn't fit, but more button does\n break;\n } else {\n // tab doesn't fit and more button doesn't fit either\n // remove last fitting tab so that more button fits\n visibleTabsIndexes.pop();\n break;\n }\n }\n\n this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));\n\n if (this.moreButton) {\n if (this.tabs.length > visibleTabsIndexes.length) {\n this.moreButton.style.display = 'inline-flex';\n } else {\n this.moreButton.style.display = 'none';\n }\n }\n for (const [index, tab] of tabs.entries()) {\n if (!visibleTabsIndexes.includes(index.toString())) {\n tab.style.display = 'none';\n }\n }\n }\n\n private syncTabs() {\n this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;\n if (this.adaptive) {\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n private click(tab: HTMLCatTabElement) {\n if (this.canActivate(tab)) {\n tab.click();\n if (!tab.noActive) {\n this.activate(tab);\n }\n }\n }\n\n private activate(tab?: HTMLCatTabElement) {\n if (!tab) {\n this.activeTab = '';\n } else if (this.canActivate(tab)) {\n this.activeTab = tab.id;\n }\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private canActivate(tab: HTMLCatTabElement) {\n return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n }\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  // -- Reset
2
- @import '~sanitize.css/sanitize.css';
3
- @import '~sanitize.css/reduce-motion.css';
2
+ @use 'sanitize.css/sanitize.css';
3
+ @use 'sanitize.css/reduce-motion.css';
4
4
 
5
5
  // -- Core
6
6
  @import 'core/form';
@@ -197,7 +197,9 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
197
197
  this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
198
198
  this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
199
199
  if (this.adaptive) {
200
- this.adjustAdaptiveTabs();
200
+ requestAnimationFrame(() => {
201
+ this.adjustAdaptiveTabs();
202
+ });
201
203
  }
202
204
  }
203
205
  click(tab) {
@@ -1 +1 @@
1
- {"file":"cat-tabs.js","mappings":"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","names":["CatTabs","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n display: flex;\n flex-direction: row;\n box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default');\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([tabs-align='center']) {\n .cat-tab-list {\n justify-content: center;\n }\n}\n\n:host([tabs-align='right']) {\n .cat-tab-list {\n justify-content: end;\n }\n}\n\n:host([tabs-align='justify']) {\n cat-button {\n flex: 1 0 auto;\n }\n}\n\n.cat-tab,\n.cat-tab-more-button {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n position: relative;\n transition: none;\n\n &::after {\n opacity: 0;\n content: '';\n position: absolute;\n background: currentColor;\n left: 0.75rem;\n right: 0.75rem;\n bottom: 0;\n height: 2px;\n }\n\n &:hover::after {\n opacity: 0.25;\n }\n\n &.cat-tab-active {\n font-weight: 700;\n color: cat-token('color.theme.primary.textActive');\n }\n\n &.cat-tab-active::after {\n opacity: 1;\n }\n}\n\n.cat-tab {\n &:first-of-type {\n margin-left: -0.75rem;\n }\n\n &:last-of-type {\n margin-right: -0.75rem;\n }\n\n &.cat-tab-error {\n color: cat-token('color.theme.danger.textActive');\n }\n}\n\nnav {\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n}\n\n.cat-tab-list {\n display: flex;\n width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n * @part more - An optional more button to display additional tabs.\n */\n@Component({\n tag: 'cat-tabs',\n styleUrl: 'cat-tabs.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTabs {\n private mutationObserver?: MutationObserver;\n private moreDropdown?: HTMLCatDropdownElement;\n private moreButton?: HTMLCatButtonElement;\n private readonly resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());\n\n @Element() hostElement!: HTMLElement;\n\n @State() tabs: HTMLCatTabElement[] = [];\n @State() hiddenTabs: HTMLCatTabElement[] = [];\n\n /**\n * The ID of the active tab.\n */\n @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n /**\n * The alignment of the tabs.\n */\n @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n /**\n * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.\n */\n @Prop() adaptive = false;\n\n /**\n * Whether the active tab should always be visible. Applied when adaptive is enabled.\n * Has less priority than sticky if there is no space to show both.\n */\n @Prop() activeTabAlwaysVisible = false;\n\n componentWillLoad(): void {\n this.syncTabs();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n\n if (this.adaptive) {\n this.resizedObserver.observe(this.hostElement);\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Watch('activeTab')\n onActiveTabChange(id: string) {\n const index = this.tabs.findIndex(tab => tab.id === id);\n this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n }\n\n /**\n * Activates the tab with the given id.\n *\n * @param id The tab id.\n */\n @Method()\n async setActive(id: string): Promise<void> {\n this.activate(this.tabs.find(tab => tab.id === id));\n }\n\n /**\n * Activates the tab with the given index.\n *\n * @param index The tab index.\n */\n @Method()\n async setActiveIndex(index: number): Promise<void> {\n this.activate(this.tabs[index]);\n }\n\n /**\n * Recalculates visible and hidden adaptive tabs.\n */\n @Method()\n async updateAdaptiveTabs(): Promise<void> {\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n /**\n * Emitted when active tab is changed.\n */\n @Event() catChange!: EventEmitter<{ id: string; index: number; fromDropdown: boolean }>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div role=\"tablist\" class=\"cat-tab-list\">\n {this.tabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <cat-button\n buttonId={tab.id}\n part=\"tab\"\n class={{\n 'cat-tab': true,\n 'cat-tab-active': tab.id === this.activeTab,\n 'cat-tab-error': tab.error,\n 'cat-tab-sticky': tab.sticky\n }}\n active={tab.id === this.activeTab}\n color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n variant=\"text\"\n icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n iconOnly={tab.iconOnly}\n iconRight={tab.iconRight}\n url={tab.url}\n disabled={tab.deactivated}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n data-dropdown-no-close\n >\n {tab.label}\n </cat-button>\n );\n })}\n {this.adaptive ? (\n <cat-dropdown ref={el => (this.moreDropdown = el as HTMLCatDropdownElement)}>\n <cat-button\n ref={el => (this.moreButton = el as HTMLCatButtonElement)}\n class={{\n 'cat-tab-more-button': true,\n 'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)\n }}\n iconRight\n icon={this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined'}\n slot=\"trigger\"\n part=\"more\"\n variant=\"text\"\n color={this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary'}\n >\n {i18n.t('tabs.more')}\n </cat-button>\n <nav slot=\"content\">\n <ul>\n {this.hiddenTabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <li>\n <cat-button\n class=\"cat-nav-item\"\n active={tab.id === this.activeTab}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n >\n {tab.label}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n ) : null}\n </div>\n </Host>\n );\n }\n\n private adjustAdaptiveTabs() {\n const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab') as NodeListOf<HTMLCatButtonElement>;\n if (!tabs?.length) {\n return;\n }\n\n // show all hidden tabs for correct calculation\n for (const tab of tabs) {\n tab.style.display = 'inline-flex';\n }\n // show hidden \"more\" button for correct calculation\n if (this.moreButton) {\n this.moreButton.style.display = 'inline-flex';\n }\n\n const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;\n const visibleTabsIndexes: string[] = [];\n const containerWidth = this.hostElement.clientWidth;\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n if (stickyTabIsVisible) {\n fittingWidth += stickyTabWidth;\n visibleTabsIndexes.push(stickyTabIndex.toString());\n }\n\n if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {\n fittingWidth += activeTabWidth;\n visibleTabsIndexes.push(activeTabIndex.toString());\n }\n\n for (const [index, tab] of tabs.entries()) {\n if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {\n continue;\n }\n\n const tabWidth = tab.getBoundingClientRect().width;\n\n if (fittingWidth + tabWidth <= containerWidth) {\n // tab fits within tabs parent\n fittingWidth += tabWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= containerWidth) {\n // tab doesn't fit, but more button does\n break;\n } else {\n // tab doesn't fit and more button doesn't fit either\n // remove last fitting tab so that more button fits\n visibleTabsIndexes.pop();\n break;\n }\n }\n\n this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));\n\n if (this.moreButton) {\n if (this.tabs.length > visibleTabsIndexes.length) {\n this.moreButton.style.display = 'inline-flex';\n } else {\n this.moreButton.style.display = 'none';\n }\n }\n for (const [index, tab] of tabs.entries()) {\n if (!visibleTabsIndexes.includes(index.toString())) {\n tab.style.display = 'none';\n }\n }\n }\n\n private syncTabs() {\n this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private click(tab: HTMLCatTabElement) {\n if (this.canActivate(tab)) {\n tab.click();\n if (!tab.noActive) {\n this.activate(tab);\n }\n }\n }\n\n private activate(tab?: HTMLCatTabElement) {\n if (!tab) {\n this.activeTab = '';\n } else if (this.canActivate(tab)) {\n this.activeTab = tab.id;\n }\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private canActivate(tab: HTMLCatTabElement) {\n return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n }\n}\n"],"version":3}
1
+ {"file":"cat-tabs.js","mappings":"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","names":["CatTabs","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n display: flex;\n flex-direction: row;\n box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default');\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([tabs-align='center']) {\n .cat-tab-list {\n justify-content: center;\n }\n}\n\n:host([tabs-align='right']) {\n .cat-tab-list {\n justify-content: end;\n }\n}\n\n:host([tabs-align='justify']) {\n cat-button {\n flex: 1 0 auto;\n }\n}\n\n.cat-tab,\n.cat-tab-more-button {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n position: relative;\n transition: none;\n\n &::after {\n opacity: 0;\n content: '';\n position: absolute;\n background: currentColor;\n left: 0.75rem;\n right: 0.75rem;\n bottom: 0;\n height: 2px;\n }\n\n &:hover::after {\n opacity: 0.25;\n }\n\n &.cat-tab-active {\n font-weight: 700;\n color: cat-token('color.theme.primary.textActive');\n }\n\n &.cat-tab-active::after {\n opacity: 1;\n }\n}\n\n.cat-tab {\n &:first-of-type {\n margin-left: -0.75rem;\n }\n\n &:last-of-type {\n margin-right: -0.75rem;\n }\n\n &.cat-tab-error {\n color: cat-token('color.theme.danger.textActive');\n }\n}\n\nnav {\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n}\n\n.cat-tab-list {\n display: flex;\n width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n * @part more - An optional more button to display additional tabs.\n */\n@Component({\n tag: 'cat-tabs',\n styleUrl: 'cat-tabs.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTabs {\n private mutationObserver?: MutationObserver;\n private moreDropdown?: HTMLCatDropdownElement;\n private moreButton?: HTMLCatButtonElement;\n private readonly resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());\n\n @Element() hostElement!: HTMLElement;\n\n @State() tabs: HTMLCatTabElement[] = [];\n @State() hiddenTabs: HTMLCatTabElement[] = [];\n\n /**\n * The ID of the active tab.\n */\n @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n /**\n * The alignment of the tabs.\n */\n @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n /**\n * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.\n */\n @Prop() adaptive = false;\n\n /**\n * Whether the active tab should always be visible. Applied when adaptive is enabled.\n * Has less priority than sticky if there is no space to show both.\n */\n @Prop() activeTabAlwaysVisible = false;\n\n componentWillLoad(): void {\n this.syncTabs();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n\n if (this.adaptive) {\n this.resizedObserver.observe(this.hostElement);\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Watch('activeTab')\n onActiveTabChange(id: string) {\n const index = this.tabs.findIndex(tab => tab.id === id);\n this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n }\n\n /**\n * Activates the tab with the given id.\n *\n * @param id The tab id.\n */\n @Method()\n async setActive(id: string): Promise<void> {\n this.activate(this.tabs.find(tab => tab.id === id));\n }\n\n /**\n * Activates the tab with the given index.\n *\n * @param index The tab index.\n */\n @Method()\n async setActiveIndex(index: number): Promise<void> {\n this.activate(this.tabs[index]);\n }\n\n /**\n * Recalculates visible and hidden adaptive tabs.\n */\n @Method()\n async updateAdaptiveTabs(): Promise<void> {\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n /**\n * Emitted when active tab is changed.\n */\n @Event() catChange!: EventEmitter<{ id: string; index: number; fromDropdown: boolean }>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div role=\"tablist\" class=\"cat-tab-list\">\n {this.tabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <cat-button\n buttonId={tab.id}\n part=\"tab\"\n class={{\n 'cat-tab': true,\n 'cat-tab-active': tab.id === this.activeTab,\n 'cat-tab-error': tab.error,\n 'cat-tab-sticky': tab.sticky\n }}\n active={tab.id === this.activeTab}\n color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n variant=\"text\"\n icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n iconOnly={tab.iconOnly}\n iconRight={tab.iconRight}\n url={tab.url}\n disabled={tab.deactivated}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n data-dropdown-no-close\n >\n {tab.label}\n </cat-button>\n );\n })}\n {this.adaptive ? (\n <cat-dropdown ref={el => (this.moreDropdown = el as HTMLCatDropdownElement)}>\n <cat-button\n ref={el => (this.moreButton = el as HTMLCatButtonElement)}\n class={{\n 'cat-tab-more-button': true,\n 'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)\n }}\n iconRight\n icon={this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined'}\n slot=\"trigger\"\n part=\"more\"\n variant=\"text\"\n color={this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary'}\n >\n {i18n.t('tabs.more')}\n </cat-button>\n <nav slot=\"content\">\n <ul>\n {this.hiddenTabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <li>\n <cat-button\n class=\"cat-nav-item\"\n active={tab.id === this.activeTab}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n >\n {tab.label}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n ) : null}\n </div>\n </Host>\n );\n }\n\n private adjustAdaptiveTabs() {\n const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab') as NodeListOf<HTMLCatButtonElement>;\n if (!tabs?.length) {\n return;\n }\n\n // show all hidden tabs for correct calculation\n for (const tab of tabs) {\n tab.style.display = 'inline-flex';\n }\n // show hidden \"more\" button for correct calculation\n if (this.moreButton) {\n this.moreButton.style.display = 'inline-flex';\n }\n\n const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;\n const visibleTabsIndexes: string[] = [];\n const containerWidth = this.hostElement.clientWidth;\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n if (stickyTabIsVisible) {\n fittingWidth += stickyTabWidth;\n visibleTabsIndexes.push(stickyTabIndex.toString());\n }\n\n if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {\n fittingWidth += activeTabWidth;\n visibleTabsIndexes.push(activeTabIndex.toString());\n }\n\n for (const [index, tab] of tabs.entries()) {\n if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {\n continue;\n }\n\n const tabWidth = tab.getBoundingClientRect().width;\n\n if (fittingWidth + tabWidth <= containerWidth) {\n // tab fits within tabs parent\n fittingWidth += tabWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= containerWidth) {\n // tab doesn't fit, but more button does\n break;\n } else {\n // tab doesn't fit and more button doesn't fit either\n // remove last fitting tab so that more button fits\n visibleTabsIndexes.pop();\n break;\n }\n }\n\n this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));\n\n if (this.moreButton) {\n if (this.tabs.length > visibleTabsIndexes.length) {\n this.moreButton.style.display = 'inline-flex';\n } else {\n this.moreButton.style.display = 'none';\n }\n }\n for (const [index, tab] of tabs.entries()) {\n if (!visibleTabsIndexes.includes(index.toString())) {\n tab.style.display = 'none';\n }\n }\n }\n\n private syncTabs() {\n this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;\n if (this.adaptive) {\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n private click(tab: HTMLCatTabElement) {\n if (this.canActivate(tab)) {\n tab.click();\n if (!tab.noActive) {\n this.activate(tab);\n }\n }\n }\n\n private activate(tab?: HTMLCatTabElement) {\n if (!tab) {\n this.activeTab = '';\n } else if (this.canActivate(tab)) {\n this.activeTab = tab.id;\n }\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private canActivate(tab: HTMLCatTabElement) {\n return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n }\n}\n"],"version":3}
@@ -11441,7 +11441,9 @@ const CatTabs = class {
11441
11441
  this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
11442
11442
  this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
11443
11443
  if (this.adaptive) {
11444
- this.adjustAdaptiveTabs();
11444
+ requestAnimationFrame(() => {
11445
+ this.adjustAdaptiveTabs();
11446
+ });
11445
11447
  }
11446
11448
  }
11447
11449
  click(tab) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haiilo/catalyst",
3
- "version": "14.0.2",
3
+ "version": "14.0.3",
4
4
  "description": "Catalyst Design System",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -39,7 +39,7 @@
39
39
  "sanitize.css": "13.0.0",
40
40
  "tabbable": "6.2.0",
41
41
  "toastify-js": "1.12.0",
42
- "@haiilo/catalyst-tokens": "14.0.2"
42
+ "@haiilo/catalyst-tokens": "14.0.3"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@babel/core": "7.28.5",