npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.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 (1210) hide show

package/dist/components/ifx-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-tabs.js","mappings":"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","names":["IfxTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: flex;\r\n}\r\n\r\n.tabs {\r\n display: flex;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n width: 100%;\r\n}\r\n\r\n.tabs.horizontal {\r\n flex-direction: column;\r\n}\r\n\r\n.tabs-container {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n gap: tokens.$ifxSpace100;\r\n}\r\n\r\n.scroll-button {\r\n flex-shrink: 0;\r\n z-index: 10;\r\n transition: all 0.3s ease-in-out;\r\n\r\n &.hidden {\r\n pointer-events: none;\r\n }\r\n\r\n &.scroll-left.hidden {\r\n width: 0;\r\n min-width: 0;\r\n max-width: 0;\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n }\r\n\r\n &.scroll-right.hidden {\r\n visibility: hidden;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.tabs.vertical {\r\n flex-direction: row;\r\n}\r\n\r\n.tabs-list {\r\n display: flex;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n position: relative;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n\r\n &.scrollable {\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n scroll-behavior: smooth;\r\n white-space: nowrap;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n &::-webkit-scrollbar {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.tabs-list:focus-within .active-border {\r\n display: none;\r\n}\r\n\r\n.active-border {\r\n content: \"\";\r\n position: absolute;\r\n transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\r\n}\r\n\r\n.tabs.horizontal .active-border {\r\n bottom: 0;\r\n left: 0;\r\n height: 2px;\r\n background-color: tokens.$ifxColorOcean500;\r\n}\r\n\r\n.tabs.vertical .tabs-list {\r\n flex-direction: column;\r\n border-bottom: none;\r\n}\r\n\r\n.tabs.vertical .tab-content {\r\n padding-top: 0px;\r\n padding-left: 32px;\r\n}\r\n\r\n.tabs:not(.vertical) {\r\n & .tab-item {\r\n &.full-width {\r\n flex: 1;\r\n }\r\n }\r\n\r\n\r\n &.full-width-enabled {\r\n .scroll-button {\r\n display: none;\r\n }\r\n\r\n .tabs-list {\r\n flex: 1;\r\n\r\n &.scrollable {\r\n overflow-x: visible; // Disable horizontal scrolling\r\n }\r\n }\r\n }\r\n}\r\n\r\n.tab-item {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n cursor: pointer;\r\n position: relative;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n max-width: 50%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n @media (max-width: tokens.$ifxBreakpointM) {\r\n font-size: tokens.$ifxFontSizeS;\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace100;\r\n }\r\n\r\n &.icon__right {\r\n flex-direction: row-reverse;\r\n justify-content: flex-end;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:focus,\r\n &.focus {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: -2px;\r\n border-radius: 2px;\r\n\r\n // Assuming .active-border is a sibling of .tab-item\r\n +.active-border {\r\n display: none; // Hide the active border when the tab is in focus\r\n }\r\n }\r\n\r\n &.disabled {\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.tabs.vertical .tab-item {\r\n border-right: 2px solid transparent;\r\n min-width: 7em;\r\n}\r\n\r\n.tabs.vertical .active-border {\r\n left: 0;\r\n top: 0;\r\n width: 2px;\r\n background-color: tokens.$ifxColorOcean500;\r\n}\r\n\r\n\r\n.tab-content {\r\n padding-top: 24px;\r\n padding-left: 0px;\r\n flex-grow: 1;\r\n}\r\n\r\n.tabs.small .tab-item {\r\n font-size: tokens.$ifxFontSizeS;\r\n}\r\n","import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-tabs',\r\n styleUrl: 'tabs.scss',\r\n shadow: true\r\n})\r\nexport class IfxTabs {\r\n @Element() el: HTMLElement;\r\n\r\n @Prop() orientation: string = \"horizontal\";\r\n @Prop({ mutable: true }) activeTabIndex: number = 0;\r\n @Prop() fullWidth: boolean = false;\r\n\r\n @State() internalOrientation: string;\r\n @State() internalActiveTabIndex: number = 0;\r\n @State() tabObjects: any[] = [];\r\n @State() canScrollLeft: boolean = false;\r\n @State() canScrollRight: boolean = false;\r\n\r\n private internalFocusedTabIndex: number = 0;\r\n private tabRefs: HTMLElement[] = [];\r\n private tabHeaderRefs: HTMLElement[] = [];\r\n private tabsListElement: HTMLElement;\r\n private tabFocusHandlers: Map<HTMLElement, () => void> = new Map();\r\n\r\n @Event() ifxChange: EventEmitter;\r\n\r\n @Listen('resize', {target: 'window'})\r\n updateBorderOnWindowResize() {\r\n this.updateBorderAndFocus();\r\n this.updateScrollButtons();\r\n }\r\n\r\n setActiveAndFocusedTab(index: number) {\r\n if (index >= this.tabObjects.length) {\r\n index = this.tabObjects.length - 1;\r\n }\r\n if (index < 0) {\r\n index = 0;\r\n }\r\n if (!this.tabObjects[index]?.disabled) {\r\n this.internalActiveTabIndex = index;\r\n this.internalFocusedTabIndex = index;\r\n // Scroll the active tab into view\r\n setTimeout(() => this.scrollTabIntoView(index), 0);\r\n }\r\n }\r\n\r\n @Listen('tabHeaderChange')\r\n handleTabHeaderChange(e) {\r\n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\r\n this.tabObjects[tabIndex].header = e.detail;\r\n this.tabObjects = [...this.tabObjects];\r\n }\r\n\r\n\r\n @Watch('activeTabIndex')\r\n activeTabIndexChanged(newValue: number, oldValue: number) {\r\n if (newValue !== oldValue) {\r\n this.setActiveAndFocusedTab(newValue);\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\r\n this.onSlotChange();\r\n this.setActiveAndFocusedTab(this.activeTabIndex);\r\n this.updateTabStyles();\r\n }\r\n\r\n updateTabStyles() {\r\n this.tabHeaderRefs.forEach((tab, index) => {\r\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\r\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\r\n });\r\n }\r\n\r\n\r\n // needed for smooth border transition\r\n reRenderBorder() {\r\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\r\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\r\n if (this.orientation === 'horizontal') {\r\n\r\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\r\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\r\n borderElement.style.top = '';\r\n borderElement.style.height = '';\r\n } else {\r\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\r\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\r\n borderElement.style.left = '';\r\n borderElement.style.width = '';\r\n }\r\n }\r\n }\r\n\r\n\r\n // when a slot is removed / added\r\n @Listen('slotchange')\r\n onSlotChange() {\r\n const tabs = this.el.querySelectorAll('ifx-tab');\r\n this.tabObjects = Array.from(tabs).map((tab) => {\r\n return {\r\n header: tab?.header,\r\n disabled: tab?.disabled === true,\r\n icon: tab?.icon,\r\n iconPosition: tab?.iconPosition\r\n }\r\n });\r\n\r\n this.tabRefs = Array.from(tabs);\r\n this.tabRefs.forEach((tab, index) => {\r\n tab.setAttribute('slot', `tab-${index}`);\r\n });\r\n\r\n // Re-setup focus listeners when tabs change\r\n setTimeout(() => {\r\n this.setupTabFocusListeners();\r\n this.updateScrollButtons();\r\n }, 0);\r\n }\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-tabs', await framework)\r\n }\r\n this.updateBorderAndFocus();\r\n this.updateScrollButtons();\r\n // Add keyboard event listeners for each tab header\r\n this.setupTabFocusListeners();\r\n }\r\n\r\n private setupTabFocusListeners() {\r\n // Clear any existing handlers\r\n this.tabFocusHandlers.clear();\r\n\r\n this.tabHeaderRefs.forEach((tab, index) => {\r\n const handler = () => {\r\n this.internalFocusedTabIndex = index;\r\n };\r\n\r\n // Store the handler so we can remove it later\r\n this.tabFocusHandlers.set(tab, handler);\r\n tab.addEventListener('focus', handler);\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n // Remove keyboard event listeners when component is unmounted\r\n this.tabFocusHandlers.forEach((handler, tab) => {\r\n tab.removeEventListener('focus', handler);\r\n });\r\n this.tabFocusHandlers.clear();\r\n }\r\n componentDidUpdate() {\r\n this.updateBorderAndFocus();\r\n this.updateScrollButtons();\r\n }\r\n\r\n private updateBorderAndFocus() {\r\n this.reRenderBorder()\r\n this.updateTabFocusability();\r\n }\r\n\r\n private updateTabFocusability() {\r\n this.tabHeaderRefs.forEach((tab, index) => {\r\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\r\n })\r\n }\r\n\r\n\r\n private focusNextTab() {\r\n let nextIndex = this.internalFocusedTabIndex + 1;\r\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\r\n nextIndex++;\r\n }\r\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\r\n this.internalFocusedTabIndex = nextIndex;\r\n this.tabHeaderRefs[nextIndex].focus();\r\n }\r\n }\r\n\r\n private focusPreviousTab() {\r\n let prevIndex = this.internalFocusedTabIndex - 1;\r\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\r\n prevIndex--;\r\n }\r\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\r\n this.internalFocusedTabIndex = prevIndex;\r\n this.tabHeaderRefs[prevIndex].focus();\r\n }\r\n }\r\n\r\n\r\n private getTabItemClass(index: number) {\r\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\r\n const isDisabled = this.tabObjects[index].disabled;\r\n const iconPosition = this.tabObjects[index].iconPosition\r\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\r\n }\r\n\r\n private handleClick(tab, index) {\r\n if (!tab.disabled) {\r\n const previousTabIndex = this.internalActiveTabIndex;\r\n this.internalActiveTabIndex = index;\r\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });\r\n // Center the clicked tab\r\n setTimeout(() => this.scrollTabIntoView(index), 0);\r\n }\r\n }\r\n\r\n\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if (ev.key === 'Tab') {\r\n\r\n if (ev.shiftKey) {\r\n // Shift + Tab\r\n if (this.internalFocusedTabIndex === 0) {\r\n // Allow default behavior to move focus out of component\r\n return;\r\n } else {\r\n ev.preventDefault();\r\n this.focusPreviousTab();\r\n }\r\n } else {\r\n // Tab\r\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\r\n // Allow default behavior to move focus out of component\r\n return;\r\n } else {\r\n ev.preventDefault();\r\n this.focusNextTab();\r\n }\r\n }\r\n } else if (ev.key === 'Enter') {\r\n const path = ev.composedPath();\r\n const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\r\n if (!isTabHeader) {\r\n return;\r\n }\r\n\r\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\r\n const previousTabIndex = this.internalActiveTabIndex;\r\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\r\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: this.internalFocusedTabIndex });\r\n // Center the activated tab\r\n setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);\r\n }\r\n }\r\n }\r\n\r\n private updateScrollButtons() {\r\n // Reset scroll buttons if conditions not met\r\n if (this.shouldDisableScrolling()) {\r\n this.canScrollLeft = false;\r\n this.canScrollRight = false;\r\n return;\r\n }\r\n\r\n const { scrollLeft, scrollWidth, clientWidth } = this.tabsListElement;\r\n this.canScrollLeft = scrollLeft > 0;\r\n this.canScrollRight = scrollLeft < scrollWidth - clientWidth;\r\n }\r\n\r\n private shouldDisableScrolling(): boolean {\r\n return !this.tabsListElement \|\|\r\n this.internalOrientation === 'vertical' \|\|\r\n this.fullWidth;\r\n }\r\n\r\n private scrollLeft() {\r\n if (!this.canScrollLeft \|\| !this.tabsListElement) return;\r\n\r\n const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);\r\n this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\r\n }\r\n\r\n private scrollRight() {\r\n if (!this.canScrollRight \|\| !this.tabsListElement) return;\r\n\r\n const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;\r\n const currentScroll = this.tabsListElement.scrollLeft;\r\n const scrollAmount = Math.min(200, maxScroll - currentScroll);\r\n this.tabsListElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\r\n }\r\n\r\n private onTabsListScroll() {\r\n this.updateScrollButtons();\r\n }\r\n\r\n private scrollTabIntoView(index: number) {\r\n if (this.shouldDisableScrolling() \|\| !this.tabHeaderRefs[index]) {\r\n return;\r\n }\r\n\r\n const tabElement = this.tabHeaderRefs[index];\r\n const container = this.tabsListElement;\r\n\r\n const tabRect = this.getTabCenterInfo(tabElement);\r\n const containerRect = this.getContainerCenterInfo(container);\r\n\r\n // Only scroll if the tab is not already reasonably centered\r\n if (Math.abs(tabRect.center - containerRect.center) > 50) {\r\n const desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);\r\n container.scrollTo({ left: desiredScrollLeft, behavior: 'smooth' });\r\n }\r\n }\r\n\r\n private getTabCenterInfo(tabElement: HTMLElement) {\r\n const left = tabElement.offsetLeft;\r\n const width = tabElement.offsetWidth;\r\n return {\r\n left,\r\n width,\r\n center: left + (width / 2)\r\n };\r\n }\r\n\r\n private getContainerCenterInfo(container: HTMLElement) {\r\n const scrollLeft = container.scrollLeft;\r\n const width = container.clientWidth;\r\n return {\r\n scrollLeft,\r\n width,\r\n center: scrollLeft + (width / 2)\r\n };\r\n }\r\n\r\n private calculateCenteredScrollPosition(tabRect: any, containerRect: any): number {\r\n const desiredScrollLeft = tabRect.center - (containerRect.width / 2);\r\n const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;\r\n return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}`}>\r\n {this.internalOrientation === 'horizontal' ? (\r\n <div class=\"tabs-container\">\r\n <ifx-icon-button\r\n shape=\"round\"\r\n variant=\"tertiary\"\r\n icon=\"chevronLeft16\"\r\n size=\"s\"\r\n disabled={false}\r\n aria-label=\"Scroll tabs left\"\r\n onClick={() => this.scrollLeft()}\r\n class={`scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}`}\r\n >\r\n </ifx-icon-button>\r\n <ul\r\n role=\"tablist\"\r\n class=\"tabs-list scrollable\"\r\n ref={(el) => (this.tabsListElement = el)}\r\n onScroll={() => this.onTabsListScroll()}\r\n >\r\n {this.tabObjects?.map((tab, index) => (\r\n <li\r\n class={this.getTabItemClass(index)}\r\n ref={(el) => (this.tabHeaderRefs[index] = el)}\r\n onMouseDown={(event) => event.preventDefault()}\r\n onClick={() => this.handleClick(tab, index)}\r\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\r\n aria-disabled={tab.disabled ? 'true' : 'false'}\r\n role=\"tab\"\r\n >\r\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\r\n {tab?.header}\r\n </li>\r\n ))}\r\n <div class=\"active-border\"></div>\r\n </ul>\r\n <ifx-icon-button\r\n shape=\"round\"\r\n variant=\"tertiary\"\r\n icon=\"chevronRight16\"\r\n size=\"s\"\r\n disabled={false}\r\n aria-label=\"Scroll tabs right\"\r\n onClick={() => this.scrollRight()}\r\n class={`scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}`}\r\n >\r\n </ifx-icon-button>\r\n </div>\r\n ) : (\r\n <ul role=\"tablist\" class=\"tabs-list\">\r\n {this.tabObjects?.map((tab, index) => (\r\n <li\r\n class={this.getTabItemClass(index)}\r\n ref={(el) => (this.tabHeaderRefs[index] = el)}\r\n onMouseDown={(event) => event.preventDefault()}\r\n onClick={() => this.handleClick(tab, index)}\r\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\r\n aria-disabled={tab.disabled ? 'true' : 'false'}\r\n role=\"tab\"\r\n >\r\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\r\n {tab?.header}\r\n </li>\r\n ))}\r\n <div class=\"active-border\"></div>\r\n </ul>\r\n )}\r\n <div class=\"tab-content\">\r\n {Array.from(this.tabObjects).map((_, index) => (\r\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\r\n <slot name={`tab-${index}`} />\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-tabs.js","mappings":"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","names":["IfxTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.tabs {\n display: flex;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n width: 100%;\n}\n\n.tabs.horizontal {\n flex-direction: column;\n}\n\n.tabs-container {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n gap: tokens.$ifxSpace100;\n}\n\n.scroll-button {\n flex-shrink: 0;\n z-index: 10;\n transition: all 0.3s ease-in-out;\n\n &.hidden {\n pointer-events: none;\n }\n\n &.scroll-left.hidden {\n width: 0;\n min-width: 0;\n max-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n opacity: 0;\n overflow: hidden;\n }\n\n &.scroll-right.hidden {\n visibility: hidden;\n pointer-events: none;\n }\n}\n\n.tabs.vertical {\n flex-direction: row;\n}\n\n.tabs-list {\n display: flex;\n list-style: none;\n padding: 0;\n margin: 0;\n position: relative;\n font-weight: tokens.$ifxFontWeightSemibold;\n\n &.scrollable {\n overflow-x: auto;\n overflow-y: hidden;\n scroll-behavior: smooth;\n white-space: nowrap;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar {\n display: none;\n }\n }\n}\n\n.tabs-list:focus-within .active-border {\n display: none;\n}\n\n.active-border {\n content: \"\";\n position: absolute;\n transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n\n.tabs.horizontal .active-border {\n bottom: 0;\n left: 0;\n height: 2px;\n background-color: tokens.$ifxColorOcean500;\n}\n\n.tabs.vertical .tabs-list {\n flex-direction: column;\n border-bottom: none;\n}\n\n.tabs.vertical .tab-content {\n padding-top: 0px;\n padding-left: 32px;\n}\n\n.tabs:not(.vertical) {\n & .tab-item {\n &.full-width {\n flex: 1;\n }\n }\n\n\n &.full-width-enabled {\n .scroll-button {\n display: none;\n }\n\n .tabs-list {\n flex: 1;\n\n &.scrollable {\n overflow-x: visible; // Disable horizontal scrolling\n }\n }\n }\n}\n\n.tab-item {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n flex-shrink: 0;\n max-width: 50%;\n overflow: hidden;\n text-overflow: ellipsis;\n\n @media (max-width: tokens.$ifxBreakpointM) {\n font-size: tokens.$ifxFontSizeS;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace100;\n }\n\n &.icon__right {\n flex-direction: row-reverse;\n justify-content: flex-end;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &:focus,\n &.focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: -2px;\n border-radius: 2px;\n\n // Assuming .active-border is a sibling of .tab-item\n +.active-border {\n display: none; // Hide the active border when the tab is in focus\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n.tabs.vertical .tab-item {\n border-right: 2px solid transparent;\n min-width: 7em;\n}\n\n.tabs.vertical .active-border {\n left: 0;\n top: 0;\n width: 2px;\n background-color: tokens.$ifxColorOcean500;\n}\n\n\n.tab-content {\n padding-top: 24px;\n padding-left: 0px;\n flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n font-size: tokens.$ifxFontSizeS;\n}\n","import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\nexport class IfxTabs {\n @Element() el: HTMLElement;\n\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n @Prop() fullWidth: boolean = false;\n\n @State() internalOrientation: string;\n @State() internalActiveTabIndex: number = 0;\n @State() tabObjects: any[] = [];\n @State() canScrollLeft: boolean = false;\n @State() canScrollRight: boolean = false;\n\n private internalFocusedTabIndex: number = 0;\n private tabRefs: HTMLElement[] = [];\n private tabHeaderRefs: HTMLElement[] = [];\n private tabsListElement: HTMLElement;\n private tabFocusHandlers: Map<HTMLElement, () => void> = new Map();\n\n @Event() ifxChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\n this.updateScrollButtons();\n }\n\n setActiveAndFocusedTab(index: number) {\n if (index >= this.tabObjects.length) {\n index = this.tabObjects.length - 1;\n }\n if (index < 0) {\n index = 0;\n }\n if (!this.tabObjects[index]?.disabled) {\n this.internalActiveTabIndex = index;\n this.internalFocusedTabIndex = index;\n // Scroll the active tab into view\n setTimeout(() => this.scrollTabIntoView(index), 0);\n }\n }\n\n @Listen('tabHeaderChange')\n handleTabHeaderChange(e) {\n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n this.tabObjects[tabIndex].header = e.detail;\n this.tabObjects = [...this.tabObjects];\n }\n\n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.setActiveAndFocusedTab(newValue);\n }\n }\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n this.onSlotChange();\n this.setActiveAndFocusedTab(this.activeTabIndex);\n this.updateTabStyles();\n }\n\n updateTabStyles() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n });\n }\n\n\n // needed for smooth border transition\n reRenderBorder() {\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabObjects = Array.from(tabs).map((tab) => {\n return {\n header: tab?.header,\n disabled: tab?.disabled === true,\n icon: tab?.icon,\n iconPosition: tab?.iconPosition\n }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n });\n\n // Re-setup focus listeners when tabs change\n setTimeout(() => {\n this.setupTabFocusListeners();\n this.updateScrollButtons();\n }, 0);\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-tabs', await framework)\n }\n this.updateBorderAndFocus();\n this.updateScrollButtons();\n // Add keyboard event listeners for each tab header\n this.setupTabFocusListeners();\n }\n\n private setupTabFocusListeners() {\n // Clear any existing handlers\n this.tabFocusHandlers.clear();\n\n this.tabHeaderRefs.forEach((tab, index) => {\n const handler = () => {\n this.internalFocusedTabIndex = index;\n };\n\n // Store the handler so we can remove it later\n this.tabFocusHandlers.set(tab, handler);\n tab.addEventListener('focus', handler);\n });\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabFocusHandlers.forEach((handler, tab) => {\n tab.removeEventListener('focus', handler);\n });\n this.tabFocusHandlers.clear();\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\n this.updateScrollButtons();\n }\n\n private updateBorderAndFocus() {\n this.reRenderBorder()\n this.updateTabFocusability();\n }\n\n private updateTabFocusability() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n })\n }\n\n\n private focusNextTab() {\n let nextIndex = this.internalFocusedTabIndex + 1;\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n nextIndex++;\n }\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n this.internalFocusedTabIndex = nextIndex;\n this.tabHeaderRefs[nextIndex].focus();\n }\n }\n\n private focusPreviousTab() {\n let prevIndex = this.internalFocusedTabIndex - 1;\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n prevIndex--;\n }\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.internalFocusedTabIndex = prevIndex;\n this.tabHeaderRefs[prevIndex].focus();\n }\n }\n\n\n private getTabItemClass(index: number) {\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n const isDisabled = this.tabObjects[index].disabled;\n const iconPosition = this.tabObjects[index].iconPosition\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n }\n\n private handleClick(tab, index) {\n if (!tab.disabled) {\n const previousTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = index;\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });\n // Center the clicked tab\n setTimeout(() => this.scrollTabIntoView(index), 0);\n }\n }\n\n\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\n\n if (ev.shiftKey) {\n // Shift + Tab\n if (this.internalFocusedTabIndex === 0) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusPreviousTab();\n }\n } else {\n // Tab\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusNextTab();\n }\n }\n } else if (ev.key === 'Enter') {\n const path = ev.composedPath();\n const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\n if (!isTabHeader) {\n return;\n }\n\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previousTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: this.internalFocusedTabIndex });\n // Center the activated tab\n setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);\n }\n }\n }\n\n private updateScrollButtons() {\n // Reset scroll buttons if conditions not met\n if (this.shouldDisableScrolling()) {\n this.canScrollLeft = false;\n this.canScrollRight = false;\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = this.tabsListElement;\n this.canScrollLeft = scrollLeft > 0;\n this.canScrollRight = scrollLeft < scrollWidth - clientWidth;\n }\n\n private shouldDisableScrolling(): boolean {\n return !this.tabsListElement \|\|\n this.internalOrientation === 'vertical' \|\|\n this.fullWidth;\n }\n\n private scrollLeft() {\n if (!this.canScrollLeft \|\| !this.tabsListElement) return;\n\n const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);\n this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n }\n\n private scrollRight() {\n if (!this.canScrollRight \|\| !this.tabsListElement) return;\n\n const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;\n const currentScroll = this.tabsListElement.scrollLeft;\n const scrollAmount = Math.min(200, maxScroll - currentScroll);\n this.tabsListElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n }\n\n private onTabsListScroll() {\n this.updateScrollButtons();\n }\n\n private scrollTabIntoView(index: number) {\n if (this.shouldDisableScrolling() \|\| !this.tabHeaderRefs[index]) {\n return;\n }\n\n const tabElement = this.tabHeaderRefs[index];\n const container = this.tabsListElement;\n\n const tabRect = this.getTabCenterInfo(tabElement);\n const containerRect = this.getContainerCenterInfo(container);\n\n // Only scroll if the tab is not already reasonably centered\n if (Math.abs(tabRect.center - containerRect.center) > 50) {\n const desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);\n container.scrollTo({ left: desiredScrollLeft, behavior: 'smooth' });\n }\n }\n\n private getTabCenterInfo(tabElement: HTMLElement) {\n const left = tabElement.offsetLeft;\n const width = tabElement.offsetWidth;\n return {\n left,\n width,\n center: left + (width / 2)\n };\n }\n\n private getContainerCenterInfo(container: HTMLElement) {\n const scrollLeft = container.scrollLeft;\n const width = container.clientWidth;\n return {\n scrollLeft,\n width,\n center: scrollLeft + (width / 2)\n };\n }\n\n private calculateCenteredScrollPosition(tabRect: any, containerRect: any): number {\n const desiredScrollLeft = tabRect.center - (containerRect.width / 2);\n const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;\n return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));\n }\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}`}>\n {this.internalOrientation === 'horizontal' ? (\n <div class=\"tabs-container\">\n <ifx-icon-button\n shape=\"round\"\n variant=\"tertiary\"\n icon=\"chevronLeft16\"\n size=\"s\"\n disabled={false}\n aria-label=\"Scroll tabs left\"\n onClick={() => this.scrollLeft()}\n class={`scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}`}\n >\n </ifx-icon-button>\n <ul\n role=\"tablist\"\n class=\"tabs-list scrollable\"\n ref={(el) => (this.tabsListElement = el)}\n onScroll={() => this.onTabsListScroll()}\n >\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <ifx-icon-button\n shape=\"round\"\n variant=\"tertiary\"\n icon=\"chevronRight16\"\n size=\"s\"\n disabled={false}\n aria-label=\"Scroll tabs right\"\n onClick={() => this.scrollRight()}\n class={`scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}`}\n >\n </ifx-icon-button>\n </div>\n ) : (\n <ul role=\"tablist\" class=\"tabs-list\">\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n )}\n <div class=\"tab-content\">\n {Array.from(this.tabObjects).map((_, index) => (\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n}\n"],"version":3}

package/dist/components/ifx-template.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { T as Template, d as defineCustomElement$1 } from './p-DfhZt04W.js';
+import { T as Template, d as defineCustomElement$1 } from './p-esRQWwdS.js';
 const IfxTemplate = Template;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-templates-ui.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, getAssetPath, h } from './index.js';
-import { d as defineCustomElement$9 } from './p-TR-rcXLt.js';
-import { d as defineCustomElement$8 } from './p-DrBheHJU.js';
-import { d as defineCustomElement$7 } from './p-BnjY2AJX.js';
-import { d as defineCustomElement$6 } from './p-BpoV3zpc.js';
-import { d as defineCustomElement$5 } from './p-BODyHBnq.js';
-import { d as defineCustomElement$4 } from './p-BNfoBOb0.js';
-import { d as defineCustomElement$3 } from './p-DfhZt04W.js';
-import { d as defineCustomElement$2 } from './p-DzvIkH4S.js';
+import { d as defineCustomElement$9 } from './p-CnXEcTdH.js';
+import { d as defineCustomElement$8 } from './p-R79iWjuc.js';
+import { d as defineCustomElement$7 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$6 } from './p-F-WOWp_H.js';
+import { d as defineCustomElement$5 } from './p-C12r4j5b.js';
+import { d as defineCustomElement$4 } from './p-DdOsLLJc.js';
+import { d as defineCustomElement$3 } from './p-esRQWwdS.js';
+import { d as defineCustomElement$2 } from './p-DFInpODO.js';
 const templatesUiCss = "*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";
@@ -54,7 +54,7 @@ const TemplatesUI = /*@__PURE__*/ proxyCustomElement(class TemplatesUI extends H
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (h("div", { key: 'fc3137911fc8299bc0f8ae74a84a71777a64eb50', class: 'templates__container' }, h("div", { key: '18e0c658819d3f54015ea225324cd84547b610fd', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '38fe366203319f5d9389c47982859f5dd299c039', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'd93ea47ff32322c18da387652e0a0588b11c9101', class: "alert__wrapper" }, h("ifx-alert", { key: '3eb753278341ff0728c70a5fbc65a49b6b0e736f', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '785625a3790c5fe645793050429d735057bf5ff6', class: "templates__title" }, "Choose your template"), h("div", { key: 'e17b970189a89a47962ed5d4ba39c3e2bd9c3220', class: "templates__wrapper" }, h("ifx-template", { key: 'bc6435e17865c78c0daa837e3d5ecf1123eb121f', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '5979431eb9d74b272c266258a57c7bc0e2fd4498', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: '625f556bc421af7b7eb482e3516f7792b4c1ef71', class: 'templates__container' }, h("div", { key: 'b4baf8ddbb682ed4c8fd68915d5ade140e0f599f', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'ae7543d14589bedb717e5798d2adfee5466cd7dc', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '62661f884e553205dcb63977c110b5cb8e174e53', class: "alert__wrapper" }, h("ifx-alert", { key: '5a9d3c9ed711cb2f3ceebb1baebbc106899f7e1f', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '60fb42f545206c1e19b4d3762c9110270cbd391e', class: "templates__title" }, "Choose your template"), h("div", { key: '4d4db713807c60c8cf3d10dde9d7b7b64304a2c5', class: "templates__wrapper" }, h("ifx-template", { key: 'edacabf2edfc49a2b23bf3a200ac559a6637336d', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '78eb56d6b2ae1f3f3020eaf36b99eeb5fd8b24ea', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/ifx-templates-ui.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-templates-ui.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/templates-ui/templates-ui.scss?tag=ifx-templates-ui&encapsulation=shadow","src/components/templates/templates-ui/templates-ui.tsx"],"sourcesContent":["* { \r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\n.templates__container { \r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n & .back__btn-wrapper { \r\n display: none;\r\n &.show { \r\n display: flex;\r\n justify-content: space-between;\r\n width: 100%;\r\n }\r\n\r\n & .alert__wrapper { \r\n display: none;\r\n\r\n &.show { \r\n display: block;\r\n }\r\n }\r\n }\r\n\r\n & .templates__wrapper { \r\n display: flex;\r\n padding: 20px 0px;\r\n gap: 20px;\r\n // justify-content: space-evenly;\r\n flex-wrap: wrap;\r\n }\r\n\r\n & .templates__title { \r\n &.hide { \r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n","import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-templates-ui',\r\n styleUrl: 'templates-ui.scss',\r\n shadow: true,\r\n assetsDirs: ['assets']\r\n})\r\n\r\nexport class TemplatesUI {\r\n @Element() el: HTMLElement;\r\n\r\n private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\r\n private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\r\n\r\n\r\n toggleTemplate(currTemp) { \r\n const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\r\n templates.forEach((template) => { \r\n template.toggleTemplate(currTemp)\r\n })\r\n }\r\n\r\n @Listen('fieldError')\r\n handleError(e) { \r\n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n if(e.detail) { \r\n alertWrapper.classList.add('show');\r\n } else { \r\n alertWrapper.classList.remove('show');\r\n }\r\n }\r\n\r\n @Listen('toggleTemplates')\r\n filterTemplates(e) {\r\n const title = this.el.shadowRoot.querySelector('.templates__title');\r\n const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\r\n if(e.detail) { \r\n title.classList.add('hide');\r\n if(e.detail !== 'details') { \r\n backBtn.classList.add('show');\r\n }\r\n this.toggleTemplate(e.detail)\r\n } else { \r\n title.classList.remove('hide');\r\n backBtn.classList.remove('show');\r\n this.toggleTemplate(null)\r\n }\r\n }\r\n\r\n closeAlert() { \r\n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n alertWrapper.classList.remove('show');\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='templates__container'>\r\n <div class=\"back__btn-wrapper\">\r\n <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\r\n <div class=\"alert__wrapper\">\r\n <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-16\">All fields are mandatory</ifx-alert>\r\n </div>\r\n </div>\r\n <h2 class=\"templates__title\">Choose your template</h2>\r\n <div class=\"templates__wrapper\">\r\n <ifx-template name='template-01' thumbnail={this.tableTemplate} />\r\n <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-templates-ui.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/templates-ui/templates-ui.scss?tag=ifx-templates-ui&encapsulation=shadow","src/components/templates/templates-ui/templates-ui.tsx"],"sourcesContent":["* { \n padding: 0;\n margin: 0;\n}\n\n.templates__container { \n display: flex;\n flex-direction: column;\n align-items: center;\n\n & .back__btn-wrapper { \n display: none;\n &.show { \n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n & .alert__wrapper { \n display: none;\n\n &.show { \n display: block;\n }\n }\n }\n\n & .templates__wrapper { \n display: flex;\n padding: 20px 0px;\n gap: 20px;\n // justify-content: space-evenly;\n flex-wrap: wrap;\n }\n\n & .templates__title { \n &.hide { \n display: none;\n }\n }\n}\n\n\n\n","import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\n\n@Component({\n tag: 'ifx-templates-ui',\n styleUrl: 'templates-ui.scss',\n shadow: true,\n assetsDirs: ['assets']\n})\n\nexport class TemplatesUI {\n @Element() el: HTMLElement;\n\n private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\n private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\n\n\n toggleTemplate(currTemp) { \n const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\n templates.forEach((template) => { \n template.toggleTemplate(currTemp)\n })\n }\n\n @Listen('fieldError')\n handleError(e) { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n if(e.detail) { \n alertWrapper.classList.add('show');\n } else { \n alertWrapper.classList.remove('show');\n }\n }\n\n @Listen('toggleTemplates')\n filterTemplates(e) {\n const title = this.el.shadowRoot.querySelector('.templates__title');\n const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\n if(e.detail) { \n title.classList.add('hide');\n if(e.detail !== 'details') { \n backBtn.classList.add('show');\n }\n this.toggleTemplate(e.detail)\n } else { \n title.classList.remove('hide');\n backBtn.classList.remove('show');\n this.toggleTemplate(null)\n }\n }\n\n closeAlert() { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n alertWrapper.classList.remove('show');\n }\n\n render() {\n return (\n <div class='templates__container'>\n <div class=\"back__btn-wrapper\">\n <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\n <div class=\"alert__wrapper\">\n <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-16\">All fields are mandatory</ifx-alert>\n </div>\n </div>\n <h2 class=\"templates__title\">Choose your template</h2>\n <div class=\"templates__wrapper\">\n <ifx-template name='template-01' thumbnail={this.tableTemplate} />\n <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\n </div>\n </div>\n )\n }\n}\n"],"version":3}

package/dist/components/ifx-text-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { T as TextField, d as defineCustomElement$1 } from './p-DzvIkH4S.js';
+import { T as TextField, d as defineCustomElement$1 } from './p-DFInpODO.js';
 const IfxTextField = TextField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-textarea.js CHANGED Viewed

@@ -60,8 +60,8 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'a9f618b92f2720f7bf197e371af943aa2422f70c', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}` }, h("label", { key: '52ea7e0eb40c9748083a9773fcc85fd740840e02', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), this.required && (h("span", { key: '72297526f3f916daed89166c976aaeece30a74cb', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: '303064596188f7d41df4006ef017446fe75bfacb', class: 'wrapper__textarea' }, h("textarea", { key: '8aac393a2ae65d663de9c0abd2a69f823c5ebdd4', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled && !this.error, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled && !this.error, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'ab644ae0fd95135ec150ebe3cae25bde377133c0', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: '78ee16999292032b82986fe1e356e7f15609f0f4', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}` }, h("label", { key: 'a4faec9c9761ef71c2025d9d5c6f6c8637786bbe', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), this.required && (h("span", { key: '7dba2fdd58743c379597dc59d839d8cb32dadbc1', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: 'ce8d1a3c5f53ab7a378ac475b008d033e746db8d', class: 'wrapper__textarea' }, h("textarea", { key: 'ab8d751375870e9293644d6f69c329afac342504', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled && !this.error, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled && !this.error, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'f9a033dd8fa43d821f0476f38161bb2dbf683432', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     get el() { return this; }
     static get style() { return textareaCss; }

package/dist/components/ifx-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-textarea.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,uwCAAuwC;;MCY9wC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AAPrB,IAAA,WAAA,GAAA;;;;;;AASS,QAAA,IAAA,CAAA,OAAO,GAAW,gBAAgB,EAAE,UAAU,EAAE;AAQhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAKtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAM,CAAA,MAAA,GAAgD,MAAM;AAG5D,QAAA,IAAI,CAAA,IAAA,GAA4B,MAAM;AACrB,QAAA,IAAS,CAAA,SAAA,GAAW,OAAO;AAwFpD;AArFA,IAAA,MAAM,KAAK,GAAA;QACV,IAAI,CAAC,aAAa,EAAE;;IAGrB,oBAAoB,GAAA;AACnB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;QAC9E,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,MAAM;QAE3D,IAAI,WAAW,EAAE;AAChB,YAAA,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC;;aACpC,IAAI,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;AAC3D,YAAA,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;;IAI/C,kBAAkB,GAAA;QACjB,IAAI,CAAC,oBAAoB,EAAE;;IAG5B,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;;AAIrB,IAAA,aAAa,CAAC,CAAa,EAAA;QAC1B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK;;QAEpD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG/B,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;;;;;;AASf,IAAA,MAAM,gBAAgB,GAAA;QACtB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,cAAc,EAAE,MAAM,SAAS,CAAC;;;IAIjD,MAAM,GAAA;;AACL,QAAA,QACC,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EAC9G,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EACjD,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA;YAAE,EAAA,CAAA,IAAI,EAAE,EAClB,IAAI,CAAC,QAAQ,KACb,6DAAM,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAU,EAAA,GAAA,CAAA,CAC9D,CACM,EAER,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CACY,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,YAAY,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACP,eAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAC3C,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAA,CACpC,CACG,EAEL,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,EAAE,MACpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAC3B,EAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CACf,CACN,CACK;;;;;;;;;;;;;;;;;;;;;;AAKV,IAAI,UAAU,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n}\r\n\r\n.wrapper__label {\r\n color: tokens.$ifxColorBaseBlack;\r\n font: tokens.$ifxBodyBody03;\r\n & .required {\r\n margin-left: 4px;\r\n \r\n &.error {\r\n color: #CD002F;\r\n }\r\n }\r\n}\r\n:host(.wrapper--disabled) .wrapper__label {\r\n color: tokens.$ifxColorEngineering300;\r\n}\r\n\r\n.wrapper__textarea {\r\n width: 100%;\r\n &.fullWidth { \r\n width: 100%;\r\n & textarea { \r\n width: 100%;\r\n box-sizing: border-box; \r\n }\r\n }\r\n}\r\n\r\n.wrapper__textarea textarea {\r\n border: 1px solid tokens.$ifxColorEngineering400;\r\n border-radius: tokens.$ifxSpace12;\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n \r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorBaseBlack;\r\n font: tokens.$ifxBodyBody03;\r\n \r\n transition: all 100ms ease;\r\n transition-property: border-color;\r\n\r\n &:hover {\r\n border: 1px solid tokens.$ifxColorEngineering500;\r\n }\r\n \r\n &:focus-within {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 0; \r\n }\r\n}\r\n\r\n:host(.wrapper--error) .wrapper__textarea textarea {\r\n border: 1px solid tokens.$ifxColorRed500;\r\n}\r\n:host(.wrapper--disabled) .wrapper__textarea textarea {\r\n border: 1px solid tokens.$ifxColorEngineering300;\r\n background-color: tokens.$ifxColorEngineering300;\r\n\r\n &::placeholder {\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n}\r\n\r\n.wrapper__caption {\r\n color: tokens.$ifxColorBaseBlack;\r\n font: tokens.$ifxBodyBody05;\r\n}\r\n:host(.wrapper--error) .wrapper__caption {\r\n color: tokens.$ifxColorRed500;\r\n}\r\n:host(.wrapper--disabled) .wrapper__caption {\r\n color: tokens.$ifxColorEngineering300;\r\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n\t// formAssociated: true,\r\n\tshadow: true,\r\n\tstyleUrl: 'textarea.scss',\r\n\ttag: 'ifx-textarea'\r\n})\r\n\r\nexport class TextArea {\r\n\r\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\r\n\r\n\t@AttachInternals() internals: ElementInternals;\r\n\r\n\t@Event() ifxInput: EventEmitter<String>;\r\n\t@Element() el;\r\n\t@Prop() caption: string;\r\n\t@Prop() cols: number;\r\n\t@Prop() disabled: boolean = false;\r\n\t@Prop() error: boolean = false;\r\n\t@Prop() label: string;\r\n\t@Prop() maxlength: number;\r\n\t@Prop() name: string;\r\n\t@Prop() placeholder: string;\r\n\t@Prop() required: boolean = false;\r\n\t@Prop() readOnly: boolean = false;\r\n\t@Prop() resize: 'both' \| 'horizontal' \| 'vertical' \| 'none' = 'both';\r\n\t@Prop() rows: number;\r\n\t@Prop({ mutable: true }) value: string;\r\n\t@Prop() wrap: 'hard' \| 'soft' \| 'off' = 'soft';\r\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\r\n\r\n\t@Method()\r\n\tasync reset() {\r\n\t\tthis.resetTextarea();\r\n\t}\r\n\r\n\thandleComponentWidth() {\r\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\r\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\r\n\r\n\t\tif (isFullWidth) {\r\n\t\t\ttextareaWrapper.classList.add('fullWidth')\r\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\r\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidRender() {\r\n\t\tthis.handleComponentWidth()\r\n\t}\r\n\r\n\tformResetCallback(): void {\r\n\t\tthis.resetTextarea();\r\n\t\t//this.internals.setFormValue(\"\");\r\n\t}\r\n\r\n\thandleOnInput(e: InputEvent): void {\r\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\r\n\t\t//this.internals.setFormValue(this.value);\r\n\t\tthis.ifxInput.emit(this.value);\r\n\t}\r\n\r\n\tresetTextarea() {\r\n\t\tthis.value = '';\r\n\t\t//this.internals.setValidity({});\r\n\t\t//this.internals.setFormValue('');\r\n\t}\r\n\r\n\t// componentWillLoad() {\r\n\t// \tthis.internals.setFormValue(this.value);\r\n\t// }\r\n\r\n\t\tasync componentDidLoad() { \r\n\t\tif(!isNestedInIfxComponent(this.el)) { \r\n\t\t\tconst framework = detectFramework();\r\n\t\t\ttrackComponent('ifx-textarea', await framework)\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}`}>\r\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\r\n\t\t\t\t\t{this.label?.trim()}\r\n\t\t\t\t\t{this.required && (\r\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</label>\r\n\r\n\t\t\t\t<div class='wrapper__textarea'>\r\n\t\t\t\t\t<textarea\r\n\t\t\t\t\t\taria-label='a textarea'\r\n\t\t\t\t\t\taria-value={this.value}\r\n\t\t\t\t\t\taria-disabled={this.disabled && !this.error}\r\n\t\t\t\t\t\tid={this.inputId}\r\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\r\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\r\n\t\t\t\t\t\tcols={this.cols}\r\n\t\t\t\t\t\trows={this.rows}\r\n\t\t\t\t\t\tmaxlength={this.maxlength}\r\n\t\t\t\t\t\twrap={this.wrap}\r\n\t\t\t\t\t\tdisabled={this.disabled && !this.error}\r\n\t\t\t\t\t\treadonly={this.readOnly}\r\n\t\t\t\t\t\tplaceholder={this.placeholder}\r\n\t\t\t\t\t\tvalue={this.value}\r\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t{this.caption?.trim() && (\r\n\t\t\t\t\t<div class='wrapper__caption'>\r\n\t\t\t\t\t\t{this.caption.trim()}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n}\r\n\r\nlet textareaId = 0;"],"version":3}
1	+ {"file":"ifx-textarea.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,uwCAAuwC;;MCY9wC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AAPrB,IAAA,WAAA,GAAA;;;;;;AASS,QAAA,IAAA,CAAA,OAAO,GAAW,gBAAgB,EAAE,UAAU,EAAE;AAQhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAKtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAM,CAAA,MAAA,GAAgD,MAAM;AAG5D,QAAA,IAAI,CAAA,IAAA,GAA4B,MAAM;AACrB,QAAA,IAAS,CAAA,SAAA,GAAW,OAAO;AAwFpD;AArFA,IAAA,MAAM,KAAK,GAAA;QACV,IAAI,CAAC,aAAa,EAAE;;IAGrB,oBAAoB,GAAA;AACnB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;QAC9E,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,MAAM;QAE3D,IAAI,WAAW,EAAE;AAChB,YAAA,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC;;aACpC,IAAI,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;AAC3D,YAAA,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;;IAI/C,kBAAkB,GAAA;QACjB,IAAI,CAAC,oBAAoB,EAAE;;IAG5B,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;;AAIrB,IAAA,aAAa,CAAC,CAAa,EAAA;QAC1B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK;;QAEpD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG/B,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;;;;;;AASf,IAAA,MAAM,gBAAgB,GAAA;QACtB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,cAAc,EAAE,MAAM,SAAS,CAAC;;;IAIjD,MAAM,GAAA;;AACL,QAAA,QACC,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EAC9G,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EACjD,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA;YAAE,EAAA,CAAA,IAAI,EAAE,EAClB,IAAI,CAAC,QAAQ,KACb,6DAAM,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAU,EAAA,GAAA,CAAA,CAC9D,CACM,EAER,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CACY,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,YAAY,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACP,eAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAC3C,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAA,CACpC,CACG,EAEL,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,EAAE,MACpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAC3B,EAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CACf,CACN,CACK;;;;;;;;;;;;;;;;;;;;;;AAKV,IAAI,UAAU,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.wrapper__label {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n}\n:host(.wrapper--disabled) .wrapper__label {\n color: tokens.$ifxColorEngineering300;\n}\n\n.wrapper__textarea {\n width: 100%;\n &.fullWidth { \n width: 100%;\n & textarea { \n width: 100%;\n box-sizing: border-box; \n }\n }\n}\n\n.wrapper__textarea textarea {\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxSpace12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n \n transition: all 100ms ease;\n transition-property: border-color;\n\n &:hover {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n \n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 0; \n }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n border: 1px solid tokens.$ifxColorEngineering300;\n background-color: tokens.$ifxColorEngineering300;\n\n &::placeholder {\n color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.wrapper__caption {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n color: tokens.$ifxColorEngineering300;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n\t// formAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() required: boolean = false;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' \| 'horizontal' \| 'vertical' \| 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' \| 'soft' \| 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\n\t\tif (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n\t\t}\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.handleComponentWidth()\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\t//this.internals.setFormValue(\"\");\n\t}\n\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\t//this.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\t//this.internals.setValidity({});\n\t\t//this.internals.setFormValue('');\n\t}\n\n\t// componentWillLoad() {\n\t// \tthis.internals.setFormValue(this.value);\n\t// }\n\n\t\tasync componentDidLoad() { \n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent('ifx-textarea', await framework)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\n\t\t\t\t\t{this.label?.trim()}\n\t\t\t\t\t{this.required && (\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n\t\t\t\t\t)}\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={this.value}\n\t\t\t\t\t\taria-disabled={this.disabled && !this.error}\n\t\t\t\t\t\tid={this.inputId}\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\twrap={this.wrap}\n\t\t\t\t\t\tdisabled={this.disabled && !this.error}\n\t\t\t\t\t\treadonly={this.readOnly}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{this.caption.trim()}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"version":3}

package/dist/components/ifx-tooltip.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
 import { c as createPopper } from './p-BfP9ezJQ.js';
 const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}";
@@ -159,10 +159,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: 'db77a175514f43f6d87fce4a44bd5b34a43d8840', "aria-label": this.ariaLabel, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'dddb96441e9f1bc2bd459e5832f8ac111cf62738' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '41cd64450ce410efc2c53732bfcff0dfed11e20a', class: tooltipDismissible }, h("button", { key: 'ceac69ac420e41ed8ca53e4c37b7850740572d47', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '945ac04ea9784fa803ac0ac174e99faaa763c84f', icon: "cross16" })), h("div", { key: '7a21f532bd22406ea40e05ac6debbc08a0c23ab6', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'a8c263eeeab26d6c92308dc9d1d9c269dee19290', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'bcfce81c8e97e3a2a255054403e8b00ecc717345', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '167b9d3b6e6e03257d3569dcf1ab6c3b97b499fe', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1aa1b98096286363436aebbff68651e6275ab112', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: 'e64027a1dd4a0fb85bd6721bc7e8419a6360032b', class: tooltipCompact }, this.text, h("svg", { key: '1bf955617ea956787e491b2f3faa3e05bf207e93', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '04bd4f0f6c64883048ca098888e99b01f7a42e02', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '7778b2cb3ee86431fccff154dea032719b238133', class: tooltipExtended }, h("slot", { key: '76448fe18c3123b3afd7b50abae9d4fe88d05018', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: 'ff1e017af43122e05a61d592bf02f449ea829de6', class: "tooltip-extended-content" }, this.header && h("div", { key: '3602b4b9683bf2c35a267a203f69022ca161d463', class: "tooltip-extended-header" }, this.header), h("div", { key: '6020b7a3adb2d8878f39d6207b5f5e118f4f2a11', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '0411a37419cbd91524078e20d7be9a4a6800dda5', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9ae039238136fb5a6f2b18e95c8682d099039664', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: '73fe0cd0ba30b772907db89dc10248ca8fab5d5b', "aria-label": this.ariaLabel, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'c322892c782277d8640de4d7f86c073c82ff5b87' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'd268c502ee61550b6bb96512220bb10f73a6ec53', class: tooltipDismissible }, h("button", { key: 'e2ef4f4709a58adca779f60afbae4d5d990bf2b0', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '85c008fc5bb577d3ed6dc3dc7ae824f3e579217a', icon: "cross16" })), h("div", { key: 'b6bbb49d16efdacb67596bd8006ad94be7895e24', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'b62b5521156c7ae5a9ceb95d2bbf02322345f7ef', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'cec7a6ea9e7536d18916547646864729396eb60f', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'c51e82c058a9cb4c4e7a0cbb13bb476f8afeb928', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1029a62c61d0357a731b2951ea38d05c7c269551', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: '830e279a14e2935f4e08021bd7399865e1ef44a2', class: tooltipCompact }, this.text, h("svg", { key: '93e80185a37e7121f858790fb3fa33ffb18092f6', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0158bcc8dcd9259d92d512f8e96d325b616d50a0', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '661134a45b938246e9c58f2d456920a6035a90c9', class: tooltipExtended }, h("slot", { key: 'c601220c6b6d357800b3b697f78e68bb9d614431', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: 'cee24e9d36ca9f745c397ba328eae361fc19741a', class: "tooltip-extended-content" }, this.header && h("div", { key: 'a7cd9c2a5614e33300e2ad18677655d96c8bb16f', class: "tooltip-extended-header" }, this.header), h("div", { key: '04075ce9041db50760373c24d5b15481bc1803fb', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '003660f174f2d82b61fe122fc7102e5f5c345571', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4212775539c5aad8f0b89edd938c9786c7662fef', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-tooltip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: inline-flex;\r\n}\r\n\r\n.tooltip__container {\r\n display: inline-flex;\r\n flex-direction: column;\r\n position: relative;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n}\r\n\r\n%tooltip-common {\r\n background-color: tokens.$ifxColorBaseBlack;\r\n border: 1px solid black;\r\n z-index: 1080;\r\n display: none;\r\n transition: opacity 0.3s;\r\n position: absolute;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n color: tokens.$ifxColorBaseWhite;\r\n width: max-content;\r\n box-sizing: border-box;\r\n\r\n white-space: pre-wrap; /* wraps text at spaces and within words /\r\n word-wrap: break-word; / breaks text within a word if necessary /\r\n overflow-wrap: anywhere; / breaks text at arbitrary points when needed */\r\n\r\n &.visible {\r\n display: flex !important;\r\n align-items: start;\r\n //min-width: 100px;\r\n //width: auto;\r\n }\r\n}\r\n\r\n\r\n\r\n.tooltip-dismissible {\r\n @extend %tooltip-common;\r\n\r\n .close-button {\r\n all: unset;\r\n //position: absolute;\r\n //top: tokens.$ifxSpace150;\r\n //right: tokens.$ifxSpace150;\r\n cursor: pointer;\r\n position: relative;\r\n order: 2;\r\n margin-top: 12px;\r\n margin-right: 12px;\r\n line-height: 0px;\r\n }\r\n\r\n .tooltip-dismissible-content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: tokens.$ifxSpace150;\r\n padding: tokens.$ifxSpace150;\r\n flex-grow: 1;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n overflow-wrap: anywhere;\r\n\r\n }\r\n\r\n .tooltip-dismissible-header,\r\n .tooltip-dismissible-body {\r\n font-size: 14px;\r\n font-style: normal;\r\n line-height: 20px;\r\n }\r\n\r\n .tooltip-dismissible-header {\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n }\r\n\r\n .tooltip-dismissible-body {\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n }\r\n}\r\n\r\n.tooltip-compact {\r\n @extend %tooltip-common;\r\n padding: 4px 8px;\r\n text-align: center;\r\n flex-grow: 1;\r\n}\r\n\r\n\r\n.tooltip-extended {\r\n @extend %tooltip-common;\r\n //padding-left: 36px; // Added this line, adjust as per your icon width\r\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\r\n align-items: center;\r\n padding: tokens.$ifxSpace150;\r\n gap: 10px;\r\n\r\n .extended_icon {\r\n display: flex;\r\n align-self: flex-start;\r\n align-items: center;\r\n //padding-top: tokens.$ifxSpace150;\r\n cursor: pointer;\r\n }\r\n\r\n\r\n\r\n .tooltip-extended-content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: tokens.$ifxSpace150;\r\n //padding: tokens.$ifxSpace150;\r\n flex-grow: 1;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n overflow-wrap: anywhere;\r\n }\r\n\r\n .tooltip-extended-header,\r\n .tooltip-extended-body {\r\n font-size: 14px;\r\n font-style: normal;\r\n line-height: 20px;\r\n }\r\n\r\n .tooltip-extended-header {\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n }\r\n\r\n .tooltip-extended-body {\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n }\r\n}\r\n\r\n\r\n.tooltip__container .tooltip-arrow-svg {\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n}\r\n\r\n\r\n%tooltip-arrow-positions {\r\n\r\n // For 'top' placement\r\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\r\n bottom: -7px;\r\n left: 50%;\r\n transform: rotate(180deg) translateX(-50%);\r\n }\r\n\r\n // For 'top-start' placement\r\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\r\n bottom: -7px;\r\n left: 10px; // Adjust as needed\r\n transform: rotate(180deg)\r\n }\r\n\r\n // For 'top-end' placement\r\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\r\n bottom: -7px;\r\n right: 10px; // Adjust as needed\r\n transform: rotate(180deg);\r\n }\r\n\r\n // For 'bottom' placement\r\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\r\n top: -7px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n\r\n // For 'bottom-start' placement\r\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\r\n top: -7px;\r\n left: 10px; // Adjust as needed\r\n }\r\n\r\n // For 'bottom-end' placement\r\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\r\n top: -7px;\r\n right: 10px; // Adjust as needed\r\n }\r\n\r\n // For 'left' placement\r\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\r\n right: -3px;\r\n top: 50%;\r\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\r\n }\r\n\r\n // For 'right' placement\r\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\r\n left: -3px;\r\n top: 50%;\r\n transform: rotate(270deg) translateY(-50%) translateX(50%);\r\n }\r\n}\r\n\r\n\r\n.tooltip-compact {\r\n @extend %tooltip-arrow-positions;\r\n min-width: 28px !important;\r\n max-width: 145px !important;\r\n}\r\n\r\n.tooltip-dismissible {\r\n @extend %tooltip-arrow-positions;\r\n min-width: 145px !important;\r\n max-width: 310px !important;\r\n}\r\n\r\n.tooltip-extended {\r\n @extend %tooltip-arrow-positions;\r\n min-width: 145px !important;\r\n max-width: 310px !important;\r\n}\r\n","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\r\nimport { createPopper } from '@popperjs/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-tooltip',\r\n styleUrl: 'tooltip.scss',\r\n shadow: true\r\n})\r\nexport class Tooltip {\r\n\r\n @Element() el: HTMLElement;\r\n @State() tooltipVisible: boolean = false;\r\n @Prop() header: string = '';\r\n @Prop() text: string = '';\r\n @Prop() position: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\r\n @State() internalPosition: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() variant: 'compact' \| 'dismissible' \| 'extended' = 'compact';\r\n @Prop() icon: string;\r\n\r\n tooltipEl: HTMLElement;\r\n referenceEl: HTMLElement;\r\n popperInstance: any = null;\r\n\r\n\r\n componentWillLoad() { \r\n if(this.variant.toLowerCase().trim() === \"\") { \r\n this.variant = 'compact'\r\n }\r\n }\r\n \r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-tooltip', await framework)\r\n }\r\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\r\n \r\n if(this.variant.toLowerCase() === 'compact' \|\| this.variant.toLowerCase() === 'extended') {\r\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\r\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\r\n }else{\r\n slotElement.addEventListener('click', this.onClick);\r\n }\r\n\r\n }\r\n\r\n initializePopper() {\r\n if (this.popperInstance) return;\r\n\r\n this.referenceEl = this.el;\r\n this.tooltipEl;\r\n if (this.variant.toLowerCase() === 'compact') {\r\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\r\n }\r\n else if (this.variant.toLowerCase() === 'dismissible') {\r\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\r\n }\r\n else {\r\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\r\n\r\n }\r\n\r\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\r\n\r\n // Set the internalPosition\r\n this.internalPosition = effectivePosition;\r\n\r\n if (this.tooltipEl && this.referenceEl) {\r\n\r\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\r\n placement: this.internalPosition,\r\n modifiers: [\r\n {\r\n name: 'offset',\r\n options: {\r\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\r\n }\r\n },\r\n {\r\n name: 'arrow',\r\n options: {\r\n element: '.tooltip-arrow-svg'\r\n }\r\n }\r\n ]\r\n });\r\n\r\n }\r\n\r\n // Add this line to set the 'data-placement' attribute on the tooltip\r\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\r\n\r\n\r\n }\r\n\r\n determineBestPosition() {\r\n // This is a simplified version, you can enhance this based on available viewport space.\r\n const rect = this.referenceEl.getBoundingClientRect();\r\n const yOffset = window.scrollY; // Get current scroll position\r\n const xOffset = window.scrollX; // Get current horizontal scroll position\r\n\r\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\r\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\r\n\r\n if (this.position === 'auto') {\r\n if (verticalHalfwayPoint > window.innerHeight / 2) {\r\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\r\n return 'top-end';\r\n } else {\r\n return 'top-start';\r\n }\r\n } else {\r\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\r\n return 'bottom-end';\r\n } else {\r\n return 'bottom-start';\r\n }\r\n }\r\n } else {\r\n return this.position;\r\n }\r\n }\r\n\r\n @Watch('position')\r\n positionChanged(newVal: any) {\r\n this.internalPosition = newVal;\r\n this.popperInstance?.destroy();\r\n this.popperInstance = null; // Force re-initialization on next mouse enter\r\n }\r\n\r\n\r\n\r\n onMouseEnter = () => {\r\n // Enable the event listeners immediately\r\n this.popperInstance?.setOptions((options) => ({\r\n ...options,\r\n modifiers: [\r\n ...options.modifiers,\r\n { name: 'eventListeners', enabled: true },\r\n ],\r\n }));\r\n\r\n // Initialize the popper instance\r\n this.initializePopper();\r\n\r\n // Make the tooltip visible\r\n this.tooltipVisible = true;\r\n this.tooltipEl.style.display = 'block';\r\n\r\n // Update the popper instance immediately after initialization\r\n this.popperInstance?.update();\r\n }\r\n\r\n\r\n onMouseLeave = () => {\r\n this.tooltipVisible = false;\r\n this.tooltipEl.style.display = 'none';\r\n\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popperInstance?.destroy();\r\n }\r\n\r\n onClick = () => {\r\n if (this.variant.toLowerCase() === 'dismissible') {\r\n this.initializePopper();\r\n this.tooltipVisible = !this.tooltipVisible;\r\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\r\n this.popperInstance?.update();\r\n }\r\n }\r\n\r\n onDismissClick = () => {\r\n this.tooltipVisible = false;\r\n this.tooltipEl.style.display = 'none';\r\n }\r\n\r\n render() {\r\n const tooltipDismissible = {\r\n 'tooltip-dismissible': true,\r\n 'visible': this.tooltipVisible,\r\n };\r\n\r\n const tooltipCompact = {\r\n 'tooltip-compact': true,\r\n 'visible': this.tooltipVisible,\r\n };\r\n\r\n const tooltipExtended = {\r\n 'tooltip-extended': true,\r\n 'visible': this.tooltipVisible,\r\n };\r\n\r\n return (\r\n <div aria-label={this.ariaLabel} aria-value={this.header} class=\"tooltip__container\" >\r\n <slot></slot>\r\n\r\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\r\n <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\r\n <ifx-icon icon=\"cross16\"></ifx-icon>\r\n </button>\r\n <div class=\"tooltip-dismissible-content\">\r\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\r\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\r\n </div>\r\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\r\n </svg>\r\n </div>\r\n }\r\n {this.variant.toLowerCase() === 'compact' &&\r\n <div class={tooltipCompact}>\r\n {this.text}\r\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\r\n </svg>\r\n </div>\r\n }\r\n {this.variant.toLowerCase() === 'extended' &&\r\n <div class={tooltipExtended}>\r\n <slot name=\"icon\">\r\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\r\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\r\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\r\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\r\n </svg>\r\n }\r\n </slot>\r\n <div class=\"tooltip-extended-content\">\r\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\r\n <div class=\"tooltip-extended-body\">{this.text}</div>\r\n </div>\r\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\r\n </svg>\r\n </div >\r\n }\r\n </div>\r\n );\r\n }\r\n\r\n\r\n}"],"version":3}
1	+ {"file":"ifx-tooltip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: absolute;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n width: max-content;\n box-sizing: border-box;\n\n white-space: pre-wrap; /* wraps text at spaces and within words /\n word-wrap: break-word; / breaks text within a word if necessary /\n overflow-wrap: anywhere; / breaks text at arbitrary points when needed */\n\n &.visible {\n display: flex !important;\n align-items: start;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n\n .close-button {\n all: unset;\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n order: 2;\n margin-top: 12px;\n margin-right: 12px;\n line-height: 0px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -7px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -7px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -3px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -3px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n min-width: 28px !important;\n max-width: 145px !important;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n min-width: 145px !important;\n max-width: 310px !important;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n min-width: 145px !important;\n max-width: 310px !important;\n}\n","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n @Prop() ariaLabel: string \| null;\n @Prop() variant: 'compact' \| 'dismissible' \| 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-tooltip', await framework)\n }\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' \|\| this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n onDismissClick = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label={this.ariaLabel} aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n <ifx-icon icon=\"cross16\"></ifx-icon>\n </button>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"version":3}

package/dist/components/ifx-tree-view-item.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index.js';
-import { d as defineCustomElement$3 } from './p-B61ip_5M.js';
-import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$3 } from './p-BQj9WQQe.js';
+import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
 const treeViewItemCss = ".tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#F7F7F7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#FFFFFF}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:\"\";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#EEEDED}.tree-item--disabled .tree-item__chevron-container::after{color:#EEEDED}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}";
@@ -367,12 +367,12 @@ const TreeViewItem = /*@__PURE__*/ proxyCustomElement(class TreeViewItem extends
         };
     }
     render() {
-        return (h("div", { key: 'cec7573a072effbec3e579314dbc856800167c04', class: {
+        return (h("div", { key: '06430c8297a83b8ede5128151c7393c3fd03e2a2', class: {
                 'tree-item': true,
                 'tree-item--expanded': this.isExpanded,
                 'tree-item--has-children': this.hasChildren,
                 'tree-item--disabled': this.disabled,
-            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: 'f0846c5a21a769ddbce8fad581faa35b418007fd', class: "tree-item__content" }, h("div", { key: '9550350aa5e56bb2651746575d2433f24461dd7a', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: '33dbd5c3e261ac6993620228d91f7dd58fbbac63', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '4ef28c7b9b5390bcfe60db2745abfd14c23be9b0', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '60be80051ed37101c43875e88a8a1bad388fc658', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: '1881571f0b36fc09e7b0919f164b583ed082ee3c', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '1cbdef30e9a4f2b55520b9c9a2ee638199cb7a23', class: "tree-item__line" }))), h("div", { key: 'f1d2f18c6a1573d07eb5450ad63296c6bf535533', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: '972df68ce75bb5173715095ce7fb597fc537cd73', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '19c43a81a85c58357bcac941533dd01db549d2fa', class: "tree-item__label" }, h("slot", { key: 'a840c5d9595c1a7697e199e02ea5c2adec7286f8' }))))), this.isExpanded && h("div", { key: '6787296ba279e142c2af6c9a47df469900040109', class: "tree-item__children" }, h("slot", { key: '43bdfa1c0b3a86724ff5de26b853914298abb182', name: "children" }))));
+            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: '2de63b8310c477646aeaf8deb3131bba1dc3801d', class: "tree-item__content" }, h("div", { key: '4269b1df1e670ec4106c1c4462cdd1dbe3cee7bd', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: '819444dfb6c9dd52a0aa703796c3e59c90616a79', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '2b4f487b08fbb77eed104ecee0774033c26f96fd', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '59770cbe680dce25156ded6580dad90d3f4cc880', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: 'ef7ef1761781d4c179ee696e08af6d24af7d9b9f', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '99ec9f0abe191fde4a158484fb3b74d9d4ce524e', class: "tree-item__line" }))), h("div", { key: 'e91ecf4d195285403ac2229fc838e470c0e46ba6', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: 'a4b44e04c85234486602bdce7be330c7b9775233', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '855ebc797490c23969a22b31fe8df64ffae2ff32', class: "tree-item__label" }, h("slot", { key: '92d518b2c916f43229ca5f9a9c38809b08888d09' }))))), this.isExpanded && h("div", { key: '769744e6235899295020700585f278ae8f3ba091', class: "tree-item__children" }, h("slot", { key: '4e760a8d309e22549df336927b955a35036c1826', name: "children" }))));
     }
     get host() { return this; }
     static get watchers() { return {