npm - @infineon/infineon-design-system-stencil - Versions diffs - 27.8.1--canary.1614.99503c8e6549e26bcb818b80a31682c7c6d8715c.0 → 27.9.0 - Mend

@infineon/infineon-design-system-stencil 27.8.1--canary.1614.99503c8e6549e26bcb818b80a31682c7c6d8715c.0 → 27.9.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 (46) hide show

package/dist/collection/components/chip/chip-item/chip-item.js CHANGED Viewed

@@ -56,9 +56,9 @@ export class ChipItem {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: '704162271118538ba19e0abd85178b54a04ce77e', class: `chip-item chip-item--${this.chipState.size}
-                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); } }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: '2407d29939ccbd37b4e0af36a2721d28f3d51b85', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '231a53bd835fc382272a92c5e546002a52a9b33f', class: 'chip-item__label' }, " ", h("slot", { key: '5dcb4189e1cf34a9c1803da56efa8d984d8fc2b9' }), " "), h("div", { key: 'dc57eb3753dea2b928dc3bf435e7b0467b84791c', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '2d3473b422e0a2746c31695e146df6ee2ec872d3', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
+        return (h("div", { key: '493fe2e521f96fbe65792b4364c32a3010a4ae86', class: `chip-item chip-item--${this.chipState.size}
+                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
+            h("ifx-checkbox", { key: '3f65da6457afbeca9e5e803f2569263b499fe839', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '02a710f81308419623960d15270f719c45f5fd11', class: 'chip-item__label' }, " ", h("slot", { key: 'ad971a10884b08cf3775f7296a44c7aff1769a0b' }), " "), h("div", { key: '2ba702249a7fc67ded010890181f5b35494df843', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '887b43ff1b8c6539b01c0fc620f51d9bc04a05d9', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
     }
     static get is() { return "ifx-chip-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip-item/chip-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,MAAM,EACN,IAAI,EACJ,KAAK,EAAE,MAAM,eAAe,CAAC;AASjC,MAAM,OAAO,QAAQ;;qBAKG,SAAS;yBACF,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;wBACnC,KAAK;;IAGjE,mBAAmB,CAAC,KAAuC;QACxD,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAgC,CAAC;YACtD,qFAAqF;YACrF,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC,aAAa,EAAE,CAAC;gBACnF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC1B,CAAC;QACL,CAAC;IACJ,CAAC;IAGD,gBAAgB,CAAC,QAAiB,EAAE,QAAiB;QAClD,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACxB,8CAA8C;YAC9C,IAAI,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAC,CAAC;gBACtC,IAAI,CAAC,0BAA0B,EAAE,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,SAAS,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAChD,CAAC;QACL,CAAC;IACJ,CAAC;IAED,YAAY;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAmB,CAAC;IAC5C,CAAC;IAED,mBAAmB;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAClC,CAAC;IAGD,0BAA0B,CAAC,oBAA6B,IAAI;QACzD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,iBAAiB,EAAE,iBAAiB;YAC1C,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG;YACvB,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,eAAe;QACZ,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC9B,CAAC;IAED,iBAAiB,CAAC,KAAoB;QACnC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACnD,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC/B,CAAC;IACJ,CAAC;IAED,mBAAmB;QAChB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;IACJ,CAAC;IAGD,iBAAiB;QACd,iFAAiF;QACjF,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACH,OAAO,CACH,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,SAAS,CAAC,IAAI;iCAC7B,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAChG,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,eAAe,EAAE,CAAA,CAAA,CAAC,EACvC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,GAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA,CAAA,CAAC;~~YAIzC~~,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,OAAO;gBAClC,qEAAc,OAAO,EAAE,IAAI,CAAC,QAAQ,EAChC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,GAAG,GACG;YAGnB,4DAAK,KAAK,EAAC,kBAAkB;;gBAAE,8DAAQ;oBAAO;YAG9C,4DAAK,KAAK,EAAC,+BAA+B;gBACtC,iEAAU,IAAI,EAAE,QAAQ,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,QAAc,CACnF,CAEJ,CACT,CAAC;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACA","sourcesContent":["import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. /\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n / Do not emit if ChipState does not allow. /\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n / Propogating the selected state to the Chip (Parent) component if it is set. /\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}>\n\n {/ Checkbox; renders only in 'multi' variant. /}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/ Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"]}
1	+ {"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. /\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n / Do not emit if ChipState does not allow. /\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n / Propogating the selected state to the Chip (Parent) component if it is set. /\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/ Checkbox; renders only in 'multi' variant. /}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/ Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"]}

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

@@ -28,6 +28,9 @@
   outline: none;
   border: 1px solid #575352;
 }
