npm - @infineon/infineon-design-system-stencil - Versions diffs - 20.22.0 → 20.22.1 - Mend

@infineon/infineon-design-system-stencil 20.22.0 → 20.22.1

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 (38) hide show

package/dist/cjs/ifx-tab.cjs.entry.js CHANGED Viewed

@@ -9,10 +9,11 @@ const tabCss = ":host{display:block}";
 const IfxTab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.tabBecameActive = index.createEvent(this, "tabBecameActive", 7);
-    this.tabBecameInactive = index.createEvent(this, "tabBecameInactive", 7);
-    this.header = undefined;
   }
+  //@Prop() header: string;
+  //@Prop() disabled: boolean;
+  //@Event({ eventName: 'tabBecameActive' }) tabBecameActive: EventEmitter;
+  //@Event({ eventName: 'tabBecameInactive' }) tabBecameInactive: EventEmitter;
   render() {
     return index.h("slot", null);
   }

package/dist/cjs/ifx-tab.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,sBAAsB;;MCOxB,MAAM~~;;;;;;;EAOjB~~,MAAM;IACJ,OAAOA,qBAAQ,CAAC;GACjB;;;;;;;","names":["h"],"sources":["./src/components/tabs/tab.scss?tag=ifx-tab","./src/components/tabs/tab.tsx"],"sourcesContent":[":host {\n display: block;\n}","import { Component, h, ~~Prop,~~ Element, ~~Event, EventEmitter~~ } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n\n @Event({ eventName: 'tabBecameActive' }) tabBecameActive: EventEmitter;\n @Event({ eventName: 'tabBecameInactive' }) tabBecameInactive: EventEmitter;\n\n render() {\n return <slot />;\n }\n}"],"version":3}
1	+ {"file":"ifx-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,sBAAsB;;MCOxB,MAAM;;;;;;;;EAQjB,MAAM;IACJ,OAAOA,qBAAQ,CAAC;GACjB;;;;;;;","names":["h"],"sources":["./src/components/tabs/tab.scss?tag=ifx-tab","./src/components/tabs/tab.tsx"],"sourcesContent":[":host {\n display: block;\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n //@Prop() header: string;\n //@Prop() disabled: boolean;\n\n //@Event({ eventName: 'tabBecameActive' }) tabBecameActive: EventEmitter;\n //@Event({ eventName: 'tabBecameInactive' }) tabBecameInactive: EventEmitter;\n\n render() {\n return <slot />;\n }\n}"],"version":3}

