npm - @infineon/infineon-design-system-stencil - Versions diffs - 33.2.0 → 33.2.1--canary.1845.ee4ba88c8b50426d4974caf2175d29cea069a0da.0 - Mend

@infineon/infineon-design-system-stencil 33.2.0 → 33.2.1--canary.1845.ee4ba88c8b50426d4974caf2175d29cea069a0da.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (514) hide show

package/dist/infineon-design-system-stencil/{p-0a69604b.entry.js.map → p-37b651ad.entry.js.map} RENAMED Viewed

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

package/dist/infineon-design-system-stencil/p-3a47beeb.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as n}from"./p-e6edf72d.js";const o=':root{--ifx-font-family:Source Sans 3, "Arial, sans-serif"}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:"Source Sans 3";font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}';const r=o;const a=class{constructor(n){e(this,n)}render(){return n("div",{key:"eaa5be7836515fc284e17ed7fb6acfdcc6ce11f1",class:"badge__container"},n("slot",{key:"f00f0415cb6cdfa25ce8e7b0df798f8a98eb2373"}))}};a.style=r;export{a as ifx_badge};
2	+ //# sourceMappingURL=p-3a47beeb.entry.js.map

package/dist/infineon-design-system-stencil/{p-f88b928c.entry.js.map → p-3a47beeb.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["badgeCss","IfxBadgeStyle0","Badge","render","h","key","class"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.badge__container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 4px 8px;\n gap: tokens.$ifxSpace100;\n border: 1px solid tokens.$ifxColorEngineering200;\n background-color: tokens.$ifxColorEngineering200;\n border-radius: 100px;\n font-family: tokens.$ifxFontFamilyBody;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n font-weight: 400;\n color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-badge',\n styleUrl: 'badge.scss',\n shadow: true\n})\nexport class Badge {\n\n\n\n render() {\n return (\n <div class=\"badge__container\">\n <slot />\n </div>\n );\n }\n}"],"mappings":"2CAAA,MAAMA,EAAW,~~0VACjB~~,MAAAC,EAAeD,E,MCMFE,EAAK,M,yBAIhB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}
1	+ {"version":3,"names":["badgeCss","IfxBadgeStyle0","Badge","render","h","key","class"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.badge__container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 4px 8px;\n gap: tokens.$ifxSpace100;\n border: 1px solid tokens.$ifxColorEngineering200;\n background-color: tokens.$ifxColorEngineering200;\n border-radius: 100px;\n font-family: tokens.$ifxFontFamilyBody;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n font-weight: 400;\n color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-badge',\n styleUrl: 'badge.scss',\n shadow: true\n})\nexport class Badge {\n\n\n\n render() {\n return (\n <div class=\"badge__container\">\n <slot />\n </div>\n );\n }\n}"],"mappings":"2CAAA,MAAMA,EAAW,uWACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,yBAIhB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-3d6b1437.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as s,h as a,g as r}from"./p-e6edf72d.js";const i=':root{--ifx-font-family:Source Sans 3, "Arial, sans-serif"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:"Source Sans 3"}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const t=i;const h=class{constructor(a){e(this,a);this.ifxInput=s(this,"ifxInput",7);this.ifxOpen=s(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState();this.ifxOpen.emit(this.internalState)}handleInput(e){this.value=e.detail}render(){return a("div",{key:"c902f46ef9efab55d05e5f0c5bf24204e364f9f7","aria-label":"a search bar","aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?a("div",{class:"search-bar-wrapper"},a("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},a("ifx-icon",{icon:"search-16",slot:"search-icon"})),a("a",{tabindex:"-1",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):a("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton},a("ifx-icon",{icon:"search-16"})))}get el(){return r(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};h.style=t;export{h as ifx_search_bar};
2	+ //# sourceMappingURL=p-3d6b1437.entry.js.map

package/dist/infineon-design-system-stencil/{p-b1c2e67a.entry.js.map → p-3d6b1437.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["searchBarCss","IfxSearchBarStyle0","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","handleInput","event","value","detail","render","h","key","class","maxlength","onIfxInput","bind","icon","slot","tabindex","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n width: 100%; //revert\n display: flex;\n}\n\n.search-bar {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-family: tokens.$ifxFontFamilyBody;\n\n &.closed {\n display: flex;\n width: auto;\n justify-content: flex-start;\n }\n\n & .search-bar-wrapper {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace200;\n width: 100%;\n\n & a {\n text-decoration: none;\n font-size: tokens.$ifxFontSizeM;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n }\n\n & ifx-search-field {\n width: 100%;\n }\n }\n\n .search-bar__icon-wrapper {\n display: none;\n flex-direction: row;\n align-items: center;\n\n & ifx-icon:hover {\n cursor: pointer;\n }\n }\n\n &.closed {\n .search-bar__icon-wrapper {\n display: flex;\n }\n\n .search-bar-wrapper {\n display: none;\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n @Prop() autocomplete: string = \"on\";\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.ifxOpen.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,~~y2BACrB~~,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAAC,OAAkB,KAClBD,KAAAE,SAAoB,MAMnBF,KAAAG,aAAuB,KAchCH,KAAAI,kBAAoB,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAmBvCL,KAAAQ,YAAc,KACZR,KAAKK,cAAgB,IAAI,C,CAhC3B,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAK5B,iBAAAW,GACEZ,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAIzB,WAAAQ,CAAYC,GACVd,KAAKe,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBnB,KAAKE,SAAUkB,MAAO,cAAcpB,KAAKK,cAAgB,OAAS,YAC7GL,KAAKK,cACJa,EAAA,OAAKE,MAAM,sBACTF,EAAA,oBAAkBf,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUa,MAAOf,KAAKe,MAAOM,UAAWrB,KAAKqB,UAAWC,WAAYtB,KAAKa,YAAYU,KAAKvB,OAC1JkB,EAAA,YAAUM,KAAK,YAAYC,KAAK,iBAGlCP,EAAA,KAAGQ,SAAS,KAAKC,KAAK,qBAAqBC,QAAS5B,KAAKI,mBAAiB,UAG5Ec,EAAA,OAAKE,MAAM,2BAA2BQ,QAAS5B,KAAKI,mBAClDc,EAAA,YAAUM,KAAK,e","ignoreList":[]}
1	+ {"version":3,"names":["searchBarCss","IfxSearchBarStyle0","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","handleInput","event","value","detail","render","h","key","class","maxlength","onIfxInput","bind","icon","slot","tabindex","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n width: 100%; //revert\n display: flex;\n}\n\n.search-bar {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-family: tokens.$ifxFontFamilyBody;\n\n &.closed {\n display: flex;\n width: auto;\n justify-content: flex-start;\n }\n\n & .search-bar-wrapper {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace200;\n width: 100%;\n\n & a {\n text-decoration: none;\n font-size: tokens.$ifxFontSizeM;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n }\n\n & ifx-search-field {\n width: 100%;\n }\n }\n\n .search-bar__icon-wrapper {\n display: none;\n flex-direction: row;\n align-items: center;\n\n & ifx-icon:hover {\n cursor: pointer;\n }\n }\n\n &.closed {\n .search-bar__icon-wrapper {\n display: flex;\n }\n\n .search-bar-wrapper {\n display: none;\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n @Prop() autocomplete: string = \"on\";\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.ifxOpen.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,s3BACrB,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAAC,OAAkB,KAClBD,KAAAE,SAAoB,MAMnBF,KAAAG,aAAuB,KAchCH,KAAAI,kBAAoB,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAmBvCL,KAAAQ,YAAc,KACZR,KAAKK,cAAgB,IAAI,C,CAhC3B,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAK5B,iBAAAW,GACEZ,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAIzB,WAAAQ,CAAYC,GACVd,KAAKe,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBnB,KAAKE,SAAUkB,MAAO,cAAcpB,KAAKK,cAAgB,OAAS,YAC7GL,KAAKK,cACJa,EAAA,OAAKE,MAAM,sBACTF,EAAA,oBAAkBf,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUa,MAAOf,KAAKe,MAAOM,UAAWrB,KAAKqB,UAAWC,WAAYtB,KAAKa,YAAYU,KAAKvB,OAC1JkB,EAAA,YAAUM,KAAK,YAAYC,KAAK,iBAGlCP,EAAA,KAAGQ,SAAS,KAAKC,KAAK,qBAAqBC,QAAS5B,KAAKI,mBAAiB,UAG5Ec,EAAA,OAAKE,MAAM,2BAA2BQ,QAAS5B,KAAKI,mBAClDc,EAAA,YAAUM,KAAK,e","ignoreList":[]}