npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.2--canary.1640.e43988106d4b26dd629292540be9d5e4b6980d07.0 → 30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0 - Mend

@infineon/infineon-design-system-stencil 30.9.2--canary.1640.e43988106d4b26dd629292540be9d5e4b6980d07.0 → 30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.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 (291) 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"],"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);\n width: 100%;\n}\n\n.tabs.horizontal {\n flex-direction: column;\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\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.tab-item {\n // Reduced padding values\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\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: none;\n border-radius: 1px;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\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}","//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\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() internalFocusedTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n\n @Event() ifxChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\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 }\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\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n if (this.internalActiveTabIndex !== this.activeTabIndex) {\n this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n };\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\n setDefaultOrientation() {\n const validOrientations = ['horizontal', 'vertical'];\n const lowercaseOrientation = this.orientation.toLowerCase();\n\n if (!validOrientations.includes(lowercaseOrientation)) {\n this.internalOrientation = 'horizontal';\n } else this.internalOrientation = this.orientation;\n }\n\n componentDidLoad() {\n this.updateBorderAndFocus();\n // Add keyboard event listeners for each tab header\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.addEventListener('focus', this.onTabFocus(index));\n });\n\n }\n\n onTabFocus(index) {\n return () => {\n this.internalFocusedTabIndex = index;\n };\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.removeEventListener('focus', this.onTabFocus(index));\n });\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\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 this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n if (!tab.disabled) this.internalActiveTabIndex = index;\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 if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previouslyActiveTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n }\n }\n }\n\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\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 <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}"],"version":3}
1	+ {"file":"ifx-tabs.js","mappings":"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","names":["IfxTabs"],"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);\n width: 100%;\n}\n\n.tabs.horizontal {\n flex-direction: column;\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\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.tab-item {\n // Reduced padding values\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\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: none;\n border-radius: 1px;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\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}","//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\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() internalFocusedTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n\n @Event() ifxTabChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\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 }\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\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n if (this.internalActiveTabIndex !== this.activeTabIndex) {\n this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n };\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\n setDefaultOrientation() {\n const validOrientations = ['horizontal', 'vertical'];\n const lowercaseOrientation = this.orientation.toLowerCase();\n\n if (!validOrientations.includes(lowercaseOrientation)) {\n this.internalOrientation = 'horizontal';\n } else this.internalOrientation = this.orientation;\n }\n\n componentDidLoad() {\n this.updateBorderAndFocus();\n // Add keyboard event listeners for each tab header\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.addEventListener('focus', this.onTabFocus(index));\n });\n\n }\n\n onTabFocus(index) {\n return () => {\n this.internalFocusedTabIndex = index;\n };\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.removeEventListener('focus', this.onTabFocus(index));\n });\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\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 this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n if (!tab.disabled) this.internalActiveTabIndex = index;\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 if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previouslyActiveTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n }\n }\n }\n\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\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 <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}"],"version":3}

package/dist/components/{p-cf8fd0f4.js → p-04b73e62.js} RENAMED Viewed

@@ -24,7 +24,7 @@ const Multiselect = /*@__PURE__*/ proxyCustomElement(class Multiselect extends H
         this.__registerHost();
         this.__attachShadow();
         this.ifxSelect = createEvent(this, "ifxSelect", 7);
-        this.ifxOpen = createEvent(this, "ifxOpen", 7);
+        this.ifxMultiselectIsOpen = createEvent(this, "ifxMultiselectIsOpen", 7);
         this.internals = this.attachInternals();
         this.currentIndex = 0; //needed for option selection using keyboard
         this.handleSearch = debounce((targetElement) => {
@@ -41,8 +41,8 @@ const Multiselect = /*@__PURE__*/ proxyCustomElement(class Multiselect extends H
             if (!path.includes(this.dropdownElement)) {
                 this.dropdownOpen = false;
                 document.removeEventListener('click', this.handleDocumentClick);
-                // Dispatch the ifxOpen event
-                this.ifxOpen.emit(this.dropdownOpen);
+                // Dispatch the ifxMultiselectIsOpen event
+                this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
             }
         };
         this.name = undefined;
@@ -311,8 +311,8 @@ const Multiselect = /*@__PURE__*/ proxyCustomElement(class Multiselect extends H
             if (this.dropdownOpen) {
                 document.addEventListener('click', this.handleDocumentClick);
             }
-            // Dispatch the ifxOpen event
-            this.ifxOpen.emit(this.dropdownOpen);
+            // Dispatch the ifxMultiselectIsOpen event
+            this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
         }, 0);
         this.zIndex = Multiselect.globalZIndex++;
     }
@@ -588,4 +588,4 @@ function defineCustomElement() {
 export { Multiselect as M, defineCustomElement as d };
-//# sourceMappingURL=p-cf8fd0f4.js.map
+//# sourceMappingURL=p-04b73e62.js.map

package/dist/components/p-04b73e62.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-04b73e62.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n background-color: tokens.$ifxColorBaseWhite;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: default;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design */\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n position: sticky;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus:not(.disabled) {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n /* or however much indentation you want */\n }\n\n &.disabled {\n &:hover {\n cursor: default;\n }\n }\n\n label {\n cursor: inherit;\n }\n }\n\n\n\n}\n\n.select-all-wrapper {\n padding-top: 8px;\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true,\n formAssociated: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() name: string;\n @Prop() options: any[] | string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @State() internalErrorMessage: string;\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n @Prop() showSearch: boolean = true;\n @Prop() showSelectAll: boolean = true;\n @State() optionCount: number = 0; // number of all options (leaves of the tree)\n @State() optionsProcessed: boolean = false; // flag whether options have already been counted, intial selections saved\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('options')\n updateOptions() { \n this.loadedOptions = [];\n this.filteredOptions = [];\n this.optionCount = 0;\n this.optionsProcessed = false;\n this.persistentSelectedOptions = [];\n\n this.loadInitialOptions();\n }\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n this.internalErrorMessage = this.errorMessage;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n \n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n if (!this.optionsProcessed) {\n this.optionCount = this.countOptions(allOptions);\n const initiallySelected = this.collectSelectedOptions(allOptions);\n const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState];\n this.optionsProcessed = true;\n }\n \n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n return slicedOptions;\n }\n\n /**\n * Collects and returns all options that are selected.\n * When the parent is selected, then the value of the children will be overriden with selected as well.\n * It will only collect the leaves of the tree.\n * \n * @param options A list of options.\n * @returns A list with all selected options\n */\n private collectSelectedOptions(options: Option[]): Option[] {\n let selectedOptions: Option[] = [];\n \n for (const option of options) {\n if (option.selected) {\n if (option.children && option.children.length > 0) {\n // if parent is selected, then select all child options\n selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n } else {\n selectedOptions.push(option);\n }\n } else {\n if (option.children && option.children.length > 0) {\n selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n }\n }\n }\n return selectedOptions;\n }\n\n /**\n * Collects all leaf children options.\n * \n * @param option A list with all leaf-children.\n */\n private collectLeafOptions(children: Option[]): Option[] {\n let leafOptions = [];\n \n for (const child of children) {\n if (child.children && child.children.length > 0) {\n leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n } else {\n leafOptions.push(child);\n }\n } \n return leafOptions;\n }\n\n /**\n * Count the number of options. Only counts the leaves of the options tree.\n */\n countOptions(options: Option[]): number {\n let count = 0;\n for (const option of options) {\n if (option.children && option.children.length >= 0) {\n count += this.countOptions(option.children);\n } else {\n count++;\n }\n }\n return count;\n }\n\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n }\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('errorMessage')\n updateInternalErrorMessage() {\n this.internalErrorMessage = this.errorMessage;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('persistentSelectedOptions')\n onSelectionChange(newValue: Option[], _: Option[]) {\n const formData = new FormData();\n newValue.forEach(option => formData.append(this.name, option.value));\n this.internals.setFormValue(formData);\n }\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (!option.selected && this.isSelectionLimitReached(option)) {\n option.checkboxRef.toggleCheckedState(false)\n this.internalError = true;\n this.internalErrorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n \n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n async selectAll() {\n const allOptions = await this.fetchOptions(0, this.optionCount);\n this.selectAllRecursive(allOptions);\n \n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n private selectAllRecursive(options: Option[]) {\n for (const opt of options) {\n if (opt.children && opt.children.length > 0) {\n this.selectAllRecursive(opt.children);\n } else {\n if (!this.persistentSelectedOptions.some((some) => some.value === opt.value )) {\n opt.selected = true;\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, opt];\n }\n }\n }\n\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n\n option.selected = false;\n option.children.forEach(child => {\n child.selected = false;\n })\n\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n option.selected = true;\n option.children.forEach(child => {\n child.selected = true;\n })\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n option.selected = false;\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n option.selected = true;\n }\n this.updateParentSelectedState();\n }\n\n updateParentSelectedState() {\n this.loadedOptions.forEach(option => {\n if(option.children?.length > 0) {\n if(option.children.every(child => child.selected === true)) option.selected = true;\n else {\n option.selected = false;\n if(this.isOptionIndeterminate(option)) {\n option.indeterminate = true;\n }else{\n option.indeterminate = false;\n }\n }\n }\n });\n }\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 || tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n \n switch (event.code) {\n case 'Enter':\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n break;\n case 'Space': \n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n (options[this.currentIndex] as HTMLElement).focus();\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n \n handleOptionKeyDown(e: KeyboardEvent, option: Option) {\n if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n if(e.key === 'Enter' || e.key === ' ') {\n this.handleOptionClick(option);\n }\n }\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div class=\"option-wrapper\">\n <div class={`option ${isSelected ? 'selected' : ''} ${disableCheckbox ? 'disabled' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}>\n <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option | null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()} ${disableCheckbox ? 'disabled' : ''}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n </div>\n );\n }\n\n private renderSelectAll() {\n const allSelected = this.persistentSelectedOptions.length === this.optionCount;\n const noneSelected = this.persistentSelectedOptions.length === 0;\n const indeterminate = this.optionCount > 0 && !noneSelected && !allSelected;\n\n const that = this;\n function toggleSelectAll() {\n if (allSelected) {\n that.clearSelection();\n } else {\n that.selectAll();\n }\n }\n\n function handleSelectAllKeydown(e: KeyboardEvent) {\n if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n if(e.key === 'Enter' || e.key === ' ') {\n toggleSelectAll();\n }\n }\n\n return <div class=\"select-all-wrapper\">\n <div class={`option ${this.getSizeClass()}`} tabindex='0' onKeyDown={(e) => handleSelectAllKeydown(e)} onClick={toggleSelectAll}>\n <ifx-checkbox tabIndex={-1} id='selectAll' checked={allSelected} indeterminate={indeterminate} size=\"s\"></ifx-checkbox>\n <label htmlFor='selectAll'>Select all</label>\n </div>\n <ifx-dropdown-separator></ifx-dropdown-separator>\n </div>;\n }\n\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n {this.showSearch && <input type=\"text\" role=\"textbox\" class=\"search-input\" onKeyDown={(e) => { e.stopPropagation() }} onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>}\n {this.showSelectAll && this.renderSelectAll()}\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/* Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && ( \n <div class=\"ifx-clear-button\" onClick={this.disabled ? undefined : () => this.clearSelection()}>\n <ifx-icon icon=\"cremove16\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.internalErrorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"version":3}

package/dist/components/{p-3baaa460.js → p-094bb435.js} RENAMED Viewed

@@ -22,14 +22,14 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
         }
     }
     render() {
-        return (h("div", { key: '663e6aac2f3002d3898856b854dbfd96d9519a68', class: "accordion-wrapper" }, h("slot", { key: '0f54044bc1e0d2860ccd3096ee2711eb0a1cb927' })));
+        return (h("div", { key: 'a69a6bea9d5347c0e1808d4635d458ce16614000', class: "accordion-wrapper" }, h("slot", { key: '389e9039f9272a88d95aca8b83efbb754736a5dd' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get style() { return IfxAccordionStyle0; }
 }, [17, "ifx-accordion", {
         "autoCollapse": [4, "auto-collapse"]
-    }, [[0, "ifxOpen", "onItemOpen"]]]);
+    }, [[0, "ifxItemOpen", "onItemOpen"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -46,4 +46,4 @@ function defineCustomElement() {
 export { Accordion as A, defineCustomElement as d };
-//# sourceMappingURL=p-3baaa460.js.map
+//# sourceMappingURL=p-094bb435.js.map

package/dist/components/{p-3baaa460.js.map → p-094bb435.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~3baaa460~~.js","mappings":";;AAAA,MAAM,YAAY,GAAG,gNAAgN,CAAC;AACtO,2BAAe,YAAY;;MCOd,SAAS;;;;;4BAEY,KAAK;;IAIrC,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n\n @Listen('~~ifxOpen~~')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-094bb435.js","mappings":";;AAAA,MAAM,YAAY,GAAG,gNAAgN,CAAC;AACtO,2BAAe,YAAY;;MCOd,SAAS;;;;;4BAEY,KAAK;;IAIrC,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n\n @Listen('ifxItemOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-7b5e297f.js → p-23cdd5a7.js} RENAMED Viewed

@@ -41,8 +41,8 @@ const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
     toggleItemSelection() {
         this.selected = !this.selected;
     }
-    emitIfxChipItemSelectEvent(emitIfxChange = true) {
-        this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,
+    emitIfxChipItemSelectEvent(emitIfxChipChange = true) {
+        this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,
             key: this.chipState.key,
             label: this.getItemLabel(),
             selected: this.selected,
@@ -66,9 +66,9 @@ const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: 'a4d81329a7a5bbbc71b66b0f02f32302e3edd6bd', class: `chip-item chip-item--${this.chipState.size}
+        return (h("div", { key: '493fe2e521f96fbe65792b4364c32a3010a4ae86', class: `chip-item chip-item--${this.chipState.size}
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: '26865e6c41a95e1a92a0bbcb444ffd99b06b6f6b', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '8a48897962af2131d6f574d602b71e035b2f46a6', class: 'chip-item__label' }, " ", h("slot", { key: '2945084fa15c686cc6456761f4ca67370d6418b3' }), " "), h("div", { key: '94e48f99ce3629f73d2a82530626474a50d0d9c1', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: 'e9aaef0ae55766df51d8d293bb4405703dcdead8', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
+            h("ifx-checkbox", { key: '3f65da6457afbeca9e5e803f2569263b499fe839', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '02a710f81308419623960d15270f719c45f5fd11', class: 'chip-item__label' }, " ", h("slot", { key: 'ad971a10884b08cf3775f7296a44c7aff1769a0b' }), " "), h("div", { key: '2ba702249a7fc67ded010890181f5b35494df843', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '887b43ff1b8c6539b01c0fc620f51d9bc04a05d9', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
     }
     get chipItem() { return this; }
     static get watchers() { return {
@@ -108,4 +108,4 @@ function defineCustomElement() {
 export { ChipItem as C, defineCustomElement as d };
-//# sourceMappingURL=p-7b5e297f.js.map
+//# sourceMappingURL=p-23cdd5a7.js.map

package/dist/components/p-23cdd5a7.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-23cdd5a7.js","mappings":"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","names":[],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n user-select: none;\n \n transition: all 100ms ease;\n transition-property: background, color;\n \n &:hover {\n cursor: pointer;\n \n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n }\n \n &.chip-item--large {\n font: tokens.$ifxBodyBody03;\n }\n \n &.chip-item--small {\n font: tokens.$ifxBodyBody04;\n }\n\n &.chip-item--selected {\n color: tokens.$ifxColorOcean500;\n\n .chip-item__selected-indicator {\n display: block;\n }\n }\n}\n\n.chip-item__selected-indicator {\n display: none;\n \n margin-left: auto;\n}\n\n","import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. */\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n /* Do not emit if ChipState does not allow. */\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' || event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n /* Propogating the selected state to the Chip (Parent) component if it is set. */\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/* Checkbox; renders only in 'multi' variant. */}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/* Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"],"version":3}

package/dist/components/{p-b85fba0e.js → p-2f1e7628.js} RENAMED Viewed

@@ -12,6 +12,8 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.__registerHost();
         this.__attachShadow();
         this.ifxPageChange = createEvent(this, "ifxPageChange", 7);
+        this.ifxNextPage = createEvent(this, "ifxNextPage", 7);
+        this.ifxPrevPage = createEvent(this, "ifxPrevPage", 7);
         this.CLASS_DISABLED = "disabled";
         this.CLASS_ACTIVE = "active";
         this.CLASS_SIBLING_ACTIVE = "active-sibling";
@@ -148,7 +150,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'db55804ece2792b117f6f5375a6f63253679a393', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'bc40446f5905c3f249d243993d7363479d6ce384', class: 'items__per-page-wrapper' }, h("div", { key: '9c15d938fc18b93fc7e8c10339b71649575386ca', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0b7ba079ffa28c5732df989988afd65396c8adc9', class: 'items__per-page-field' }, h("ifx-select", { key: '1a031fa45753fc389e3ab386ab6170f50d1df0f0', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: 'd5bd11d957dd37b5af1df9d285ae4098c93c3365', class: 'items__total-wrapper' }, h("div", { key: '295766066233b8b0f975abcc093cc43839b46125', class: 'page__numbers-wrapper' }, h("div", { key: '574f2ef606d94c2a6ad16c9b9684f158f3595422', class: "pagination" }, h("ifx-icon-button", { key: 'f98a3b995d2f08124e2f2e3f96e64cccd7b81b33', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '07630c257729a369d07baf12e99c0469fccebe0d' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '8407562df387e20efa76fdf6ee2d1fe65e6eb6f6', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'b9e1b525f3a20354d409c93a1aa0faa9d9d17019', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'fc932c8e4114f39e5df86007d3595f72fac6384a', class: 'items__per-page-wrapper' }, h("div", { key: '93816bd9264a8cd32d782cc78df9052ab93f76a7', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '3432585bf8ce77786657f676fdaca27aba34b413', class: 'items__per-page-field' }, h("ifx-select", { key: 'a6def492e7db12fb2d9245a6655aaecb99282ceb', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: '275104906a9d0e733644e2b5efbab477ecfc95ca', class: 'items__total-wrapper' }, h("div", { key: '75528c52f8be0724c332daf2f292c1ec852f6e53', class: 'page__numbers-wrapper' }, h("div", { key: '4e350e7002b1de2e5fc2c16d10b4a035a3bdedad', class: "pagination" }, h("ifx-icon-button", { key: '42a3fe966d4bae2bc90b24709293237a5b57c413', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '5d5f20215e988d2adc10f842be5b9300f30b1fd1' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'ebb0d3ef295477810891b41ca03ae42cdb634cf7', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     get el() { return this; }
     static get style() { return IfxPaginationStyle0; }
@@ -190,4 +192,4 @@ function defineCustomElement() {
 export { Pagination as P, defineCustomElement as d };
-//# sourceMappingURL=p-b85fba0e.js.map
+//# sourceMappingURL=p-2f1e7628.js.map

package/dist/components/p-2f1e7628.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-2f1e7628.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n font-family: var(--ifx-font-family);\n\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label {\n color: #1D1D1D;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n }\n\n & .items__per-page-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n & ifx-select {\n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item {\n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active {\n background-color: #0A8276;\n\n & span {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover:not(.active) {\n background-color: #ddd;\n\n }\n\n &:active:not(.active) {\n background-color: #575352;\n }\n\n & span {\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type {\n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type {\n margin-left: 12px;\n }\n}\n\na {\n padding: 8px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) {\n & a {\n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a {\n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active {\n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n align-items: center;\n }\n}\n\n.prev,\n.next {\n &.disabled {\n cursor: default;\n\n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n\n.prev {\n margin-right: 2.5px;\n}\n\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n\n @if($before) {\n margin-right: 6px;\n }\n\n @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n\n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n\n// $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n\n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n\n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n\n// }\n\n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n\n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n\n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n\n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n\n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n\n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n\n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n\n\n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n\n &:first-child,\n &.active-sibling,\n &.active,\n &.active+li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n &~li {\n // Start out with all siblings hidden\n display: none;\n\n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true);\n }\n\n // Show ellipsis after the next one\n &.active+li:after {\n @include ellipsis(false);\n }\n\n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n\n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n\n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n &:before,\n &:after {\n display: none !important;\n }\n }\n }\n\n &.active,\n &~li.active {\n\n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n\n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n\n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n\n\n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n\n // \"active\" should never show ellipsis\n &:before,\n &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Event() ifxNextPage: EventEmitter;\n @Event() ifxPrevPage: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() itemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n if(e.detail) {\n this.itemsPerPage = parseInt(e.detail.label)\n } else { \n this.itemsPerPage = 10;\n }\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n const itemsPerPage = this.itemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.itemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}

package/dist/components/{p-053d42ef.js → p-b2439194.js} RENAMED Viewed

@@ -9,11 +9,11 @@ const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.ifxOpen = createEvent(this, "ifxOpen", 7);
-        this.ifxClose = createEvent(this, "ifxClose", 7);
+        this.ifxItemOpen = createEvent(this, "ifxItemOpen", 7);
+        this.ifxItemClose = createEvent(this, "ifxItemClose", 7);
         this.caption = undefined;
         this.open = false;
-        this.AriaLevel = 3;
+        this.AriaLive = 3;
         this.internalOpen = false;
     }
     componentWillLoad() {
@@ -32,10 +32,10 @@ const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem
         this.internalOpen = !this.internalOpen;
         this.open = this.internalOpen;
         if (this.internalOpen) {
-            this.ifxOpen.emit({ isOpen: this.internalOpen });
+            this.ifxItemOpen.emit({ isOpen: this.internalOpen });
         }
         else {
-            this.ifxClose.emit({ isClosed: !this.internalOpen });
+            this.ifxItemClose.emit({ isClosed: !this.internalOpen });
         }
     }
     openAccordionItem() {
@@ -77,7 +77,7 @@ const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem
         }
     }
     render() {
-        return (h("div", { key: '90b42fe0fdc59bcb707cdbd345d457a651cadd34', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '691f906ddcf27924b85cb06a7cd1d469bed4b57d', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, h("span", { key: '5a83c087659f68747176e3bc26d6653b4db9dcaf', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '050e89939de98c6e22b6a0563ebc7213e7204b0f', icon: "chevron-down-12" })), h("span", { key: '960c0ba799af03b588ac53dd5ef4b3071e2f83f4', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '64a83fedce2c9b0b9a5c65a7fbcd3b76e156dd56', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '59033c70e0ac0990cd7bdf60e131d2091339b314', class: "inner-content" }, h("slot", { key: 'a73b3a5b932c9e71275dd4735142cd4fc222e404', onSlotchange: (e) => this.handleSlotChange(e) })))));
+        return (h("div", { key: '1215772109c33556d626f4a7d40d6655684806a2', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '30e7771bae93c213d9f95126886d7552ebe03b94', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, h("span", { key: '7da5f484c41f9f01dd7eec5092ec8ad82947d481', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLive), class: "accordion-icon" }, h("ifx-icon", { key: 'e64e478a66fd0dd2c3d3608294a6160aa4232952', icon: "chevron-down-12" })), h("span", { key: '7e1ff777da8ce68d6d5f1266512fbd05731169f5', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '144fa8393da592e1d928b51d7b4ad48d6b06a100', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '28702f514d9bd400499a49a3b1cd675f56d7fcad', class: "inner-content" }, h("slot", { key: 'e40109a457e4b1cc09c8234d5003361bb6c1c6fb', onSlotchange: (e) => this.handleSlotChange(e) })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]
@@ -86,7 +86,7 @@ const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem
 }, [1, "ifx-accordion-item", {
         "caption": [1],
         "open": [1028],
-        "AriaLevel": [2, "aria-level"],
+        "AriaLive": [2, "aria-live"],
         "internalOpen": [32]
     }, [[0, "keydown", "handleKeydown"]], {
         "open": ["openChanged"]
@@ -112,4 +112,4 @@ function defineCustomElement() {
 export { IfxAccordionItem as I, defineCustomElement as d };
-//# sourceMappingURL=p-053d42ef.js.map
+//# sourceMappingURL=p-b2439194.js.map

package/dist/components/{p-053d42ef.js.map → p-b2439194.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~053d42ef~~.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,ioCAAioC,CAAC;AAC3pC,+BAAe,gBAAgB;;MCOlB,gBAAgB;;;;;;;;oBAIR,KAAK;~~yBACJ~~,CAAC;~~4BACY~~,KAAK;;IAMtC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KAC/B;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;IAED,kBAAkB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;IAKD,WAAW,CAAC,QAAiB;QAC3B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IAED,UAAU;QACR,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE9B,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,~~OAAO~~,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;~~SAClD~~;aAAM;YACL,IAAI,CAAC,~~QAAQ~~,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;~~SACtD~~;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;SACrE;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;SACtC;KACF;IAED,gBAAgB,CAAC,CAAC;QAChB,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;QAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC;QAE1C,IAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,aAAa,EAAE,CAAC;oBACrD,KAAI,IAAI,QAAQ,IAAI,aAAa,EAAE;wBACjC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;4BACjC,IAAI,IAAI,CAAC,YAAY,EAAE;gCACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;6BAC1B;yBACF;qBACF;iBACF,CAAC,CAAC;gBACH,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;aAC9E,CAAC,CAAC;SACJ;QAED,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAKD,aAAa,CAAC,EAAiB;QAC7B,QAAQ,EAAE,CAAC,GAAG;YACZ,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM;SACT;KACF;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,EAAE,EAAE,IAC7D,4DAAK,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,YAAY,mBAAgB,mBAAmB,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAC,GAAG,IAC3J,4EAAkB,MAAM,EAAC,IAAI,EAAC,SAAS,gBAAa,MAAM,CAAC,IAAI,CAAC,~~SAAS~~,CAAW,EAAE,KAAK,EAAC,gBAAgB,~~IAC1G~~,iEAAU,IAAI,EAAC,iBAAiB,GAAE,CAC7B,EACP,6DAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxE,EACN,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,qBAAiB,mBAAmB,IACxJ,4DAAK,KAAK,EAAC,eAAe,IACxB,6DAAM,YAAY,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACnD,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n overflow: hidden;\n transition: all 0.3s;\n font-family: var(--ifx-font-family);\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words /\n word-wrap: break-word;\n / breaks text within a word if necessary /\n overflow-wrap: anywhere;\n align-self: stretch;\n\n / breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: inline-block;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() ~~AriaLevel~~ = 3;\n @State() internalOpen: boolean = false;\n @Event() ~~ifxOpen~~: EventEmitter;\n @Event() ~~ifxClose~~: EventEmitter;\n private contentEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.~~ifxOpen~~.emit({ isOpen: this.internalOpen });\n } else {\n this.~~ifxClose~~.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.~~AriaLevel~~) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-12\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"p-b2439194.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n overflow: hidden;\n transition: all 0.3s;\n font-family: var(--ifx-font-family);\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words /\n word-wrap: break-word;\n / breaks text within a word if necessary /\n overflow-wrap: anywhere;\n align-self: stretch;\n\n / breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: inline-block;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLive = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxItemOpen: EventEmitter;\n @Event() ifxItemClose: EventEmitter;\n private contentEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxItemOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxItemClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLive) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-12\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}