package/dist/cjs/ifx-tabs.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b797e11e.js');
-const tabsCss = ".tabs{display:flex}.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}.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}.tab-item.active{color:#0A8276}.tab-item{padding:0.5rem 1rem;cursor:pointer;position:relative}.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:1rem;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}";
+const tabsCss = "*{font-family:\"Source Sans 3\"}.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}.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.active{color:#0A8276}.tab-item.disabled{padding:8px 16px;cursor:pointer;position:relative;color:#BFBBBB;pointer-events:none}.tab-item:not(:disabled,.disabled){padding:8px 16px;cursor:pointer;position:relative}.tab-item:not(:disabled,.disabled):hover{color:#0A8276}.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 IfxTabs = class {
   constructor(hostRef) {
@@ -13,11 +13,12 @@ const IfxTabs = class {
     this.tabs = [];
     this.orientation = "";
     this.internalOrientation = undefined;
-    this.small = false;
     this.activeTabIndex = 0;
     this.tabRefs = [];
     this.tabHeaderRefs = [];
     this.tabTitles = [];
+    this.disabledTabs = [];
+    this.tabObjects = [];
   }
   // changing tab
   setActiveTab(index) {
@@ -70,6 +71,13 @@ const IfxTabs = class {
   onSlotChange() {
     const tabs = this.el.querySelectorAll('ifx-tab');
     this.tabTitles = Array.from(tabs).map((tab) => tab.getAttribute('header'));
+    this.disabledTabs = Array.from(tabs).map((tab) => tab.getAttribute('disabled'));
+    this.tabObjects = this.tabTitles.map((header, index) => {
+      return {
+        header: header,
+        disabled: (this.disabledTabs[index] === 'true') // set disabled property based on the corresponding value in the disabledTabs array
+      };
+    });
     this.tabRefs = Array.from(tabs);
     this.tabRefs.forEach((tab, index) => {
       tab.setAttribute('slot', `tab-${index}`);
@@ -95,7 +103,7 @@ const IfxTabs = class {
     this.reRenderBorder();
   }
   render() {
-    return (index.h("div", { class: `tabs ${this.internalOrientation} ${this.small ? 'small' : ''}` }, index.h("ul", { class: "tabs-list" }, this.tabTitles.map((tabTitle, index$1) => (index.h("li", { class: `tab-item ${index$1 === this.activeTabIndex ? 'active' : ''}`, ref: (el) => (this.tabHeaderRefs[index$1] = el), onClick: () => this.setActiveTab(index$1) }, tabTitle))), index.h("div", { class: "active-border" })), index.h("div", { class: "tab-content" }, Array.from(this.tabTitles).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.activeTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
+    return (index.h("div", { class: `tabs ${this.internalOrientation}` }, index.h("ul", { class: "tabs-list" }, this.tabObjects.map((tab, index$1) => (index.h("li", { class: `tab-item ${index$1 === this.activeTabIndex ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, ref: (el) => (this.tabHeaderRefs[index$1] = el), onClick: () => this.setActiveTab(index$1) }, tab.header))), index.h("div", { class: "active-border" })), index.h("div", { class: "tab-content" }, Array.from(this.tabTitles).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.activeTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ifx-tabs.cjs.entry.js.map CHANGED Viewed

	@@ -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\n// :host {\n// display: block;\n// }\n\n.tabs {\n display: flex;\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.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.tab-item.active {\n color: tokens.$ifxColorOcean500;\n}\n\n.tab-item {\n padding: 0.5rem 1rem;\n cursor: pointer;\n position: relative;\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: 1rem;\n flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n font-size: tokens.$ifxFontSizeS; // Add the font-size rule directly here\n}","//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Watch, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\n\nexport class IfxTabs {\n @Element() el: HTMLElement;\n @Prop() tabs: string[] = [];\n @Prop() orientation: string = \"\"\n @State() internalOrientation: string;\n @Prop() small: boolean = false;\n @State() activeTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() tabTitles: string[] = [];\n @Event() ifxTabIndex: EventEmitter;\n\n // changing tab\n setActiveTab(index: number) {\n if (index < 0 \|\| index >= this.tabHeaderRefs.length) {\n return;\n } else {\n const currentActiveTab = this.tabRefs[this.activeTabIndex] as HTMLIfxTabElement;\n if (currentActiveTab) {\n this.emitEvent(currentActiveTab, 'tabBecameInactive');\n }\n\n\n this.ifxTabIndex.emit({ previousTab: this.activeTabIndex, currentTab: index });\n this.activeTabIndex = index;\n\n const newActiveTab = this.tabRefs[index] as HTMLIfxTabElement;\n if (newActiveTab) {\n this.emitEvent(newActiveTab, 'tabBecameActive');\n }\n }\n }\n // Helper method to emit events\n emitEvent(element: HTMLElement, eventName: string) {\n const event = new CustomEvent(eventName, {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\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.activeTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.activeTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.activeTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.activeTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.activeTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n @Watch('orientation')\n onOrientationChange() {\n this.reRenderBorder()\n }\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabTitles = Array.from(tabs).map((tab) => tab.getAttribute('header'));\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 componentWillLoad() {\n this.setDefaultOrientation()\n this.onSlotChange();\n }\n\n componentDidLoad() {\n this.reRenderBorder()\n }\n\n componentDidUpdate() {\n this.reRenderBorder()\n }\n\n render() {\n return (\n <div class={`tabs ${this.internalOrientation} ${this.small ? 'small' : ''}`}>\n <ul class=\"tabs-list\">\n {this.tabTitles.map((tabTitle, index) => (\n <li\n class={`tab-item ${index === this.activeTabIndex ? 'active' : ''}`}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onClick={() => this.setActiveTab(index)}\n >\n {tabTitle}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabTitles).map((_, index) => (\n <div style={{ display: index === this.activeTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\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: block;\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.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.active {\n color: tokens.$ifxColorOcean500;\n}\n\n.tab-item.disabled {\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n}\n\n.tab-item:not(:disabled, .disabled) {\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\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@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\n\nexport class IfxTabs {\n @Element() el: HTMLElement;\n @Prop() tabs: string[] = [];\n @Prop() orientation: string = \"\"\n @State() internalOrientation: string;\n @State() activeTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() tabTitles: string[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n @Event() ifxTabIndex: EventEmitter;\n\n // changing tab\n setActiveTab(index: number) {\n if (index < 0 \|\| index >= this.tabHeaderRefs.length) {\n return;\n } else {\n const currentActiveTab = this.tabRefs[this.activeTabIndex] as HTMLIfxTabElement;\n if (currentActiveTab) {\n this.emitEvent(currentActiveTab, 'tabBecameInactive');\n }\n\n\n this.ifxTabIndex.emit({ previousTab: this.activeTabIndex, currentTab: index });\n this.activeTabIndex = index;\n\n const newActiveTab = this.tabRefs[index] as HTMLIfxTabElement;\n if (newActiveTab) {\n this.emitEvent(newActiveTab, 'tabBecameActive');\n }\n }\n }\n // Helper method to emit events\n emitEvent(element: HTMLElement, eventName: string) {\n const event = new CustomEvent(eventName, {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\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.activeTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.activeTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.activeTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.activeTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.activeTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n @Watch('orientation')\n onOrientationChange() {\n this.reRenderBorder()\n }\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabTitles = Array.from(tabs).map((tab) => tab.getAttribute('header'));\n this.disabledTabs = Array.from(tabs).map((tab) => tab.getAttribute('disabled'));\n\n this.tabObjects = this.tabTitles.map((header, index) => {\n return {\n header: header,\n disabled: (this.disabledTabs[index] === 'true') // set disabled property based on the corresponding value in the disabledTabs array\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 componentWillLoad() {\n this.setDefaultOrientation()\n this.onSlotChange();\n }\n\n componentDidLoad() {\n this.reRenderBorder()\n }\n\n componentDidUpdate() {\n this.reRenderBorder()\n }\n\n render() {\n\n return (\n <div class={`tabs ${this.internalOrientation}`}>\n <ul class=\"tabs-list\">\n {this.tabObjects.map((tab, index) => (\n <li\n class={`tab-item ${index === this.activeTabIndex ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onClick={() => this.setActiveTab(index)}\n >\n {tab.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabTitles).map((_, index) => (\n <div style={{ display: index === this.activeTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n}"],"version":3}

package/dist/cjs/infineon-design-system-stencil.cjs.js CHANGED Viewed

@@ -43,7 +43,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"ifx-button_4.cjs\",[[1,\"ifx-modal\",{\"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],\"open\":[64],\"close\":[64]}],[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}],[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}],[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"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],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[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],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"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],\"showLogo\":[4,\"show-logo\"],\"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]}]]],[\"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]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"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\"]]]]],[\"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-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[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]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"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]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1]}]]],[\"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],\"small\":[4],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"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\"]]]]],[\"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\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"ifx-button_4.cjs\",[[1,\"ifx-modal\",{\"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],\"open\":[64],\"close\":[64]}],[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}],[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}],[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"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],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[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],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"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],\"showLogo\":[4,\"show-logo\"],\"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]}]]],[\"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]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"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\"]]]]],[\"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-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[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]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"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]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\"]]],[\"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],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"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\"]]]]],[\"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\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]]]"), options);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"ifx-button_4.cjs\",[[1,\"ifx-modal\",{\"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],\"open\":[64],\"close\":[64]}],[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}],[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}],[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"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],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[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],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"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],\"showLogo\":[4,\"show-logo\"],\"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]}]]],[\"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]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"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\"]]]]],[\"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-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[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]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"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]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1]}]]],[\"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],\"small\":[4],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"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\"]]]]],[\"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\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"ifx-button_4.cjs\",[[1,\"ifx-modal\",{\"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],\"open\":[64],\"close\":[64]}],[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}],[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}],[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"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],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[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],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"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],\"showLogo\":[4,\"show-logo\"],\"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]}]]],[\"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]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"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\"]]]]],[\"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-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[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]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"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]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\"]]],[\"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],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"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\"]]]]],[\"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\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]]]"), options);
   });
 };

