@infineon/infineon-design-system-stencil 20.37.3 → 20.37.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/ifx-tabs.cjs.entry.js +10 -15
  2. package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
  3. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/components/tabs/tabs.js +11 -18
  6. package/dist/collection/components/tabs/tabs.js.map +1 -1
  7. package/dist/esm/ifx-tabs.entry.js +10 -15
  8. package/dist/esm/ifx-tabs.entry.js.map +1 -1
  9. package/dist/esm/infineon-design-system-stencil.js +1 -1
  10. package/dist/esm/loader.js +1 -1
  11. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  12. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  13. package/dist/infineon-design-system-stencil/p-e04ec23b.entry.js +2 -0
  14. package/dist/infineon-design-system-stencil/p-e04ec23b.entry.js.map +1 -0
  15. package/dist/types/components/tabs/tabs.d.ts +1 -1
  16. package/package.json +1 -1
  17. package/dist/infineon-design-system-stencil/p-91cbe514.entry.js +0 -2
  18. package/dist/infineon-design-system-stencil/p-91cbe514.entry.js.map +0 -1
package/dist/cjs/ifx-tabs.cjs.entry.js CHANGED
@@ -23,15 +23,12 @@ const IfxTabs = class {
23
23
  }
24
24
  componentWillLoad() {
25
25
  this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
26
+ if (this.internalActiveTabIndex !== this.activeTabIndex) {
27
+ this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
28
+ }
26
29
  this.internalActiveTabIndex = this.activeTabIndex;
27
30
  this.internalFocusedTabIndex = this.internalActiveTabIndex;
28
- }
29
- activeTabIndexChanged(newValue, oldValue) {
30
- if (newValue !== oldValue) {
31
- this.internalActiveTabIndex = newValue;
32
- this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });
33
- this.updateTabStyles();
34
- }
31
+ this.updateTabStyles();
35
32
  }
