@haiilo/catalyst 14.0.2 → 14.0.4
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.
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/p-fae91392.entry.js +10 -0
- package/dist/catalyst/{p-1717f55e.entry.js.map → p-fae91392.entry.js.map} +1 -1
- package/dist/catalyst/scss/index.shadow.scss +2 -2
- package/dist/cjs/cat-alert_30.cjs.entry.js +21 -15
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +9 -7
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.js +9 -7
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +3 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
- package/dist/collection/scss/index.shadow.scss +2 -2
- package/dist/components/cat-dropdown2.js +9 -7
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-select2.js +9 -7
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-tabs.js +3 -1
- package/dist/components/cat-tabs.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +21 -15
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +1 -0
- package/dist/types/components/cat-select/cat-select.d.ts +1 -0
- package/package.json +2 -2
- package/dist/catalyst/p-1717f55e.entry.js +0 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-tabs.js","mappings":"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","names":["CatTabs","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n display: flex;\n flex-direction: row;\n box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default');\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([tabs-align='center']) {\n .cat-tab-list {\n justify-content: center;\n }\n}\n\n:host([tabs-align='right']) {\n .cat-tab-list {\n justify-content: end;\n }\n}\n\n:host([tabs-align='justify']) {\n cat-button {\n flex: 1 0 auto;\n }\n}\n\n.cat-tab,\n.cat-tab-more-button {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n position: relative;\n transition: none;\n\n &::after {\n opacity: 0;\n content: '';\n position: absolute;\n background: currentColor;\n left: 0.75rem;\n right: 0.75rem;\n bottom: 0;\n height: 2px;\n }\n\n &:hover::after {\n opacity: 0.25;\n }\n\n &.cat-tab-active {\n font-weight: 700;\n color: cat-token('color.theme.primary.textActive');\n }\n\n &.cat-tab-active::after {\n opacity: 1;\n }\n}\n\n.cat-tab {\n &:first-of-type {\n margin-left: -0.75rem;\n }\n\n &:last-of-type {\n margin-right: -0.75rem;\n }\n\n &.cat-tab-error {\n color: cat-token('color.theme.danger.textActive');\n }\n}\n\nnav {\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n}\n\n.cat-tab-list {\n display: flex;\n width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n * @part more - An optional more button to display additional tabs.\n */\n@Component({\n tag: 'cat-tabs',\n styleUrl: 'cat-tabs.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTabs {\n private mutationObserver?: MutationObserver;\n private moreDropdown?: HTMLCatDropdownElement;\n private moreButton?: HTMLCatButtonElement;\n private readonly resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());\n\n @Element() hostElement!: HTMLElement;\n\n @State() tabs: HTMLCatTabElement[] = [];\n @State() hiddenTabs: HTMLCatTabElement[] = [];\n\n /**\n * The ID of the active tab.\n */\n @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n /**\n * The alignment of the tabs.\n */\n @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n /**\n * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.\n */\n @Prop() adaptive = false;\n\n /**\n * Whether the active tab should always be visible. Applied when adaptive is enabled.\n * Has less priority than sticky if there is no space to show both.\n */\n @Prop() activeTabAlwaysVisible = false;\n\n componentWillLoad(): void {\n this.syncTabs();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n\n if (this.adaptive) {\n this.resizedObserver.observe(this.hostElement);\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Watch('activeTab')\n onActiveTabChange(id: string) {\n const index = this.tabs.findIndex(tab => tab.id === id);\n this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n }\n\n /**\n * Activates the tab with the given id.\n *\n * @param id The tab id.\n */\n @Method()\n async setActive(id: string): Promise<void> {\n this.activate(this.tabs.find(tab => tab.id === id));\n }\n\n /**\n * Activates the tab with the given index.\n *\n * @param index The tab index.\n */\n @Method()\n async setActiveIndex(index: number): Promise<void> {\n this.activate(this.tabs[index]);\n }\n\n /**\n * Recalculates visible and hidden adaptive tabs.\n */\n @Method()\n async updateAdaptiveTabs(): Promise<void> {\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n /**\n * Emitted when active tab is changed.\n */\n @Event() catChange!: EventEmitter<{ id: string; index: number; fromDropdown: boolean }>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div role=\"tablist\" class=\"cat-tab-list\">\n {this.tabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <cat-button\n buttonId={tab.id}\n part=\"tab\"\n class={{\n 'cat-tab': true,\n 'cat-tab-active': tab.id === this.activeTab,\n 'cat-tab-error': tab.error,\n 'cat-tab-sticky': tab.sticky\n }}\n active={tab.id === this.activeTab}\n color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n variant=\"text\"\n icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n iconOnly={tab.iconOnly}\n iconRight={tab.iconRight}\n url={tab.url}\n disabled={tab.deactivated}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n data-dropdown-no-close\n >\n {tab.label}\n </cat-button>\n );\n })}\n {this.adaptive ? (\n <cat-dropdown ref={el => (this.moreDropdown = el as HTMLCatDropdownElement)}>\n <cat-button\n ref={el => (this.moreButton = el as HTMLCatButtonElement)}\n class={{\n 'cat-tab-more-button': true,\n 'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)\n }}\n iconRight\n icon={this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined'}\n slot=\"trigger\"\n part=\"more\"\n variant=\"text\"\n color={this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary'}\n >\n {i18n.t('tabs.more')}\n </cat-button>\n <nav slot=\"content\">\n <ul>\n {this.hiddenTabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <li>\n <cat-button\n class=\"cat-nav-item\"\n active={tab.id === this.activeTab}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n >\n {tab.label}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n ) : null}\n </div>\n </Host>\n );\n }\n\n private adjustAdaptiveTabs() {\n const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab') as NodeListOf<HTMLCatButtonElement>;\n if (!tabs?.length) {\n return;\n }\n\n // show all hidden tabs for correct calculation\n for (const tab of tabs) {\n tab.style.display = 'inline-flex';\n }\n // show hidden \"more\" button for correct calculation\n if (this.moreButton) {\n this.moreButton.style.display = 'inline-flex';\n }\n\n const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;\n const visibleTabsIndexes: string[] = [];\n const containerWidth = this.hostElement.clientWidth;\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n if (stickyTabIsVisible) {\n fittingWidth += stickyTabWidth;\n visibleTabsIndexes.push(stickyTabIndex.toString());\n }\n\n if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {\n fittingWidth += activeTabWidth;\n visibleTabsIndexes.push(activeTabIndex.toString());\n }\n\n for (const [index, tab] of tabs.entries()) {\n if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {\n continue;\n }\n\n const tabWidth = tab.getBoundingClientRect().width;\n\n if (fittingWidth + tabWidth <= containerWidth) {\n // tab fits within tabs parent\n fittingWidth += tabWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= containerWidth) {\n // tab doesn't fit, but more button does\n break;\n } else {\n // tab doesn't fit and more button doesn't fit either\n // remove last fitting tab so that more button fits\n visibleTabsIndexes.pop();\n break;\n }\n }\n\n this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));\n\n if (this.moreButton) {\n if (this.tabs.length > visibleTabsIndexes.length) {\n this.moreButton.style.display = 'inline-flex';\n } else {\n this.moreButton.style.display = 'none';\n }\n }\n for (const [index, tab] of tabs.entries()) {\n if (!visibleTabsIndexes.includes(index.toString())) {\n tab.style.display = 'none';\n }\n }\n }\n\n private syncTabs() {\n this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private click(tab: HTMLCatTabElement) {\n if (this.canActivate(tab)) {\n tab.click();\n if (!tab.noActive) {\n this.activate(tab);\n }\n }\n }\n\n private activate(tab?: HTMLCatTabElement) {\n if (!tab) {\n this.activeTab = '';\n } else if (this.canActivate(tab)) {\n this.activeTab = tab.id;\n }\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private canActivate(tab: HTMLCatTabElement) {\n return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-tabs.js","mappings":"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","names":["CatTabs","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n display: flex;\n flex-direction: row;\n box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default');\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([tabs-align='center']) {\n .cat-tab-list {\n justify-content: center;\n }\n}\n\n:host([tabs-align='right']) {\n .cat-tab-list {\n justify-content: end;\n }\n}\n\n:host([tabs-align='justify']) {\n cat-button {\n flex: 1 0 auto;\n }\n}\n\n.cat-tab,\n.cat-tab-more-button {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n position: relative;\n transition: none;\n\n &::after {\n opacity: 0;\n content: '';\n position: absolute;\n background: currentColor;\n left: 0.75rem;\n right: 0.75rem;\n bottom: 0;\n height: 2px;\n }\n\n &:hover::after {\n opacity: 0.25;\n }\n\n &.cat-tab-active {\n font-weight: 700;\n color: cat-token('color.theme.primary.textActive');\n }\n\n &.cat-tab-active::after {\n opacity: 1;\n }\n}\n\n.cat-tab {\n &:first-of-type {\n margin-left: -0.75rem;\n }\n\n &:last-of-type {\n margin-right: -0.75rem;\n }\n\n &.cat-tab-error {\n color: cat-token('color.theme.danger.textActive');\n }\n}\n\nnav {\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n}\n\n.cat-tab-list {\n display: flex;\n width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n * @part more - An optional more button to display additional tabs.\n */\n@Component({\n tag: 'cat-tabs',\n styleUrl: 'cat-tabs.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatTabs {\n private mutationObserver?: MutationObserver;\n private moreDropdown?: HTMLCatDropdownElement;\n private moreButton?: HTMLCatButtonElement;\n private readonly resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());\n\n @Element() hostElement!: HTMLElement;\n\n @State() tabs: HTMLCatTabElement[] = [];\n @State() hiddenTabs: HTMLCatTabElement[] = [];\n\n /**\n * The ID of the active tab.\n */\n @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n /**\n * The alignment of the tabs.\n */\n @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n /**\n * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.\n */\n @Prop() adaptive = false;\n\n /**\n * Whether the active tab should always be visible. Applied when adaptive is enabled.\n * Has less priority than sticky if there is no space to show both.\n */\n @Prop() activeTabAlwaysVisible = false;\n\n componentWillLoad(): void {\n this.syncTabs();\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n\n if (this.adaptive) {\n this.resizedObserver.observe(this.hostElement);\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n @Watch('activeTab')\n onActiveTabChange(id: string) {\n const index = this.tabs.findIndex(tab => tab.id === id);\n this.catChange.emit({ id, index, fromDropdown: !!this.hiddenTabs.find(tab => tab.id === id) });\n }\n\n @Listen('keydown')\n onKeydown(event: KeyboardEvent): void {\n if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n }\n\n /**\n * Activates the tab with the given id.\n *\n * @param id The tab id.\n */\n @Method()\n async setActive(id: string): Promise<void> {\n this.activate(this.tabs.find(tab => tab.id === id));\n }\n\n /**\n * Activates the tab with the given index.\n *\n * @param index The tab index.\n */\n @Method()\n async setActiveIndex(index: number): Promise<void> {\n this.activate(this.tabs[index]);\n }\n\n /**\n * Recalculates visible and hidden adaptive tabs.\n */\n @Method()\n async updateAdaptiveTabs(): Promise<void> {\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n /**\n * Emitted when active tab is changed.\n */\n @Event() catChange!: EventEmitter<{ id: string; index: number; fromDropdown: boolean }>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <Host>\n <div role=\"tablist\" class=\"cat-tab-list\">\n {this.tabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <cat-button\n buttonId={tab.id}\n part=\"tab\"\n class={{\n 'cat-tab': true,\n 'cat-tab-active': tab.id === this.activeTab,\n 'cat-tab-error': tab.error,\n 'cat-tab-sticky': tab.sticky\n }}\n active={tab.id === this.activeTab}\n color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n variant=\"text\"\n icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n iconOnly={tab.iconOnly}\n iconRight={tab.iconRight}\n url={tab.url}\n disabled={tab.deactivated}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n data-dropdown-no-close\n >\n {tab.label}\n </cat-button>\n );\n })}\n {this.adaptive ? (\n <cat-dropdown ref={el => (this.moreDropdown = el as HTMLCatDropdownElement)}>\n <cat-button\n ref={el => (this.moreButton = el as HTMLCatButtonElement)}\n class={{\n 'cat-tab-more-button': true,\n 'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)\n }}\n iconRight\n icon={this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined'}\n slot=\"trigger\"\n part=\"more\"\n variant=\"text\"\n color={this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary'}\n >\n {i18n.t('tabs.more')}\n </cat-button>\n <nav slot=\"content\">\n <ul>\n {this.hiddenTabs.map((tab: HTMLCatTabElement, index: number) => {\n return (\n <li>\n <cat-button\n class=\"cat-nav-item\"\n active={tab.id === this.activeTab}\n urlTarget={tab.urlTarget}\n onCatClick={() => this.click(tab)}\n testId={tab.testId}\n nativeAttributes={{\n ...tab.nativeAttributes,\n role: 'tab',\n 'aria-selected': String(tab.id === this.activeTab),\n 'aria-setsize': String(this.tabs.length),\n 'aria-posinset': String(index + 1)\n }}\n nativeContentAttributes={{ 'data-text': tab.label }}\n >\n {tab.label}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n ) : null}\n </div>\n </Host>\n );\n }\n\n private adjustAdaptiveTabs() {\n const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab') as NodeListOf<HTMLCatButtonElement>;\n if (!tabs?.length) {\n return;\n }\n\n // show all hidden tabs for correct calculation\n for (const tab of tabs) {\n tab.style.display = 'inline-flex';\n }\n // show hidden \"more\" button for correct calculation\n if (this.moreButton) {\n this.moreButton.style.display = 'inline-flex';\n }\n\n const MORE_WIDTH = this.moreButton?.getBoundingClientRect().width || 0;\n const visibleTabsIndexes: string[] = [];\n const containerWidth = this.hostElement.clientWidth;\n let fittingWidth = 0;\n\n const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n const stickyTabWidth = tabs.item(stickyTabIndex)?.getBoundingClientRect().width || 0;\n const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n const activeTabWidth = tabs.item(activeTabIndex)?.getBoundingClientRect().width || 0;\n const activeTabIsVisible =\n this.activeTabAlwaysVisible &&\n activeTabIndex > -1 &&\n activeTabWidth + stickyTabWidth + MORE_WIDTH <= containerWidth;\n\n if (stickyTabIsVisible) {\n fittingWidth += stickyTabWidth;\n visibleTabsIndexes.push(stickyTabIndex.toString());\n }\n\n if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {\n fittingWidth += activeTabWidth;\n visibleTabsIndexes.push(activeTabIndex.toString());\n }\n\n for (const [index, tab] of tabs.entries()) {\n if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {\n continue;\n }\n\n const tabWidth = tab.getBoundingClientRect().width;\n\n if (fittingWidth + tabWidth <= containerWidth) {\n // tab fits within tabs parent\n fittingWidth += tabWidth;\n visibleTabsIndexes.push(index.toString());\n } else if (fittingWidth + MORE_WIDTH <= containerWidth) {\n // tab doesn't fit, but more button does\n break;\n } else {\n // tab doesn't fit and more button doesn't fit either\n // remove last fitting tab so that more button fits\n visibleTabsIndexes.pop();\n break;\n }\n }\n\n this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));\n\n if (this.moreButton) {\n if (this.tabs.length > visibleTabsIndexes.length) {\n this.moreButton.style.display = 'inline-flex';\n } else {\n this.moreButton.style.display = 'none';\n }\n }\n for (const [index, tab] of tabs.entries()) {\n if (!visibleTabsIndexes.includes(index.toString())) {\n tab.style.display = 'none';\n }\n }\n }\n\n private syncTabs() {\n this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;\n if (this.adaptive) {\n requestAnimationFrame(() => {\n this.adjustAdaptiveTabs();\n });\n }\n }\n\n private click(tab: HTMLCatTabElement) {\n if (this.canActivate(tab)) {\n tab.click();\n if (!tab.noActive) {\n this.activate(tab);\n }\n }\n }\n\n private activate(tab?: HTMLCatTabElement) {\n if (!tab) {\n this.activeTab = '';\n } else if (this.canActivate(tab)) {\n this.activeTab = tab.id;\n }\n if (this.adaptive) {\n this.adjustAdaptiveTabs();\n }\n }\n\n private canActivate(tab: HTMLCatTabElement) {\n return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n }\n}\n"],"version":3}
|
|
@@ -7718,6 +7718,10 @@ const CatDropdown = class {
|
|
|
7718
7718
|
this._isOpen = null;
|
|
7719
7719
|
this.content.style.display = 'block';
|
|
7720
7720
|
this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
|
|
7721
|
+
const trigger = this.anchor || this.trigger;
|
|
7722
|
+
if (trigger) {
|
|
7723
|
+
this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));
|
|
7724
|
+
}
|
|
7721
7725
|
// give CSS transition time to apply
|
|
7722
7726
|
setTimeout(() => {
|
|
7723
7727
|
this._isOpen = true;
|
|
@@ -7778,6 +7782,8 @@ const CatDropdown = class {
|
|
|
7778
7782
|
this.content.classList.remove('show');
|
|
7779
7783
|
this.content.style.display = '';
|
|
7780
7784
|
this.trigger?.setAttribute('aria-expanded', 'false');
|
|
7785
|
+
this.cleanupFloatingUi?.();
|
|
7786
|
+
this.cleanupFloatingUi = undefined;
|
|
7781
7787
|
this.catClose.emit();
|
|
7782
7788
|
}, timeTransitionS);
|
|
7783
7789
|
}
|
|
@@ -7790,9 +7796,11 @@ const CatDropdown = class {
|
|
|
7790
7796
|
disconnectedCallback() {
|
|
7791
7797
|
this.trap?.deactivate();
|
|
7792
7798
|
this.trap = undefined;
|
|
7799
|
+
this.cleanupFloatingUi?.();
|
|
7800
|
+
this.cleanupFloatingUi = undefined;
|
|
7793
7801
|
}
|
|
7794
7802
|
render() {
|
|
7795
|
-
return (h(Host, { key: '
|
|
7803
|
+
return (h(Host, { key: '0b02719eae82077fd11262620f260c86f6ef5854' }, h("slot", { key: '809f803bad06e9b9dfab850809709191f8a3bc2e', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'b6e32999e3cb4e4e4e9a4c534a22a17ae7708486', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '47592ef2faeb4a5ba26185a98952c56c3b0804f6', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '8b6ba45f55abf7983a66550f161652e5a40205d7', name: "content" }))));
|
|
7796
7804
|
}
|
|
7797
7805
|
get contentId() {
|
|
7798
7806
|
return `cat-dropdown-${this.id}`;
|
|
@@ -7807,18 +7815,12 @@ const CatDropdown = class {
|
|
|
7807
7815
|
this.hasInitialFocus = this.isEventOriginFromKeyboard(event);
|
|
7808
7816
|
this.toggle();
|
|
7809
7817
|
});
|
|
7810
|
-
if (!this.anchor) {
|
|
7811
|
-
autoUpdate(this.trigger, this.content, () => this.update(this.trigger));
|
|
7812
|
-
}
|
|
7813
7818
|
}
|
|
7814
7819
|
isEventOriginFromKeyboard(event) {
|
|
7815
7820
|
return event.detail === 0;
|
|
7816
7821
|
}
|
|
7817
7822
|
initAnchor() {
|
|
7818
7823
|
this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];
|
|
7819
|
-
if (this.anchor) {
|
|
7820
|
-
autoUpdate(this.anchor, this.content, () => this.update(this.anchor));
|
|
7821
|
-
}
|
|
7822
7824
|
}
|
|
7823
7825
|
findTrigger() {
|
|
7824
7826
|
let trigger;
|
|
@@ -9182,9 +9184,6 @@ const CatSelect = class {
|
|
|
9182
9184
|
if (this.input) {
|
|
9183
9185
|
autosizeInput(this.input, { minWidth: true });
|
|
9184
9186
|
}
|
|
9185
|
-
if (this.trigger && this.dropdown) {
|
|
9186
|
-
autoUpdate(this.trigger, this.dropdown, () => this.update());
|
|
9187
|
-
}
|
|
9188
9187
|
}
|
|
9189
9188
|
componentWillLoad() {
|
|
9190
9189
|
this.onErrorsChanged(this.errors, undefined, false);
|
|
@@ -9375,18 +9374,18 @@ const CatSelect = class {
|
|
|
9375
9374
|
}
|
|
9376
9375
|
render() {
|
|
9377
9376
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
9378
|
-
return (h(Host, { key: '
|
|
9377
|
+
return (h(Host, { key: '044a13b28c3c3d3fcb5b06efa53d489783ae9698' }, h("div", { key: 'b540d0b58849b8b401c611dfa08da42f45a7953c', class: {
|
|
9379
9378
|
'select-field': true,
|
|
9380
9379
|
'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
|
|
9381
9380
|
'select-multiple': this.multiple
|
|
9382
|
-
} }, h("div", { key: '
|
|
9381
|
+
} }, h("div", { key: '3864749c06c0aa54df1912f90636094dcdd4a229', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b2e64f375a8d2e9430007b548f468055a1a83b9b', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '1d09f458ed23045ecbd3ca3b9bb2fa5740f6c4e1', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '7c569d0f97e2c48d6515e051dd8098003b0dc2c2', name: "label" })) || this.label, h("div", { key: 'f3c8709ea17c26d65e41ceb505af51dac81dda37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f2cc0d4a5fd0d815a1087b7f2b1c55c73ca36e93', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'beb3aaaf8261978be7895a1580a42f25f65ef5e7', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '23a30b437dca6aea6d6f01156dc6c56faae3912f', class: "select-container" }, h("div", { key: '146509fd8146b3afa9c5157c7a37198c810330d7', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: 'f9f8b2cc0914ba4a7151c580f9e9eda332aad35e', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
|
|
9383
9382
|
pill: true,
|
|
9384
9383
|
'select-no-open': true,
|
|
9385
9384
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
9386
|
-
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '
|
|
9385
|
+
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'ccf158ead3c32c1376744366ccae13d32762e150', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '8af750f50e620a73f9a35c66708293e758a2786e' }), this.invalid && (h("cat-icon", { key: '114ead7c9b473945a1fb2f5774e74d75c57819f5', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
9387
9386
|
!this.disabled &&
|
|
9388
9387
|
!this.state.isResolving &&
|
|
9389
|
-
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '
|
|
9388
|
+
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'ece4331f89cbb9c37d9f9693800bca1320ff7f37', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'd25455be1db5404a698b35d088ba0a303215a321', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'c58c1914f90b0fb9a7b40c4c37e2fe7d92877ab8', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '73a6a048ba31d8f5944d4a1aa6c8c4fb96e56df2', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '4b86961480022fd7dd0e1641fdaed8116e320090', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
|
|
9390
9389
|
? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
|
|
9391
9390
|
: !this.state.options.length &&
|
|
9392
9391
|
!this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catI18nRegistry.t('select.empty')))))))));
|
|
@@ -9453,6 +9452,9 @@ const CatSelect = class {
|
|
|
9453
9452
|
}
|
|
9454
9453
|
show() {
|
|
9455
9454
|
if (!this.state.isOpen && this.connector) {
|
|
9455
|
+
if (this.trigger && this.dropdown) {
|
|
9456
|
+
this.cleanupFloatingUi = autoUpdate(this.trigger, this.dropdown, () => this.update());
|
|
9457
|
+
}
|
|
9456
9458
|
// reconnect to reset the connection, i.e. the pagination
|
|
9457
9459
|
this.connect(this.connector);
|
|
9458
9460
|
this.patchState({ isOpen: true, isFirstLoading: true, options: [] });
|
|
@@ -9464,6 +9466,8 @@ const CatSelect = class {
|
|
|
9464
9466
|
hide() {
|
|
9465
9467
|
if (this.state.isOpen) {
|
|
9466
9468
|
this.patchState({ isOpen: false, activeOptionIndex: -1 });
|
|
9469
|
+
this.cleanupFloatingUi?.();
|
|
9470
|
+
this.cleanupFloatingUi = undefined;
|
|
9467
9471
|
this.catClose.emit();
|
|
9468
9472
|
return true;
|
|
9469
9473
|
}
|
|
@@ -11441,7 +11445,9 @@ const CatTabs = class {
|
|
|
11441
11445
|
this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
|
|
11442
11446
|
this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
|
|
11443
11447
|
if (this.adaptive) {
|
|
11444
|
-
|
|
11448
|
+
requestAnimationFrame(() => {
|
|
11449
|
+
this.adjustAdaptiveTabs();
|
|
11450
|
+
});
|
|
11445
11451
|
}
|
|
11446
11452
|
}
|
|
11447
11453
|
click(tab) {
|
|
@@ -14,6 +14,7 @@ export declare class CatDropdown {
|
|
|
14
14
|
private content;
|
|
15
15
|
private trap?;
|
|
16
16
|
private _isOpen;
|
|
17
|
+
private cleanupFloatingUi?;
|
|
17
18
|
/**
|
|
18
19
|
* Tracking the origin of opening the dropdown and specify if initial focus should be set.
|
|
19
20
|
* Currently we set it only when the origin is keyboard.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haiilo/catalyst",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.4",
|
|
4
4
|
"description": "Catalyst Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"sanitize.css": "13.0.0",
|
|
40
40
|
"tabbable": "6.2.0",
|
|
41
41
|
"toastify-js": "1.12.0",
|
|
42
|
-
"@haiilo/catalyst-tokens": "14.0.
|
|
42
|
+
"@haiilo/catalyst-tokens": "14.0.4"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@babel/core": "7.28.5",
|