@haiilo/catalyst 12.0.0 → 12.2.0

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.
Files changed (15) hide show
  1. package/dist/catalyst/catalyst.esm.js +1 -1
  2. package/dist/catalyst/{p-6a54965a.entry.js → p-e65bb6a0.entry.js} +2 -2
  3. package/dist/catalyst/p-e65bb6a0.entry.js.map +1 -0
  4. package/dist/cjs/cat-alert_30.cjs.entry.js +18 -12
  5. package/dist/cjs/cat-alert_30.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/cat-tabs/cat-tabs.js +20 -14
  7. package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
  8. package/dist/components/cat-tabs.js +18 -12
  9. package/dist/components/cat-tabs.js.map +1 -1
  10. package/dist/esm/cat-alert_30.entry.js +18 -12
  11. package/dist/esm/cat-alert_30.entry.js.map +1 -1
  12. package/dist/types/components/cat-tabs/cat-tabs.d.ts +1 -0
  13. package/dist/types/components.d.ts +2 -2
  14. package/package.json +2 -2
  15. package/dist/catalyst/p-6a54965a.entry.js.map +0 -1
package/dist/collection/components/cat-tabs/cat-tabs.js CHANGED
@@ -52,7 +52,7 @@ export class CatTabs {
52
52
  }
53
53
  onActiveTabChange(id) {
54
54
  const index = this.tabs.findIndex(tab => tab.id === id);
55
- this.catChange.emit({ id, index });
55
+ this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });
56
56
  }
