npm - @infineon/infineon-design-system-stencil - Versions diffs - 20.36.4 → 20.36.5 - Mend

@infineon/infineon-design-system-stencil 20.36.4 → 20.36.5

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e8b51424.js');
-const multiselectCss = "*{font-family:\"Source Sans 3\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:16px;line-height:24px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:12px;line-height:16px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{line-height:20px;padding:8px 12px;font-size:14px}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{line-height:24px;padding:8px 16px;font-size:16px}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:not-allowed;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#8D8786}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border:2px solid #0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{margin-right:10px}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;border:1px solid #ddd;margin-top:2px;background-color:#fff;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{line-height:20px;font-size:14px}.ifx-multiselect-container .option.medium-select{line-height:24px;font-size:16px}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus{background-color:#BFBBBB;outline:none;box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}";
+const multiselectCss = "*{font-family:\"Source Sans 3\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:16px;line-height:24px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:12px;line-height:16px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{line-height:20px;padding:8px 12px;font-size:14px}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{line-height:24px;padding:8px 16px;font-size:16px}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:not-allowed;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#8D8786}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border:2px solid #0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{margin-right:8px;display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;border:1px solid #ddd;margin-top:2px;background-color:#fff;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{width:100%;padding:8px 16px;font-size:16px;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:2px solid #ccc}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{line-height:20px;font-size:14px}.ifx-multiselect-container .option.medium-select{line-height:24px;font-size:16px}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus{background-color:#BFBBBB;outline:none;box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}";
 const Multiselect = class {
   constructor(hostRef) {
@@ -22,9 +22,11 @@ const Multiselect = class {
       }
     };
     this.options = undefined;
+    this.batchSize = 50;
     this.size = 'medium (40px)';
     this.disabled = false;
     this.error = false;
+    this.internalError = false;
     this.errorMessage = "Error";
     this.label = "";
     this.persistentSelectedOptions = [];
@@ -34,42 +36,89 @@ const Multiselect = class {
     this.dropdownFlipped = undefined;
     this.maxItemCount = undefined;
     this.zIndex = 1;
+    this.isLoading = false;
+    this.loadedOptions = [];
+    this.filteredOptions = [];
   }
-  handleOptionsChange() {
+  async loadInitialOptions() {
+    this.isLoading = true;
+    this.internalError = this.error;
+    // Load the first batch of options (e.g., first 20)
+    this.loadedOptions = await this.fetchOptions(0, this.batchSize);
+    this.isLoading = false;
+  }
+  async fetchMoreOptions() {
+    this.isLoading = true;
+    const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);
+    this.loadedOptions = [...this.loadedOptions, ...moreOptions];
+    this.isLoading = false;
+  }
+  handleScroll(event) {
+    const element = event.target;
+    const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list
+    if (element.scrollTop >= halfwayPoint) {
+      this.fetchMoreOptions();
+    }
+  }
+  async fetchOptions(startIndex, count) {
+    let allOptions = [];
+    // Parse options if it's a string, or use directly if it's an array
     if (typeof this.options === 'string') {
       try {
-        this.listOfOptions = JSON.parse(this.options);
+        allOptions = JSON.parse(this.options);
       }
       catch (err) {
         console.error('Failed to parse options:', err);
       }
     }
-    else if (Array.isArray(this.options) || typeof this.options === 'object') {
-      this.listOfOptions = this.options;
+    else if (Array.isArray(this.options)) {
+      allOptions = this.options;
     }
     else {
       console.error('Unexpected value for options:', this.options);
     }
-    // Update persistentSelectedOptions based on initially selected states
-    const initiallySelected = this.listOfOptions.filter(option => option.selected);
-    this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];
+    // Slice the options array based on startIndex and count
+    const slicedOptions = allOptions.slice(startIndex, startIndex + count);
+    // Update the state for initially selected options, if needed
+    if (startIndex === 0) { // Assuming you want to do this only for the first batch
+      const initiallySelected = slicedOptions.filter(option => option.selected);
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];
+    }
+    return slicedOptions;
+  }
+  handleSearch(event) {
+    const searchTerm = event.target.value.toLowerCase();
+    if (searchTerm === '') {
+      this.filteredOptions = this.loadedOptions;
+    }
+    else {
+      this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm));
+    }
   }
   componentDidLoad() {
     setTimeout(() => {
       this.positionDropdown();
     }, 500);
+    // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)
   }
   componentWillLoad() {
-    this.handleOptionsChange();
+    this.loadInitialOptions();
+    this.filteredOptions = [...this.loadedOptions];
+  }
+  updateInternalError() {
+    this.internalError = this.error;
+  }
+  loadedOptionsChanged() {
+    this.filteredOptions = [...this.loadedOptions];
   }
   handleOptionClick(option) {
-    this.error = false; //reset potential previous errors
+    this.internalError = false; //reset potential previous errors
     // 1. Prevent action if disabled
     //check if newly selected option has children => if not, count it as 1, otherwise count the # of children
     let newOptionsLength = option.children ? option.children.length : 1;
     if (this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {
       console.error('Max item count reached');
-      this.error = true;
+      this.internalError = true;
       this.errorMessage = "Please consider the maximum number of items to choose from";
       return;
     }
@@ -261,7 +310,7 @@ const Multiselect = class {
       this.currentIndex = 0; // Wrap to the beginning.
     }
   }
-  // // Helper function to handle arrow up navigation
+  // Helper function to handle arrow up navigation
   handleArrowUp(options) {
     if (this.currentIndex > 0) {
       this.currentIndex--;
@@ -330,15 +379,16 @@ const Multiselect = class {
         ${this.getSizeClass()}
         ${this.dropdownOpen ? 'active' : ''}
         ${this.dropdownFlipped ? 'is-flipped' : ''}
-        ${this.error ? 'error' : ""}
+        ${this.internalError ? 'error' : ""}
         ${this.disabled ? 'disabled' : ""}`, tabindex: "0", onClick: (event) => this.handleWrapperClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { class: `ifx-multiselect-input
           ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
-          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { class: "ifx-multiselect-dropdown-menu", style: { '--dynamic-z-index': this.zIndex.toString() } }, this.listOfOptions.map((option, index) => this.renderOption(option, index)))), index.h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, index.h("ifx-icon", { key: 'icon-clear', icon: 'delete-16' }))), index.h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), index.h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.error ?
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, index.h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && index.h("div", null, "Loading more options..."))), index.h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, index.h("ifx-icon", { icon: "cremove24" }))), index.h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), index.h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
       index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage)) : null));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "options": ["handleOptionsChange"]