+.chip__wrapper:focus {
+  border: 1px solid #0A8276;
+}
 .chip__wrapper.chip__wrapper--small {
   padding: 4px 12px;
 }

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

@@ -6,6 +6,7 @@ export class Chip {
         this.value = undefined;
         this.variant = 'single';
         this.readOnly = false;
+        this.AriaLabel = undefined;
         this.opened = false;
         this.selectedOptions = [];
     }
@@ -25,6 +26,18 @@ export class Chip {
             this.toggleDropdownMenu();
         }
     }
+    handleKeyDown(event) {
+        // override behavior of all keys except Tab. Users should be able to tab out of the component.
+        if (event.code !== 'Tab') {
+            event.preventDefault();
+        }
+        if (event.target.tagName === 'IFX-CHIP') {
+            this.handleWrapperKeyDown(event);
+        }
+        else if (event.target.tagName === 'IFX-CHIP-ITEM') {
+            this.handleDropdownKeyDown(event);
+        }
+    }
     updateSelectedOptions(event) {
         const eventDetail = event.detail;
         const previousSelection = [...this.selectedOptions];
@@ -79,6 +92,36 @@ export class Chip {
             return;
         this.opened = !this.opened;
     }
+    /**
+     * Focuses the chip item at the specified index.
+     * @param index the index of the chip item to focus. -1 will focus the last chip item.
+     */
+    focusChipItemAt(index = 0) {
+        this.opened = true;
+        const chipItems = this.getChipItems();
+        let item;
+        if (index === -1) {
+            item = chipItems.item(chipItems.length - 1);
+        }
+        else if (index >= 0 && index < chipItems.length) {
+            item = chipItems.item(index);
+        }
+        else {
+            console.error(`Invalid index: ${index}`);
+            return;
+        }
+        const shadowItem = item.shadowRoot.querySelector('.chip-item');
+        if (shadowItem) {
+            // Delay needed for the shadow item to be rendered.
+            setTimeout(() => {
+                shadowItem.focus();
+            }, 1);
+        }
+    }
+    focusChip() {
+        const chipWrapper = this.chip.shadowRoot.querySelector('.chip__wrapper');
+        chipWrapper.focus();
+    }
     handleUnselectButtonClick(event) {
         event.stopPropagation();
         this.opened = false;
@@ -109,8 +152,65 @@ export class Chip {
         }
     }
     handleWrapperKeyDown(event) {
-        if (!this.readOnly && (event.code === 'Space' || event.code === 'Enter')) {
-            this.toggleDropdownMenu();
+        // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction
+        if (this.readOnly)
+            return;
+        if (!this.opened) {
+            switch (event.code) {
+                case 'Space':
+                case 'Enter':
+                case 'ArrowDown':
+                    this.focusChipItemAt(0);
+                    break;
+                case 'ArrowUp':
+                    this.focusChipItemAt(-1);
+                    break;
+            }
+        }
+        else {
+            switch (event.code) {
+                case 'Escape':
+                    this.opened = false;
+                    this.focusChip();
+                    break;
+            }
+        }
+    }
+    handleDropdownKeyDown(event) {
+        let chipitems = this.getChipItems();
+        let targetIndex = Array.from(chipitems).indexOf(event.target);
+        if (targetIndex === -1) {
+            console.error('Target not found in chip items');
+            return;
+        }
+        switch (event.code) {
+            case 'ArrowDown':
+                if (targetIndex === chipitems.length - 1)
+                    break;
+                this.focusChipItemAt(targetIndex + 1);
+                break;
+            case 'ArrowUp':
+                if (targetIndex === 0)
+                    break;
+                this.focusChipItemAt(targetIndex - 1);
+                break;
+            case 'Escape':
+                this.opened = false;
+                this.focusChip();
+                break;
+            case 'Space':
+                // selection is handled by the chip-item component
+                if (this.variant === 'single') {
+                    // only close dropdown if single select
+                    this.opened = false;
+                    this.focusChip();
+                }
+                break;
+            case 'Enter':
+                // selection is handled by the chip-item component
+                this.opened = false;
+                this.focusChip();
+                break;
         }
     }
     syncChipState() {
@@ -156,17 +256,17 @@ export class Chip {
         this.syncSelectedOptionsWithProp(this.value);
     }
     render() {
-        return (h("div", { key: 'f9d5e345a97664c49afeeeed72ffbf89445c41a2', "aria-value": this.getSelectedOptions(), "aria-label": 'chip with a dropdown menu', class: 'chip' }, h("div", { key: '34f2461834eb63d3b9f4cac3385951a7cb257739', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
+        return (h("div", { key: '0ea9f8bc1e504d9a9b121b4b37fb04da775a28b3', class: 'chip' }, h("div", { key: 'cbdb74df0885c675763cbd1fc9493283b5a95a8c', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
                   chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                   ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, onKeyDown: !this.readOnly ? (e) => { this.handleWrapperKeyDown(e); } : undefined }, h("div", { key: '97d9b3abb1fe48ed7d9c0724522c30da93b95313', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.AriaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, h("div", { key: '1f93a1f27efaa044100c5f1fe3ed720232112232', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            h("div", { key: '800bd86a2eb7472b7ca1eee22889f1285be22777', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            h("ifx-number-indicator", { key: '8cb33ab9412af6b4283b346df9ae0a5615b677fd' }, "  ", `+${this.selectedOptions.length - 2}`, " ")), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            h("div", { key: '98812073aa937d52de6e793a82f8d490a8083d9e', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevrondown16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
-            h("div", { key: 'ca94abe3c6a87191c878059322dfa81317fc5fff', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            h("div", { key: 'a77e3320999c058a6a8113a08afa1903bd435716', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            h("div", { key: 'a8d9efdbe9edd7d704dd397abff36f9f268c0f13', class: 'chip__dropdown' }, h("slot", { key: '613c605d04afc80a193621ccaaad0a8ea109a375' }))));
+            h("div", { key: '216a7663b96a48f44d79802763d6ea8000d03cc5', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            h("ifx-number-indicator", { key: 'ac04bcbf6f5789522efa21185d4dcc17684985c9' }, "  ", `+${this.selectedOptions.length - 2}`, " ")), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            h("div", { key: '03fc2724de22f23fa9537bd1b14e975575f664b6', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevrondown16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
+            h("div", { key: '6f70aa5b6c60ef934cf8c79f662fea4e30e00255', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            h("div", { key: '1abb95276478647b1b3da79b71e157433bb41a15', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            h("div", { key: 'aa9ab179da64d1d0977ed10f72a04fda828335b5', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '4d66e458a164782487bc052cb9eb66f7443836d1' }))));
     }
     static get is() { return "ifx-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -276,6 +376,23 @@ export class Chip {
                 "attribute": "read-only",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "AriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }
@@ -330,6 +447,12 @@ export class Chip {
                 "target": "document",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "ifxChipItemSelect",
                 "method": "updateSelectedOptions",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["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() ifxChipChange: 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\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('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.key !== eventDetail.key);\n }\n this.value = this.selectedOptions.map((option) => option.value);\n }\n\n if (eventDetail.emitIfxChipChange) {\n this.ifxChipChange.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 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.ifxChipChange.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 if (!this.readOnly && (event.code === 'Space' \|\| event.code === 'Enter')) {\n this.toggleDropdownMenu();\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 emitIfxChipChange: true\n }));\n } else if (typeof newValue === 'string') {\n this.selectedOptions = [{\n value: newValue,\n label: newValue,\n selected: true,\n key: generateKey(),\n emitIfxChipChange: true\n }];\n }\n\n this.syncChipState();\n }\n\n componentWillLoad() {\n this.syncSelectedOptionsWithProp(this.value);\n }\n\n render() {\n return (\n <div aria-value={this.getSelectedOptions()} aria-label='chip with a dropdown menu' 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 onKeyDown={!this.readOnly ? (e) => { this.handleWrapperKeyDown(e) } : undefined}>\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-number-indicator> {`+${this.selectedOptions.length - 2}`} </ifx-number-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 class='chip__dropdown'>\n <slot />\n </div>\n }\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["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() ifxChipChange: 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;\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.key !== eventDetail.key);\n }\n this.value = this.selectedOptions.map((option) => option.value);\n }\n\n if (eventDetail.emitIfxChipChange) {\n this.ifxChipChange.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.ifxChipChange.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 emitIfxChipChange: true\n }));\n } else if (typeof newValue === 'string') {\n this.selectedOptions = [{\n value: newValue,\n label: newValue,\n selected: true,\n key: generateKey(),\n emitIfxChipChange: 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-number-indicator> {`+${this.selectedOptions.length - 2}`} </ifx-number-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"]}

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

@@ -146,10 +146,6 @@
   z-index: var(--dynamic-z-index, 1);
 }
 .ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 1;
   width: 100%;
   padding: 8px 16px;
   font-size: 1rem;

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

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-7ccad73c.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-77b40c27.js';
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-e045a9dd.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-995ac9ca.js';
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { M as Multiselect, d as defineCustomElement$1 } from './p-96fbc3db.js';
+import { M as Multiselect, d as defineCustomElement$1 } from './p-dba0d800.js';
 const IfxMultiselect = Multiselect;
 const defineCustomElement = defineCustomElement$1;

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

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-4c09147f.js
 import { d as defineCustomElement$7 } from './p-cc820c25.js';
 import { d as defineCustomElement$6 } from './p-0d986658.js';
 import { d as defineCustomElement$5 } from './p-a2411b44.js';
-import { d as defineCustomElement$4 } from './p-96fbc3db.js';
+import { d as defineCustomElement$4 } from './p-dba0d800.js';
 import { d as defineCustomElement$3 } from './p-4adbcde3.js';
 import { d as defineCustomElement$2 } from './p-c9810c7d.js';

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

@@ -3,8 +3,8 @@ import { c as classNames } from './p-5cdc6210.js';
 import { c as createGrid } from './p-1429e9ea.js';
 import { d as defineCustomElement$a } from './p-995af7ca.js';
 import { d as defineCustomElement$9 } from './p-cc820c25.js';
-import { d as defineCustomElement$8 } from './p-e045a9dd.js';
-import { d as defineCustomElement$7 } from './p-7ccad73c.js';
+import { d as defineCustomElement$8 } from './p-995ac9ca.js';
+import { d as defineCustomElement$7 } from './p-77b40c27.js';
 import { d as defineCustomElement$6 } from './p-a2411b44.js';
 import { d as defineCustomElement$5 } from './p-6a771687.js';
 import { d as defineCustomElement$4 } from './p-56db9d3e.js';

package/dist/components/{p-7ccad73c.js → p-77b40c27.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-4c09147f.js
 import { d as defineCustomElement$2 } from './p-cc820c25.js';
 import { d as defineCustomElement$1 } from './p-a2411b44.js';
-const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";
+const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";
 const IfxChipItemStyle0 = chipItemCss;
 const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
@@ -66,9 +66,9 @@ const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: '704162271118538ba19e0abd85178b54a04ce77e', class: `chip-item chip-item--${this.chipState.size}
-                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); } }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: '2407d29939ccbd37b4e0af36a2721d28f3d51b85', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '231a53bd835fc382272a92c5e546002a52a9b33f', class: 'chip-item__label' }, " ", h("slot", { key: '5dcb4189e1cf34a9c1803da56efa8d984d8fc2b9' }), " "), h("div", { key: 'dc57eb3753dea2b928dc3bf435e7b0467b84791c', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '2d3473b422e0a2746c31695e146df6ee2ec872d3', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
+        return (h("div", { key: '493fe2e521f96fbe65792b4364c32a3010a4ae86', class: `chip-item chip-item--${this.chipState.size}
+                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
+            h("ifx-checkbox", { key: '3f65da6457afbeca9e5e803f2569263b499fe839', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '02a710f81308419623960d15270f719c45f5fd11', class: 'chip-item__label' }, " ", h("slot", { key: 'ad971a10884b08cf3775f7296a44c7aff1769a0b' }), " "), h("div", { key: '2ba702249a7fc67ded010890181f5b35494df843', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '887b43ff1b8c6539b01c0fc620f51d9bc04a05d9', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
     }
     get chipItem() { return this; }
     static get watchers() { return {
@@ -108,4 +108,4 @@ function defineCustomElement() {
 export { ChipItem as C, defineCustomElement as d };
-//# sourceMappingURL=p-7ccad73c.js.map
+//# sourceMappingURL=p-77b40c27.js.map

package/dist/components/p-77b40c27.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-77b40c27.js","mappings":"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","names":[],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n user-select: none;\n \n transition: all 100ms ease;\n transition-property: background, color;\n \n &:hover {\n cursor: pointer;\n \n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n }\n \n &.chip-item--large {\n font: tokens.$ifxBodyBody03;\n }\n \n &.chip-item--small {\n font: tokens.$ifxBodyBody04;\n }\n\n &.chip-item--selected {\n color: tokens.$ifxColorOcean500;\n\n .chip-item__selected-indicator {\n display: block;\n }\n }\n}\n\n.chip-item__selected-indicator {\n display: none;\n \n margin-left: auto;\n}\n\n","import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. */\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n /* Do not emit if ChipState does not allow. */\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' || event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n /* Propogating the selected state to the Chip (Parent) component if it is set. */\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/* Checkbox; renders only in 'multi' variant. */}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/* Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"],"version":3}