57
57
  onKeydown(event) {
58
58
  if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -92,7 +92,7 @@ export class CatTabs {
92
92
  }
93
93
  render() {
94
94
  this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
95
- return (h(Host, { key: '874b547102901311b51c66aace5a2f91f4d52bbb' }, h("div", { key: 'ab2ccbf398bdb5897c71762c9befe63f383a04db', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
95
+ return (h(Host, { key: '7465fe19c1c67bd0f2c83ae15ed4d31e1e7610b7' }, h("div", { key: '3d0f4c19edd3549d3c9c8f83685b0c852770f594', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
96
96
  return (h("cat-button", { buttonId: tab.id, part: "tab", class: {
97
97
  'cat-tab': true,
98
98
  'cat-tab-active': tab.id === this.activeTab,
@@ -131,17 +131,18 @@ export class CatTabs {
131
131
  if (this.moreButton) {
132
132
  this.moreButton.style.display = 'inline-flex';
133
133
  }
134
- const MORE_WIDTH = this.moreButton?.offsetWidth || 0;
134
+ const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;
135
135
  const visibleTabsIndexes = [];
136
+ const containerWidth = this.hostElement.clientWidth;
136
137
  let fittingWidth = 0;
137
138
  const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);
138
- const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;
139
- const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;
139
+ const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;
140
+ const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;
140
141
  const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);
141
- const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;
142
+ const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;
142
143
  const activeTabIsVisible = this.activeTabAlwaysVisible &&
143
144
  activeTabIndex > -1 &&
144
- activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;
145
+ activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;
145
146
  if (stickyTabIsVisible) {
146
147
  fittingWidth += stickyTabWidth;
147
148
  visibleTabsIndexes.push(stickyTabIndex.toString());
@@ -154,12 +155,13 @@ export class CatTabs {
154
155
  if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {
155
156
  continue;
156
157
  }
157
- if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {
158
+ const tabWidth = tab.getBoundingClientRect().width;
159
+ if (fittingWidth + tabWidth <= containerWidth) {
158
160
  // tab fits within tabs parent
159
- fittingWidth += tab.scrollWidth;
161
+ fittingWidth += tabWidth;
160
162
  visibleTabsIndexes.push(index.toString());
161
163
  }
162
- else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {
164
+ else if (fittingWidth + MORE_WIDTH <= containerWidth) {
163
165
  // tab doesn't fit, but more button does
164
166
  break;
165
167
  }
@@ -188,7 +190,9 @@ export class CatTabs {
188
190
  syncTabs() {
189
191
  this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
190
192
  this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
191
- this.adjustAdaptiveTabs();
193
+ if (this.adaptive) {
194
+ this.adjustAdaptiveTabs();
195
+ }
192
196
  }
193
197
  click(tab) {
194
198
  if (this.canActivate(tab)) {
@@ -205,7 +209,9 @@ export class CatTabs {
205
209
  else if (this.canActivate(tab)) {
206
210
  this.activeTab = tab.id;
207
211
  }
208
- this.adjustAdaptiveTabs();
212
+ if (this.adaptive) {
213
+ this.adjustAdaptiveTabs();
214
+ }
209
215
  }
210
216
  canActivate(tab) {
211
217
  return !tab.deactivated && !tab.url && tab.id !== this.activeTab;
@@ -325,8 +331,8 @@ export class CatTabs {
325
331
  "text": "Emitted when active tab is changed."
326
332
  },
327
333
  "complexType": {
328
- "original": "{ id: string; index: number }",
329
- "resolved": "{ id: string; index: number; }",
334
+ "original": "{ id: string; index: number; fromDropdown: boolean }",
335
+ "resolved": "{ id: string; index: number; fromDropdown: boolean; }",
330
336
  "references": {}
331
337
  }
332
338
  }];
package/dist/collection/components/cat-tabs/cat-tabs.js.map CHANGED
@@ -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 });\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 }>;\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?.offsetWidth || 0;\n const visibleTabsIndexes: string[] = [];\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;\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 if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {\n // tab fits within tabs parent\n fittingWidth += tab.scrollWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {\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 this.adjustAdaptiveTabs();\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 this.adjustAdaptiveTabs();\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 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"]}
package/dist/components/cat-tabs.js CHANGED
@@ -56,7 +56,7 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
56
56
  }
57
57
  onActiveTabChange(id) {
58
58
  const index = this.tabs.findIndex(tab => tab.id === id);
59
- this.catChange.emit({ id, index });
59
+ this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });
60
60
  }
61
61
  onKeydown(event) {
62
62
  if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -96,7 +96,7 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
96
96
  }
97
97
  render() {
98
98
  this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
99
- return (h(Host, { key: '874b547102901311b51c66aace5a2f91f4d52bbb' }, h("div", { key: 'ab2ccbf398bdb5897c71762c9befe63f383a04db', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
99
+ return (h(Host, { key: '7465fe19c1c67bd0f2c83ae15ed4d31e1e7610b7' }, h("div", { key: '3d0f4c19edd3549d3c9c8f83685b0c852770f594', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
100
100
  return (h("cat-button", { buttonId: tab.id, part: "tab", class: {
101
101
  'cat-tab': true,
102
102
  'cat-tab-active': tab.id === this.activeTab,
@@ -135,17 +135,18 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
135
135
  if (this.moreButton) {
136
136
  this.moreButton.style.display = 'inline-flex';
137
137
  }
138
- const MORE_WIDTH = this.moreButton?.offsetWidth || 0;
138
+ const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;
139
139
  const visibleTabsIndexes = [];
140
+ const containerWidth = this.hostElement.clientWidth;
140
141
  let fittingWidth = 0;
141
142
  const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);
142
- const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;
143
- const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;
143
+ const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;
144
+ const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;
144
145
  const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);
145
- const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;
146
+ const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;
146
147
  const activeTabIsVisible = this.activeTabAlwaysVisible &&
147
148
  activeTabIndex > -1 &&
148
- activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;
149
+ activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;
149
150
  if (stickyTabIsVisible) {
150
151
  fittingWidth += stickyTabWidth;
151
152
  visibleTabsIndexes.push(stickyTabIndex.toString());
@@ -158,12 +159,13 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
158
159
  if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {
159
160
  continue;
160
161
  }
161
- if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {
162
+ const tabWidth = tab.getBoundingClientRect().width;
163
+ if (fittingWidth + tabWidth <= containerWidth) {
162
164
  // tab fits within tabs parent
163
- fittingWidth += tab.scrollWidth;
165
+ fittingWidth += tabWidth;
164
166
  visibleTabsIndexes.push(index.toString());
165
167
  }
166
- else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {
168
+ else if (fittingWidth + MORE_WIDTH <= containerWidth) {
167
169
  // tab doesn't fit, but more button does
168
170
  break;
169
171
  }
@@ -192,7 +194,9 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
192
194
  syncTabs() {
193
195
  this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
194
196
  this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
195
- this.adjustAdaptiveTabs();
197
+ if (this.adaptive) {
198
+ this.adjustAdaptiveTabs();
199
+ }
196
200
  }
197
201
  click(tab) {
198
202
  if (this.canActivate(tab)) {
@@ -209,7 +213,9 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
209
213
  else if (this.canActivate(tab)) {
210
214
  this.activeTab = tab.id;
211
215
  }
212
- this.adjustAdaptiveTabs();
216
+ if (this.adaptive) {
217
+ this.adjustAdaptiveTabs();
218
+ }
213
219
  }
214
220
  canActivate(tab) {
215
221
  return !tab.deactivated && !tab.url && tab.id !== this.activeTab;
package/dist/components/cat-tabs.js.map CHANGED
@@ -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 });\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 }>;\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?.offsetWidth || 0;\n const visibleTabsIndexes: string[] = [];\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;\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 if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {\n // tab fits within tabs parent\n fittingWidth += tab.scrollWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {\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 this.adjustAdaptiveTabs();\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 this.adjustAdaptiveTabs();\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":";;;;;;;AAAA,MAAM,UAAU,GAAG,ymCAAymC;;MCiB/mCA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AAPpB,IAAA,WAAA,GAAA;;;;;AAWmB,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAI7E,QAAA,IAAI,CAAA,IAAA,GAAwB,EAAE;AAC9B,QAAA,IAAU,CAAA,UAAA,GAAwB,EAAE;AAE7C;;AAEG;AACqC,QAAA,IAAS,CAAA,SAAA,GAAG,EAAE;AAEtD;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAA4C,MAAM;AAEnE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAsB,CAAA,sBAAA,GAAG,KAAK;AA6RvC;IA3RC,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,EAAE;;IAGjB,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAC1C,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,KAAK,SAAS,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAC7F;QACD,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;AAC/C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,OAAO,EAAE;AACV,SAAA,CAAC;AAEF,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;YAC9C,qBAAqB,CAAC,MAAK;gBACzB,IAAI,CAAC,kBAAkB,EAAE;AAC3B,aAAC,CAAC;;;IAIN,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE;;AAIrC,IAAA,iBAAiB,CAAC,EAAU,EAAA;AAC1B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACvD,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;;AAIhG,IAAA,SAAS,CAAC,KAAoB,EAAA;AAC5B,QAAA,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AAC3E,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,gBAAgB,CAAuB,wBAAwB,CAAC;YAC9G,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACpF,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAqC;AACxF,YAAA,MAAM,SAAS,GAAG,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,EAAE;YAC5E,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE;YAC1E,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM;AAC7G,YAAA,cAAc,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE;YACnC,KAAK,CAAC,cAAc,EAAE;;;AAI1B;;;;AAIG;IAEH,MAAM,SAAS,CAAC,EAAU,EAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;;AAGrD;;;;AAIG;IAEH,MAAM,cAAc,CAAC,KAAa,EAAA;QAChC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;AAGjC;;AAEG;AAEH,IAAA,MAAM,kBAAkB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,kBAAkB,EAAE;;;IAS7B,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;AAClF,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,EAAA,EACrC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAsB,EAAE,KAAa,KAAI;AACvD,YAAA,QACE,CAAA,CAAA,YAAA,EAAA,EACE,QAAQ,EAAE,GAAG,CAAC,EAAE,EAChB,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;AACL,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,gBAAgB,EAAE,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS;oBAC3C,eAAe,EAAE,GAAG,CAAC,KAAK;oBAC1B,gBAAgB,EAAE,GAAG,CAAC;iBACvB,EACD,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,EACjC,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,WAAW,EACjF,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,KAAK,GAAG,kBAAkB,GAAG,GAAG,CAAC,IAAI,IAAI,SAAS,EACxE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,QAAQ,EAAE,GAAG,CAAC,WAAW,EACzB,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,UAAU,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EACjC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,gBAAgB,EAAE;oBAChB,GAAG,GAAG,CAAC,gBAAgB;AACvB,oBAAA,IAAI,EAAE,KAAK;oBACX,eAAe,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC;oBAClD,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AACxC,oBAAA,eAAe,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC;iBAClC,EACD,uBAAuB,EAAE,EAAE,WAAW,EAAE,GAAG,CAAC,KAAK,EAAE,oCAGlD,GAAG,CAAC,KAAK,CACC;SAEhB,CAAC,EACD,IAAI,CAAC,QAAQ,IACZ,oBAAc,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAA4B,CAAC,EAAA,EACzE,CAAA,CAAA,YAAA,EAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAA0B,CAAC,EACzD,KAAK,EAAE;AACL,gBAAA,qBAAqB,EAAE,IAAI;gBAC3B,gBAAgB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS;aAC1E,EACD,SAAS,EAAA,IAAA,EACT,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,qBAAqB,GAAG,uBAAuB,EACjF,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC,GAAG,SAAS,GAAG,WAAW,EAEtF,EAAAC,eAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CACT,EACb,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACjB,CACG,CAAA,IAAA,EAAA,IAAA,EAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAsB,EAAE,KAAa,KAAI;YAC7D,QACE,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAA,YAAA,EAAA,EACE,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,EACjC,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,UAAU,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EACjC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,gBAAgB,EAAE;oBAChB,GAAG,GAAG,CAAC,gBAAgB;AACvB,oBAAA,IAAI,EAAE,KAAK;oBACX,eAAe,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC;oBAClD,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AACxC,oBAAA,eAAe,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC;AAClC,iBAAA,EACD,uBAAuB,EAAE,EAAE,WAAW,EAAE,GAAG,CAAC,KAAK,EAAE,EAAA,EAElD,GAAG,CAAC,KAAK,CACC,CACV;AAET,SAAC,CAAC,CACC,CACD,CACO,IACb,IAAI,CACJ,CACD;;IAIH,kBAAkB,GAAA;AACxB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,gBAAgB,CAAC,UAAU,CAAqC;AAC1G,QAAA,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE;YACjB;;;AAIF,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;AACtB,YAAA,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa;;;AAGnC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa;;AAG/C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC;QACtE,MAAM,kBAAkB,GAAa,EAAE;AACvC,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW;QACnD,IAAI,YAAY,GAAG,CAAC;AAEpB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC;AAC7D,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC;AACpF,QAAA,MAAM,kBAAkB,GAAG,cAAc,GAAG,EAAE,IAAI,cAAc,GAAG,UAAU,IAAI,cAAc;QAE/F,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC;AAC5E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC;AACpF,QAAA,MAAM,kBAAkB,GACtB,IAAI,CAAC,sBAAsB;YAC3B,cAAc,GAAG,EAAE;AACnB,YAAA,cAAc,GAAG,cAAc,GAAG,UAAU,IAAI,cAAc;QAEhE,IAAI,kBAAkB,EAAE;YACtB,YAAY,IAAI,cAAc;YAC9B,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;;AAGpD,QAAA,IAAI,kBAAkB,IAAI,cAAc,KAAK,cAAc,EAAE;YAC3D,YAAY,IAAI,cAAc;YAC9B,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;;AAGpD,QAAA,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;AACzC,YAAA,IAAI,CAAC,kBAAkB,IAAI,KAAK,KAAK,cAAc,MAAM,kBAAkB,IAAI,KAAK,KAAK,cAAc,CAAC,EAAE;gBACxG;;YAGF,MAAM,QAAQ,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC,KAAK;AAElD,YAAA,IAAI,YAAY,GAAG,QAAQ,IAAI,cAAc,EAAE;;gBAE7C,YAAY,IAAI,QAAQ;gBACxB,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;;AACpC,iBAAA,IAAI,YAAY,GAAG,UAAU,IAAI,cAAc,EAAE;;gBAEtD;;iBACK;;;gBAGL,kBAAkB,CAAC,GAAG,EAAE;gBACxB;;;QAIJ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;AAEhG,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,kBAAkB,CAAC,MAAM,EAAE;gBAChD,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa;;iBACxC;gBACL,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;;AAG1C,QAAA,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YACzC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE;AAClD,gBAAA,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;;;IAKxB,QAAQ,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;AACpE,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;AACzG,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,kBAAkB,EAAE;;;AAIrB,IAAA,KAAK,CAAC,GAAsB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;YACzB,GAAG,CAAC,KAAK,EAAE;AACX,YAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;AACjB,gBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;AAKhB,IAAA,QAAQ,CAAC,GAAuB,EAAA;QACtC,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AACd,aAAA,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;AAChC,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EAAE;;AAEzB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,kBAAkB,EAAE;;;AAIrB,IAAA,WAAW,CAAC,GAAsB,EAAA;AACxC,QAAA,OAAO,CAAC,GAAG,CAAC,WAAW,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}
package/dist/esm/cat-alert_30.entry.js CHANGED
@@ -11284,7 +11284,7 @@ const CatTabs = class {
11284
11284
  }
11285
11285
  onActiveTabChange(id) {
11286
11286
  const index = this.tabs.findIndex(tab => tab.id === id);
11287
- this.catChange.emit({ id, index });
11287
+ this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });
11288
11288
  }
11289
11289
  onKeydown(event) {
11290
11290
  if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -11324,7 +11324,7 @@ const CatTabs = class {
11324
11324
  }
11325
11325
  render() {
11326
11326
  this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
11327
- return (h(Host, { key: '874b547102901311b51c66aace5a2f91f4d52bbb' }, h("div", { key: 'ab2ccbf398bdb5897c71762c9befe63f383a04db', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
11327
+ return (h(Host, { key: '7465fe19c1c67bd0f2c83ae15ed4d31e1e7610b7' }, h("div", { key: '3d0f4c19edd3549d3c9c8f83685b0c852770f594', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
11328
11328
  return (h("cat-button", { buttonId: tab.id, part: "tab", class: {
11329
11329
  'cat-tab': true,
11330
11330
  'cat-tab-active': tab.id === this.activeTab,
@@ -11363,17 +11363,18 @@ const CatTabs = class {
11363
11363
  if (this.moreButton) {
11364
11364
  this.moreButton.style.display = 'inline-flex';
11365
11365
  }
11366
- const MORE_WIDTH = this.moreButton?.offsetWidth || 0;
11366
+ const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;
11367
11367
  const visibleTabsIndexes = [];
11368
+ const containerWidth = this.hostElement.clientWidth;
11368
11369
  let fittingWidth = 0;
11369
11370
  const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);
11370
- const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;
11371
- const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;
11371
+ const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;
11372
+ const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;
11372
11373
  const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);
11373
- const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;
11374
+ const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;
11374
11375
  const activeTabIsVisible = this.activeTabAlwaysVisible &&
11375
11376
  activeTabIndex > -1 &&
11376
- activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;
11377
+ activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;
11377
11378
  if (stickyTabIsVisible) {
11378
11379
  fittingWidth += stickyTabWidth;
11379
11380
  visibleTabsIndexes.push(stickyTabIndex.toString());
@@ -11386,12 +11387,13 @@ const CatTabs = class {
11386
11387
  if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {
11387
11388
  continue;
11388
11389
  }
11389
- if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {
11390
+ const tabWidth = tab.getBoundingClientRect().width;
11391
+ if (fittingWidth + tabWidth <= containerWidth) {
11390
11392
  // tab fits within tabs parent
11391
- fittingWidth += tab.scrollWidth;
11393
+ fittingWidth += tabWidth;
11392
11394
  visibleTabsIndexes.push(index.toString());
11393
11395
  }
11394
- else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {
11396
+ else if (fittingWidth + MORE_WIDTH <= containerWidth) {
11395
11397
  // tab doesn't fit, but more button does
11396
11398
  break;
11397
11399
  }
@@ -11420,7 +11422,9 @@ const CatTabs = class {
11420
11422
  syncTabs() {
11421
11423
  this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
11422
11424
  this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
11423
- this.adjustAdaptiveTabs();
11425
+ if (this.adaptive) {
11426
+ this.adjustAdaptiveTabs();
11427
+ }
11424
11428
  }
11425
11429
  click(tab) {
11426
11430
  if (this.canActivate(tab)) {
@@ -11437,7 +11441,9 @@ const CatTabs = class {
11437
11441
  else if (this.canActivate(tab)) {
11438
11442
  this.activeTab = tab.id;
11439
11443
  }
11440
- this.adjustAdaptiveTabs();
11444
+ if (this.adaptive) {
11445
+ this.adjustAdaptiveTabs();
11446
+ }
11441
11447
  }
11442
11448
  canActivate(tab) {
11443
11449
  return !tab.deactivated && !tab.url && tab.id !== this.activeTab;