+    "error": ["updateInternalError"],
+    "loadedOptions": ["loadedOptionsChanged"]
   }; }
 };
 Multiselect.globalZIndex = 1; // This will be shared among all instances of the component.

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

	@@ -1 +1 @@
1	- {"file":"ifx-multiselect.entry.cjs.js","mappings":"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","names":["index","h"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: 16px;\n line-height: 24px;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: 12px;\n line-height: 16px;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n width: 100%;\n\n &.small-select {\n line-height: 20px;\n padding: 8px 12px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n padding: 8px 16px;\n font-size: 16px;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid #0A8276;\n }\n }\n\n &.disabled {\n background: #EEEDED;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: #8D8786;\n }\n\n &.active {\n border: 2px solid #0A8276 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: 10px; // Space between clear button and icons\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n border: 1px solid #ddd;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n max-height: 300px;\n /* Adjust based on your design /\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n line-height: 20px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n font-size: 16px;\n }\n\n &:hover {\n background-color: #EEEDED;\n }\n\n &:focus {\n background-color: #BFBBBB;\n outline: none;\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n }\n\n &.is-highlighted {\n background-color: #EEEDED;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n / or however much indentation you want /\n }\n }\n\n\n\n}","import { Component, Watch, Prop, State, Event, EventEmitter, Element, h } from '@stencil/core';\nimport { Option } from './interfaces';\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n // this.currentIndex = this.placeholder ? this.currentIndex = 1 : this.currentIndex = 0;\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n\n @Watch('options')\n handleOptionsChange() {\n if (typeof this.options === 'string') {\n try {\n this.listOfOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options) \|\| typeof this.options === 'object') {\n this.listOfOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Update persistentSelectedOptions based on initially selected states\n const initiallySelected = this.listOfOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n }\n\n\n componentWillLoad() {\n this.handleOptionsChange();\n }\n\n\n\n handleOptionClick(option: Option) {\n this.error = false; //reset potential previous errors\n\n // 1. Prevent action if disabled\n //check if newly selected option has children => if not, count it as 1, otherwise count the # of children\n let newOptionsLength = option.children ? option.children.length : 1;\n if (this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {\n console.error('Max item count reached');\n this.error = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n // 2. Determine if the current option was previously selected\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n // 3. Handle parent-child relationships\n if (option.children && option.children.length > 0) {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value && !option.children.some(child => child.value === selectedOption.value));\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option, ...option.children];\n }\n } else {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value);\n } else {\n this.persistentSelectedOptions.push(option);\n }\n\n const parentOption = this.listOfOptions.find(opt => opt.children && opt.children.some(child => child.value === option.value));\n\n if (parentOption) {\n const allChildrenSelected = parentOption.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n const someChildrenSelected = parentOption.children.some(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n\n if (allChildrenSelected) {\n if (!this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parentOption.value)) {\n this.persistentSelectedOptions.push(parentOption);\n }\n } else if (someChildrenSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n } else {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n }\n }\n }\n\n // 4. Reflect changes in the listOfOptions state\n this.listOfOptions = this.listOfOptions.map(opt => {\n if (opt.value === option.value) {\n return { ...opt, selected: !wasSelected };\n } else if (opt.children) {\n const isParentSelected = this.persistentSelectedOptions.includes(opt);\n opt.children = opt.children.map(child => {\n if (child.value === option.value \|\| isParentSelected) {\n return { ...child, selected: true };\n }\n return child;\n });\n return { ...opt, children: opt.children };\n }\n return opt;\n });\n\n // 5. Update the selected status in persistentSelectedOptions\n this.persistentSelectedOptions = this.persistentSelectedOptions.map(pOpt => {\n const matchingOption = this.listOfOptions.find(loOpt => loOpt.value === pOpt.value) \|\| this.listOfOptions.flatMap(loOpt => loOpt.children \|\| []).find(child => child.value === pOpt.value);\n if (matchingOption) {\n return { ...pOpt, selected: matchingOption.selected };\n }\n return pOpt;\n });\n\n // 6. Emit persistentSelectedOptions without duplicated children\n const emittedOptions = this.persistentSelectedOptions.map(pOpt => {\n // If this option is a child, check if its parent is in persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n // If it's a child and its parent is also selected, ensure it's set to selected: true\n return { ...pOpt, selected: true };\n }\n return pOpt;\n }).filter(pOpt => {\n // After ensuring the children are selected, now filter out the children whose parents are also in the persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n return false; // Exclude this child since its parent is already selected\n }\n return true;\n });\n this.ifxSelect.emit(emittedOptions);\n }\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.listOfOptions = this.listOfOptions.map(option => ({ ...option, selected: false }));\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n\n\n renderOption(option: Option, index: number) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n const isIndeterminate = this.isOptionIndeterminate(option);\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} value={isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions.map(option => option.label).join(', ');\n\n return (\n <div class={`ifx-multiselect-container ${this.getSizeClass()}`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.error ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\" style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n {this.listOfOptions.map((option, index) => this.renderOption(option, index))}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/ Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon\n key='icon-clear'\n icon='delete-16'></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.error ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"ifx-multiselect.entry.cjs.js","mappings":"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","names":["index","h"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: 16px;\n line-height: 24px;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: 12px;\n line-height: 16px;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n width: 100%;\n\n &.small-select {\n line-height: 20px;\n padding: 8px 12px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n padding: 8px 16px;\n font-size: 16px;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid #0A8276;\n }\n }\n\n &.disabled {\n background: #EEEDED;\n color: #575352;\n border-color: #575352;\n cursor: not-allowed;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: #8D8786;\n }\n\n &.active {\n border: 2px solid #0A8276 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n margin-right: tokens.$ifxSpace100; // Space between clear button and icons\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n border: 1px solid #ddd;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n max-height: 300px;\n /* Adjust based on your design /\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n // position: sticky;\n // top: 0;\n // z-index: 2;\n width: 100%;\n padding: 8px 16px;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 2px solid #ccc;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n line-height: 20px;\n font-size: 14px;\n }\n\n &.medium-select {\n line-height: 24px;\n font-size: 16px;\n }\n\n &:hover {\n background-color: #EEEDED;\n }\n\n &:focus {\n background-color: #BFBBBB;\n outline: none;\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n }\n\n &.is-highlighted {\n background-color: #EEEDED;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n / or however much indentation you want /\n }\n }\n\n\n\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\nimport { Option } from './interfaces';\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true\n})\n\n\nexport class Multiselect {\n\n @Prop() options: any[] \| string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() listOfOptions: Option[] = [];\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n\n // Update the state for initially selected options, if needed\n if (startIndex === 0) { // Assuming you want to do this only for the first batch\n const initiallySelected = slicedOptions.filter(option => option.selected);\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];\n }\n\n return slicedOptions;\n }\n\n handleSearch(event: Event) {\n const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n\n\n }\n\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() { \n this.internalError = this.error;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n\n handleOptionClick(option: Option) {\n this.internalError = false; //reset potential previous errors\n // 1. Prevent action if disabled\n //check if newly selected option has children => if not, count it as 1, otherwise count the # of children\n let newOptionsLength = option.children ? option.children.length : 1;\n if (this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {\n console.error('Max item count reached');\n this.internalError = true;\n this.errorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n\n // 2. Determine if the current option was previously selected\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n // 3. Handle parent-child relationships\n if (option.children && option.children.length > 0) {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value && !option.children.some(child => child.value === selectedOption.value));\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option, ...option.children];\n }\n } else {\n if (wasSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value);\n } else {\n this.persistentSelectedOptions.push(option);\n }\n\n const parentOption = this.listOfOptions.find(opt => opt.children && opt.children.some(child => child.value === option.value));\n\n if (parentOption) {\n const allChildrenSelected = parentOption.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n const someChildrenSelected = parentOption.children.some(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));\n\n if (allChildrenSelected) {\n if (!this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parentOption.value)) {\n this.persistentSelectedOptions.push(parentOption);\n }\n } else if (someChildrenSelected) {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n } else {\n this.persistentSelectedOptions = this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== parentOption.value);\n }\n }\n }\n\n // 4. Reflect changes in the listOfOptions state\n this.listOfOptions = this.listOfOptions.map(opt => {\n if (opt.value === option.value) {\n return { ...opt, selected: !wasSelected };\n } else if (opt.children) {\n const isParentSelected = this.persistentSelectedOptions.includes(opt);\n opt.children = opt.children.map(child => {\n if (child.value === option.value \|\| isParentSelected) {\n return { ...child, selected: true };\n }\n return child;\n });\n return { ...opt, children: opt.children };\n }\n return opt;\n });\n\n // 5. Update the selected status in persistentSelectedOptions\n this.persistentSelectedOptions = this.persistentSelectedOptions.map(pOpt => {\n const matchingOption = this.listOfOptions.find(loOpt => loOpt.value === pOpt.value) \|\| this.listOfOptions.flatMap(loOpt => loOpt.children \|\| []).find(child => child.value === pOpt.value);\n if (matchingOption) {\n return { ...pOpt, selected: matchingOption.selected };\n }\n return pOpt;\n });\n\n // 6. Emit persistentSelectedOptions without duplicated children\n const emittedOptions = this.persistentSelectedOptions.map(pOpt => {\n // If this option is a child, check if its parent is in persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n // If it's a child and its parent is also selected, ensure it's set to selected: true\n return { ...pOpt, selected: true };\n }\n return pOpt;\n }).filter(pOpt => {\n // After ensuring the children are selected, now filter out the children whose parents are also in the persistentSelectedOptions\n const parent = this.listOfOptions.find(loOpt => loOpt.children && loOpt.children.some(child => child.value === pOpt.value));\n if (parent && this.persistentSelectedOptions.some(selectedOption => selectedOption.value === parent.value)) {\n return false; // Exclude this child since its parent is already selected\n }\n return true;\n });\n this.ifxSelect.emit(emittedOptions);\n }\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 \|\| tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n\n switch (event.code) {\n case 'Enter' \|\| 'Space':\n if (this.dropdownOpen) {\n this.selectItem(options);\n } else {\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n }\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.listOfOptions = this.listOfOptions.map(option => ({ ...option, selected: false }));\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) \|\| (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n\n private selectItem(options: NodeList) {\n // If there's a previous selection, remove its \"selected\" class\n const previouslySelected = this.dropdownElement.querySelector('.option.selected');\n if (previouslySelected) {\n previouslySelected.classList.remove('selected');\n }\n\n // Mark the current item as selected\n const currentOptionElement = options[this.currentIndex] as Element;\n currentOptionElement.classList.add('selected');\n\n const currentOptionValue = currentOptionElement.getAttribute('data-value');\n const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook\n ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected\n : this.options.map(option => ({ ...option }));\n\n const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array\n this.handleOptionClick(currentOption);\n }\n\n\n renderOption(option: Option, index: number) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n const isIndeterminate = this.isOptionIndeterminate(option);\n\n return (\n <div>\n <div class={`option ${isSelected ? 'selected' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}\n >\n <ifx-checkbox id={uniqueId} value={isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option \| null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox id={uniqueId} value={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId}>{option.label}</label>\n </div>\n );\n }\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions.map(option => option.label).join(', ');\n\n return (\n <div class={`ifx-multiselect-container ${this.getSizeClass()}`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={(event) => this.handleWrapperClick(event)}\n onKeyDown={(event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n <input type=\"text\" role=\"textbox\" class=\"search-input\" onInput={(event) => this.handleSearch(event)} placeholder=\"Search...\"></input>\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/ Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && (\n <div class=\"ifx-clear-button\" onClick={() => this.clearSelection()}>\n <ifx-icon icon=\"cremove24\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.errorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"ifx-search-field.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,gwCAAgwC;;MCW1wC,WAAW;;;;IA6BtB,gBAAW,GAAG;MACZ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAEhC,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;MAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1B,CAAA;iBAtCwC,EAAE;0BAGR,KAAK;0BAEN,KAAK;uCACS,KAAK;oBACzB,KAAK;gBACV,GAAG;qBACI,KAAK;;EAGnC,kBAAkB,CAAC,KAAiB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB;GACF;EAGD,YAAY,CAAC,QAAgB;IAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;MACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;KACpC;GACF;EAgBD,UAAU;IACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;IAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAED,mBAAmB;IACjB,IAAG,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;KACzC;;MAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;GACjD;EAED,MAAM;IACJ,QACEA,+BAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,IACxHA,iBAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhCA,sBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY,EAC1DA,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,IACtDA,sBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,IACT,IAAI,CACJ,CACF,EACN;GACH;EAED,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;QACzB,yBAAyB;QACzB,EAAE,CAAC;GACR;EAGD,oBAAoB;IAClB,OAAOC,kBAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,EAAE,CACrC,CAAC;GACH;;;;;;;;;","names":["h","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host { \n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: tokens.$ifxColorEngineering400;\n\n &.focused {\n border: 1px solid ~~#0A8276~~;\n\n & ifx-icon {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n }\n\n &:focus {\n outline: none;\n border: 1px solid ~~#0A8276~~;\n }\n\n\n .delete-icon {\n right: 12px;\n cursor: pointer;\n }\n\n input[type='text'] {\n font-family: tokens.$ifxFontFamilyBody;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background-color: #EEEDED;\n }\n }\n\n &:has(input[disabled]) {\n background-color: #EEEDED;\n }\n }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n \n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(null);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n\n componentWillUpdate() { \n if(this.value !== \"\") { \n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n onInput={() => this.handleInput()}\n placeholder=\"Search...\"\n disabled={this.disabled}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-search-field.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,gwCAAgwC;;MCW1wC,WAAW;;;;IA6BtB,gBAAW,GAAG;MACZ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAEhC,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;MAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1B,CAAA;iBAtCwC,EAAE;0BAGR,KAAK;0BAEN,KAAK;uCACS,KAAK;oBACzB,KAAK;gBACV,GAAG;qBACI,KAAK;;EAGnC,kBAAkB,CAAC,KAAiB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB;GACF;EAGD,YAAY,CAAC,QAAgB;IAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;MACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;KACpC;GACF;EAgBD,UAAU;IACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;IAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAED,mBAAmB;IACjB,IAAG,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;KACzC;;MAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;GACjD;EAED,MAAM;IACJ,QACEA,+BAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,IACxHA,iBAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhCA,sBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY,EAC1DA,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,IACtDA,sBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,IACT,IAAI,CACJ,CACF,EACN;GACH;EAED,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;QACzB,yBAAyB;QACzB,EAAE,CAAC;GACR;EAGD,oBAAoB;IAClB,OAAOC,kBAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,EAAE,CACrC,CAAC;GACH;;;;;;;;;","names":["h","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: tokens.$ifxColorEngineering400;\n\n &.focused {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & ifx-icon {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n }\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n\n .delete-icon {\n right: 12px;\n cursor: pointer;\n }\n\n input[type='text'] {\n font-family: tokens.$ifxFontFamilyBody;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background-color: #EEEDED;\n }\n }\n\n &:has(input[disabled]) {\n background-color: #EEEDED;\n }\n }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n \n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(null);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n\n componentWillUpdate() { \n if(this.value !== \"\") { \n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n onInput={() => this.handleInput()}\n placeholder=\"Search...\"\n disabled={this.disabled}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"],"version":3}

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

@@ -40,7 +40,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 };
 patchBrowser().then(options => {
-  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],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]},null,{\"options\":[\"handleOptionsChange\"]}]]],[\"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\"]]],[\"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\"]],{\"orientation\":[\"onOrientationChange\"]}]]],[\"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],\"initialCollapse\":[4,\"initial-collapse\"],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[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);
+  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\"]]],[\"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\"]],{\"orientation\":[\"onOrientationChange\"]}]]],[\"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],\"initialCollapse\":[4,\"initial-collapse\"],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[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);
 });
 exports.setNonce = index.setNonce;

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