36
33
  updateTabStyles() {
37
34
  this.tabHeaderRefs.forEach((tab, index) => {
@@ -69,7 +66,6 @@ const IfxTabs = class {
69
66
  this.tabRefs = Array.from(tabs);
70
67
  this.tabRefs.forEach((tab, index) => {
71
68
  tab.setAttribute('slot', `tab-${index}`);
72
- tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
73
69
  });
74
70
  }
75
71
  setDefaultOrientation() {
@@ -122,6 +118,11 @@ const IfxTabs = class {
122
118
  const isDisabled = this.tabObjects[index].disabled;
123
119
  return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
124
120
  }
121
+ handleClick(tab, index) {
122
+ this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
123
+ if (!tab.disabled)
124
+ this.internalActiveTabIndex = index;
125
+ }
125
126
  handleKeyDown(ev) {
126
127
  if (ev.key === 'Tab') {
127
128
  if (ev.shiftKey) {
@@ -158,15 +159,9 @@ const IfxTabs = class {
158
159
  render() {
159
160
  var _a;
160
161
  return (index.h("div", { "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, index.h("ul", { role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
161
- _a.map((tab, index$1) => (index.h("li", { class: this.getTabItemClass(index$1), ref: (el) => (this.tabHeaderRefs[index$1] = el), tabindex: "0", onClick: () => {
162
- if (!tab.disabled)
163
- this.internalActiveTabIndex = index$1;
164
- }, "aria-selected": index$1 === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), index.h("div", { class: "active-border" })), index.h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
162
+ _a.map((tab, index$1) => (index.h("li", { class: this.getTabItemClass(index$1), ref: (el) => (this.tabHeaderRefs[index$1] = el), tabindex: "0", onClick: () => this.handleClick(tab, index$1), "aria-selected": index$1 === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), index.h("div", { class: "active-border" })), index.h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
165
163
  }
166
164
  get el() { return index.getElement(this); }
167
- static get watchers() { return {
168
- "activeTabIndex": ["activeTabIndexChanged"]
169
- }; }
170
165
  };
171
166
  IfxTabs.style = tabsCss;
172
167
 
package/dist/cjs/ifx-tabs.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-tabs.entry.cjs.js","mappings":"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","names":["h","index"],"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: tokens.$ifxFontFamilyBody;\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, width 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.tab-item {\n // Reduced padding values\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\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, Watch, Event, EventEmitter } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n this.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n }\n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalActiveTabIndex = newValue;\n this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });\n this.updateTabStyles();\n }\n }\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 }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\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 tabindex=\"0\"\n onClick={() => { if (!tab.disabled) this.internalActiveTabIndex = index; }}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\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.entry.cjs.js","mappings":"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","names":["h","index"],"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: tokens.$ifxFontFamilyBody;\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, width 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.tab-item {\n // Reduced padding values\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\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 } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 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.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n this.updateTabStyles();\n }\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 }\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\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 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 tabindex=\"0\"\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?.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/cjs/infineon-design-system-stencil.cjs.js CHANGED
@@ -40,7 +40,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
40
40
  };
41
41
 
42
42
  patchBrowser().then(options => {
43
- return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
43
+ return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
44
44
  });
45
45
 
46
46
  exports.setNonce = index.setNonce;
package/dist/cjs/loader.cjs.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-e8b51424.js');
6
6
 
7
7
  const defineCustomElements = (win, options) => {
8
8
  if (typeof window === 'undefined') return undefined;
9
- return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
9
+ return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
10
10
  };
11
11
 
12
12
  exports.setNonce = index.setNonce;
package/dist/collection/components/tabs/tabs.js CHANGED
@@ -15,15 +15,13 @@ export class IfxTabs {
15
15
  }
16
16
  componentWillLoad() {
17
17
  this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
18
+ if (this.internalActiveTabIndex !== this.activeTabIndex) {
19
+ this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
20
+ }
21
+ ;
18
22
  this.internalActiveTabIndex = this.activeTabIndex;
19
23
  this.internalFocusedTabIndex = this.internalActiveTabIndex;
20
- }
21
- activeTabIndexChanged(newValue, oldValue) {
22
- if (newValue !== oldValue) {
23
- this.internalActiveTabIndex = newValue;
24
- this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });
25
- this.updateTabStyles();
26
- }
24
+ this.updateTabStyles();
27
25
  }
28
26
  updateTabStyles() {
29
27
  this.tabHeaderRefs.forEach((tab, index) => {
@@ -61,7 +59,6 @@ export class IfxTabs {
61
59
  this.tabRefs = Array.from(tabs);
62
60
  this.tabRefs.forEach((tab, index) => {
63
61
  tab.setAttribute('slot', `tab-${index}`);
64
- tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
65
62
  });
66
63
  }
67
64
  setDefaultOrientation() {
@@ -114,6 +111,11 @@ export class IfxTabs {
114
111
  const isDisabled = this.tabObjects[index].disabled;
115
112
  return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
116
113
  }
114
+ handleClick(tab, index) {
115
+ this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
116
+ if (!tab.disabled)
117
+ this.internalActiveTabIndex = index;
118
+ }
117
119
  handleKeyDown(ev) {
118
120
  if (ev.key === 'Tab') {
119
121
  if (ev.shiftKey) {
@@ -150,10 +152,7 @@ export class IfxTabs {
150
152
  render() {
151
153
  var _a;
152
154
  return (h("div", { "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
153
- _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), tabindex: "0", onClick: () => {
154
- if (!tab.disabled)
155
- this.internalActiveTabIndex = index;
156
- }, "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), h("div", { class: "active-border" })), h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
155
+ _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), tabindex: "0", onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), h("div", { class: "active-border" })), h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
157
156
  }
158
157
  static get is() { return "ifx-tabs"; }
159
158
  static get encapsulation() { return "shadow"; }
@@ -253,12 +252,6 @@ export class IfxTabs {
253
252
  }];
254
253
  }
255
254
  static get elementRef() { return "el"; }
256
- static get watchers() {
257
- return [{
258
- "propName": "activeTabIndex",
259
- "methodName": "activeTabIndexChanged"
260
- }];
261
- }
262
255
  static get listeners() {
263
256
  return [{
264
257
  "name": "slotchange",
package/dist/collection/components/tabs/tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Watch, Event, EventEmitter } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n this.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n }\n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalActiveTabIndex = newValue;\n this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });\n this.updateTabStyles();\n }\n }\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 }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\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 tabindex=\"0\"\n onClick={() => { if (!tab.disabled) this.internalActiveTabIndex = index; }}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\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}"]}
1
+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 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.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n this.updateTabStyles();\n }\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 }\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\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 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 tabindex=\"0\"\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?.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}"]}
package/dist/esm/ifx-tabs.entry.js CHANGED
@@ -19,15 +19,12 @@ const IfxTabs = class {
19
19
  }
20
20
  componentWillLoad() {
21
21
  this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
22
+ if (this.internalActiveTabIndex !== this.activeTabIndex) {
23
+ this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
24
+ }
22
25
  this.internalActiveTabIndex = this.activeTabIndex;
23
26
  this.internalFocusedTabIndex = this.internalActiveTabIndex;
24
- }
25
- activeTabIndexChanged(newValue, oldValue) {
26
- if (newValue !== oldValue) {
27
- this.internalActiveTabIndex = newValue;
28
- this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });
29
- this.updateTabStyles();
30
- }
27
+ this.updateTabStyles();
31
28
  }
32
29
  updateTabStyles() {
33
30
  this.tabHeaderRefs.forEach((tab, index) => {
@@ -65,7 +62,6 @@ const IfxTabs = class {
65
62
  this.tabRefs = Array.from(tabs);
66
63
  this.tabRefs.forEach((tab, index) => {
67
64
  tab.setAttribute('slot', `tab-${index}`);
68
- tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
69
65
  });
70
66
  }
71
67
  setDefaultOrientation() {
@@ -118,6 +114,11 @@ const IfxTabs = class {
118
114
  const isDisabled = this.tabObjects[index].disabled;
119
115
  return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
120
116
  }
117
+ handleClick(tab, index) {
118
+ this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
119
+ if (!tab.disabled)
120
+ this.internalActiveTabIndex = index;
121
+ }
121
122
  handleKeyDown(ev) {
122
123
  if (ev.key === 'Tab') {
123
124
  if (ev.shiftKey) {
@@ -154,15 +155,9 @@ const IfxTabs = class {
154
155
  render() {
155
156
  var _a;
156
157
  return (h("div", { "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
157
- _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), tabindex: "0", onClick: () => {
158
- if (!tab.disabled)
159
- this.internalActiveTabIndex = index;
160
- }, "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), h("div", { class: "active-border" })), h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
158
+ _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), tabindex: "0", onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), h("div", { class: "active-border" })), h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
161
159
  }
162
160
  get el() { return getElement(this); }
163
- static get watchers() { return {
164
- "activeTabIndex": ["activeTabIndexChanged"]
165
- }; }
166
161
  };
167
162
  IfxTabs.style = tabsCss;
168
163
 
package/dist/esm/ifx-tabs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-tabs.entry.js","mappings":"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","names":[],"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: tokens.$ifxFontFamilyBody;\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, width 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.tab-item {\n // Reduced padding values\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\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, Watch, Event, EventEmitter } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n this.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n }\n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalActiveTabIndex = newValue;\n this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });\n this.updateTabStyles();\n }\n }\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 }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\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 tabindex=\"0\"\n onClick={() => { if (!tab.disabled) this.internalActiveTabIndex = index; }}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\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.entry.js","mappings":"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","names":[],"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: tokens.$ifxFontFamilyBody;\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, width 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.tab-item {\n // Reduced padding values\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\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 } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 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.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n this.updateTabStyles();\n }\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 }\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\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 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 tabindex=\"0\"\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?.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/esm/infineon-design-system-stencil.js CHANGED
@@ -37,7 +37,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
37
37
  };
38
38
 
39
39
  patchBrowser().then(options => {
40
- return bootstrapLazy(JSON.parse("[[\"ifx-faq\",[[1,\"ifx-faq\"]]],[\"ifx-modal\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column\",[[1,\"ifx-footer-column\"]]],[\"ifx-link\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-icon\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
40
+ return bootstrapLazy(JSON.parse("[[\"ifx-faq\",[[1,\"ifx-faq\"]]],[\"ifx-modal\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column\",[[1,\"ifx-footer-column\"]]],[\"ifx-link\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ifx-icon\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
41
41
  });
42
42
 
43
43
  //# sourceMappingURL=infineon-design-system-stencil.js.map
package/dist/esm/loader.js CHANGED
@@ -3,7 +3,7 @@ export { s as setNonce } from './index-34963df7.js';
3
3
 
4
4
  const defineCustomElements = (win, options) => {
5
5
  if (typeof window === 'undefined') return undefined;
6
- return bootstrapLazy(JSON.parse("[[\"ifx-faq\",[[1,\"ifx-faq\"]]],[\"ifx-modal\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column\",[[1,\"ifx-footer-column\"]]],[\"ifx-link\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-icon\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
6
+ return bootstrapLazy(JSON.parse("[[\"ifx-faq\",[[1,\"ifx-faq\"]]],[\"ifx-modal\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showModal\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-pagination\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-multiselect\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-alert\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-icons-preview\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-sidebar-item\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tag\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"ifx-breadcrumb\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-footer\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"medium\":[32]}]]],[\"ifx-footer-column\",[[1,\"ifx-footer-column\"]]],[\"ifx-link\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"size\":[1],\"variant\":[1]}]]],[\"ifx-list-group\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4]}]]],[\"ifx-table\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-tabs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"ifx-icon\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-search-field\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-button\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"href\":[\"setInternalHref\"]}]]]]"), options);
7
7
  };
8
8
 
9
9
  export { defineCustomElements };
package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as i,b as a}from"./p-8faa5e95.js";export{s as setNonce}from"./p-8faa5e95.js";const t=()=>{{n(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const n=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};t().then((e=>a(JSON.parse('[["p-1556fa15",[[1,"ifx-faq"]]],["p-087a7000",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-afee16a1",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-9a18e7e5",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-bb892815",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-b00de336",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-cdce82f2",[[1,"ifx-alert",{"variant":[1],"icon":[1]}]]],["p-dc5db97f",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-8da56a38",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-3ebe1789",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-7c52cb4d",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-a3d60d08",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-b922bccd",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-8c900670",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-2ace3cd4",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a4dc9d69",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-e8efbe5d",[[1,"ifx-tag",{"icon":[1]}]]],["p-fff21b9b",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5bf4e6a8",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-d2d626a8",[[1,"ifx-badge"]]],["p-88ec12f3",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-57fbac9f",[[1,"ifx-breadcrumb"]]],["p-9c052f90",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-f2a060b0",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-41096b8a",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-3ec87d76",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-f9511c3f",[[1,"ifx-card-links"]]],["p-cb46b29f",[[1,"ifx-card-overline"]]],["p-c976b0fa",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-26545c0a",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c65373ba",[[1,"ifx-dropdown-header"]]],["p-99a1e9b4",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-7cc637e8",[[1,"ifx-dropdown-separator"]]],["p-7675a429",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-b932636d",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-0a8ce360",[[1,"ifx-footer-column"]]],["p-cbb04874",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["p-c9956712",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-31f457fc",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-768d60dc",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-99a30312",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-63ea6580",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-0e792bf0",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-8dca64d7",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["p-c6fdedf4",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["p-77636f33",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-f9058c07",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a29c7fd5",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-3c15a6a5",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-91cbe514",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-8227f4d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-d937b994",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-9939a3a3",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-0936866a",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c035e79c",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-c45ff34a",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-af6d8fed",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-7cf76db9",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"]],{"href":["setInternalHref"]}]]]]'),e)));
1
+ import{p as e,H as i,b as a}from"./p-8faa5e95.js";export{s as setNonce}from"./p-8faa5e95.js";const t=()=>{{n(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const n=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};t().then((e=>a(JSON.parse('[["p-1556fa15",[[1,"ifx-faq"]]],["p-087a7000",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-afee16a1",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-9a18e7e5",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-bb892815",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-b00de336",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-cdce82f2",[[1,"ifx-alert",{"variant":[1],"icon":[1]}]]],["p-dc5db97f",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-8da56a38",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-3ebe1789",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-7c52cb4d",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-a3d60d08",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-b922bccd",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-8c900670",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-2ace3cd4",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a4dc9d69",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-e8efbe5d",[[1,"ifx-tag",{"icon":[1]}]]],["p-fff21b9b",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5bf4e6a8",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-d2d626a8",[[1,"ifx-badge"]]],["p-88ec12f3",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-57fbac9f",[[1,"ifx-breadcrumb"]]],["p-9c052f90",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-f2a060b0",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-41096b8a",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-3ec87d76",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-f9511c3f",[[1,"ifx-card-links"]]],["p-cb46b29f",[[1,"ifx-card-overline"]]],["p-c976b0fa",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-26545c0a",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c65373ba",[[1,"ifx-dropdown-header"]]],["p-99a1e9b4",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-7cc637e8",[[1,"ifx-dropdown-separator"]]],["p-7675a429",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-b932636d",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-0a8ce360",[[1,"ifx-footer-column"]]],["p-cbb04874",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["p-c9956712",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-31f457fc",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-768d60dc",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-99a30312",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-63ea6580",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-0e792bf0",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-8dca64d7",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["p-c6fdedf4",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["p-77636f33",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-f9058c07",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a29c7fd5",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-3c15a6a5",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-e04ec23b",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]]]]],["p-8227f4d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-d937b994",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-9939a3a3",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-0936866a",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c035e79c",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-c45ff34a",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-af6d8fed",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-7cf76db9",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"]],{"href":["setInternalHref"]}]]]]'),e)));
2
2
  //# sourceMappingURL=infineon-design-system-stencil.esm.js.map
package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.5.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"6FAKA,MAAMA,EAAe,KAKO,CAEpBC,EAAkBC,EAAEC,UAC5B,CAiBI,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,EAE/B,MAAML,EAAqBU,IACvB,MAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,EAChD,CACQ,MAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,MAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,MACtE,CACA,CACA,CACQ,OAAOK,CACf,CAAK,EClDLlB,IAAeyB,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,4xUAAuCH"}
1
+ {"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.5.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"6FAKA,MAAMA,EAAe,KAKO,CAEpBC,EAAkBC,EAAEC,UAC5B,CAiBI,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,EAE/B,MAAML,EAAqBU,IACvB,MAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,EAChD,CACQ,MAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,MAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,MACtE,CACA,CACA,CACQ,OAAOK,CACf,CAAK,EClDLlB,IAAeyB,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,+uUAAuCH"}
package/dist/infineon-design-system-stencil/p-e04ec23b.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,c as i,h as s,g as e}from"./p-8faa5e95.js";const a='*{font-family:"Source Sans 3"}:host{display:flex}.tabs{display:flex;font-family:"Source Sans 3"}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, width 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tab-item{padding:8px 16px;cursor:pointer;position:relative}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const o=class{constructor(s){t(this,s);this.ifxTabChange=i(this,"ifxTabChange",7);this.tabs=[];this.orientation="horizontal";this.activeTabIndex=0;this.internalOrientation=undefined;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}componentWillLoad(){this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";if(this.internalActiveTabIndex!==this.activeTabIndex){this.ifxTabChange.emit({previousTab:this.internalActiveTabIndex,currentTab:this.activeTabIndex})}this.internalActiveTabIndex=this.activeTabIndex;this.internalFocusedTabIndex=this.internalActiveTabIndex;this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.onSlotChange();this.updateBorderAndFocus()}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}this.internalFocusedTabIndex=t;if(t>=0&&t<this.tabHeaderRefs.length){this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}this.internalFocusedTabIndex=t;if(t>=0&&t<this.tabHeaderRefs.length){this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;return`tab-item ${i?"active":""} ${s?"disabled":""}`}handleClick(t,i){this.ifxTabChange.emit({previousTab:this.internalActiveTabIndex,currentTab:i});if(!t.disabled)this.internalActiveTabIndex=i}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxTabChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{"aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{role:"tablist",class:"tabs-list"},(t=this.tabObjects)===null||t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,tabindex:"0",onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},t===null||t===void 0?void 0:t.header))),s("div",{class:"active-border"})),s("div",{class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}};o.style=a;export{o as ifx_tabs};
2
+ //# sourceMappingURL=p-e04ec23b.entry.js.map
package/dist/infineon-design-system-stencil/p-e04ec23b.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["tabsCss","IfxTabs","componentWillLoad","this","internalOrientation","orientation","toLowerCase","internalActiveTabIndex","activeTabIndex","ifxTabChange","emit","previousTab","currentTab","internalFocusedTabIndex","updateTabStyles","tabHeaderRefs","forEach","tab","index","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","onSlotChange","tabs","querySelectorAll","tabObjects","Array","from","map","header","disabled","tabRefs","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","updateBorderAndFocus","componentDidUpdate","updateTabFocusability","tabIndex","focusNextTab","nextIndex","length","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleClick","handleKeyDown","ev","key","shiftKey","preventDefault","previouslyActiveTabIndex","render","h","class","role","_a","ref","tabindex","onClick","_","display","name"],"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: tokens.$ifxFontFamilyBody;\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, width 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.tab-item {\n // Reduced padding values\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\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 } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 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.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n this.updateTabStyles();\n }\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 }\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\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 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 tabindex=\"0\"\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?.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}"],"mappings":"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"}
package/dist/types/components/tabs/tabs.d.ts CHANGED
@@ -16,7 +16,6 @@ export declare class IfxTabs {
16
16
  tabObjects: any[];
17
17
  ifxTabChange: EventEmitter;
18
18
  componentWillLoad(): void;
19
- activeTabIndexChanged(newValue: number, oldValue: number): void;
20
19
  updateTabStyles(): void;
21
20
  reRenderBorder(): void;
22
21
  onSlotChange(): void;
@@ -28,6 +27,7 @@ export declare class IfxTabs {
28
27
  private focusNextTab;
29
28
  private focusPreviousTab;
30
29
  private getTabItemClass;
30
+ private handleClick;
31
31
  handleKeyDown(ev: KeyboardEvent): void;
32
32
  render(): any;
33
33
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@infineon/infineon-design-system-stencil",
3
- "version": "20.37.3",
3
+ "version": "20.37.4",
4
4
  "private": false,
5
5
  "description": "Infineon design system Stencil web components",
6
6
  "homepage": "https://github.com/Infineon/infineon-design-system-stencil#readme",
package/dist/infineon-design-system-stencil/p-91cbe514.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as s,g as e}from"./p-8faa5e95.js";const a='*{font-family:"Source Sans 3"}:host{display:flex}.tabs{display:flex;font-family:"Source Sans 3"}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, width 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tab-item{padding:8px 16px;cursor:pointer;position:relative}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const o=class{constructor(s){t(this,s);this.ifxTabChange=i(this,"ifxTabChange",7);this.tabs=[];this.orientation="horizontal";this.activeTabIndex=0;this.internalOrientation=undefined;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}componentWillLoad(){this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";this.internalActiveTabIndex=this.activeTabIndex;this.internalFocusedTabIndex=this.internalActiveTabIndex}activeTabIndexChanged(t,i){if(t!==i){this.internalActiveTabIndex=t;this.ifxTabChange.emit({previousTab:i,currentTab:t});this.updateTabStyles()}}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`);t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.onSlotChange();this.updateBorderAndFocus()}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}this.internalFocusedTabIndex=t;if(t>=0&&t<this.tabHeaderRefs.length){this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}this.internalFocusedTabIndex=t;if(t>=0&&t<this.tabHeaderRefs.length){this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;return`tab-item ${i?"active":""} ${s?"disabled":""}`}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxTabChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{"aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{role:"tablist",class:"tabs-list"},(t=this.tabObjects)===null||t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,tabindex:"0",onClick:()=>{if(!t.disabled)this.internalActiveTabIndex=i},"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},t===null||t===void 0?void 0:t.header))),s("div",{class:"active-border"})),s("div",{class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}static get watchers(){return{activeTabIndex:["activeTabIndexChanged"]}}};o.style=a;export{o as ifx_tabs};
2
- //# sourceMappingURL=p-91cbe514.entry.js.map
package/dist/infineon-design-system-stencil/p-91cbe514.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["tabsCss","IfxTabs","componentWillLoad","this","internalOrientation","orientation","toLowerCase","internalActiveTabIndex","activeTabIndex","internalFocusedTabIndex","activeTabIndexChanged","newValue","oldValue","ifxTabChange","emit","previousTab","currentTab","updateTabStyles","tabHeaderRefs","forEach","tab","index","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","onSlotChange","tabs","querySelectorAll","tabObjects","Array","from","map","header","disabled","tabRefs","tabIndex","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","updateBorderAndFocus","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","length","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleKeyDown","ev","key","shiftKey","preventDefault","previouslyActiveTabIndex","render","h","class","role","_a","ref","tabindex","onClick","_","display","name"],"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: tokens.$ifxFontFamilyBody;\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, width 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.tab-item {\n // Reduced padding values\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\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, Watch, Event, EventEmitter } from '@stencil/core';\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() tabs: { header: string, disabled?: boolean }[] = [];\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\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 componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n this.internalActiveTabIndex = this.activeTabIndex;\n this.internalFocusedTabIndex = this.internalActiveTabIndex;\n }\n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalActiveTabIndex = newValue;\n this.ifxTabChange.emit({ previousTab: oldValue, currentTab: newValue });\n this.updateTabStyles();\n }\n }\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 }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\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.onSlotChange();\n this.updateBorderAndFocus();\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 this.internalFocusedTabIndex = nextIndex;\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\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 this.internalFocusedTabIndex = prevIndex;\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.tabHeaderRefs[prevIndex].focus();\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 return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\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 tabindex=\"0\"\n onClick={() => { if (!tab.disabled) this.internalActiveTabIndex = index; }}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\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}"],"mappings":"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"}