package/dist/collection/components/tabs/tab.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { h } from '@stencil/core';
 export class IfxTab {
-  constructor() {
-    this.header = undefined;
-  }
+  //@Prop() header: string;
+  //@Prop() disabled: boolean;
+  //@Event({ eventName: 'tabBecameActive' }) tabBecameActive: EventEmitter;
+  //@Event({ eventName: 'tabBecameInactive' }) tabBecameInactive: EventEmitter;
   render() {
     return h("slot", null);
   }
@@ -17,60 +18,6 @@ export class IfxTab {
       "$": ["tab.css"]
     };
   }
-  static get properties() {
-    return {
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "header",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabBecameActive",
-        "name": "tabBecameActive",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "tabBecameInactive",
-        "name": "tabBecameInactive",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
   static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=tab.js.map

package/dist/collection/components/tabs/tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,~~IAAI,EAAE,~~OAAO,EAAE,~~KAAK,EAAgB,~~MAAM,eAAe,CAAC;~~AAOjF~~,MAAM,OAAO,MAAM~~;;;;EAOjB~~,MAAM;IACJ,OAAO,eAAQ,CAAC;EAClB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, ~~Prop,~~ Element, ~~Event, EventEmitter~~ } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n\n @Event({ eventName: 'tabBecameActive' }) tabBecameActive: EventEmitter;\n @Event({ eventName: 'tabBecameInactive' }) tabBecameInactive: EventEmitter;\n\n render() {\n return <slot />;\n }\n}"]}
1	+ {"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,MAAM;EAEjB,yBAAyB;EACzB,4BAA4B;EAE5B,yEAAyE;EACzE,6EAA6E;EAE7E,MAAM;IACJ,OAAO,eAAQ,CAAC;EAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n //@Prop() header: string;\n //@Prop() disabled: boolean;\n\n //@Event({ eventName: 'tabBecameActive' }) tabBecameActive: EventEmitter;\n //@Event({ eventName: 'tabBecameInactive' }) tabBecameInactive: EventEmitter;\n\n render() {\n return <slot />;\n }\n}"]}

