@haiilo/catalyst 13.0.2 → 13.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.
@@ -13,11 +13,11 @@
13
13
  display: none;
14
14
  }
15
15
 
16
- :host([tabs-align=center]) {
16
+ :host([tabs-align=center]) .cat-tab-list {
17
17
  justify-content: center;
18
18
  }
19
19
 
20
- :host([tabs-align=right]) {
20
+ :host([tabs-align=right]) .cat-tab-list {
21
21
  justify-content: end;
22
22
  }
23
23
 
@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './cat-dropdown2.js';
5
5
  import { d as defineCustomElement$3 } from './cat-icon2.js';
6
6
  import { d as defineCustomElement$2 } from './cat-spinner2.js';
7
7
 
8
- const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab,.cat-tab-more-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;transition:none}.cat-tab::after,.cat-tab-more-button::after{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after,.cat-tab-more-button:hover::after{opacity:0.25}.cat-tab.cat-tab-active,.cat-tab-more-button.cat-tab-active{font-weight:700;color:rgb(var(--cat-primary-text-active, 2, 99, 113))}.cat-tab.cat-tab-active::after,.cat-tab-more-button.cat-tab-active::after{opacity:1}.cat-tab:first-of-type{margin-left:-0.75rem}.cat-tab:last-of-type{margin-right:-0.75rem}.cat-tab.cat-tab-error{color:rgb(var(--cat-danger-text-active, 174, 42, 10))}nav ul{list-style:none;margin:0;padding:0}.cat-tab-list{display:flex;width:100%}";
8
+ const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]) .cat-tab-list{justify-content:center}:host([tabs-align=right]) .cat-tab-list{justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab,.cat-tab-more-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;transition:none}.cat-tab::after,.cat-tab-more-button::after{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after,.cat-tab-more-button:hover::after{opacity:0.25}.cat-tab.cat-tab-active,.cat-tab-more-button.cat-tab-active{font-weight:700;color:rgb(var(--cat-primary-text-active, 2, 99, 113))}.cat-tab.cat-tab-active::after,.cat-tab-more-button.cat-tab-active::after{opacity:1}.cat-tab:first-of-type{margin-left:-0.75rem}.cat-tab:last-of-type{margin-right:-0.75rem}.cat-tab.cat-tab-error{color:rgb(var(--cat-danger-text-active, 174, 42, 10))}nav ul{list-style:none;margin:0;padding:0}.cat-tab-list{display:flex;width:100%}";
9
9
 
10
10
  const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLElement {
11
11
  constructor() {
@@ -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 justify-content: center;\n}\n\n:host([tabs-align='right']) {\n justify-content: end;\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 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}
@@ -11241,7 +11241,7 @@ const CatTab = class {
11241
11241
  };
11242
11242
  CatTab.style = catTabCss;
11243
11243
 
11244
- const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab,.cat-tab-more-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;transition:none}.cat-tab::after,.cat-tab-more-button::after{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after,.cat-tab-more-button:hover::after{opacity:0.25}.cat-tab.cat-tab-active,.cat-tab-more-button.cat-tab-active{font-weight:700;color:rgb(var(--cat-primary-text-active, 2, 99, 113))}.cat-tab.cat-tab-active::after,.cat-tab-more-button.cat-tab-active::after{opacity:1}.cat-tab:first-of-type{margin-left:-0.75rem}.cat-tab:last-of-type{margin-right:-0.75rem}.cat-tab.cat-tab-error{color:rgb(var(--cat-danger-text-active, 174, 42, 10))}nav ul{list-style:none;margin:0;padding:0}.cat-tab-list{display:flex;width:100%}";
11244
+ const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]) .cat-tab-list{justify-content:center}:host([tabs-align=right]) .cat-tab-list{justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab,.cat-tab-more-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;transition:none}.cat-tab::after,.cat-tab-more-button::after{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after,.cat-tab-more-button:hover::after{opacity:0.25}.cat-tab.cat-tab-active,.cat-tab-more-button.cat-tab-active{font-weight:700;color:rgb(var(--cat-primary-text-active, 2, 99, 113))}.cat-tab.cat-tab-active::after,.cat-tab-more-button.cat-tab-active::after{opacity:1}.cat-tab:first-of-type{margin-left:-0.75rem}.cat-tab:last-of-type{margin-right:-0.75rem}.cat-tab.cat-tab-error{color:rgb(var(--cat-danger-text-active, 174, 42, 10))}nav ul{list-style:none;margin:0;padding:0}.cat-tab-list{display:flex;width:100%}";
11245
11245
 
11246
11246
  const CatTabs = class {
11247
11247
  constructor(hostRef) {