@@ -6,7 +6,7 @@ const index = require('./index-e8b51424.js');
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  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],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]},null,{\"options\":[\"handleOptionsChange\"]}]]],[\"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\"]]],[\"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\"]],{\"orientation\":[\"onOrientationChange\"]}]]],[\"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],\"initialCollapse\":[4,\"initial-collapse\"],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[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);
+  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\"]]],[\"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\"]],{\"orientation\":[\"onOrientationChange\"]}]]],[\"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],\"initialCollapse\":[4,\"initial-collapse\"],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[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);
 };
 exports.setNonce = index.setNonce;

package/dist/collection/components/select/multi-select/multiselect.css CHANGED Viewed

@@ -119,7 +119,8 @@
   display: flex;
 }
 .ifx-multiselect-container .ifx-clear-button {
-  margin-right: 10px;
+  margin-right: 8px;
+  display: flex;
 }
 .ifx-multiselect-container .ifx-multiselect-dropdown-menu {
   position: absolute;
@@ -135,6 +136,24 @@
   overflow-y: auto;
   z-index: var(--dynamic-z-index, 1);
 }
+.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input {
+  width: 100%;
+  padding: 8px 16px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  border: none;
+  border-bottom: 2px solid #ccc;
+}
+.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus {
+  outline: none;
+  border: 1px solid #0A8276;
+}
+.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder {
+  color: #999;
+}
 .ifx-multiselect-container .option {
   position: relative;
   padding: 8px 16px;