npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 31.0.0--canary.1697.e5e5c4da838c535d0e5399b759dcee2325e38b03.0 - Mend

@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 31.0.0--canary.1697.e5e5c4da838c535d0e5399b759dcee2325e38b03.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 (825) hide show

package/dist/components/ifx-content-switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-content-switcher.js","mappings":"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","names":[],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n height: tokens.$ifxSize450;\n width: fit-content;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & ::slotted(ifx-content-switcher-item) {\n position: relative;\n // top: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:first-child) {\n left: -1px;\n margin-right: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:last-child) {\n right: -1px;\n margin-left: -1px;\n }\n\n // Dividers\n & ::slotted(.ifx-content-switcher-divider) {\n width: tokens.$ifxSize12;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorEngineering400;\n margin: 0px 1px;\n visibility: visible;\n }\n\n & ::slotted(.ifx-content-switcher-divider.hidden) {\n visibility: hidden;\n }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\n@Component({\n tag: 'ifx-content-switcher',\n styleUrl: './content-switcher.scss',\n shadow: true,\n})\nexport class ContentSwitcher {\n @Element() el: HTMLElement;\n\n @State() items: Element[];\n @State() activeIndex = -1;\n @State() hoverIndex: number = -1;\n @State() focusIndex: number = -1;\n\n @State() dividers: Element[] = Array();\n\n @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n componentWillLoad() {\n this.items = Array.from(this.el.children);\n this.initializeDividers();\n this.addEventListeners();\n this.ensureSingleSelectedItem();\n }\n\n disconnectedCallback() {\n this.removeEventListeners();\n }\n\n /*\n Initialize the dividers between items.\n /\n initializeDividers() {\n this.items.forEach((item, index) => {\n if (index < this.items.length - 1) {\n const divider = document.createElement('div');\n divider.classList.add('ifx-content-switcher-divider');\n item.after(divider);\n this.dividers.push(divider);\n }\n });\n }\n\n /\n Add event listeners for each item.\n /\n addEventListeners() {\n this.items.forEach((item, index) => {\n const handlers = {\n click: () => this.selectItem(index),\n mouseenter: () => this.handleHover(index, true),\n mouseleave: () => this.handleHover(index, false),\n focus: () => this.handleFocus(index, true),\n blur: () => this.handleFocus(index, false),\n };\n\n Object.keys(handlers).forEach(event => {\n item.addEventListener(event, handlers[event]);\n });\n\n this.eventHandlers.set(item, handlers);\n });\n }\n\n /\n Remove all event listeners.\n /\n removeEventListeners() {\n this.eventHandlers.forEach((handlers, item) => {\n Object.keys(handlers).forEach(event => {\n item.removeEventListener(event, handlers[event]);\n });\n });\n this.eventHandlers.clear();\n }\n\n /\n Ensure that only one item is selected at a time.\n /\n ensureSingleSelectedItem() {\n this.items.forEach((item, index) => {\n if (item.hasAttribute('selected')) {\n if (this.activeIndex < 0) {\n this.selectItem(index);\n } else {\n item.removeAttribute('selected');\n }\n }\n });\n }\n\n /\n Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is hovered.\n /\n handleHover(index: number, isActive: boolean) {\n this.hoverIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /\n Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is focused.\n /\n handleFocus(index: number, isActive: boolean) {\n this.focusIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /\n Update visibility of dividers adjacent to a specific item.\n * @param itemIndex - Index of the item.\n /\n updateDividersOfItem(itemIndex: number) {\n if (itemIndex < this.items.length - 1) {\n this.updateDividerVisibility(itemIndex);\n }\n if (itemIndex > 0) {\n this.updateDividerVisibility(itemIndex - 1);\n }\n }\n\n /\n Update visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n /\n updateDividerVisibility(dividerIndex: number) {\n const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n }\n\n /\n Set the visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n * @param hidden - Whether the divider should be hidden.\n /\n setDividerVisibility(dividerIndex: number, hidden: boolean) {\n if (this.dividers[dividerIndex]) {\n this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n }\n }\n\n /\n Select a specific item.\n * @param itemIndex - Index of the item to be selected.\n /\n selectItem(itemIndex: number) {\n if (itemIndex === this.activeIndex) return;\n const oldIndex = this.activeIndex;\n if (oldIndex >= 0) {\n this.items[oldIndex].removeAttribute('selected');\n }\n\n this.activeIndex = itemIndex;\n this.items[itemIndex].setAttribute('selected', 'true');\n\n this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n this.updateDividersOfItem(oldIndex);\n this.updateDividersOfItem(itemIndex);\n }\n\n /\n Get the value property of the item at a specific index.\n * Falls back to the index if no value is set.\n * \n * @param index - Index of the item. \n * @returns The value of the item.\n */\n getValueOfItem(index: number): string {\n if (this.items[index] == null) return index.toLocaleString();\n return this.items[index].getAttribute('value') \|\| index.toLocaleString();\n }\n\n render() {\n return (\n <Host>\n <div class=\"ifx-content-switcher\" role=\"group\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-content-switcher.js","mappings":"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","names":[],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n height: tokens.$ifxSize450;\n width: fit-content;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & ::slotted(ifx-content-switcher-item) {\n position: relative;\n // top: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:first-child) {\n left: -1px;\n margin-right: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:last-child) {\n right: -1px;\n margin-left: -1px;\n }\n\n // Dividers\n & ::slotted(.ifx-content-switcher-divider) {\n width: tokens.$ifxSize12;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorEngineering400;\n margin: 0px 1px;\n visibility: visible;\n }\n\n & ::slotted(.ifx-content-switcher-divider.hidden) {\n visibility: hidden;\n }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\n@Component({\n tag: 'ifx-content-switcher',\n styleUrl: './content-switcher.scss',\n shadow: true,\n})\nexport class ContentSwitcher {\n @Element() el: HTMLElement;\n\n @State() items: Element[];\n @State() activeIndex = -1;\n @State() hoverIndex: number = -1;\n @State() focusIndex: number = -1;\n\n @State() dividers: Element[] = Array();\n\n @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n componentWillLoad() {\n this.items = Array.from(this.el.children);\n this.initializeDividers();\n this.addEventListeners();\n this.ensureSingleSelectedItem();\n }\n\n disconnectedCallback() {\n this.removeEventListeners();\n }\n\n /*\n Initialize the dividers between items.\n /\n initializeDividers() {\n this.items.forEach((item, index) => {\n if (index < this.items.length - 1) {\n const divider = document.createElement('div');\n divider.classList.add('ifx-content-switcher-divider');\n item.after(divider);\n this.dividers.push(divider);\n }\n });\n }\n\n /\n Add event listeners for each item.\n /\n addEventListeners() {\n this.items.forEach((item, index) => {\n const handlers = {\n click: () => this.selectItem(index),\n mouseenter: () => this.handleHover(index, true),\n mouseleave: () => this.handleHover(index, false),\n focus: () => this.handleFocus(index, true),\n blur: () => this.handleFocus(index, false),\n };\n\n Object.keys(handlers).forEach(event => {\n item.addEventListener(event, handlers[event]);\n });\n\n this.eventHandlers.set(item, handlers);\n });\n }\n\n /\n Remove all event listeners.\n /\n removeEventListeners() {\n this.eventHandlers.forEach((handlers, item) => {\n Object.keys(handlers).forEach(event => {\n item.removeEventListener(event, handlers[event]);\n });\n });\n this.eventHandlers.clear();\n }\n\n /\n Ensure that only one item is selected at a time.\n /\n ensureSingleSelectedItem() {\n this.items.forEach((item, index) => {\n if (item.hasAttribute('selected')) {\n if (this.activeIndex < 0) {\n this.selectItem(index);\n } else {\n item.removeAttribute('selected');\n }\n }\n });\n }\n\n /\n Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is hovered.\n /\n handleHover(index: number, isActive: boolean) {\n this.hoverIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /\n Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is focused.\n /\n handleFocus(index: number, isActive: boolean) {\n this.focusIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /\n Update visibility of dividers adjacent to a specific item.\n * @param itemIndex - Index of the item.\n /\n updateDividersOfItem(itemIndex: number) {\n if (itemIndex < this.items.length - 1) {\n this.updateDividerVisibility(itemIndex);\n }\n if (itemIndex > 0) {\n this.updateDividerVisibility(itemIndex - 1);\n }\n }\n\n /\n Update visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n /\n updateDividerVisibility(dividerIndex: number) {\n const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n }\n\n /\n Set the visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n * @param hidden - Whether the divider should be hidden.\n /\n setDividerVisibility(dividerIndex: number, hidden: boolean) {\n if (this.dividers[dividerIndex]) {\n this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n }\n }\n\n /\n Select a specific item.\n * @param itemIndex - Index of the item to be selected.\n /\n selectItem(itemIndex: number) {\n if (itemIndex === this.activeIndex) return;\n const oldIndex = this.activeIndex;\n if (oldIndex >= 0) {\n this.items[oldIndex].removeAttribute('selected');\n }\n\n this.activeIndex = itemIndex;\n this.items[itemIndex].setAttribute('selected', 'true');\n\n this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n this.updateDividersOfItem(oldIndex);\n this.updateDividersOfItem(itemIndex);\n }\n\n /\n Get the value property of the item at a specific index.\n * Falls back to the index if no value is set.\n * \n * @param index - Index of the item. \n * @returns The value of the item.\n */\n getValueOfItem(index: number): string {\n if (this.items[index] == null) return index.toLocaleString();\n return this.items[index].getAttribute('value') \|\| index.toLocaleString();\n }\n\n render() {\n return (\n <Host>\n <div class=\"ifx-content-switcher\" role=\"group\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ifx-date-picker.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
+import { d as defineCustomElement$2 } from './p-eee401ca.js';
 const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
 const IfxDatePickerStyle0 = datePickerCss;
@@ -16,13 +16,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
         this.error = false;
         this.success = false;
         this.disabled = false;
-        this.AriaLabel = undefined;
-        this.value = undefined;
-        this.max = undefined;
-        this.min = undefined;
         this.required = false;
-        this.label = undefined;
-        this.caption = undefined;
     }
     getDate(e) {
         const inputValue = e.target.value;

package/dist/components/ifx-date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-date-picker.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering200;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() AriaLabel: string;\n @Prop() value: string;\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n \n if (!inputValue) {\n this.internals.setFormValue(null);\n this.ifxDate.emit({day, month, year});\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n this.ifxDate.emit({day, month, year})\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n componentDidLoad() { \n this.setFireFoxClasses()\n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type=\"date\"\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.AriaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"version":3}
1	+ {"file":"ifx-date-picker.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering200;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() AriaLabel: string;\n @Prop() value: string;\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n \n if (!inputValue) {\n this.internals.setFormValue(null);\n this.ifxDate.emit({day, month, year});\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n this.ifxDate.emit({day, month, year})\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n componentDidLoad() { \n this.setFireFoxClasses()\n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type=\"date\"\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.AriaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"version":3}

package/dist/components/ifx-dropdown-header.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
 const dropdownHeaderCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}";
 const IfxDropdownHeaderStyle0 = dropdownHeaderCss;

package/dist/components/ifx-dropdown-item.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
+import { d as defineCustomElement$2 } from './p-eee401ca.js';
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
 const IfxDropdownItemStyle0 = dropdownItemCss;
@@ -10,7 +10,6 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         this.__registerHost();
         this.__attachShadow();
         this.ifxDropdownItem = createEvent(this, "ifxDropdownItem", 7);
-        this.icon = undefined;
         this.href = "";
         this.target = "_self";
         this.hide = false;

package/dist/components/ifx-dropdown-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,2hBAA2hB,CAAC;AACpjB,8BAAe,eAAe;;MCQjB,YAAY~~;;;;;;;oBAEA~~,EAAE;~~sBACA~~,OAAO;~~oBACR~~,KAAK;~~oBACL~~,GAAG~~;;IAK3B~~,cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC/C;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;QACzE,QACE,0EAAO,QAAQ,IAAE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KAC9I,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACjE,+DACE,8DAAQ,CACH,CACL,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n display: flex;\n align-items: center;\n padding: 8px 16px;\n gap: tokens.$ifxSize100;\n font-family: var(--ifx-font-family);\n\n &.hide {\n display: none;\n }\n\n & span {\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n /* 150% */\n }\n\n &.small {\n & span {\n font-size: 14px;\n }\n }\n\n &:hover {\n cursor: pointer;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n}\n\n.icon {\n margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-item',\n styleUrl: 'dropdown-item.scss',\n shadow: true\n})\n\nexport class DropdownItem {\n @Prop() icon: string;\n @Prop() href: string = \"\"\n @Prop() target: string = \"_self\"\n @Prop() hide: boolean = false;\n @State() size: string = 'l'\n @Event() ifxDropdownItem: EventEmitter;\n @Element() el;\n\n @Listen('menuSize', { target: 'body' })\n handleMenuSize(event: CustomEvent) {\n this.size = event.detail;\n }\n\n handleEventEmission() {\n this.ifxDropdownItem.emit(this.el.textContent)\n }\n\n render() {\n let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n return (\n <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n <span>\n <slot />\n </span>\n </a>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,2hBAA2hB,CAAC;AACpjB,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;;;;QAQU,SAAI,GAAW,EAAE,CAAA;QACjB,WAAM,GAAW,OAAO,CAAA;QACxB,SAAI,GAAY,KAAK,CAAC;QACrB,SAAI,GAAW,GAAG,CAAA;KAwB5B;IAnBC,cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC/C;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;QACzE,QACE,0EAAO,QAAQ,IAAE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KAC9I,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACjE,+DACE,8DAAQ,CACH,CACL,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n display: flex;\n align-items: center;\n padding: 8px 16px;\n gap: tokens.$ifxSize100;\n font-family: var(--ifx-font-family);\n\n &.hide {\n display: none;\n }\n\n & span {\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n /* 150% */\n }\n\n &.small {\n & span {\n font-size: 14px;\n }\n }\n\n &:hover {\n cursor: pointer;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n}\n\n.icon {\n margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-item',\n styleUrl: 'dropdown-item.scss',\n shadow: true\n})\n\nexport class DropdownItem {\n @Prop() icon: string;\n @Prop() href: string = \"\"\n @Prop() target: string = \"_self\"\n @Prop() hide: boolean = false;\n @State() size: string = 'l'\n @Event() ifxDropdownItem: EventEmitter;\n @Element() el;\n\n @Listen('menuSize', { target: 'body' })\n handleMenuSize(event: CustomEvent) {\n this.size = event.detail;\n }\n\n handleEventEmission() {\n this.ifxDropdownItem.emit(this.el.textContent)\n }\n\n render() {\n let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n return (\n <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n <span>\n <slot />\n </span>\n </a>\n );\n }\n}"],"version":3}

package/dist/components/ifx-dropdown-menu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
 const dropdownMenuCss = ":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";
 const IfxDropdownMenuStyle0 = dropdownMenuCss;

package/dist/components/ifx-dropdown-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-menu.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye,CAAC;AAClgB,8BAAe,eAAe;;MCQjB,YAAY~~;;;;;;;sBACG~~,KAAK;~~oBACR~~,GAAG;~~8BACS~~,KAAK;~~6BAIe~~,EAAE~~;;IAIzD~~,gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;KACtC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAC5C;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;aACzC;iBAAM;gBACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;aACxC;SACF;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KACpC;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n position: relative;\n z-index: 1000;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n font-family: var(--ifx-font-family);\n\n &.small {\n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding {\n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","// dropdown-menu.tsx\nimport { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-menu',\n styleUrl: 'dropdown-menu.scss',\n shadow: true\n})\n\nexport class DropdownMenu {\n @Prop() isOpen: boolean = false;\n @Prop() size: string = 'l'\n @State() hideTopPadding: boolean = false;\n @Element() el;\n\n @Event() menuSize: EventEmitter;\n @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n @Listen('ifxInput')\n handleMenuFilter(event: CustomEvent) {\n const searchValue = event.detail;\n this.filterDropdownItems(searchValue)\n }\n\n @Listen('ifxDropdownItem')\n handleDropdownItemValueEmission(event: CustomEvent) {\n this.ifxDropdownMenuItem.emit(event.detail)\n }\n\n filterDropdownItems(searchValue: string) {\n const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n let dropdownItem, txtValue;\n let query = searchValue.toUpperCase()\n\n for (let i = 0; i < allItems.length; i++) {\n dropdownItem = allItems[i];\n txtValue = dropdownItem.textContent \|\| dropdownItem.innerText;\n\n if (txtValue.toUpperCase().indexOf(query) > -1) {\n dropdownItem.setAttribute('hide', false)\n } else {\n dropdownItem.setAttribute('hide', true)\n }\n }\n }\n\n componentWillUpdate() {\n this.menuSize.emit(this.size)\n }\n\n componentWillLoad() {\n this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n const searchField = this.el.querySelector('ifx-search-field')\n const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n if (searchField \|\| dropdownHeader) {\n this.hideTopPadding = true;\n } else this.hideTopPadding = false;\n }\n\n\n render() {\n return (\n <div class={`dropdown-menu \n ${this.isOpen ? 'show' : ''} \n ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n ${this.size === 's' ? 'small' : \"\"}`\n } >\n <slot />\n </div >\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown-menu.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye,CAAC;AAClgB,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;;;;;QAOU,WAAM,GAAY,KAAK,CAAC;QACxB,SAAI,GAAW,GAAG,CAAA;QACjB,mBAAc,GAAY,KAAK,CAAC;QAIhC,kBAAa,GAAiC,EAAE,CAAC;KAyD3D;IArDC,gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;KACtC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAC5C;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;aACzC;iBAAM;gBACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;aACxC;SACF;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KACpC;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n position: relative;\n z-index: 1000;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n font-family: var(--ifx-font-family);\n\n &.small {\n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding {\n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","// dropdown-menu.tsx\nimport { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-menu',\n styleUrl: 'dropdown-menu.scss',\n shadow: true\n})\n\nexport class DropdownMenu {\n @Prop() isOpen: boolean = false;\n @Prop() size: string = 'l'\n @State() hideTopPadding: boolean = false;\n @Element() el;\n\n @Event() menuSize: EventEmitter;\n @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n @Listen('ifxInput')\n handleMenuFilter(event: CustomEvent) {\n const searchValue = event.detail;\n this.filterDropdownItems(searchValue)\n }\n\n @Listen('ifxDropdownItem')\n handleDropdownItemValueEmission(event: CustomEvent) {\n this.ifxDropdownMenuItem.emit(event.detail)\n }\n\n filterDropdownItems(searchValue: string) {\n const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n let dropdownItem, txtValue;\n let query = searchValue.toUpperCase()\n\n for (let i = 0; i < allItems.length; i++) {\n dropdownItem = allItems[i];\n txtValue = dropdownItem.textContent \|\| dropdownItem.innerText;\n\n if (txtValue.toUpperCase().indexOf(query) > -1) {\n dropdownItem.setAttribute('hide', false)\n } else {\n dropdownItem.setAttribute('hide', true)\n }\n }\n }\n\n componentWillUpdate() {\n this.menuSize.emit(this.size)\n }\n\n componentWillLoad() {\n this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n const searchField = this.el.querySelector('ifx-search-field')\n const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n if (searchField \|\| dropdownHeader) {\n this.hideTopPadding = true;\n } else this.hideTopPadding = false;\n }\n\n\n render() {\n return (\n <div class={`dropdown-menu \n ${this.isOpen ? 'show' : ''} \n ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n ${this.size === 's' ? 'small' : \"\"}`\n } >\n <slot />\n </div >\n );\n }\n}"],"version":3}

package/dist/components/ifx-dropdown-separator.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { D as DropdownSeparator, d as defineCustomElement$1 } from './p-4b3befbf.js';
+import { D as DropdownSeparator, d as defineCustomElement$1 } from './p-920ceb71.js';
 const IfxDropdownSeparator = DropdownSeparator;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-dropdown-trigger-button.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
-import { d as defineCustomElement$3 } from './p-d0a26bd5.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
+import { d as defineCustomElement$3 } from './p-af1f8464.js';
+import { d as defineCustomElement$2 } from './p-eee401ca.js';
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
 const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;
@@ -12,9 +12,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         this.__attachShadow();
         this.isOpen = false;
         this.theme = 'default';
-        this.variant = undefined;
         this.size = 'm';
-        this.disabled = undefined;
         this.hideArrow = false;
     }
     render() {

package/dist/components/ifx-dropdown-trigger-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-trigger-button.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,+KAA+K,CAAC;AACjN,uCAAe,wBAAwB;;MCS1B,YAAY~~;;;;;sBACG~~,KAAK;~~qBAEmB~~,SAAS~~;;oBAEjC~~,GAAG~~;;yBAEA~~,KAAK~~;;IAElC~~,MAAM;QACJ,QACE,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB,IAE/B,8DAAQ,EACP,CAAC,IAAI,CAAC,SAAS;YACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CAExE,EACd;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}\n\n.rotate {\n transition: transform 0.2s ease-in-out;\n transform: rotate(-180deg);\n margin-top: 0em;\n}\n\n.icon {\n margin-top: 0em;\n transition: transform 0.2s ease-in-out;\n}\n","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger-button',\n styleUrl: 'dropdown-trigger-button.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() variant: 'primary';\n @Prop() size: 's' \| 'm' = 'm';\n @Prop() disabled: boolean;\n @Prop() hideArrow: boolean = false;\n\n render() {\n return (\n <ifx-button\n variant={this.variant}\n theme={this.theme}\n size={this.size}\n disabled={this.disabled}\n class=\"dropdown-trigger-button\"\n >\n <slot />\n {!this.hideArrow &&\n <ifx-icon icon=\"chevron-down-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n }\n </ifx-button>\n )\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown-trigger-button.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,+KAA+K,CAAC;AACjN,uCAAe,wBAAwB;;MCS1B,YAAY;IANzB;;;;QAOU,WAAM,GAAY,KAAK,CAAC;QAExB,UAAK,GAAqC,SAAS,CAAC;QAEpD,SAAI,GAAc,GAAG,CAAC;QAEtB,cAAS,GAAY,KAAK,CAAC;KAkBpC;IAhBC,MAAM;QACJ,QACE,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB,IAE/B,8DAAQ,EACP,CAAC,IAAI,CAAC,SAAS;YACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CAExE,EACd;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}\n\n.rotate {\n transition: transform 0.2s ease-in-out;\n transform: rotate(-180deg);\n margin-top: 0em;\n}\n\n.icon {\n margin-top: 0em;\n transition: transform 0.2s ease-in-out;\n}\n","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger-button',\n styleUrl: 'dropdown-trigger-button.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() variant: 'primary';\n @Prop() size: 's' \| 'm' = 'm';\n @Prop() disabled: boolean;\n @Prop() hideArrow: boolean = false;\n\n render() {\n return (\n <ifx-button\n variant={this.variant}\n theme={this.theme}\n size={this.size}\n disabled={this.disabled}\n class=\"dropdown-trigger-button\"\n >\n <slot />\n {!this.hideArrow &&\n <ifx-icon icon=\"chevron-down-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n }\n </ifx-button>\n )\n }\n}"],"version":3}

package/dist/components/ifx-dropdown-trigger.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
 const dropdownTriggerCss = ":host{display:inline-block;cursor:pointer}";
 const IfxDropdownTriggerStyle0 = dropdownTriggerCss;

package/dist/components/ifx-dropdown-trigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-trigger.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AACxE,iCAAe,kBAAkB;;MCSpB,YAAY~~;;;;;sBACG~~,KAAK~~;;IAE/B~~,MAAM;QACJ,QACE,8DAAQ,EACT;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger',\n styleUrl: 'dropdown-trigger.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n render() {\n return (\n <slot />\n )\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown-trigger.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AACxE,iCAAe,kBAAkB;;MCSpB,YAAY;IANzB;;;;QAOU,WAAM,GAAY,KAAK,CAAC;KAOjC;IALC,MAAM;QACJ,QACE,8DAAQ,EACT;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger',\n styleUrl: 'dropdown-trigger.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n render() {\n return (\n <slot />\n )\n }\n}"],"version":3}

package/dist/components/ifx-dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
 import { c as createPopper } from './p-e459974a.js';
 const dropdownCss = ":host{display:inline-block}";
@@ -13,14 +13,14 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         this.ifxClose = createEvent(this, "ifxClose", 7);
         this.ifxDropdown = createEvent(this, "ifxDropdown", 7);
         this.placement = 'bottom-start';
+        // isOpen prop
         this.defaultOpen = false;
+        // internal state for isOpen prop
         this.internalIsOpen = false;
+        // isOpen prop
         this.noAppendToBody = false;
-        this.disabled = undefined;
         this.noCloseOnOutsideClick = false;
         this.noCloseOnMenuClick = false;
-        this.trigger = undefined;
-        this.menu = undefined;
     }
     componentWillLoad() {
         //maybe not needed

package/dist/components/ifx-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,6BAA6B,CAAC;AAClD,0BAAe,WAAW;;MC6Bb,QAAQ~~;;;;;;;;yBACY~~,cAAc~~;2BAGd~~,KAAK~~;8BAED~~,KAAK~~;8BAGN~~,~~KAAK~~;;~~qCAUE~~,KAAK;~~kCACR~~,KAAK~~;;;;IAY3C~~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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n\n@Component({\n tag: 'ifx-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true\n})\n\nexport class Dropdown {\n @Prop() placement: Placement = 'bottom-start';\n\n // isOpen prop\n @Prop() defaultOpen: boolean = false;\n // internal state for isOpen prop\n @State() internalIsOpen: boolean = false;\n\n // isOpen prop\n @Prop() noAppendToBody: boolean = false;\n\n // Custom events for opening and closing dropdown\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n @Event() ifxDropdown: EventEmitter;\n\n // determine if dropdown is disabled\n @Prop() disabled: boolean;\n\n @Prop() noCloseOnOutsideClick: boolean = false;\n @Prop() noCloseOnMenuClick: boolean = false;\n\n // Reference to host element\n @Element() el;\n // Dropdown trigger and menu\n @State() trigger: HTMLElement;\n @State() menu: HTMLElement\n // Popper instance for positioning\n popperInstance: any;\n\n\n\n componentWillLoad() {\n //maybe not needed\n this.updateSlotContent();\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n }\n\n\n\n @Watch('defaultOpen')\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n if (newValue) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n @Watch('disabled')\n watchHandlerDisabled(newValue: boolean) {\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n }\n }\n\n\n @Listen('slotchange')\n watchHandlerSlot() {\n this.updateSlotContent();\n }\n\n\n\n // handling assignment of trigger and menu\n updateSlotContent() {\n // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n }\n // Remove menu if exists from body\n if (!this.noAppendToBody) {\n if (this.menu) {\n this.menu.remove();\n }\n // Get new menu and add to body\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n // event handler for closing dropdown on menu click\n document.body.append(this.menu);\n } else {\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n }\n this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n }\n\n menuClickHandler() {\n if (!this.noCloseOnMenuClick) {\n this.closeDropdown();\n }\n }\n\n triggerClickHandler() {\n if (!this.internalIsOpen) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n\n disconnectedCallback() {\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n // Remove menu if exists\n if (this.menu) {\n this.menu.remove();\n }\n }\n\n @Method()\n async isOpen() {\n return this.internalIsOpen;\n }\n\n @Method()\n async closeDropdown() {\n if (this.internalIsOpen) {\n this.internalIsOpen = false;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = false;\n (this.menu as unknown as IOpenable).isOpen = false;\n // Emit close event\n this.ifxClose.emit();\n }\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n @Method()\n async openDropdown() {\n if (!this.internalIsOpen && !this.disabled) {\n this.internalIsOpen = true;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = true;\n (this.menu as unknown as IOpenable).isOpen = true;\n // Create popper instance for positioning\n this.popperInstance = createPopper(\n this.el,\n this.menu,\n { placement: this.placement });\n\n this.ifxOpen.emit();\n }\n }\n\n //emitted by and listening to it from the dropdown menu right now\n // @Listen('ifxDropdownMenu')\n // handleDropdownMenuEvents(event: CustomEvent) {\n // this.ifxDropdown.emit(event.detail)\n // console.log('Selected item received in higher-level parent:');\n // }\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n // Close dropdown if outside click\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n this.closeDropdown();\n }\n }\n\n render() {\n return (\n <div aria-label='dropdown menu' class='dropdown'>\n <slot />\n </div>\n )\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n\n@Component({\n tag: 'ifx-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true\n})\n\nexport class Dropdown {\n @Prop() placement: Placement = 'bottom-start';\n\n // isOpen prop\n @Prop() defaultOpen: boolean = false;\n // internal state for isOpen prop\n @State() internalIsOpen: boolean = false;\n\n // isOpen prop\n @Prop() noAppendToBody: boolean = false;\n\n // Custom events for opening and closing dropdown\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n @Event() ifxDropdown: EventEmitter;\n\n // determine if dropdown is disabled\n @Prop() disabled: boolean;\n\n @Prop() noCloseOnOutsideClick: boolean = false;\n @Prop() noCloseOnMenuClick: boolean = false;\n\n // Reference to host element\n @Element() el;\n // Dropdown trigger and menu\n @State() trigger: HTMLElement;\n @State() menu: HTMLElement\n // Popper instance for positioning\n popperInstance: any;\n\n\n\n componentWillLoad() {\n //maybe not needed\n this.updateSlotContent();\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n }\n\n\n\n @Watch('defaultOpen')\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n if (newValue) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n @Watch('disabled')\n watchHandlerDisabled(newValue: boolean) {\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n }\n }\n\n\n @Listen('slotchange')\n watchHandlerSlot() {\n this.updateSlotContent();\n }\n\n\n\n // handling assignment of trigger and menu\n updateSlotContent() {\n // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n }\n // Remove menu if exists from body\n if (!this.noAppendToBody) {\n if (this.menu) {\n this.menu.remove();\n }\n // Get new menu and add to body\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n // event handler for closing dropdown on menu click\n document.body.append(this.menu);\n } else {\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n }\n this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n }\n\n menuClickHandler() {\n if (!this.noCloseOnMenuClick) {\n this.closeDropdown();\n }\n }\n\n triggerClickHandler() {\n if (!this.internalIsOpen) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n\n disconnectedCallback() {\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n // Remove menu if exists\n if (this.menu) {\n this.menu.remove();\n }\n }\n\n @Method()\n async isOpen() {\n return this.internalIsOpen;\n }\n\n @Method()\n async closeDropdown() {\n if (this.internalIsOpen) {\n this.internalIsOpen = false;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = false;\n (this.menu as unknown as IOpenable).isOpen = false;\n // Emit close event\n this.ifxClose.emit();\n }\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n @Method()\n async openDropdown() {\n if (!this.internalIsOpen && !this.disabled) {\n this.internalIsOpen = true;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = true;\n (this.menu as unknown as IOpenable).isOpen = true;\n // Create popper instance for positioning\n this.popperInstance = createPopper(\n this.el,\n this.menu,\n { placement: this.placement });\n\n this.ifxOpen.emit();\n }\n }\n\n //emitted by and listening to it from the dropdown menu right now\n // @Listen('ifxDropdownMenu')\n // handleDropdownMenuEvents(event: CustomEvent) {\n // this.ifxDropdown.emit(event.detail)\n // console.log('Selected item received in higher-level parent:');\n // }\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n // Close dropdown if outside click\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n this.closeDropdown();\n }\n }\n\n render() {\n return (\n <div aria-label='dropdown menu' class='dropdown'>\n <slot />\n </div>\n )\n }\n}"],"version":3}

package/dist/components/ifx-faq.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-68d90201.js';
-import { d as defineCustomElement$4 } from './p-094bb435.js';
-import { d as defineCustomElement$3 } from './p-b2439194.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
+import { d as defineCustomElement$4 } from './p-c194f64d.js';
+import { d as defineCustomElement$3 } from './p-1ab9570f.js';
+import { d as defineCustomElement$2 } from './p-eee401ca.js';
 const faqCss = ".container{padding-top:10px}";
 const IfxFaqStyle0 = faqCss;
@@ -13,7 +13,7 @@ const Faq = /*@__PURE__*/ proxyCustomElement(class Faq extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '738b7cb857432407faa6c5f30937ab61387f68de', class: 'container' }, h("ifx-accordion", { key: 'e1ae6351d53e781a3b41ac49e16cc2093b0b6807' }, h("ifx-accordion-item", { key: '41284177166adc4b2840f9f9c77c0a45f7199f97', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '3e268136bed4d1b8ab81df1292316109a91981ce', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: 'ae3f36e903b49a95399672c841caa346f710adf4', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '74a86da45e80299dbb2c71ae24ed38786a9bbfd9', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '9ada819b3bd9aa0dac03428847ac7004139078b1', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: '81dac064edfea12005954ca731cbbe00b8d69698', class: 'container' }, h("ifx-accordion", { key: 'f0a52cd1a0c95d038e036c3643504033b15cb342' }, h("ifx-accordion-item", { key: 'e1ed7801a5e7c5d83c8e0ee934dfdfea1925dc4d', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '792c48fae24d106277a76554f5d66f5aaa0bb384', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '4ed509e6535edf0408f9ed9163d66e979c653370', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'a358a22ca675e01d5e402fe8a4268b27ccb471c5', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '88a06feeb2a093b38797667aec93adf4d82502d5', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
     static get style() { return IfxFaqStyle0; }
 }, [1, "ifx-faq"]);

package/dist/components/ifx-filter-accordion.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
-import { d as defineCustomElement$3 } from './p-7e430b83.js';
-import { d as defineCustomElement$2 } from './p-6174315c.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
+import { d as defineCustomElement$3 } from './p-eee401ca.js';
+import { d as defineCustomElement$2 } from './p-28238f7f.js';
 // utils.ts
 function getInitiallySelectedItems(el) {
@@ -25,6 +25,10 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
         this.__attachShadow();
         this.ifxFilterAccordionChange = createEvent(this, "ifxFilterAccordionChange", 7);
         this.initialized = false;
+        this.expanded = false;
+        this.count = 0;
+        this.totalItems = 0;
+        this.filterGroupName = "";
         this.handleCheckedChange = (event) => {
             const selectedItems = event.detail.selectedItems;
             this.count = selectedItems.length;
@@ -34,11 +38,6 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
             event.stopPropagation();
             this.expanded = !this.expanded;
         };
-        this.expanded = false;
-        this.maxVisibleItems = undefined;
-        this.count = 0;
-        this.totalItems = 0;
-        this.filterGroupName = "";
     }
     componentWillLoad() {
         this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);
@@ -54,8 +53,8 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (h("div", { key: 'aa3625120584b17c8c60dfa60d652064e3730302', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'd58e8752ab6427e0f7c3cffa6111b8084f06f3f7', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'fabff11cffb12322724123a85bb8a9fcb5d722e6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '608f87f282eae985bfab164fa3285722f0bb7003', class: "text" }, h("span", { key: '53d4b29a76a9f2e560a5e90ac5ecaeb2bbce2e41' }, this.filterGroupName), h("ifx-number-indicator", { key: '8e05960cf2af1d6fcaadcd9dea7418b356336230' }, this.count)), h("ifx-icon", { key: '0586c6fa00fdf20ba8e9fa33c7125762f430a240', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '6c22169af8545f711c91b13bdd138ce9121fab1c', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '43b2be13c353da05d9101e3dde1fc1ed7911bd7d', class: "filter-accordion-container" }, h("slot", { key: 'e738f6ed3f867f155b284e4987e526eb639ec6a7', name: "list" }))));
+        return (h("div", { key: '4aeae13a1f2811af139413ae351ab70cfbb8ecaf', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'e17ac3e8bc1dce7555e3824b2cb66228c333e6ae', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '2ac732ab1951cc921078be5757d01325d1794fd6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '3d5d4ae28ad2cba68d3d8a2096bda53242ac69f1', class: "text" }, h("span", { key: '669dc7417d9303199c3cb68ff7a4a0ef4dd8fdab' }, this.filterGroupName), h("ifx-number-indicator", { key: 'b154ed9d7824f62bd1fc18fcb524739de66c3260' }, this.count)), h("ifx-icon", { key: '1c02692efa10b0c4f3af56ce921599a4dc4c5ba0', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'be1893204c1771593d25e4ed24cfe7e5876012c8', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: '7c6e4e04a0e0050b3934184002348432dfe92245', class: "filter-accordion-container" }, h("slot", { key: '1ff8e788b37c48a82a65667d24ddecbb8675bcda', name: "list" }))));
     }
     get el() { return this; }
     static get style() { return IfxFilterAccordionStyle0; }

package/dist/components/ifx-filter-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-filter-accordion.js","mappings":";;;;AAAA;SACgB,yBAAyB,CAAC,EAAe;IACtD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;SAEtD,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,MAAM,CAAC;SACvD,GAAG,CAAC,KAAK;QACR,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;SACjC,CAAC;KACH,CAAC,CAAC;AACP;;ACZA,MAAM,kBAAkB,GAAG,s0BAAs0B,CAAC;AACl2B,iCAAe,kBAAkB;;MCOpB,eAAe~~;;;;;;QAClB~~,gBAAW,GAAG,KAAK,CAAC;~~QAyB9B~~,wBAAmB,GAAG,CAAC,KAAkB;YACrC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;YACjD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;SAC9F,CAAA;QAMD,oBAAe,GAAG,CAAC,KAAiB;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAChC,CAAA;~~wBApC4B,KAAK;;qBAET,CAAC~~;~~0BACJ~~,~~CAAC;+BAEG,EAAE;;IAI5B,~~iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAErE;IAEH,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,aAAa,GAAG,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACzD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;KACF;IASC,mBAAmB;QACjB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACxE;IAOD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACxD,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACpF,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC5D,4DAAK,KAAK,EAAC,MAAM,IACf,+DAAO,IAAI,CAAC,eAAe,CAAQ,EACnC,+EAAuB,IAAI,CAAC,KAAK,CAAwB,CACrD,EACN,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,QAAQ,EACpC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,EACZ,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EACpC,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,CACR,CACF,EACL,IAAI,CAAC,QAAQ;YACZ,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CAEJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\nexport function getInitiallySelectedItems(el: HTMLElement) {\n return Array.from(el.querySelectorAll('ifx-list-entry'))\n\n .filter(entry => entry.getAttribute('value') === 'true')\n .map(entry => {\n return {\n label: entry.getAttribute('label'),\n value: entry.getAttribute('value'),\n type: entry.getAttribute('type')\n };\n });\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.header {\n display: flex;\n align-items: flex-start;\n align-self: stretch;\n cursor: pointer;\n border-left: 3px solid transparent;\n}\n\n.text-and-icon {\n display: flex;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\n align-items: center;\n gap: tokens.$ifxSpace200;\n flex: 1 0 0;\n}\n\n.header.expanded {\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n.text {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1 0 0;\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n}\n\n.hidden {\n display: none;\n}\n\n.accordion {\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n.filter-accordion-container {\n display: flex;\n padding: 8px 16px 16px 20px;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: none;\n}\n\n.link {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: block;\n}\n\n.show-more .show-more-link {\n display: none;\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { getInitiallySelectedItems } from '../utils';\n\n@Component({\n tag: 'ifx-filter-accordion',\n styleUrl: 'filter-accordion.scss',\n shadow: true,\n})\nexport class FilterAccordion {\n private initialized = false;\n @Element() private el: HTMLElement;\n @State() expanded: boolean = false;\n @Prop() maxVisibleItems: number;\n @State() count: number = 0;\n @State() totalItems = 0;\n\n @Prop() filterGroupName = \"\";\n\n @Event() ifxFilterAccordionChange: EventEmitter;\n\n componentWillLoad() {\n this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\n\n }\n\ncomponentDidLoad() {\n if (!this.initialized) {\n const selectedItems = getInitiallySelectedItems(this.el);\n this.count = selectedItems.length;\n this.initialized = true; // Prevent further execution in future calls\n }\n}\n\n\nhandleCheckedChange = (event: CustomEvent) => {\n const selectedItems = event.detail.selectedItems;\n this.count = selectedItems.length;\n this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\n }\n\n toggleAccordion = (event: MouseEvent) => {\n event.stopPropagation();\n this.expanded = !this.expanded;\n }\n\n render() {\n return (\n <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\n <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\n <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\n <div class=\"text\">\n <span>{this.filterGroupName}</span>\n <ifx-number-indicator>{this.count}</ifx-number-indicator>\n </div>\n <ifx-icon\n class={this.expanded ? '' : 'hidden'}\n icon=\"minus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n <ifx-icon\n class={this.expanded ? 'hidden' : ''}\n icon=\"plus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n </div>\n </div>\n {this.expanded &&\n <div class=\"filter-accordion-container\">\n <slot name=\"list\"></slot>\n </div>\n }\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-filter-accordion.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\nexport function getInitiallySelectedItems(el: HTMLElement) {\n return Array.from(el.querySelectorAll('ifx-list-entry'))\n\n .filter(entry => entry.getAttribute('value') === 'true')\n .map(entry => {\n return {\n label: entry.getAttribute('label'),\n value: entry.getAttribute('value'),\n type: entry.getAttribute('type')\n };\n });\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.header {\n display: flex;\n align-items: flex-start;\n align-self: stretch;\n cursor: pointer;\n border-left: 3px solid transparent;\n}\n\n.text-and-icon {\n display: flex;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\n align-items: center;\n gap: tokens.$ifxSpace200;\n flex: 1 0 0;\n}\n\n.header.expanded {\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n.text {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1 0 0;\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n}\n\n.hidden {\n display: none;\n}\n\n.accordion {\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n.filter-accordion-container {\n display: flex;\n padding: 8px 16px 16px 20px;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: none;\n}\n\n.link {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: block;\n}\n\n.show-more .show-more-link {\n display: none;\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { getInitiallySelectedItems } from '../utils';\n\n@Component({\n tag: 'ifx-filter-accordion',\n styleUrl: 'filter-accordion.scss',\n shadow: true,\n})\nexport class FilterAccordion {\n private initialized = false;\n @Element() private el: HTMLElement;\n @State() expanded: boolean = false;\n @Prop() maxVisibleItems: number;\n @State() count: number = 0;\n @State() totalItems = 0;\n\n @Prop() filterGroupName = \"\";\n\n @Event() ifxFilterAccordionChange: EventEmitter;\n\n componentWillLoad() {\n this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\n\n }\n\ncomponentDidLoad() {\n if (!this.initialized) {\n const selectedItems = getInitiallySelectedItems(this.el);\n this.count = selectedItems.length;\n this.initialized = true; // Prevent further execution in future calls\n }\n}\n\n\nhandleCheckedChange = (event: CustomEvent) => {\n const selectedItems = event.detail.selectedItems;\n this.count = selectedItems.length;\n this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\n }\n\n toggleAccordion = (event: MouseEvent) => {\n event.stopPropagation();\n this.expanded = !this.expanded;\n }\n\n render() {\n return (\n <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\n <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\n <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\n <div class=\"text\">\n <span>{this.filterGroupName}</span>\n <ifx-number-indicator>{this.count}</ifx-number-indicator>\n </div>\n <ifx-icon\n class={this.expanded ? '' : 'hidden'}\n icon=\"minus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n <ifx-icon\n class={this.expanded ? 'hidden' : ''}\n icon=\"plus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n </div>\n </div>\n {this.expanded &&\n <div class=\"filter-accordion-container\">\n <slot name=\"list\"></slot>\n </div>\n }\n </div>\n );\n }\n}"],"version":3}

package/dist/components/ifx-filter-bar.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-68d90201.js';
-import { d as defineCustomElement$3 } from './p-d0a26bd5.js';
-import { d as defineCustomElement$2 } from './p-7e430b83.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-35713bcf.js';
+import { d as defineCustomElement$3 } from './p-af1f8464.js';
+import { d as defineCustomElement$2 } from './p-eee401ca.js';
 const filterBarCss = ":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";
 const IfxFilterBarStyle0 = filterBarCss;
@@ -11,6 +11,10 @@ const FilterBar = /*@__PURE__*/ proxyCustomElement(class FilterBar extends H {
         this.__registerHost();
         this.__attachShadow();
         this.ifxTopbarFilterChange = createEvent(this, "ifxTopbarFilterChange", 7);
+        this.selectedOptions = [];
+        this.showAllFilters = false;
+        this.maxShownFilters = 4; // Default to 4, can be overridden by parent component
+        this.showMoreFiltersButton = true;
         this.handleMoreFiltersClick = () => {
             this.showAllFilters = true;
             this.updateVisibleSlots(); // Recalculate visible slots based on the new state
@@ -67,11 +71,6 @@ const FilterBar = /*@__PURE__*/ proxyCustomElement(class FilterBar extends H {
             this.selectedOptions = newSelectedOptions;
             this.ifxTopbarFilterChange.emit(this.selectedOptions);
         };
-        this.selectedOptions = [];
-        this.showAllFilters = false;
-        this.maxShownFilters = 4;
-        this.visibleSlots = undefined;
-        this.showMoreFiltersButton = true;
     }
     /* If the component is ever removed and then reattached to the DOM,
   connectedCallback ensures that the event listeners are properly set up again */
@@ -98,7 +97,7 @@ const FilterBar = /*@__PURE__*/ proxyCustomElement(class FilterBar extends H {
         // Calculate slotsToShow safely
         const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
         const slots = Array.from({ length: slotsToShow }, (_, i) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
-        return (h(Host, { key: '35a34ca34dd85212aed13e7b39aa8dc9aedfea23' }, h("div", { key: '2111e92aa836710a87dc3ac6d9cbb3540e99aee5', class: "search-container" }, h("slot", { key: 'b76a2f2c6c03ba37409a981ed86c629d9fade984', name: "filter-search" }), " "), h("div", { key: 'e279a2f70040fd54e91b679a00ac29c13e63fbab', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '569dc71e0b56cf291b203563e352f653c12c54a5', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '15595408192d1f6db0021e2f5c01cf28a2aa38c2', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: 'f3795573912575cd8139f170b577ffb6aca518ca', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: '8ffcbb0968bdd83b7d7f2e43ed48f42d39977732' }, h("div", { key: '7cb3a8a4d5f0ad7b0f2610ea27f0a805328e8eb7', class: "search-container" }, h("slot", { key: '4d9ea4aea490bf15c98011366594e6334e5cd2f1', name: "filter-search" }), " "), h("div", { key: '42c5b558e0095e81dea5440765c34e38c9658564', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'd202e60944d15b73281705ab9da10b0182881e38', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'ab0fcaa64cdc33211cb184f8797acade0874d95a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: 'f8258f0e65e87c38ed0a4b5355e17c76c083aca0', icon: "filter-16" }), "More filters"))))));
     }
     get el() { return this; }
     static get style() { return IfxFilterBarStyle0; }

package/dist/components/ifx-filter-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-filter-bar.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss /\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n width: 100%;\n}\n\n.search-container {\n display: flex;\n width: calc(100% - 48px); / Adjust width to account for padding /\n padding-left: 24px;\n padding-right: 24px; flex-direction: row;\n align-items: flex-start;\n margin-bottom: tokens.$ifxSpace200;\n}\n\n.components-container {\n display: flex;\n width: calc(100% - 48px); / Adjust width to account for padding /\n padding-left: 24px;\n padding-right: 24px; flex-direction: row;\n align-items: flex-end;\n align-content:flex-end;\n flex-wrap: wrap;\n gap: tokens.$ifxSpace200;\n}\n\n.filter-slot-wrapper {\n flex-grow: 1;\n flex-basis: 100%; \n max-width: 100%; \n }\n\n@media (max-width: 1024px) { / Adjust based on your breakpoints for mid/small screens /\n .more-filters-wrapper {\n order: 3; / Keeps the button at the end/new row /\n width: 100%; / Takes full width to allow centering /\n display: flex; / Enables flexbox properties /\n justify-content: center; / Centers the button horizontally /\n padding-top: tokens.$ifxSpace200; / Adds space above the button, adjust as needed /\n }\n }\n\n\n @media (min-width: 720px) and (max-width: 1024px) {\n .filter-slot-wrapper {\n flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\n max-width: calc((100% - tokens.$ifxSpace200) / 2);\n }\n \n\n}\n\n @media (min-width: 1025px) {\n .filter-slot-wrapper {\n flex-basis: auto; \n max-width: 200px; \n }\n\n ::slotted([slot=\"filter-search\"]) {\n max-width: 828px;\n }\n }\n \n ::slotted([slot=\"filter-search\"]) {\n flex-grow: 1;\n flex-basis: 100%;\n width: 100%; \n }","// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-filter-bar',\n styleUrl: 'filter-bar.scss',\n shadow: true\n})\nexport class FilterBar {\n @Element() el: HTMLElement;\n @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n @Event() ifxTopbarFilterChange: EventEmitter;\n @State() showAllFilters: boolean = false;\n @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n / If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again /\n connectedCallback() {\n this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n \n componentDidLoad() {\n this.updateVisibleSlots();\n }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n handleMoreFiltersClick = () => {\n this.showAllFilters = true;\n this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n }\n\n handleResetEvent = () => {\n const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n \n filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n if (searchField.length > 0) {\n searchField.forEach((searchFieldElement: any) => {\n searchFieldElement.value = '';\n });\n }\n });\n }\n\n this.selectedOptions = [];\n\n // Emit the change to inform any parent components that the filters have been reset\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n\n handleSearchChange = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleFilterSelect = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleTopbarFilterChange = (event: CustomEvent) => {\n const newSelectedOptions = [...this.selectedOptions];\n\n if (event.type === 'ifxFilterSearchChange') {\n const { filterName, filterValue } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n // If an existing filter is found, update its value\n newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n }\n } else if (event.type === 'ifxFilterSelect') {\n const { filterName, filterValues, type } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n }\n }\n\n this.selectedOptions = newSelectedOptions;\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n render() {\n const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n // Calculate slotsToShow safely\n const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n const slots = Array.from({ length: slotsToShow }, (_, i) => (\n <div class=\"filter-slot-wrapper\">\n <slot name={`filter-component-${i + 1}`}></slot>\n </div>\n ));\n\n return (\n <Host>\n <div class=\"search-container\">\n <slot name=\"filter-search\"></slot> {/ Directly place the search slot here */}\n </div>\n <div class=\"components-container\">\n {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n {this.showMoreFiltersButton && !this.showAllFilters && (\n <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n </ifx-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-filter-bar.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,i4BAAi4B,CAAC;AACv5B,2BAAe,YAAY;;MCOd,SAAS;IALtB;;;;;QAOW,oBAAe,GAAwE,EAAE,CAAC;QAE1F,mBAAc,GAAY,KAAK,CAAC;QACjC,oBAAe,GAAW,CAAC,CAAC;QAE9B,0BAAqB,GAAY,IAAI,CAAC;QA0B5C,2BAAsB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B,CAAA;QAED,qBAAgB,GAAG;;YACjB,MAAM,gBAAgB,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,4BAA4B,CAAC,CAAC;YACzF,IAAI,gBAAgB,YAAY,eAAe,EAAE;gBAC/C,MAAM,2BAA2B,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBAE3F,2BAA2B,CAAC,OAAO,CAAC,CAAC,mBAAgC;oBACnE,MAAM,YAAY,GAAG,mBAAmB,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAE5E,MAAM,WAAW,GAAG,YAAY,CAAC,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;oBAEhF,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC1B,WAAW,CAAC,OAAO,CAAC,CAAC,kBAAuB;4BAC1C,kBAAkB,CAAC,KAAK,GAAG,EAAE,CAAC;yBAC/B,CAAC,CAAC;qBACJ;iBACF,CAAC,CAAC;aACJ;YAEC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;;YAG1B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACvD,CAAA;QAGD,uBAAkB,GAAG,CAAC,KAAkB;YACtC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;SACtC,CAAA;QAED,uBAAkB,GAAG,CAAC,KAAkB;YACtC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;SACtC,CAAA;QAED,6BAAwB,GAAG,CAAC,KAAkB;YAC5C,MAAM,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;YAErD,IAAI,KAAK,CAAC,IAAI,KAAK,uBAAuB,EAAE;gBAC1C,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACjD,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,SAAS,CAAC,MAAM,IAAI,MAAM,CAAC,UAAU,KAAK,UAAU,CAAC,CAAC;gBAErG,IAAI,mBAAmB,KAAK,CAAC,CAAC,EAAE;;oBAE9B,kBAAkB,CAAC,mBAAmB,CAAC,CAAC,YAAY,GAAG,CAAC,WAAW,CAAC,CAAC;iBACtE;qBAAM;oBACL,kBAAkB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;iBAChG;aACF;iBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,iBAAiB,EAAE;gBAC3C,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACxD,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,SAAS,CAAC,MAAM,IAAI,MAAM,CAAC,UAAU,KAAK,UAAU,CAAC,CAAC;gBAErG,IAAI,mBAAmB,KAAK,CAAC,CAAC,EAAE;oBAC9B,kBAAkB,CAAC,mBAAmB,CAAC,CAAC,YAAY,GAAG,YAAY,CAAC;oBACpE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC;iBACrD;qBAAM;oBACL,kBAAkB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;iBAC7F;aACF;YAED,IAAI,CAAC,eAAe,GAAG,kBAAkB,CAAC;YAC1C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACvD,CAAA;KAiCF;;;IAxHC,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC3E,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC3E,MAAM,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACxE;IAED,mBAAmB;QACjB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC9E,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC9E,MAAM,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC3E;IAGD,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;;IAGH,kBAAkB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC1F;IAqEA,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAExD,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC;;QAEnF,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAElG,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MACrD,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAE,oBAAoB,CAAC,GAAG,CAAC,EAAE,GAAS,CAC5C,CACP,CAAC,CAAC;QAEH,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DAAM,IAAI,EAAC,eAAe,GAAQ,MAC9B,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,YAAM,IAAI,EAAC,kBAAkB,GAAQ,EAChE,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,cAAc,KACjD,4DAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,IACpE,mEAAY,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,gBAAY,OAAO,IACvH,iEAAU,IAAI,EAAC,WAAW,GAAY,iBAC3B,CACT,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss /\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n width: 100%;\n}\n\n.search-container {\n display: flex;\n width: calc(100% - 48px); / Adjust width to account for padding /\n padding-left: 24px;\n padding-right: 24px; flex-direction: row;\n align-items: flex-start;\n margin-bottom: tokens.$ifxSpace200;\n}\n\n.components-container {\n display: flex;\n width: calc(100% - 48px); / Adjust width to account for padding /\n padding-left: 24px;\n padding-right: 24px; flex-direction: row;\n align-items: flex-end;\n align-content:flex-end;\n flex-wrap: wrap;\n gap: tokens.$ifxSpace200;\n}\n\n.filter-slot-wrapper {\n flex-grow: 1;\n flex-basis: 100%; \n max-width: 100%; \n }\n\n@media (max-width: 1024px) { / Adjust based on your breakpoints for mid/small screens /\n .more-filters-wrapper {\n order: 3; / Keeps the button at the end/new row /\n width: 100%; / Takes full width to allow centering /\n display: flex; / Enables flexbox properties /\n justify-content: center; / Centers the button horizontally /\n padding-top: tokens.$ifxSpace200; / Adds space above the button, adjust as needed /\n }\n }\n\n\n @media (min-width: 720px) and (max-width: 1024px) {\n .filter-slot-wrapper {\n flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\n max-width: calc((100% - tokens.$ifxSpace200) / 2);\n }\n \n\n}\n\n @media (min-width: 1025px) {\n .filter-slot-wrapper {\n flex-basis: auto; \n max-width: 200px; \n }\n\n ::slotted([slot=\"filter-search\"]) {\n max-width: 828px;\n }\n }\n \n ::slotted([slot=\"filter-search\"]) {\n flex-grow: 1;\n flex-basis: 100%;\n width: 100%; \n }","// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-filter-bar',\n styleUrl: 'filter-bar.scss',\n shadow: true\n})\nexport class FilterBar {\n @Element() el: HTMLElement;\n @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n @Event() ifxTopbarFilterChange: EventEmitter;\n @State() showAllFilters: boolean = false;\n @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n / If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again /\n connectedCallback() {\n this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n \n componentDidLoad() {\n this.updateVisibleSlots();\n }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n handleMoreFiltersClick = () => {\n this.showAllFilters = true;\n this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n }\n\n handleResetEvent = () => {\n const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n \n filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n if (searchField.length > 0) {\n searchField.forEach((searchFieldElement: any) => {\n searchFieldElement.value = '';\n });\n }\n });\n }\n\n this.selectedOptions = [];\n\n // Emit the change to inform any parent components that the filters have been reset\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n\n handleSearchChange = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleFilterSelect = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleTopbarFilterChange = (event: CustomEvent) => {\n const newSelectedOptions = [...this.selectedOptions];\n\n if (event.type === 'ifxFilterSearchChange') {\n const { filterName, filterValue } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n // If an existing filter is found, update its value\n newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n }\n } else if (event.type === 'ifxFilterSelect') {\n const { filterName, filterValues, type } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n }\n }\n\n this.selectedOptions = newSelectedOptions;\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n render() {\n const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n // Calculate slotsToShow safely\n const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n const slots = Array.from({ length: slotsToShow }, (_, i) => (\n <div class=\"filter-slot-wrapper\">\n <slot name={`filter-component-${i + 1}`}></slot>\n </div>\n ));\n\n return (\n <Host>\n <div class=\"search-container\">\n <slot name=\"filter-search\"></slot> {/ Directly place the search slot here */}\n </div>\n <div class=\"components-container\">\n {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n {this.showMoreFiltersButton && !this.showAllFilters && (\n <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n </ifx-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"],"version":3}