package/dist/collection/components/tabs/tabs.css CHANGED Viewed

@@ -1,5 +1,10 @@
+* {
+  font-family: "Source Sans 3";
+}
 .tabs {
   display: flex;
+  font-family: "Source Sans 3";
 }
 .tabs.horizontal {
@@ -37,15 +42,31 @@
   border-bottom: none;
 }
+.tabs.vertical .tab-content {
+  padding-top: 0px;
+  padding-left: 32px;
+}
 .tab-item.active {
   color: #0A8276;
 }
-.tab-item {
-  padding: 0.5rem 1rem;
+.tab-item.disabled {
+  padding: 8px 16px;
+  cursor: pointer;
+  position: relative;
+  color: #BFBBBB;
+  pointer-events: none;
+}
+.tab-item:not(:disabled, .disabled) {
+  padding: 8px 16px;
   cursor: pointer;
   position: relative;
 }
+.tab-item:not(:disabled, .disabled):hover {
+  color: #0A8276;
+}
 .tabs.vertical .tab-item {
   border-right: 2px solid transparent;
@@ -60,7 +81,8 @@
 }
 .tab-content {
-  padding: 1rem;
+  padding-top: 24px;
+  padding-left: 0px;
   flex-grow: 1;
 }

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -5,11 +5,12 @@ export class IfxTabs {
     this.tabs = [];
     this.orientation = "";
     this.internalOrientation = undefined;
-    this.small = false;
     this.activeTabIndex = 0;
     this.tabRefs = [];
     this.tabHeaderRefs = [];
     this.tabTitles = [];
+    this.disabledTabs = [];
+    this.tabObjects = [];
   }
   // changing tab
   setActiveTab(index) {
@@ -62,6 +63,13 @@ export class IfxTabs {
   onSlotChange() {
     const tabs = this.el.querySelectorAll('ifx-tab');
     this.tabTitles = Array.from(tabs).map((tab) => tab.getAttribute('header'));
+    this.disabledTabs = Array.from(tabs).map((tab) => tab.getAttribute('disabled'));
+    this.tabObjects = this.tabTitles.map((header, index) => {
+      return {
+        header: header,
+        disabled: (this.disabledTabs[index] === 'true') // set disabled property based on the corresponding value in the disabledTabs array
+      };
+    });
     this.tabRefs = Array.from(tabs);
     this.tabRefs.forEach((tab, index) => {
       tab.setAttribute('slot', `tab-${index}`);
@@ -87,7 +95,7 @@ export class IfxTabs {
     this.reRenderBorder();
   }
   render() {
-    return (h("div", { class: `tabs ${this.internalOrientation} ${this.small ? 'small' : ''}` }, h("ul", { class: "tabs-list" }, this.tabTitles.map((tabTitle, index) => (h("li", { class: `tab-item ${index === this.activeTabIndex ? 'active' : ''}`, ref: (el) => (this.tabHeaderRefs[index] = el), onClick: () => this.setActiveTab(index) }, tabTitle))), h("div", { class: "active-border" })), h("div", { class: "tab-content" }, Array.from(this.tabTitles).map((_, index) => (h("div", { style: { display: index === this.activeTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+    return (h("div", { class: `tabs ${this.internalOrientation}` }, h("ul", { class: "tabs-list" }, this.tabObjects.map((tab, index) => (h("li", { class: `tab-item ${index === this.activeTabIndex ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, ref: (el) => (this.tabHeaderRefs[index] = el), onClick: () => this.setActiveTab(index) }, tab.header))), h("div", { class: "active-border" })), h("div", { class: "tab-content" }, Array.from(this.tabTitles).map((_, index) => (h("div", { style: { display: index === this.activeTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
   }
   static get is() { return "ifx-tabs"; }
   static get encapsulation() { return "shadow"; }
@@ -136,24 +144,6 @@ export class IfxTabs {
         "attribute": "orientation",
         "reflect": false,
         "defaultValue": "\"\""
-      },
-      "small": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "small",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -163,7 +153,9 @@ export class IfxTabs {
       "activeTabIndex": {},
       "tabRefs": {},
       "tabHeaderRefs": {},
-      "tabTitles": {}
+      "tabTitles": {},
+      "disabledTabs": {},
+      "tabObjects": {}
     };
   }
   static get events() {

package/dist/collection/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,OAAO;;gBAEO,EAAE;uBACG,EAAE;;~~iBAEP~~,~~KAAK;0BACI,~~CAAC;mBACD,EAAE;yBACI,EAAE;qBACX,EAAE;;~~EAGjC~~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~~IACJ~~,OAAO,CACL,WAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,mBAAmB,~~IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,~~EAAE~~,EAAE~~;~~MACzE~~,UAAI,KAAK,EAAC,WAAW;QAClB,IAAI,CAAC,~~SAAS~~,CAAC,GAAG,CAAC,CAAC,~~QAAQ~~,EAAE,KAAK,EAAE,EAAE,CAAC,~~CACvC~~,UACE,KAAK,EAAE,YAAY,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,~~EAClE~~,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAEtC,~~QAAQ~~,~~CACN~~,CACN,CAAC;QACF,WAAK,KAAK,EAAC,eAAe,GAAO,CAC9B;MACL,WAAK,KAAK,EAAC,aAAa,IACrB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;QACvE,YAAM,IAAI,EAAE,OAAO,KAAK,EAAE,GAAI,CAC1B,CACP,CAAC,CACE,CACF,CACP,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Watch, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\n\nexport class IfxTabs {\n @Element() el: HTMLElement;\n @Prop() tabs: string[] = [];\n @Prop() orientation: string = \"\"\n @State() internalOrientation: string;\n @~~Prop~~() ~~small~~: ~~boolean~~ = ~~false~~;\n @State() ~~activeTabIndex~~: ~~number~~ = 0;\n @State() ~~tabRefs~~: HTMLElement[] = [];\n @State() ~~tabHeaderRefs~~: ~~HTMLElement~~[] = [];\n @State() ~~tabTitles~~: string[] = [];\n @Event() ifxTabIndex: EventEmitter;\n\n // changing tab\n setActiveTab(index: number) {\n if (index < 0 \|\| index >= this.tabHeaderRefs.length) {\n return;\n } else {\n const currentActiveTab = this.tabRefs[this.activeTabIndex] as HTMLIfxTabElement;\n if (currentActiveTab) {\n this.emitEvent(currentActiveTab, 'tabBecameInactive');\n }\n\n\n this.ifxTabIndex.emit({ previousTab: this.activeTabIndex, currentTab: index });\n this.activeTabIndex = index;\n\n const newActiveTab = this.tabRefs[index] as HTMLIfxTabElement;\n if (newActiveTab) {\n this.emitEvent(newActiveTab, 'tabBecameActive');\n }\n }\n }\n // Helper method to emit events\n emitEvent(element: HTMLElement, eventName: string) {\n const event = new CustomEvent(eventName, {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\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.activeTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.activeTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.activeTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.activeTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.activeTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n @Watch('orientation')\n onOrientationChange() {\n this.reRenderBorder()\n }\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabTitles = Array.from(tabs).map((tab) => tab.getAttribute('header'));\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 componentWillLoad() {\n this.setDefaultOrientation()\n this.onSlotChange();\n }\n\n componentDidLoad() {\n this.reRenderBorder()\n }\n\n componentDidUpdate() {\n this.reRenderBorder()\n }\n\n render() {\n return (\n <div class={`tabs ${this.internalOrientation} ~~${this.small ? 'small' : ''}~~`}>\n <ul class=\"tabs-list\">\n {this.~~tabTitles~~.map((~~tabTitle~~, index) => (\n <li\n class={`tab-item ${index === this.activeTabIndex ? 'active' : ''}`}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onClick={() => this.setActiveTab(index)}\n >\n {~~tabTitle~~}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabTitles).map((_, index) => (\n <div style={{ display: index === this.activeTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\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, Watch, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\n\nexport class IfxTabs {\n @Element() el: HTMLElement;\n @Prop() tabs: string[] = [];\n @Prop() orientation: string = \"\"\n @State() internalOrientation: string;\n @State() activeTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() tabTitles: string[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n @Event() ifxTabIndex: EventEmitter;\n\n // changing tab\n setActiveTab(index: number) {\n if (index < 0 \|\| index >= this.tabHeaderRefs.length) {\n return;\n } else {\n const currentActiveTab = this.tabRefs[this.activeTabIndex] as HTMLIfxTabElement;\n if (currentActiveTab) {\n this.emitEvent(currentActiveTab, 'tabBecameInactive');\n }\n\n\n this.ifxTabIndex.emit({ previousTab: this.activeTabIndex, currentTab: index });\n this.activeTabIndex = index;\n\n const newActiveTab = this.tabRefs[index] as HTMLIfxTabElement;\n if (newActiveTab) {\n this.emitEvent(newActiveTab, 'tabBecameActive');\n }\n }\n }\n // Helper method to emit events\n emitEvent(element: HTMLElement, eventName: string) {\n const event = new CustomEvent(eventName, {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\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.activeTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.activeTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.activeTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.activeTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.activeTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n @Watch('orientation')\n onOrientationChange() {\n this.reRenderBorder()\n }\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabTitles = Array.from(tabs).map((tab) => tab.getAttribute('header'));\n this.disabledTabs = Array.from(tabs).map((tab) => tab.getAttribute('disabled'));\n\n this.tabObjects = this.tabTitles.map((header, index) => {\n return {\n header: header,\n disabled: (this.disabledTabs[index] === 'true') // set disabled property based on the corresponding value in the disabledTabs array\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 componentWillLoad() {\n this.setDefaultOrientation()\n this.onSlotChange();\n }\n\n componentDidLoad() {\n this.reRenderBorder()\n }\n\n componentDidUpdate() {\n this.reRenderBorder()\n }\n\n render() {\n\n return (\n <div class={`tabs ${this.internalOrientation}`}>\n <ul class=\"tabs-list\">\n {this.tabObjects.map((tab, index) => (\n <li\n class={`tab-item ${index === this.activeTabIndex ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onClick={() => this.setActiveTab(index)}\n >\n {tab.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabTitles).map((_, index) => (\n <div style={{ display: index === this.activeTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n}"]}

package/dist/collection/components/tabs/tabs.stories.js CHANGED Viewed

@@ -5,30 +5,29 @@ export default {
   component: 'ifx-tabs',
   argTypes: {
     amountOfTabs: { name: 'Amount of Tabs', control: 'number' },
+    lastTabDisabled: { name: 'Last tab disabled', control: 'boolean' },
     orientation: {
       name: 'Orientation',
       options: ['horizontal', 'vertical'],
       control: { type: 'radio' },
     },
-    small: { name: 'Small', control: 'boolean' },
   },
 };
 const Template = (args) => {
   const tabsElement = document.createElement('ifx-tabs');
   tabsElement.setAttribute('orientation', args.orientation);
-  if (args.small) {
-    tabsElement.setAttribute('small', '');
-  }
   tabsElement.addEventListener('ifxTabIndex', action(`ifxTabIndex`));
   for (let i = 0; i < args.amountOfTabs; i++) {
     const tabContent = document.createElement('ifx-tab');
     tabContent.setAttribute('header', `tab header ${i + 1}`);
+    tabContent.setAttribute('disabled', 'false');
+    if (i === args.amountOfTabs - 1) {
+      tabContent.setAttribute('disabled', `${args.lastTabDisabled}`);
+    }
     tabContent.innerHTML = `
-      <p>
         Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
-      </p>
     `;
     tabContent.addEventListener('tabBecameActive', action(`tabBecameActive (tab #${i})`));
     tabContent.addEventListener('tabBecameInactive', action(`tabBecameInactive (tab #${i})`));
@@ -40,11 +39,12 @@ export const Default = Template.bind({});
 Default.args = {
   amountOfTabs: 3,
   orientation: 'horizontal',
+  lastTabDisabled: false
 };
-export const Small = Template.bind({});
-Small.args = {
+export const Disabled = Template.bind({});
+Disabled.args = {
   amountOfTabs: 3,
   orientation: 'horizontal',
-  small: true,
+  lastTabDisabled: true
 };
 //# sourceMappingURL=tabs.stories.js.map