npm - @infineon/infineon-design-system-stencil - Versions diffs - 35.2.1--canary.1915.32cd2bb4f10a56009afc8f203cb1c8b1c00f41e3.0 → 35.3.0--canary.1921.e5a0855012d7c07d80effbc06e6a380d4a6e43d9.0 - Mend

@infineon/infineon-design-system-stencil 35.2.1--canary.1915.32cd2bb4f10a56009afc8f203cb1c8b1c00f41e3.0 → 35.3.0--canary.1921.e5a0855012d7c07d80effbc06e6a380d4a6e43d9.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 (107) hide show

package/dist/components/{p-4cf462ca.js → p-7df26dbf.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$1 } from './p-12e75dad.js';
+import { d as defineCustomElement$1 } from './p-9aa64d29.js';
-const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
+const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{height:0;transition:height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
 const IfxAccordionItemStyle0 = accordionItemCss;
 const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem extends H {
@@ -26,6 +26,7 @@ const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem
     }
     openChanged(newValue) {
         this.internalOpen = newValue;
+        this.openAccordionItem();
     }
     toggleOpen() {
         this.internalOpen = !this.internalOpen;
@@ -36,13 +37,19 @@ const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem
         else {
             this.ifxClose.emit({ isClosed: !this.internalOpen });
         }
+        this.openAccordionItem();
     }
     openAccordionItem() {
         if (this.internalOpen) {
-            this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
+            this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
+            this.contentEl.style.overflow = 'hidden';
+            this.contentEl.addEventListener('transitionend', () => {
+                this.contentEl.style.overflow = 'visible';
+            }, { once: true });
         }
         else {
-            this.contentEl.style.maxHeight = '0';
+            this.contentEl.style.height = '0';
+            this.contentEl.style.overflow = 'hidden';
         }
     }
     handleSlotChange(e) {
@@ -80,7 +87,7 @@ const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem
         }
     }
     render() {
-        return (h("div", { key: '7d6ed35b5c84e3dbfe0cc42f74408ab4655a61d2', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '19350af96518b086d24cfb653ba8c41ce9a8d4e8', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, h("span", { key: '56d40596ed604a5c24274dbde190802dd000e801', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: 'c93ace2e23cc1b9d5e50f8ea3e6a4e3b6c65e811', icon: "chevron-down-16" })), h("span", { key: '9ac2410b6c4e9f9918ec7ca7370470c744a2cf6b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: 'a8a9058e232dcaae9aaa0ebf43a4f3fba958136a', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '81c6d61ccae983dae7ffeff557fa7e51fd10ab77', class: "inner-content" }, h("slot", { key: '54ddfcf9375576b2118822057f17ddd765e2ca47', onSlotchange: (e) => this.handleSlotChange(e) })))));
+        return (h("div", { key: '69613ca6c0f8f924e4789d91a98d409c8029b57a', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '0bb26905f229dd5b4e5f2aaed93dae957fc5e82d', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, h("span", { key: '569dfc34c0eb6559207e28477d1da2cc681e07ab', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: 'cc337ffc523ecb8b5cb486506daa409368821c5f', icon: "chevron-down-16" })), h("span", { key: '4bdb8433a77c0670262a797b9c1ed2dba996e40c', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: 'e7108cbaa92d4426e1a4f9bd7304297bf0f4b407', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '4780c7d7a46de589fb1f21f3af177594be310397', class: "inner-content" }, h("slot", { key: 'd2e576977c607b21d325d99363fa84ec5da92e24', onSlotchange: (e) => this.handleSlotChange(e) })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -116,4 +123,4 @@ function defineCustomElement() {
 export { IfxAccordionItem as I, defineCustomElement as d };
-//# sourceMappingURL=p-4cf462ca.js.map
+//# sourceMappingURL=p-7df26dbf.js.map

package/dist/components/p-7df26dbf.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-7df26dbf.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n //overflow: hidden;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n height: 0;\n transition: height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n this.openAccordionItem();\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n this.openAccordionItem();\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n this.contentEl.style.overflow = 'hidden';\n this.contentEl.addEventListener('transitionend', () => {\n this.contentEl.style.overflow = 'visible';\n }, { once: true });\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}

package/dist/components/{p-c6dfc658.js → p-8be9bf0f.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-12e75dad.js';
+import { d as defineCustomElement$2 } from './p-9aa64d29.js';
 import { d as defineCustomElement$1 } from './p-9142f93b.js';
 const chipCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}";
@@ -322,4 +322,4 @@ function defineCustomElement() {
 export { Chip as C, defineCustomElement as d };
-//# sourceMappingURL=p-c6dfc658.js.map
+//# sourceMappingURL=p-8be9bf0f.js.map

package/dist/components/{p-c6dfc658.js.map → p-8be9bf0f.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-c6dfc658.js","mappings":"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","names":[],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-block;\n}\n\n.chip {\n position: relative;\n}\n\n.chip__wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: tokens.$ifxSpace100;\n\n box-sizing: border-box;\n border: 1px solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n \n background: tokens.$ifxColorBaseWhite;\n \n cursor: pointer; \n \n transition: border 100ms ease;\n\n font: tokens.$ifxBodyBody04;\n \n &:hover, &:focus-visible {\n outline: none;\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &:focus {\n border: 1px solid tokens.$ifxColorOcean500;\n }\n \n &.chip__wrapper--small {\n padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n }\n \n &.chip__wrapper--large {\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n }\n \n &.chip__wrapper--opened {\n border: 1px solid tokens.$ifxColorOcean500;\n \n .wrapper__open-button {\n transform: rotate(-180deg);\n }\n }\n \n &.chip__wrapper--selected {\n outline: 3px solid tokens.$ifxColorOcean500;\n outline-offset: -3px;\n \n color: tokens.$ifxColorOcean500;\n \n &:hover, &:focus-visible {\n outline: 3px solid tokens.$ifxColorOcean600;\n \n color: tokens.$ifxColorOcean600;\n }\n }\n}\n\n.wrapper__label {\n display: inline-flex;\n align-items: center;\n gap: tokens.$ifxSpace50;\n\n font: tokens.$ifxBodyBody04;\n \n .label__selected-options {\n font: tokens.$ifxBodyBodySemibold04;\n }\n}\n\n.wrapper__open-button {\n display:flex;\n align-items: center;\n \n transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n display:flex;\n align-items: center;\n}\n\n.chip__dropdown {\n position: absolute;\n z-index: 1;\n\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n border: 1px solid tokens.$ifxColorEngineering200;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 0;\n\n min-width: 222px;\n \n background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n tag: 'ifx-chip',\n styleUrl: 'chip.scss',\n shadow: true\n})\nexport class Chip {\n @Element() chip: HTMLIfxChipElement;\n\n @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n @Prop() placeholder: string = '';\n @Prop() size: 'small' \| 'large' = 'large';\n @Prop({ mutable: true }) value: Array<string> \| string = undefined;\n @Prop() variant: 'single' \| 'multi' = 'single';\n @Prop() readOnly: boolean = false;\n @Prop() ariaLabel: string \| null;\n\n @State() opened: boolean = false;\n @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n @Watch('value')\n handleValueChange(newValue: Array<string> \| string) {\n this.syncSelectedOptionsWithProp(newValue);\n }\n\n @Watch('readOnly')\n handleReadOnlyChange(newValue: boolean) {\n if (newValue) {\n this.opened = false;\n }\n }\n\n @Listen('mousedown', { target: 'document' })\n closeDropdownOnOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n this.toggleDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n // override behavior of all keys except Tab. Users should be able to tab out of the component.\n if (event.code !== 'Tab') {\n event.preventDefault(); \n }\n\n if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n this.handleWrapperKeyDown(event);\n } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n this.handleDropdownKeyDown(event);\n }\n }\n\n @Listen('ifxChipItemSelect')\n updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n const eventDetail: ChipItemSelectEvent = event.detail;\n const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n if (this.variant !== 'multi') {\n if (eventDetail.selected) {\n this.opened = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected && chipItem !== event.target) {\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n };\n chipItem.selected = false;\n }\n });\n this.selectedOptions = [eventDetail];\n } else {\n this.selectedOptions = [];\n }\n this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n } else {\n if (eventDetail.selected) {\n // Prevent duplicate entries\n if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n this.selectedOptions = [...this.selectedOptions, eventDetail];\n }\n } else {\n this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n }\n this.value = this.selectedOptions.map((option) => option.value);\n }\n\n if (eventDetail.emitIfxChange) {\n this.ifxChange.emit({\n previousSelection: previousSelection,\n currentSelection: this.selectedOptions,\n name: this.placeholder\n });\n }\n }\n\n getChipItems(): NodeList {\n return this.chip.querySelectorAll('ifx-chip-item');\n }\n\n getSelectedOptions(): string {\n if (this.variant !== 'multi') {\n return this.selectedOptions.map(option => option.label).join('');\n }\n return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n }\n\n toggleDropdownMenu() {\n if (this.readOnly) return;\n this.opened = !this.opened;\n }\n\n /*\n Focuses the chip item at the specified index.\n * @param index the index of the chip item to focus. -1 will focus the last chip item.\n /\n focusChipItemAt(index: number = 0) {\n this.opened = true;\n const chipItems: NodeList = this.getChipItems();\n let item: HTMLIfxChipItemElement;\n \n if (index === -1) {\n item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n } else if (index >= 0 && index < chipItems.length) {\n item = chipItems.item(index) as HTMLIfxChipItemElement;\n } else {\n console.error(`Invalid index: ${index}`);\n return;\n }\n\n const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n if (shadowItem) {\n // Delay needed for the shadow item to be rendered.\n setTimeout(() => {\n shadowItem.focus();\n }, 1);\n }\n }\n\n focusChip() {\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n chipWrapper.focus();\n }\n\n handleUnselectButtonClick(event: MouseEvent) {\n event.stopPropagation();\n this.opened = false;\n\n let itemGotUnselected = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected) {\n itemGotUnselected = true;\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n }\n chipItem.selected = false;\n }\n });\n\n / Emit event only if at least one item was unselected. */\n if (itemGotUnselected) {\n const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n this.selectedOptions = [];\n this.value = [];\n this.ifxChange.emit({\n previousSelection: previousSelection,\n currentSelection: [],\n name: this.placeholder\n });\n }\n }\n\n handleWrapperClick() {\n if (!this.readOnly) {\n this.toggleDropdownMenu();\n }\n }\n\n handleWrapperKeyDown(event: KeyboardEvent) {\n // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n if (this.readOnly) return;\n\n if (!this.opened) {\n switch (event.code) {\n case 'Space':\n case 'Enter':\n case 'ArrowDown':\n this.focusChipItemAt(0);\n break;\n case 'ArrowUp':\n this.focusChipItemAt(-1);\n break;\n }\n } else {\n switch (event.code) {\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n }\n\n handleDropdownKeyDown(event: KeyboardEvent) {\n let chipitems = this.getChipItems();\n\n let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n if (targetIndex === -1) {\n console.error('Target not found in chip items');\n return;\n }\n\n switch (event.code) {\n case 'ArrowDown':\n if (targetIndex === chipitems.length - 1) break;\n this.focusChipItemAt(targetIndex + 1);\n break;\n case 'ArrowUp':\n if (targetIndex === 0) break;\n this.focusChipItemAt( targetIndex - 1);\n break;\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n case 'Space':\n // selection is handled by the chip-item component\n if (this.variant === 'single') {\n // only close dropdown if single select\n this.opened = false;\n this.focusChip();\n }\n break;\n case 'Enter':\n // selection is handled by the chip-item component\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n\n syncChipState() {\n const chipItems: NodeList = this.getChipItems();\n let key: number = 0;\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n chipItem.chipState = {\n emitIfxChipItemSelect: true,\n size: (this.size === 'small' ? 'small' : 'large'),\n variant: (this.variant === 'multi' ? 'multi' : 'single'),\n key: key++\n };\n });\n }\n\n syncSelectedOptionsWithProp(newValue: Array<string> \| string) {\n // Clear old selected options\n this.selectedOptions = [];\n\n const generateKey = (() => {\n let count = 0;\n return () => count++;\n })();\n\n if (Array.isArray(newValue)) {\n this.selectedOptions = newValue.map(value => ({\n value,\n label: value,\n selected: true,\n key: generateKey(),\n emitIfxChange: true\n }));\n } else if (typeof newValue === 'string') {\n this.selectedOptions = [{\n value: newValue,\n label: newValue,\n selected: true,\n key: generateKey(),\n emitIfxChange: true\n }];\n }\n\n this.syncChipState();\n }\n\n componentWillLoad() {\n this.syncSelectedOptionsWithProp(this.value);\n }\n\n render() {\n return (\n <div class='chip'>\n <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n tabIndex={0}\n onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n role='combobox'\n aria-label={this.ariaLabel}\n aria-value={this.getSelectedOptions()}\n aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n aria-controls={!this.readOnly ? 'dropdown' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n >\n\n <div class='wrapper__label'>\n {\n (this.selectedOptions.length === 0) && `${this.placeholder}`\n }\n\n {\n (this.selectedOptions.length !== 0 && (this.variant === 'multi' \|\| this.readOnly) && this.placeholder !== '') &&\n `${this.placeholder}:`\n }\n\n {\n (this.selectedOptions.length !== 0) &&\n <div class='label__selected-options'>\n {this.getSelectedOptions()}\n </div>\n }\n\n {\n (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n <ifx-indicator variant='number' number={this.selectedOptions.length - 2}></ifx-indicator>\n }\n </div>\n\n {\n !this.readOnly && (this.variant !== 'multi' \|\| (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n <div class='wrapper__open-button'>\n <ifx-icon key={1} icon={`chevrondown16`} />\n </div>\n }\n\n\n { \n (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n {\n ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n </div>\n\n {\n this.opened && !this.readOnly &&\n <div id='dropdown' role='listbox' class='chip__dropdown'>\n <slot />\n </div>\n }\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-8be9bf0f.js","mappings":"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","names":[],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-block;\n}\n\n.chip {\n position: relative;\n}\n\n.chip__wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: tokens.$ifxSpace100;\n\n box-sizing: border-box;\n border: 1px solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n \n background: tokens.$ifxColorBaseWhite;\n \n cursor: pointer; \n \n transition: border 100ms ease;\n\n font: tokens.$ifxBodyBody04;\n \n &:hover, &:focus-visible {\n outline: none;\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &:focus {\n border: 1px solid tokens.$ifxColorOcean500;\n }\n \n &.chip__wrapper--small {\n padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n }\n \n &.chip__wrapper--large {\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n }\n \n &.chip__wrapper--opened {\n border: 1px solid tokens.$ifxColorOcean500;\n \n .wrapper__open-button {\n transform: rotate(-180deg);\n }\n }\n \n &.chip__wrapper--selected {\n outline: 3px solid tokens.$ifxColorOcean500;\n outline-offset: -3px;\n \n color: tokens.$ifxColorOcean500;\n \n &:hover, &:focus-visible {\n outline: 3px solid tokens.$ifxColorOcean600;\n \n color: tokens.$ifxColorOcean600;\n }\n }\n}\n\n.wrapper__label {\n display: inline-flex;\n align-items: center;\n gap: tokens.$ifxSpace50;\n\n font: tokens.$ifxBodyBody04;\n \n .label__selected-options {\n font: tokens.$ifxBodyBodySemibold04;\n }\n}\n\n.wrapper__open-button {\n display:flex;\n align-items: center;\n \n transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n display:flex;\n align-items: center;\n}\n\n.chip__dropdown {\n position: absolute;\n z-index: 1;\n\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n border: 1px solid tokens.$ifxColorEngineering200;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 0;\n\n min-width: 222px;\n \n background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n tag: 'ifx-chip',\n styleUrl: 'chip.scss',\n shadow: true\n})\nexport class Chip {\n @Element() chip: HTMLIfxChipElement;\n\n @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n @Prop() placeholder: string = '';\n @Prop() size: 'small' \| 'large' = 'large';\n @Prop({ mutable: true }) value: Array<string> \| string = undefined;\n @Prop() variant: 'single' \| 'multi' = 'single';\n @Prop() readOnly: boolean = false;\n @Prop() ariaLabel: string \| null;\n\n @State() opened: boolean = false;\n @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n @Watch('value')\n handleValueChange(newValue: Array<string> \| string) {\n this.syncSelectedOptionsWithProp(newValue);\n }\n\n @Watch('readOnly')\n handleReadOnlyChange(newValue: boolean) {\n if (newValue) {\n this.opened = false;\n }\n }\n\n @Listen('mousedown', { target: 'document' })\n closeDropdownOnOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n this.toggleDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n // override behavior of all keys except Tab. Users should be able to tab out of the component.\n if (event.code !== 'Tab') {\n event.preventDefault(); \n }\n\n if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n this.handleWrapperKeyDown(event);\n } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n this.handleDropdownKeyDown(event);\n }\n }\n\n @Listen('ifxChipItemSelect')\n updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n const eventDetail: ChipItemSelectEvent = event.detail;\n const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n if (this.variant !== 'multi') {\n if (eventDetail.selected) {\n this.opened = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected && chipItem !== event.target) {\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n };\n chipItem.selected = false;\n }\n });\n this.selectedOptions = [eventDetail];\n } else {\n this.selectedOptions = [];\n }\n this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n } else {\n if (eventDetail.selected) {\n // Prevent duplicate entries\n if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n this.selectedOptions = [...this.selectedOptions, eventDetail];\n }\n } else {\n this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n }\n this.value = this.selectedOptions.map((option) => option.value);\n }\n\n if (eventDetail.emitIfxChange) {\n this.ifxChange.emit({\n previousSelection: previousSelection,\n currentSelection: this.selectedOptions,\n name: this.placeholder\n });\n }\n }\n\n getChipItems(): NodeList {\n return this.chip.querySelectorAll('ifx-chip-item');\n }\n\n getSelectedOptions(): string {\n if (this.variant !== 'multi') {\n return this.selectedOptions.map(option => option.label).join('');\n }\n return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n }\n\n toggleDropdownMenu() {\n if (this.readOnly) return;\n this.opened = !this.opened;\n }\n\n /*\n Focuses the chip item at the specified index.\n * @param index the index of the chip item to focus. -1 will focus the last chip item.\n /\n focusChipItemAt(index: number = 0) {\n this.opened = true;\n const chipItems: NodeList = this.getChipItems();\n let item: HTMLIfxChipItemElement;\n \n if (index === -1) {\n item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n } else if (index >= 0 && index < chipItems.length) {\n item = chipItems.item(index) as HTMLIfxChipItemElement;\n } else {\n console.error(`Invalid index: ${index}`);\n return;\n }\n\n const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n if (shadowItem) {\n // Delay needed for the shadow item to be rendered.\n setTimeout(() => {\n shadowItem.focus();\n }, 1);\n }\n }\n\n focusChip() {\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n chipWrapper.focus();\n }\n\n handleUnselectButtonClick(event: MouseEvent) {\n event.stopPropagation();\n this.opened = false;\n\n let itemGotUnselected = false;\n const chipItems: NodeList = this.getChipItems();\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n if (chipItem.selected) {\n itemGotUnselected = true;\n chipItem.chipState = {\n ...chipItem.chipState,\n emitIfxChipItemSelect: false,\n }\n chipItem.selected = false;\n }\n });\n\n / Emit event only if at least one item was unselected. */\n if (itemGotUnselected) {\n const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n this.selectedOptions = [];\n this.value = [];\n this.ifxChange.emit({\n previousSelection: previousSelection,\n currentSelection: [],\n name: this.placeholder\n });\n }\n }\n\n handleWrapperClick() {\n if (!this.readOnly) {\n this.toggleDropdownMenu();\n }\n }\n\n handleWrapperKeyDown(event: KeyboardEvent) {\n // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n if (this.readOnly) return;\n\n if (!this.opened) {\n switch (event.code) {\n case 'Space':\n case 'Enter':\n case 'ArrowDown':\n this.focusChipItemAt(0);\n break;\n case 'ArrowUp':\n this.focusChipItemAt(-1);\n break;\n }\n } else {\n switch (event.code) {\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n }\n\n handleDropdownKeyDown(event: KeyboardEvent) {\n let chipitems = this.getChipItems();\n\n let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n if (targetIndex === -1) {\n console.error('Target not found in chip items');\n return;\n }\n\n switch (event.code) {\n case 'ArrowDown':\n if (targetIndex === chipitems.length - 1) break;\n this.focusChipItemAt(targetIndex + 1);\n break;\n case 'ArrowUp':\n if (targetIndex === 0) break;\n this.focusChipItemAt( targetIndex - 1);\n break;\n case 'Escape':\n this.opened = false;\n this.focusChip();\n break;\n case 'Space':\n // selection is handled by the chip-item component\n if (this.variant === 'single') {\n // only close dropdown if single select\n this.opened = false;\n this.focusChip();\n }\n break;\n case 'Enter':\n // selection is handled by the chip-item component\n this.opened = false;\n this.focusChip();\n break;\n }\n }\n\n syncChipState() {\n const chipItems: NodeList = this.getChipItems();\n let key: number = 0;\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n chipItem.chipState = {\n emitIfxChipItemSelect: true,\n size: (this.size === 'small' ? 'small' : 'large'),\n variant: (this.variant === 'multi' ? 'multi' : 'single'),\n key: key++\n };\n });\n }\n\n syncSelectedOptionsWithProp(newValue: Array<string> \| string) {\n // Clear old selected options\n this.selectedOptions = [];\n\n const generateKey = (() => {\n let count = 0;\n return () => count++;\n })();\n\n if (Array.isArray(newValue)) {\n this.selectedOptions = newValue.map(value => ({\n value,\n label: value,\n selected: true,\n key: generateKey(),\n emitIfxChange: true\n }));\n } else if (typeof newValue === 'string') {\n this.selectedOptions = [{\n value: newValue,\n label: newValue,\n selected: true,\n key: generateKey(),\n emitIfxChange: true\n }];\n }\n\n this.syncChipState();\n }\n\n componentWillLoad() {\n this.syncSelectedOptionsWithProp(this.value);\n }\n\n render() {\n return (\n <div class='chip'>\n <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n tabIndex={0}\n onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n role='combobox'\n aria-label={this.ariaLabel}\n aria-value={this.getSelectedOptions()}\n aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n aria-controls={!this.readOnly ? 'dropdown' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n >\n\n <div class='wrapper__label'>\n {\n (this.selectedOptions.length === 0) && `${this.placeholder}`\n }\n\n {\n (this.selectedOptions.length !== 0 && (this.variant === 'multi' \|\| this.readOnly) && this.placeholder !== '') &&\n `${this.placeholder}:`\n }\n\n {\n (this.selectedOptions.length !== 0) &&\n <div class='label__selected-options'>\n {this.getSelectedOptions()}\n </div>\n }\n\n {\n (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n <ifx-indicator variant='number' number={this.selectedOptions.length - 2}></ifx-indicator>\n }\n </div>\n\n {\n !this.readOnly && (this.variant !== 'multi' \|\| (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n <div class='wrapper__open-button'>\n <ifx-icon key={1} icon={`chevrondown16`} />\n </div>\n }\n\n\n { \n (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n {\n ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n <ifx-icon key={2} icon={`cross16`} />\n </div>\n }\n\n </div>\n\n {\n this.opened && !this.readOnly &&\n <div id='dropdown' role='listbox' class='chip__dropdown'>\n <slot />\n </div>\n }\n </div>\n );\n }\n}\n"],"version":3}