npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.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 (1210) hide show

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';\r\nimport { ChipItemSelectEvent } from './interfaces';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-chip',\r\n styleUrl: 'chip.scss',\r\n shadow: true\r\n})\r\nexport class Chip {\r\n @Element() chip: HTMLIfxChipElement;\r\n\r\n @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\r\n @Prop() placeholder: string = '';\r\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\r\n @Prop({ mutable: true }) value: Array<string> \| string = undefined;\r\n @Prop() variant: 'single' \| 'multi' = 'single';\r\n @Prop() theme: 'outlined' \| 'filled-light' \| 'filled-dark' = 'outlined';\r\n @Prop() readOnly: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() disabled: boolean = false;\r\n @Prop() icon: string = \"\";\r\n\r\n @State() opened: boolean = false;\r\n @State() selectedOptions: Array<ChipItemSelectEvent> = [];\r\n\r\n @Watch('value')\r\n handleValueChange(newValue: Array<string> \| string) {\r\n this.syncSelectedOptionsWithProp(newValue);\r\n }\r\n\r\n @Watch('readOnly')\r\n handleReadOnlyChange(newValue: boolean) {\r\n if (newValue) {\r\n this.opened = false;\r\n }\r\n }\r\n\r\n @Listen('mousedown', { target: 'document' })\r\n closeDropdownOnOutsideClick(event: MouseEvent) {\r\n const path = event.composedPath();\r\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\r\n const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\r\n if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\r\n this.toggleDropdownMenu();\r\n }\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(event: KeyboardEvent) {\r\n // override behavior of all keys except Tab. Users should be able to tab out of the component.\r\n if (event.code !== 'Tab') {\r\n event.preventDefault(); \r\n }\r\n\r\n if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\r\n this.handleWrapperKeyDown(event);\r\n } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\r\n this.handleDropdownKeyDown(event);\r\n }\r\n }\r\n\r\n @Listen('ifxChipItemSelect')\r\n updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\r\n const eventDetail: ChipItemSelectEvent = event.detail;\r\n const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\r\n\r\n if (this.variant !== 'multi') {\r\n if (eventDetail.selected) {\r\n this.opened = false;\r\n const chipItems: NodeList = this.getChipItems();\r\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\r\n if (chipItem.selected && chipItem !== event.target) {\r\n chipItem.chipState = {\r\n ...chipItem.chipState,\r\n emitIfxChipItemSelect: false,\r\n };\r\n chipItem.selected = false;\r\n }\r\n });\r\n this.selectedOptions = [eventDetail];\r\n } else {\r\n this.selectedOptions = [];\r\n }\r\n this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\r\n } else {\r\n if (eventDetail.selected) {\r\n // Prevent duplicate entries\r\n if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\r\n this.selectedOptions = [...this.selectedOptions, eventDetail];\r\n }\r\n } else {\r\n this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\r\n }\r\n this.value = this.selectedOptions.map((option) => option.value);\r\n }\r\n\r\n if (eventDetail.emitIfxChange) {\r\n this.ifxChange.emit({\r\n previousSelection: previousSelection,\r\n currentSelection: this.selectedOptions,\r\n name: this.placeholder\r\n });\r\n }\r\n }\r\n\r\n getChipItems(): NodeList {\r\n return this.chip.querySelectorAll('ifx-chip-item');\r\n }\r\n\r\n getSelectedOptions(): string {\r\n if (this.variant !== 'multi') {\r\n return this.selectedOptions.map(option => option.label).join('');\r\n }\r\n return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\r\n }\r\n\r\n toggleDropdownMenu() {\r\n if (this.readOnly) return;\r\n this.opened = !this.opened;\r\n }\r\n\r\n /*\r\n Focuses the chip item at the specified index.\r\n * @param index the index of the chip item to focus. -1 will focus the last chip item.\r\n /\r\n focusChipItemAt(index: number = 0) {\r\n this.opened = true;\r\n const chipItems: NodeList = this.getChipItems();\r\n let item: HTMLIfxChipItemElement;\r\n \r\n if (index === -1) {\r\n item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\r\n } else if (index >= 0 && index < chipItems.length) {\r\n item = chipItems.item(index) as HTMLIfxChipItemElement;\r\n } else {\r\n console.error(`Invalid index: ${index}`);\r\n return;\r\n }\r\n\r\n const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\r\n if (shadowItem) {\r\n // Delay needed for the shadow item to be rendered.\r\n setTimeout(() => {\r\n shadowItem.focus();\r\n }, 1);\r\n }\r\n }\r\n\r\n focusChip() {\r\n const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\r\n chipWrapper.focus();\r\n }\r\n\r\n handleUnselectButtonClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n this.opened = false;\r\n\r\n let itemGotUnselected = false;\r\n const chipItems: NodeList = this.getChipItems();\r\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\r\n if (chipItem.selected) {\r\n itemGotUnselected = true;\r\n chipItem.chipState = {\r\n ...chipItem.chipState,\r\n emitIfxChipItemSelect: false,\r\n }\r\n chipItem.selected = false;\r\n }\r\n });\r\n\r\n / Emit event only if at least one item was unselected. */\r\n if (itemGotUnselected) {\r\n const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\r\n this.selectedOptions = [];\r\n this.value = [];\r\n this.ifxChange.emit({\r\n previousSelection: previousSelection,\r\n currentSelection: [],\r\n name: this.placeholder\r\n });\r\n }\r\n }\r\n\r\n handleWrapperClick() {\r\n if (!this.readOnly) {\r\n this.toggleDropdownMenu();\r\n }\r\n }\r\n\r\n handleWrapperKeyDown(event: KeyboardEvent) {\r\n // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\r\n if (this.readOnly) return;\r\n\r\n if (!this.opened) {\r\n switch (event.code) {\r\n case 'Space':\r\n case 'Enter':\r\n case 'ArrowDown':\r\n this.focusChipItemAt(0);\r\n break;\r\n case 'ArrowUp':\r\n this.focusChipItemAt(-1);\r\n break;\r\n }\r\n } else {\r\n switch (event.code) {\r\n case 'Escape':\r\n this.opened = false;\r\n this.focusChip();\r\n break;\r\n }\r\n }\r\n }\r\n\r\n handleDropdownKeyDown(event: KeyboardEvent) {\r\n let chipitems = this.getChipItems();\r\n\r\n let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\r\n if (targetIndex === -1) {\r\n console.error('Target not found in chip items');\r\n return;\r\n }\r\n\r\n switch (event.code) {\r\n case 'ArrowDown':\r\n if (targetIndex === chipitems.length - 1) break;\r\n this.focusChipItemAt(targetIndex + 1);\r\n break;\r\n case 'ArrowUp':\r\n if (targetIndex === 0) break;\r\n this.focusChipItemAt( targetIndex - 1);\r\n break;\r\n case 'Escape':\r\n this.opened = false;\r\n this.focusChip();\r\n break;\r\n case 'Space':\r\n // selection is handled by the chip-item component\r\n if (this.variant === 'single') {\r\n // only close dropdown if single select\r\n this.opened = false;\r\n this.focusChip();\r\n }\r\n break;\r\n case 'Enter':\r\n // selection is handled by the chip-item component\r\n this.opened = false;\r\n this.focusChip();\r\n break;\r\n }\r\n }\r\n\r\n syncChipState() {\r\n const chipItems: NodeList = this.getChipItems();\r\n let key: number = 0;\r\n chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\r\n chipItem.chipState = {\r\n emitIfxChipItemSelect: true,\r\n size: this.size ? this.size : 'medium',\r\n variant: (this.variant === 'multi' ? 'multi' : 'single'),\r\n key: key++\r\n };\r\n });\r\n }\r\n\r\n syncSelectedOptionsWithProp(newValue: Array<string> \| string) {\r\n // Clear old selected options\r\n this.selectedOptions = [];\r\n\r\n const generateKey = (() => {\r\n let count = 0;\r\n return () => count++;\r\n })();\r\n\r\n if (Array.isArray(newValue)) {\r\n this.selectedOptions = newValue.map(value => ({\r\n value,\r\n label: value,\r\n selected: true,\r\n key: generateKey(),\r\n emitIfxChange: true\r\n }));\r\n } else if (typeof newValue === 'string') {\r\n this.selectedOptions = [{\r\n value: newValue,\r\n label: newValue,\r\n selected: true,\r\n key: generateKey(),\r\n emitIfxChange: true\r\n }];\r\n }\r\n\r\n this.syncChipState();\r\n }\r\n\r\n componentWillLoad() {\r\n this.syncSelectedOptionsWithProp(this.value);\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.chip)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-chip', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='chip'>\r\n <div class={`chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}\r\n chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\r\n ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\r\n ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}\r\n ${this.theme ? this.theme : 'outlined'}\r\n ${this.disabled ? 'disabled' : \"\"}\r\n ${this.readOnly ? 'read-only' : \"\"}`}\r\n tabIndex={0}\r\n onClick={!this.readOnly && !this.disabled ? () => { this.handleWrapperClick() } : undefined}\r\n role='combobox'\r\n aria-label={this.ariaLabel}\r\n aria-value={this.getSelectedOptions()}\r\n aria-haspopup={!this.readOnly ? 'listbox' : undefined}\r\n aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\r\n aria-controls={!this.readOnly ? 'dropdown' : undefined}\r\n aria-readonly={this.readOnly ? 'true' : undefined}\r\n aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\r\n >\r\n \r\n {this.icon && \r\n <div class=\"icon__wrapper\">\r\n <ifx-icon icon={this.icon}></ifx-icon>\r\n </div>}\r\n\r\n <div class='wrapper__label'>\r\n {\r\n (this.selectedOptions.length === 0) && `${this.placeholder}`\r\n }\r\n\r\n {\r\n (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&\r\n `${this.placeholder}:`\r\n }\r\n\r\n {\r\n (this.selectedOptions.length !== 0) &&\r\n <div class='label__selected-options'>\r\n {this.getSelectedOptions()}\r\n </div>\r\n }\r\n\r\n {\r\n (this.selectedOptions.length > 2 && this.variant === 'multi') &&\r\n <ifx-indicator variant='number' inverted={this.theme === 'outlined' ? false : true} number={this.selectedOptions.length - 2}></ifx-indicator>\r\n }\r\n </div>\r\n\r\n {\r\n !this.readOnly && (this.variant !== 'multi' \|\| (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\r\n <div class='wrapper__open-button'>\r\n <ifx-icon key={1} icon={`chevron-down-16`} />\r\n </div>\r\n }\r\n\r\n {\r\n ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\r\n <div class='wrapper__unselect-button' onClick={!this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e) } : undefined}>\r\n <ifx-icon key={2} icon={`cross16`} />\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n {\r\n this.opened && !this.readOnly &&\r\n <div id='dropdown' role='listbox' class='chip__dropdown'>\r\n <slot />\r\n </div>\r\n }\r\n </div>\r\n );\r\n }\r\n}\r\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';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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' \| 'medium' \| 'large' = 'medium';\n @Prop({ mutable: true }) value: Array<string> \| string = undefined;\n @Prop() variant: 'single' \| 'multi' = 'single';\n @Prop() theme: 'outlined' \| 'filled-light' \| 'filled-dark' = 'outlined';\n @Prop() readOnly: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() disabled: boolean = false;\n @Prop() icon: 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.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 ? this.size : 'medium',\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 async componentDidLoad() { \n if(!isNestedInIfxComponent(this.chip)) { \n const framework = detectFramework();\n trackComponent('ifx-chip', await framework)\n }\n }\n\n render() {\n return (\n <div class='chip'>\n <div class={`chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}\n chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}\n ${this.theme ? this.theme : 'outlined'}\n ${this.disabled ? 'disabled' : \"\"}\n ${this.readOnly ? 'read-only' : \"\"}`}\n tabIndex={0}\n onClick={!this.readOnly && !this.disabled ? () => { 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 {this.icon && \n <div class=\"icon__wrapper\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\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.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' inverted={this.theme === 'outlined' ? false : true} 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={`chevron-down-16`} />\n </div>\n }\n\n {\n ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n <div class='wrapper__unselect-button' onClick={!this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e) } : undefined}>\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/chip/chip.stories.js CHANGED Viewed

@@ -153,10 +153,10 @@ export default {
                 category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: `
-React: onIfxChange={handleChange}
-Vue: @ifxChange="handleChange"
-Angular: (ifxChange)="handleChange()"
+                    detail: `
+React: onIfxChange={handleChange}
+Vue: @ifxChange="handleChange"
+Angular: (ifxChange)="handleChange()"
 VanillaJs: .addEventListener("ifxChange", (event) => {/*handle change*/});`,
                 }
             }
@@ -165,17 +165,17 @@ VanillaJs: .addEventListener("ifxChange", (event) => {/*handle change*/});`,
 };
 const Template = (args) => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `
-<ifx-chip
-placeholder="${args.placeholder}"
-size="${args.size}"
-variant="${args.variant}"
-theme="${args.theme}"
-icon="${args.icon}"
-read-only="${args.readOnly}"
-aria-label="${args.ariaLabel}"
-disabled="${args.disabled}"
->
+    wrapper.innerHTML = `
+<ifx-chip
+placeholder="${args.placeholder}"
+size="${args.size}"
+variant="${args.variant}"
+theme="${args.theme}"
+icon="${args.icon}"
+read-only="${args.readOnly}"
+aria-label="${args.ariaLabel}"
+disabled="${args.disabled}"
+>
   ${(() => {
         return Array.from({ length: args.amountOfChipItems }, (_, chipItemId) => {
             const chipItem = document.createElement('ifx-chip-item');
@@ -194,7 +194,7 @@ disabled="${args.disabled}"
             }
             return chipItem.outerHTML;
         }).join(`\n    `);
-    })()}
+    })()}
 </ifx-chip>`;
     const chip = wrapper.querySelector('ifx-chip');
     chip.addEventListener('ifxChange', action('ifxChange'));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Chip',\r\n tags: ['autodocs'],\r\n parameters: {\r\n docs: {\r\n story: {\r\n height: '100px',\r\n },\r\n },\r\n },\r\n args: {\r\n amountOfChipItems: 4,\r\n chipItemLabel: 'Item Label',\r\n placeholder: 'Label',\r\n size: 'medium',\r\n variant: 'single',\r\n readOnly: false,\r\n selected: false,\r\n value: 'Item Value',\r\n ariaLabel: 'Chip',\r\n disabled: false,\r\n theme: 'outlined',\r\n icon: \"\"\r\n },\r\n argTypes: {\r\n amountOfChipItems: {\r\n name: 'Amount of Chip Items',\r\n control: 'number',\r\n description: 'Control the number of <ifx-chip-item> in a Chip.',\r\n table: {\r\n category: 'story controls',\r\n type: {\r\n summary: null\r\n }\r\n }\r\n },\r\n chipItemLabel: {\r\n name: 'Label of Chip Item',\r\n description: 'Set the label of <ifx-chip-item>.',\r\n table: {\r\n category: 'story controls',\r\n }\r\n },\r\n placeholder: {\r\n description: 'Set the placeholder string.',\r\n table: {\r\n category: 'ifx-chip props'\r\n }\r\n },\r\n size: {\r\n description: 'Switch the size of Chip.',\r\n control: 'radio',\r\n options: ['small', 'medium', 'large'],\r\n table: {\r\n category: 'ifx-chip props',\r\n defaultValue: {\r\n summary: 'medium'\r\n },\r\n type: {\r\n summary: 'small \| medium \| large'\r\n }\r\n }\r\n },\r\n variant: {\r\n description: 'Switch the variant of Chip.',\r\n control: 'radio',\r\n options: ['single', 'multi'],\r\n table: {\r\n category: 'ifx-chip props',\r\n defaultValue: {\r\n summary: 'single'\r\n },\r\n type: {\r\n summary: 'single \| multi'\r\n }\r\n }\r\n },\r\n\r\n theme: {\r\n description: 'Specifies the theme style of the Chip.',\r\n control: 'radio',\r\n options: ['outlined', 'filled-light', 'filled-dark'],\r\n table: {\r\n category: 'ifx-chip props',\r\n defaultValue: {\r\n summary: 'outlined'\r\n },\r\n type: {\r\n summary: 'outlined \| filled-light \| filled-dark'\r\n }\r\n }\r\n },\r\n readOnly: {\r\n name: 'read-only',\r\n description: 'No dropdown menu. The chip component is read-only.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-chip props',\r\n defaultValue: {\r\n summary: false,\r\n }\r\n }\r\n },\r\n\r\n icon: {\r\n options: Object.keys(icons),\r\n control: { type: 'select' },\r\n description: 'Set the icon of the Chip.',\r\n table: {\r\n category: 'ifx-chip props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n\r\n disabled: {\r\n name: 'disabled',\r\n description: 'No dropdown menu. The chip component is disabled.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-chip props',\r\n defaultValue: {\r\n summary: false,\r\n }\r\n }\r\n },\r\n ariaLabel: {\r\n control: { type: 'text' },\r\n description: 'Set the aria label of the chip item. Enhances accessibility.',\r\n table: {\r\n category: 'ifx-chip props'\r\n }\r\n },\r\n selected: {\r\n description: 'Set the selected prop to pre-select the chip item.',\r\n table: {\r\n category: 'ifx-chip-item props',\r\n defaultValue: {\r\n summary: 'false'\r\n }\r\n }\r\n },\r\n value: {\r\n description: 'Set the value of chip item.',\r\n table: {\r\n category: 'ifx-chip-item props',\r\n }\r\n },\r\n ifxChange: {\r\n action: 'ifxChange',\r\n description: 'A custom event emitted when the selection in a <ifx-chip> is updated.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail: `\r\nReact: onIfxChange={handleChange}\r\nVue: @ifxChange=\"handleChange\"\r\nAngular: (ifxChange)=\"handleChange()\"\r\nVanillaJs: .addEventListener(\"ifxChange\", (event) => {/handle change/});`,\r\n }\r\n }\r\n }\r\n }\r\n};\r\n\r\nconst Template = (args) => {\r\n const wrapper = document.createElement('div');\r\n wrapper.innerHTML = `\r\n<ifx-chip\r\nplaceholder=\"${args.placeholder}\"\r\nsize=\"${args.size}\"\r\nvariant=\"${args.variant}\"\r\ntheme=\"${args.theme}\"\r\nicon=\"${args.icon}\"\r\nread-only=\"${args.readOnly}\"\r\naria-label=\"${args.ariaLabel}\"\r\ndisabled=\"${args.disabled}\"\r\n>\r\n ${(() => {\r\n return Array.from({ length: args.amountOfChipItems }, (_, chipItemId) => {\r\n const chipItem: HTMLIfxChipItemElement = document.createElement('ifx-chip-item');\r\n chipItem.innerHTML = args.chipItemLabel + ' ' + (chipItemId + 1);\r\n chipItem.setAttribute('value', args.value + ' ' + (chipItemId + 1));\r\n if (args.selected && chipItemId === 1) {\r\n chipItem.setAttribute('selected', 'true');\r\n }\r\n if (args.readOnly) {\r\n if (args.variant === 'multi') {\r\n chipItem.setAttribute('selected', 'true');\r\n } else if (chipItemId === 0) {\r\n chipItem.setAttribute('selected', 'true');\r\n }\r\n }\r\n return chipItem.outerHTML;\r\n }).join(`\\n `);\r\n })()\r\n }\r\n</ifx-chip>`;\r\n\r\n const chip = wrapper.querySelector('ifx-chip');\r\n chip.addEventListener('ifxChange', action('ifxChange'));\r\n\r\n return chip;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.tags = ['!dev', '!autodocs'];\r\n\r\nexport const Single = Template.bind({});\r\nSingle.args = {\r\n variant: 'single'\r\n};\r\nSingle.argTypes = {\r\n variant: {\r\n table: {\r\n disable: true\r\n }\r\n }\r\n};\r\n\r\nexport const Multi = Template.bind({});\r\nMulti.args = {\r\n variant: 'multi'\r\n};\r\nMulti.argTypes = {\r\n variant: {\r\n table: {\r\n disable: true\r\n }\r\n }\r\n};\r\n\r\nexport const ReadOnly = Template.bind({});\r\nReadOnly.args = {\r\n readOnly: true,\r\n variant: 'multi'\r\n};\r\nReadOnly.argTypes = {\r\n readOnly: {\r\n table: {\r\n disable: true\r\n }\r\n }\r\n};\r\n"]}
1	+ {"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,OAAO;aAChB;SACF;KACF;IACD,IAAI,EAAE;QACJ,iBAAiB,EAAE,CAAC;QACpB,aAAa,EAAE,YAAY;QAC3B,WAAW,EAAE,OAAO;QACpB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,EAAE;KACT;IACD,QAAQ,EAAE;QACR,iBAAiB,EAAE;YACjB,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,oDAAoD;YACjE,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,IAAI;iBACd;aACF;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,oBAAoB;YAC1B,WAAW,EAAE,qCAAqC;YAClD,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,WAAW,EAAE;YACX,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0BAA0B;YACvC,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,wBAAwB;iBAClC;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,6BAA6B;YAC1C,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,gBAAgB;iBAC1B;aACF;SACF;QAED,KAAK,EAAE;YACL,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;YACpD,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,UAAU;iBACpB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,uCAAuC;iBACjD;aACF;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,oDAAoD;YACjE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QAED,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,2BAA2B;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,QAAQ,EAAE;YACR,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,8DAA8D;YAC3E,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE;gBACL,QAAQ,EAAE,qBAAqB;gBAC/B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,qBAAqB;aAChC;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,yEAAyE;YACtF,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAE;;;;2EAIyD;iBAClE;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,WAAW;QACvB,IAAI,CAAC,IAAI;WACN,IAAI,CAAC,OAAO;SACd,IAAI,CAAC,KAAK;QACX,IAAI,CAAC,IAAI;aACJ,IAAI,CAAC,QAAQ;cACZ,IAAI,CAAC,SAAS;YAChB,IAAI,CAAC,QAAQ;;IAErB,CAAC,GAAG,EAAE;QACJ,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;YACtE,MAAM,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACjF,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;YACjE,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;YACpE,IAAI,IAAI,CAAC,QAAQ,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;gBACtC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC5C,CAAC;YACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;oBAC7B,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;gBAC5C,CAAC;qBAAM,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;oBAC5B,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC;YACD,OAAO,QAAQ,CAAC,SAAS,CAAC;QAC5B,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC,CAAC,EACF;YACQ,CAAC;IAEX,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC/C,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAExD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,QAAQ;CAClB,CAAC;AACF,MAAM,CAAC,QAAQ,GAAG;IAChB,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;CACjB,CAAC;AACF,KAAK,CAAC,QAAQ,GAAG;IACf,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,OAAO;CACjB,CAAC;AACF,QAAQ,CAAC,QAAQ,GAAG;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Chip',\n tags: ['autodocs'],\n parameters: {\n docs: {\n story: {\n height: '100px',\n },\n },\n },\n args: {\n amountOfChipItems: 4,\n chipItemLabel: 'Item Label',\n placeholder: 'Label',\n size: 'medium',\n variant: 'single',\n readOnly: false,\n selected: false,\n value: 'Item Value',\n ariaLabel: 'Chip',\n disabled: false,\n theme: 'outlined',\n icon: \"\"\n },\n argTypes: {\n amountOfChipItems: {\n name: 'Amount of Chip Items',\n control: 'number',\n description: 'Control the number of <ifx-chip-item> in a Chip.',\n table: {\n category: 'story controls',\n type: {\n summary: null\n }\n }\n },\n chipItemLabel: {\n name: 'Label of Chip Item',\n description: 'Set the label of <ifx-chip-item>.',\n table: {\n category: 'story controls',\n }\n },\n placeholder: {\n description: 'Set the placeholder string.',\n table: {\n category: 'ifx-chip props'\n }\n },\n size: {\n description: 'Switch the size of Chip.',\n control: 'radio',\n options: ['small', 'medium', 'large'],\n table: {\n category: 'ifx-chip props',\n defaultValue: {\n summary: 'medium'\n },\n type: {\n summary: 'small \| medium \| large'\n }\n }\n },\n variant: {\n description: 'Switch the variant of Chip.',\n control: 'radio',\n options: ['single', 'multi'],\n table: {\n category: 'ifx-chip props',\n defaultValue: {\n summary: 'single'\n },\n type: {\n summary: 'single \| multi'\n }\n }\n },\n\n theme: {\n description: 'Specifies the theme style of the Chip.',\n control: 'radio',\n options: ['outlined', 'filled-light', 'filled-dark'],\n table: {\n category: 'ifx-chip props',\n defaultValue: {\n summary: 'outlined'\n },\n type: {\n summary: 'outlined \| filled-light \| filled-dark'\n }\n }\n },\n readOnly: {\n name: 'read-only',\n description: 'No dropdown menu. The chip component is read-only.',\n control: 'boolean',\n table: {\n category: 'ifx-chip props',\n defaultValue: {\n summary: false,\n }\n }\n },\n\n icon: {\n options: Object.keys(icons),\n control: { type: 'select' },\n description: 'Set the icon of the Chip.',\n table: {\n category: 'ifx-chip props',\n type: {\n summary: 'string'\n }\n }\n },\n\n disabled: {\n name: 'disabled',\n description: 'No dropdown menu. The chip component is disabled.',\n control: 'boolean',\n table: {\n category: 'ifx-chip props',\n defaultValue: {\n summary: false,\n }\n }\n },\n ariaLabel: {\n control: { type: 'text' },\n description: 'Set the aria label of the chip item. Enhances accessibility.',\n table: {\n category: 'ifx-chip props'\n }\n },\n selected: {\n description: 'Set the selected prop to pre-select the chip item.',\n table: {\n category: 'ifx-chip-item props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n value: {\n description: 'Set the value of chip item.',\n table: {\n category: 'ifx-chip-item props',\n }\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'A custom event emitted when the selection in a <ifx-chip> is updated.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxChange={handleChange}\nVue: @ifxChange=\"handleChange\"\nAngular: (ifxChange)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxChange\", (event) => {/handle change/});`,\n }\n }\n }\n }\n};\n\nconst Template = (args) => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n<ifx-chip\nplaceholder=\"${args.placeholder}\"\nsize=\"${args.size}\"\nvariant=\"${args.variant}\"\ntheme=\"${args.theme}\"\nicon=\"${args.icon}\"\nread-only=\"${args.readOnly}\"\naria-label=\"${args.ariaLabel}\"\ndisabled=\"${args.disabled}\"\n>\n ${(() => {\n return Array.from({ length: args.amountOfChipItems }, (_, chipItemId) => {\n const chipItem: HTMLIfxChipItemElement = document.createElement('ifx-chip-item');\n chipItem.innerHTML = args.chipItemLabel + ' ' + (chipItemId + 1);\n chipItem.setAttribute('value', args.value + ' ' + (chipItemId + 1));\n if (args.selected && chipItemId === 1) {\n chipItem.setAttribute('selected', 'true');\n }\n if (args.readOnly) {\n if (args.variant === 'multi') {\n chipItem.setAttribute('selected', 'true');\n } else if (chipItemId === 0) {\n chipItem.setAttribute('selected', 'true');\n }\n }\n return chipItem.outerHTML;\n }).join(`\\n `);\n })()\n }\n</ifx-chip>`;\n\n const chip = wrapper.querySelector('ifx-chip');\n chip.addEventListener('ifxChange', action('ifxChange'));\n\n return chip;\n};\n\nexport const Default = Template.bind({});\nDefault.tags = ['!dev', '!autodocs'];\n\nexport const Single = Template.bind({});\nSingle.args = {\n variant: 'single'\n};\nSingle.argTypes = {\n variant: {\n table: {\n disable: true\n }\n }\n};\n\nexport const Multi = Template.bind({});\nMulti.args = {\n variant: 'multi'\n};\nMulti.argTypes = {\n variant: {\n table: {\n disable: true\n }\n }\n};\n\nexport const ReadOnly = Template.bind({});\nReadOnly.args = {\n readOnly: true,\n variant: 'multi'\n};\nReadOnly.argTypes = {\n readOnly: {\n table: {\n disable: true\n }\n }\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/chip/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface ChipState {\r\n emitIfxChipItemSelect: boolean;\r\n size: 'small' \| 'medium' \| 'large';\r\n variant: 'single' \| 'multi';\r\n key?: number;\r\n}\r\nexport interface ChipItemSelectEvent {\r\n key: number;\r\n emitIfxChange: boolean,\r\n label: string;\r\n selected: boolean;\r\n value: string;\r\n}\r\n "]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/chip/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface ChipState {\n emitIfxChipItemSelect: boolean;\n size: 'small' \| 'medium' \| 'large';\n variant: 'single' \| 'multi';\n key?: number;\n}\nexport interface ChipItemSelectEvent {\n key: number;\n emitIfxChange: boolean,\n label: string;\n selected: boolean;\n value: string;\n}\n "]}

package/dist/collection/components/content-switcher/content-switcher-item.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class ContentSwitcherItem {
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: 'a9ba319dbf35fb563cc9f92dd19690e4f4de051d' }, h("button", { key: 'f607a140f0b8ffb5334ecde57f2e9771d8c689d4', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: 'd86e866d7a798a1c31182ebd902d164efa601a99' }))));
+        return (h(Host, { key: '844da0fa26ea37b9b53d16f70f982fc4daf3bed1' }, h("button", { key: 'ed5ec4be1c0cd301db79a078fe28f36967a55d85', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '6469c05327408244756a8af3f555c32bae66ace1' }))));
     }
     static get is() { return "ifx-content-switcher-item"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"content-switcher-item.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;IALhC;QAMU,aAAQ,GAAY,KAAK,CAAC;KAYnC;IATC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAE,2BAA2B,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC7E,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-content-switcher-item',\r\n styleUrl: './content-switcher-item.scss',\r\n shadow: true,\r\n})\r\nexport class ContentSwitcherItem {\r\n @Prop() selected: boolean = false;\r\n @Prop() value: string;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\r\n <slot></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"content-switcher-item.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;IALhC;QAMU,aAAQ,GAAY,KAAK,CAAC;KAYnC;IATC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAE,2BAA2B,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC7E,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-content-switcher-item',\n styleUrl: './content-switcher-item.scss',\n shadow: true,\n})\nexport class ContentSwitcherItem {\n @Prop() selected: boolean = false;\n @Prop() value: string;\n\n render() {\n return (\n <Host>\n <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\n <slot></slot>\n </button>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/content-switcher/content-switcher.js CHANGED Viewed

@@ -159,7 +159,7 @@ export class ContentSwitcher {
         return this.items[index].getAttribute('value') || index.toLocaleString();
     }
     render() {
-        return (h(Host, { key: '3f76631f0386e5694a07a02bb336fb3f5d04633b' }, h("div", { key: '7873859b37b233cc594b3b785ac2fdf352a7664d', class: "ifx-content-switcher", role: "group" }, h("slot", { key: '3a7d429bffe0fe5f0573c1caf944b62c90840388' }))));
+        return (h(Host, { key: '6a0e5172af0ececbfbe29ba2c45c464bd228f6b4' }, h("div", { key: 'f17700d042f7b8eef9c07acf1c9fe81ee7283c5f', class: "ifx-content-switcher", role: "group" }, h("slot", { key: 'd1192fc9ca4a4ad57cf9fdc93d98d010d9956484' }))));
     }
     static get is() { return "ifx-content-switcher"; }
     static get encapsulation() { return "shadow"; }
@@ -199,7 +199,7 @@ export class ContentSwitcher {
                     "references": {
                         "ChangeEvent": {
                             "location": "local",
-                            "path": "/home/fp/Dev/IFX/dds/packages/components/src/components/content-switcher/content-switcher.tsx",
+                            "path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/content-switcher/content-switcher.tsx",
                             "id": "src/components/content-switcher/content-switcher.tsx::ChangeEvent"
                         }
                     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"content-switcher.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\nexport type ChangeEvent = { oldValue: string; newValue: string };\r\n\r\ntype ContentSwitcherItem = Element & {\r\n selected: boolean;\r\n};\r\n\r\n@Component({\r\n tag: 'ifx-content-switcher',\r\n styleUrl: './content-switcher.scss',\r\n shadow: true,\r\n})\r\nexport class ContentSwitcher {\r\n @Element() el: HTMLElement;\r\n\r\n @State() items: Element[];\r\n @State() activeIndex = -1;\r\n @State() hoverIndex: number = -1;\r\n @State() focusIndex: number = -1;\r\n\r\n @State() dividers: Element[] = Array();\r\n\r\n @Event() ifxChange: EventEmitter<ChangeEvent>;\r\n\r\n private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\r\n\r\n componentWillLoad() {\r\n this.items = Array.from(this.el.children);\r\n this.initializeDividers();\r\n this.addEventListeners();\r\n this.ensureSingleSelectedItem();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-content-switcher', await framework)\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.removeEventListeners();\r\n }\r\n\r\n /*\r\n Initialize the dividers between items.\r\n /\r\n initializeDividers() {\r\n this.items.forEach((item, index) => {\r\n if (index < this.items.length - 1) {\r\n const divider = document.createElement('div');\r\n divider.classList.add('ifx-content-switcher-divider');\r\n item.after(divider);\r\n this.dividers.push(divider);\r\n }\r\n });\r\n }\r\n\r\n /\r\n Add event listeners for each item.\r\n /\r\n addEventListeners() {\r\n this.items.forEach((item, index) => {\r\n const handlers = {\r\n click: () => this.selectItem(index),\r\n mouseenter: () => this.handleHover(index, true),\r\n mouseleave: () => this.handleHover(index, false),\r\n focus: () => this.handleFocus(index, true),\r\n blur: () => this.handleFocus(index, false),\r\n };\r\n\r\n Object.keys(handlers).forEach(event => {\r\n item.addEventListener(event, handlers[event]);\r\n });\r\n\r\n this.eventHandlers.set(item, handlers);\r\n });\r\n }\r\n\r\n /\r\n Remove all event listeners.\r\n /\r\n removeEventListeners() {\r\n this.eventHandlers.forEach((handlers, item) => {\r\n Object.keys(handlers).forEach(event => {\r\n item.removeEventListener(event, handlers[event]);\r\n });\r\n });\r\n this.eventHandlers.clear();\r\n }\r\n\r\n ensureSingleSelectedItem() {\r\n this.items.forEach((item, index) => {\r\n const isSelected = (item.getAttribute('selected') === 'true') \|\| (item as ContentSwitcherItem).selected;\r\n if (isSelected) {\r\n if (this.activeIndex < 0) {\r\n this.selectItem(index);\r\n } else {\r\n item.removeAttribute('selected');\r\n (item as ContentSwitcherItem).selected = false;\r\n }\r\n }\r\n });\r\n }\r\n\r\n /\r\n Handle hover events on an item.\r\n * @param index - Index of the item.\r\n * @param isActive - Whether the item is hovered.\r\n /\r\n handleHover(index: number, isActive: boolean) {\r\n this.hoverIndex = isActive ? index : -1;\r\n this.updateDividersOfItem(index);\r\n }\r\n\r\n /\r\n Handle hover events on an item.\r\n * @param index - Index of the item.\r\n * @param isActive - Whether the item is focused.\r\n /\r\n handleFocus(index: number, isActive: boolean) {\r\n this.focusIndex = isActive ? index : -1;\r\n this.updateDividersOfItem(index);\r\n }\r\n\r\n /\r\n Update visibility of dividers adjacent to a specific item.\r\n * @param itemIndex - Index of the item.\r\n /\r\n updateDividersOfItem(itemIndex: number) {\r\n if (itemIndex < this.items.length - 1) {\r\n this.updateDividerVisibility(itemIndex);\r\n }\r\n if (itemIndex > 0) {\r\n this.updateDividerVisibility(itemIndex - 1);\r\n }\r\n }\r\n\r\n /\r\n Update visibility of a specific divider.\r\n * @param dividerIndex - Index of the divider.\r\n /\r\n updateDividerVisibility(dividerIndex: number) {\r\n const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\r\n this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\r\n }\r\n\r\n /\r\n Set the visibility of a specific divider.\r\n * @param dividerIndex - Index of the divider.\r\n * @param hidden - Whether the divider should be hidden.\r\n /\r\n setDividerVisibility(dividerIndex: number, hidden: boolean) {\r\n if (this.dividers[dividerIndex]) {\r\n this.dividers[dividerIndex].classList.toggle('hidden', hidden);\r\n }\r\n }\r\n\r\n /\r\n Select a specific item.\r\n * @param itemIndex - Index of the item to be selected.\r\n /\r\n selectItem(itemIndex: number) {\r\n if (itemIndex === this.activeIndex) return;\r\n const oldIndex = this.activeIndex;\r\n if (oldIndex >= 0) {\r\n this.items[oldIndex].removeAttribute('selected');\r\n }\r\n\r\n this.activeIndex = itemIndex;\r\n this.items[itemIndex].setAttribute('selected', 'true');\r\n\r\n this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\r\n this.updateDividersOfItem(oldIndex);\r\n this.updateDividersOfItem(itemIndex);\r\n }\r\n\r\n /\r\n Get the value property of the item at a specific index.\r\n * Falls back to the index if no value is set.\r\n * \r\n * @param index - Index of the item. \r\n * @returns The value of the item.\r\n */\r\n getValueOfItem(index: number): string {\r\n if (this.items[index] == null) return index.toLocaleString();\r\n return this.items[index].getAttribute('value') \|\| index.toLocaleString();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"ifx-content-switcher\" role=\"group\">\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"content-switcher.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\ntype ContentSwitcherItem = Element & {\n selected: boolean;\n};\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 async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-content-switcher', await framework)\n }\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 ensureSingleSelectedItem() {\n this.items.forEach((item, index) => {\n const isSelected = (item.getAttribute('selected') === 'true') \|\| (item as ContentSwitcherItem).selected;\n if (isSelected) {\n if (this.activeIndex < 0) {\n this.selectItem(index);\n } else {\n item.removeAttribute('selected');\n (item as ContentSwitcherItem).selected = false;\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"]}

package/dist/collection/components/content-switcher/content-switcher.stories.js CHANGED Viewed

@@ -85,8 +85,8 @@ const DefaultTemplate = ({ amountOfItems, label, value, icon, selected }) => {
     for (let i = 0; i < amountOfItems; i++) {
         const item = document.createElement('ifx-content-switcher-item');
         item.setAttribute('value', `${value} ${i + 1}`);
-        item.innerHTML = `
-      <ifx-icon icon="${icon}"></ifx-icon> ${label} ${i + 1}
+        item.innerHTML = `
+      <ifx-icon icon="${icon}"></ifx-icon> ${label} ${i + 1}
     `;
         if (i === 1 && selected) {
             item.setAttribute('selected', 'true');

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

	@@ -1 +1 @@
1	- {"version":3,"file":"content-switcher.stories.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Content Switcher',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n amountOfItems: 4,\r\n label: 'Item',\r\n value: 'item',\r\n selected: false,\r\n icon: 'applications-16'\r\n\r\n },\r\n argTypes: {\r\n amountOfItems: {\r\n name: 'Amount of Items',\r\n control: { type: 'number' },\r\n description: 'Set the number of content-switcher-items to be rendered.',\r\n table: {\r\n category: 'story controls',\r\n type: {\r\n summary: 'number'\r\n }\r\n }\r\n },\r\n label: {\r\n name: 'Label of Content Switcher Item',\r\n control: { type: 'text' },\r\n description: 'Set the label of the <ifx-content-switcher-item>.',\r\n table: {\r\n category: 'story controls',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n value: {\r\n control: { type: 'text' },\r\n description: 'Set the value of the content-switcher-item.',\r\n table: {\r\n category: 'content-switcher-item props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n selected: {\r\n control: { type: 'boolean' },\r\n description: 'Set the selected state of the content-switcher-item. Only one item can be selected at the time. If there initially exists more than one selected item, then only the first item will be selected.',\r\n table: {\r\n category: 'content-switcher-item props',\r\n defaultValue: {\r\n summary: 'false'\r\n },\r\n type: {\r\n summary: 'boolean'\r\n }\r\n }\r\n },\r\n icon: {\r\n description: 'The icon of the content-switcher-item.',\r\n options: Object.keys(icons),\r\n control: { type: 'select' },\r\n table: {\r\n category: 'ifx-icon props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n ifxChange: {\r\n action: 'ifxChange',\r\n description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\r\n },\r\n },\r\n }\r\n },\r\n};\r\n\r\nconst DefaultTemplate = ({ amountOfItems, label, value, icon, selected }) => {\r\n const element = document.createElement('ifx-content-switcher');\r\n\r\n for (let i = 0; i < amountOfItems; i++) {\r\n const item = document.createElement('ifx-content-switcher-item');\r\n item.setAttribute('value', `${value} ${i + 1}`);\r\n item.innerHTML = `\r\n <ifx-icon icon=\"${icon}\"></ifx-icon> ${label} ${i + 1}\r\n `;\r\n if (i === 1 && selected) {\r\n item.setAttribute('selected', 'true');\r\n }\r\n\r\n element.appendChild(item);\r\n }\r\n element.addEventListener('ifxChange', action('ifxChange'));\r\n\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});"]}
1	+ {"version":3,"file":"content-switcher.stories.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Content Switcher',\n tags: ['autodocs'],\n\n args: {\n amountOfItems: 4,\n label: 'Item',\n value: 'item',\n selected: false,\n icon: 'applications-16'\n\n },\n argTypes: {\n amountOfItems: {\n name: 'Amount of Items',\n control: { type: 'number' },\n description: 'Set the number of content-switcher-items to be rendered.',\n table: {\n category: 'story controls',\n type: {\n summary: 'number'\n }\n }\n },\n label: {\n name: 'Label of Content Switcher Item',\n control: { type: 'text' },\n description: 'Set the label of the <ifx-content-switcher-item>.',\n table: {\n category: 'story controls',\n type: {\n summary: 'string'\n }\n }\n },\n value: {\n control: { type: 'text' },\n description: 'Set the value of the content-switcher-item.',\n table: {\n category: 'content-switcher-item props',\n type: {\n summary: 'string'\n }\n }\n },\n selected: {\n control: { type: 'boolean' },\n description: 'Set the selected state of the content-switcher-item. Only one item can be selected at the time. If there initially exists more than one selected item, then only the first item will be selected.',\n table: {\n category: 'content-switcher-item props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n icon: {\n description: 'The icon of the content-switcher-item.',\n options: Object.keys(icons),\n control: { type: 'select' },\n table: {\n category: 'ifx-icon props',\n type: {\n summary: 'string'\n }\n }\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n }\n },\n};\n\nconst DefaultTemplate = ({ amountOfItems, label, value, icon, selected }) => {\n const element = document.createElement('ifx-content-switcher');\n\n for (let i = 0; i < amountOfItems; i++) {\n const item = document.createElement('ifx-content-switcher-item');\n item.setAttribute('value', `${value} ${i + 1}`);\n item.innerHTML = `\n <ifx-icon icon=\"${icon}\"></ifx-icon> ${label} ${i + 1}\n `;\n if (i === 1 && selected) {\n item.setAttribute('selected', 'true');\n }\n\n element.appendChild(item);\n }\n element.addEventListener('ifxChange', action('ifxChange'));\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}

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

@@ -93,8 +93,8 @@ export class DatePicker {
     // }
     render() {
         var _a, _b;
-        return (h("div", { key: '763726725648bb2bf9e576a1c01b35d112dd63ea', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '7027e2b0ce4acf9006671b9b843897c5bbd72e0e', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: 'f59e5a49509503293210e7b2bdabd734e9de5d65', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: 'e3a4101944cb8ef8a9b2dad442ad4c193fbb7d96', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'cb9b849de19bc9b956451cb54c2179f8af2e16cc', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '1931e063d676f87844d9342fed5e71608de2daf1', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '20844bdcdff6ac5ac02bd1a6e79d412bdefe48c0', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '240a8c6f3e522955282246eff9307318cea3c8f1', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: 'dbb6f430496fefe886885ab005652d412bd30ebf', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '1c2a66b095a48206cf2c9931452964ac7d87dc59', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: '0a754b66e239bae671a8c74ce2e0aa7ad5d47bcf', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '03eedd8172d239cc9bc7ed75a125e2d8213dce5c', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1ed8fb51d42502d703e564e53624b70e45334842', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'f1a55aa2e7ad2c9801b6a04a9a93d5b83fc63dac', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'e8109be168cf4e584350b2fe8cf98a908521eecd', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'df37c5fb29c31594720e7e112e18cdbce996942f', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     static get is() { return "ifx-date-picker"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals } from '@stencil/core';\r\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n \r\n@Component({\r\n tag: 'ifx-date-picker',\r\n styleUrl: 'date-picker.scss',\r\n shadow: true,\r\n // formAssociated: true,\r\n})\r\n\r\nexport class DatePicker {\r\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\r\n\r\n @Element() el: HTMLElement;\r\n @Prop() size: string = 's';\r\n @Prop() error: boolean = false;\r\n @Prop() success: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() value: string;\r\n @Prop() type: string = 'date'\r\n @Prop() max: string;\r\n @Prop() min: string;\r\n @Prop() required: boolean = false;\r\n @Prop() label: string;\r\n @Prop() caption: string;\r\n @Prop() autocomplete: string = 'on';\r\n\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Event() ifxDate: EventEmitter;\r\n\r\n getDate(e) { \r\n const inputValue = e.target.value;\r\n const selectedDate = new Date(inputValue);\r\n const day = selectedDate.getDate();\r\n const month = selectedDate.getMonth() + 1; \r\n const year = selectedDate.getFullYear();\r\n\r\n \r\n \r\n if (!inputValue) {\r\n //this.internals.setFormValue(null);\r\n\r\n if(this.type === 'datetime-local') { \r\n const hours = selectedDate.getHours();\r\n const minutes = selectedDate.getMinutes();\r\n this.ifxDate.emit({day, month, year, hours, minutes});\r\n } else { \r\n this.ifxDate.emit({day, month, year});\r\n }\r\n return;\r\n }\r\n\r\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\r\n input.classList.add('has-value');\r\n\r\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\r\n if(this.type === 'datetime-local') { \r\n const hours = selectedDate.getHours();\r\n const minutes = selectedDate.getMinutes();\r\n this.ifxDate.emit({day, month, year, hours, minutes});\r\n } else { \r\n this.ifxDate.emit({day, month, year})\r\n }\r\n }\r\n\r\n handleInputFocusOnIconClick() { \r\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\r\n if(input) { \r\n input.focus()\r\n }\r\n }\r\n\r\n getBrowser() {\r\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\r\n return \"Chrome\";\r\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\r\n return \"Opera\";\r\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\r\n return \"IE\";\r\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\r\n return \"Firefox\";\r\n } else {\r\n return \"unknown\";\r\n }\r\n }\r\n\r\n setFireFoxClasses() { \r\n const browser = this.getBrowser()\r\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\r\n\r\n if(browser === 'Firefox') { \r\n input.classList.add('firefox__classes')\r\n } else if(input.classList.contains('firefox__classes')) { \r\n input.classList.remove('firefox__classes')\r\n }\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-date-picker', await framework)\r\n }\r\n this.setFireFoxClasses()\r\n }\r\n\r\n componentWillUpdate() { \r\n if (this.value) {\r\n this.getDate({ target: { value: this.value } });\r\n }\r\n }\r\n\r\n // formResetCallback() {\r\n // this.internals.setFormValue(null);\r\n // }\r\n\r\n render() {\r\n return (\r\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\r\n\r\n <label class='label__wrapper' htmlFor={ this.inputId }>\r\n { this.label?.trim() }\r\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\r\n </label>\r\n\r\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\r\n <input\r\n type={this.type}\r\n autocomplete={this.autocomplete}\r\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\r\n disabled={this.disabled ? true : undefined}\r\n aria-invalid={this.error ? true : undefined}\r\n aria-label={this.ariaLabel}\r\n max={this.max}\r\n min={this.min}\r\n value={this.value}\r\n required={this.required}\r\n onChange={(e) => this.getDate(e)} />\r\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\r\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\r\n </div>\r\n </div>\r\n\r\n { this.caption?.trim() && (\r\n <div class='caption__wrapper'>\r\n { this.caption.trim() }\r\n </div> \r\n )}\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nlet datePickerId = 0;"]}
1	+ {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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 \| null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\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 \n \n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\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 if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\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 async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \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 <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\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;"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Date Picker',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n disabled: false,\r\n size: 's',\r\n success: false,\r\n error: false,\r\n name: 'date-picker',\r\n value: '',\r\n max: '',\r\n min: '',\r\n label: \"Label Text\",\r\n caption: \"Caption text, description, error notification.\",\r\n ariaLabel: 'Date Picker',\r\n required: false,\r\n autocomplete: \"on\",\r\n type: 'date'\r\n },\r\n argTypes: {\r\n label: {\r\n description: 'Label of Date Picker.',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n }\r\n },\r\n caption: {\r\n description: 'Caption text, description, error notification.',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n }\r\n },\r\n min: {\r\n description: 'Minimum date that can be selected. The parsed value is always formatted as yyyy-mm-dd.',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n }\r\n },\r\n max: {\r\n description: 'The latest date that can be selected. The parsed value is always formatted as yyyy-mm-dd.',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n }\r\n },\r\n disabled: {\r\n description: 'Disables the date picker',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n success: {\r\n description: 'Indicates success in the date picker.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n error: {\r\n description: 'Indicates error in the date picker.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n size: {\r\n description: 'Sets the size of the date picker. Options: Height small (36px) and Height large (40px).S',\r\n control: 'radio',\r\n options: ['s', 'l'],\r\n table: {\r\n category: 'ifx-date-picker props',\r\n defaultValue: {\r\n summary: 's'\r\n }\r\n }\r\n },\r\n name: {\r\n description: 'Name of the element, that is used as reference when a form is submitted.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-date-picker props'\r\n }\r\n },\r\n value: {\r\n description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted as yyyy-mm-dd. For \"datetime-local\" type, it is yyyy-mm-ddTHH:MM. Example: \"2018-06-12T19:30\"',\r\n table: {\r\n category: 'ifx-date-picker props'\r\n }\r\n },\r\n ariaLabel: {\r\n control: { type: 'text' },\r\n description: 'Set the aria label of the date picker. Enhances accessibility.',\r\n table: {\r\n category: 'ifx-date-picker props'\r\n }\r\n },\r\n required: {\r\n description: 'Set the required attribute to true to make the date picker mandatory.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-date-picker props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n autocomplete: {\r\n description: 'Sets the autocomplete attribute. \"on\" by default.',\r\n table: {\r\n category: 'ifx-date-picker props'\r\n }\r\n },\r\n type: {\r\n description: 'Sets the type of the date-picker. \"Date\" by default.',\r\n control: 'radio',\r\n options: ['date', 'datetime-local'],\r\n defaultValue: {\r\n summary: 'date'\r\n },\r\n table: {\r\n category: 'ifx-date-picker props'\r\n }\r\n },\r\n ifxDate: {\r\n action: 'ifxDate',\r\n description: 'A custom event emitted when a date in the calendar is being selected.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxDate={handleInput}\\nVue:@ifxDate=\"handleInput\"\\nAngular:(ifxDate)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxDate\", (event) => {//handle input});',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label, ariaLabel, required, name, autocomplete, type }) => {\r\n const element = document.createElement('ifx-date-picker');\r\n element.setAttribute('name', name);\r\n element.setAttribute('error', error);\r\n element.setAttribute('disabled', disabled);\r\n element.setAttribute('size', size);\r\n element.setAttribute('success', success);\r\n element.setAttribute('value', value);\r\n element.setAttribute('max', max);\r\n element.setAttribute('min', min);\r\n element.setAttribute('label', label);\r\n element.setAttribute('caption', caption);\r\n element.setAttribute('aria-label', ariaLabel);\r\n element.setAttribute('required', required);\r\n element.setAttribute('autocomplete', autocomplete);\r\n element.setAttribute('type', type);\r\n element.addEventListener('ifxDate', action('ifxDate'));\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});"]}
1	+ {"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,gDAAgD;QACzD,SAAS,EAAE,aAAa;QACxB,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,IAAI;QAClB,IAAI,EAAE,MAAM;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,uBAAuB;YACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,GAAG,EAAE;YACH,WAAW,EAAE,wFAAwF;YACrG,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,GAAG,EAAE;YACH,WAAW,EAAE,2FAA2F;YACxG,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,0BAA0B;YACvC,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,2FAA2F;YACxG,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,+MAA+M;YAC5N,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,gEAAgE;YAC7E,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,uEAAuE;YACpF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,sDAAsD;YACnE,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC;YACnC,YAAY,EAAE;gBACZ,OAAO,EAAE,MAAM;aAChB;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;aAClC;SACF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,uEAAuE;YACpF,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,qKAAqK;iBACxK;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7I,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IACvD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Date Picker',\n tags: ['autodocs'],\n\n args: {\n disabled: false,\n size: 's',\n success: false,\n error: false,\n name: 'date-picker',\n value: '',\n max: '',\n min: '',\n label: \"Label Text\",\n caption: \"Caption text, description, error notification.\",\n ariaLabel: 'Date Picker',\n required: false,\n autocomplete: \"on\",\n type: 'date'\n },\n argTypes: {\n label: {\n description: 'Label of Date Picker.',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n caption: {\n description: 'Caption text, description, error notification.',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n min: {\n description: 'Minimum date that can be selected. The parsed value is always formatted as yyyy-mm-dd.',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n max: {\n description: 'The latest date that can be selected. The parsed value is always formatted as yyyy-mm-dd.',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n disabled: {\n description: 'Disables the date picker',\n control: 'boolean',\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: false\n }\n }\n },\n success: {\n description: 'Indicates success in the date picker.',\n control: 'boolean',\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: false\n }\n }\n },\n error: {\n description: 'Indicates error in the date picker.',\n control: 'boolean',\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Sets the size of the date picker. Options: Height small (36px) and Height large (40px).S',\n control: 'radio',\n options: ['s', 'l'],\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: 's'\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n control: 'text',\n table: {\n category: 'ifx-date-picker props'\n }\n },\n value: {\n description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted as yyyy-mm-dd. For \"datetime-local\" type, it is yyyy-mm-ddTHH:MM. Example: \"2018-06-12T19:30\"',\n table: {\n category: 'ifx-date-picker props'\n }\n },\n ariaLabel: {\n control: { type: 'text' },\n description: 'Set the aria label of the date picker. Enhances accessibility.',\n table: {\n category: 'ifx-date-picker props'\n }\n },\n required: {\n description: 'Set the required attribute to true to make the date picker mandatory.',\n control: 'boolean',\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: false\n }\n }\n },\n autocomplete: {\n description: 'Sets the autocomplete attribute. \"on\" by default.',\n table: {\n category: 'ifx-date-picker props'\n }\n },\n type: {\n description: 'Sets the type of the date-picker. \"Date\" by default.',\n control: 'radio',\n options: ['date', 'datetime-local'],\n defaultValue: {\n summary: 'date'\n },\n table: {\n category: 'ifx-date-picker props'\n }\n },\n ifxDate: {\n action: 'ifxDate',\n description: 'A custom event emitted when a date in the calendar is being selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDate={handleInput}\\nVue:@ifxDate=\"handleInput\"\\nAngular:(ifxDate)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxDate\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label, ariaLabel, required, name, autocomplete, type }) => {\n const element = document.createElement('ifx-date-picker');\n element.setAttribute('name', name);\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('success', success);\n element.setAttribute('value', value);\n element.setAttribute('max', max);\n element.setAttribute('min', min);\n element.setAttribute('label', label);\n element.setAttribute('caption', caption);\n element.setAttribute('aria-label', ariaLabel);\n element.setAttribute('required', required);\n element.setAttribute('autocomplete', autocomplete);\n element.setAttribute('type', type);\n element.addEventListener('ifxDate', action('ifxDate'));\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}

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

@@ -11,7 +11,7 @@ export class Download {
         const fileName = `infineon-tokens.${this.tokens}`;
         const sourceFile = fileMap[this.tokens];
         const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;
-        return (h("ifx-link", { key: 'ac131e136730cd07388db72c9136586df6fecbdd', onClick: (e) => {
+        return (h("ifx-link", { key: '51887d03944efc6448ef2c71288a16754bebf12f', onClick: (e) => {
                 e.preventDefault();
                 fetch(fileUrl)
                     .then(res => res.blob())
@@ -21,7 +21,7 @@ export class Download {
                     link.download = fileName;
                     link.click();
                 });
-            }, href: fileUrl, download: fileName, class: "download__wrapper", size: "m", variant: "bold" }, h("slot", { key: 'b7c2682a2d67dc561433c8a2eea1927d3370fba9' })));
+            }, href: fileUrl, download: fileName, class: "download__wrapper", size: "m", variant: "bold" }, h("slot", { key: '8b4c69297dcbf44cf7182e8db89758a4f3a1f981' })));
     }
     static get is() { return "ifx-download"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"download.js","sourceRoot":"","sources":["../../../src/components/download/download.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IALrB;QAMU,WAAM,GAAmB,KAAK,CAAC;KAoCxC;IAlCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,GAAG,EAAE,mBAAmB;YACxB,IAAI,EAAE,qBAAqB;SAC5B,CAAC;QAEF,MAAM,QAAQ,GAAG,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC;QAClD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAExC,MAAM,OAAO,GAAG,4EAA4E,UAAU,EAAE,CAAC;QAEzG,OAAO,CACL,iEACA,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,OAAO,CAAC;qBACX,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;qBACvB,IAAI,CAAC,IAAI,CAAC,EAAE;oBACX,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;oBACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;oBACtC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;oBACzB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,CAAC,CAAC,CAAC;YACP,CAAC,EACC,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM;YAEd,8DAAQ,CACC,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-download',\r\n styleUrl: './download.scss',\r\n shadow: true\r\n})\r\nexport class Download {\r\n @Prop() tokens: 'css' \| 'scss' = 'css';\r\n\r\n render() {\r\n const fileMap = {\r\n css: 'css-variables.css',\r\n scss: 'scss-variables.scss'\r\n };\r\n\r\n const fileName = `infineon-tokens.${this.tokens}`;\r\n const sourceFile = fileMap[this.tokens];\r\n \r\n const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;\r\n\r\n return (\r\n <ifx-link \r\n onClick={(e) => {\r\n e.preventDefault();\r\n fetch(fileUrl)\r\n .then(res => res.blob())\r\n .then(blob => {\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.download = fileName;\r\n link.click();\r\n });\r\n }}\r\n href={fileUrl}\r\n download={fileName} \r\n class=\"download__wrapper\" \r\n size=\"m\" \r\n variant=\"bold\"\r\n >\r\n <slot />\r\n </ifx-link>\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"download.js","sourceRoot":"","sources":["../../../src/components/download/download.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IALrB;QAMU,WAAM,GAAmB,KAAK,CAAC;KAoCxC;IAlCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,GAAG,EAAE,mBAAmB;YACxB,IAAI,EAAE,qBAAqB;SAC5B,CAAC;QAEF,MAAM,QAAQ,GAAG,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC;QAClD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAExC,MAAM,OAAO,GAAG,4EAA4E,UAAU,EAAE,CAAC;QAEzG,OAAO,CACL,iEACA,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,OAAO,CAAC;qBACX,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;qBACvB,IAAI,CAAC,IAAI,CAAC,EAAE;oBACX,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;oBACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;oBACtC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;oBACzB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,CAAC,CAAC,CAAC;YACP,CAAC,EACC,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM;YAEd,8DAAQ,CACC,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-download',\n styleUrl: './download.scss',\n shadow: true\n})\nexport class Download {\n @Prop() tokens: 'css' \| 'scss' = 'css';\n\n render() {\n const fileMap = {\n css: 'css-variables.css',\n scss: 'scss-variables.scss'\n };\n\n const fileName = `infineon-tokens.${this.tokens}`;\n const sourceFile = fileMap[this.tokens];\n \n const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;\n\n return (\n <ifx-link \n onClick={(e) => {\n e.preventDefault();\n fetch(fileUrl)\n .then(res => res.blob())\n .then(blob => {\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = fileName;\n link.click();\n });\n }}\n href={fileUrl}\n download={fileName} \n class=\"download__wrapper\" \n size=\"m\" \n variant=\"bold\"\n >\n <slot />\n </ifx-link>\n );\n }\n}"]}

package/dist/collection/components/download/download.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"download.stories.js","sourceRoot":"","sources":["../../../src/components/download/download.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,cAAc,EAAE,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,+BAA+B,CAAC;AAE9D,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\r\n title: 'Components/Download',\r\n tags: ['autodocs'],\r\n\r\n excludeStories: ['Default'],\r\n};\r\n\r\nconst DefaultTemplate = () => `<ifx-download></ifx-download>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});"]}
1	+ {"version":3,"file":"download.stories.js","sourceRoot":"","sources":["../../../src/components/download/download.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,cAAc,EAAE,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,+BAA+B,CAAC;AAE9D,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: 'Components/Download',\n tags: ['autodocs'],\n\n excludeStories: ['Default'],\n};\n\nconst DefaultTemplate = () => `<ifx-download></ifx-download>`;\n\nexport const Default = DefaultTemplate.bind({});"]}

package/dist/collection/components/dropdown/IOpenable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IOpenable.js","sourceRoot":"","sources":["../../../src/components/dropdown/IOpenable.ts"],"names":[],"mappings":"","sourcesContent":["// IOpenable.ts\r\nexport interface IOpenable {\r\n isOpen: boolean;\r\n}"]}
1	+ {"version":3,"file":"IOpenable.js","sourceRoot":"","sources":["../../../src/components/dropdown/IOpenable.ts"],"names":[],"mappings":"","sourcesContent":["// IOpenable.ts\nexport interface IOpenable {\n isOpen: boolean;\n}"]}

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

@@ -2,7 +2,7 @@
 import { h } from "@stencil/core";
 export class DropdownHeader {
     render() {
-        return (h("div", { key: 'd58d209bafd95f683e1dc354a1202f04196a8b0a', class: 'dropdown-header' }, h("span", { key: '28cc9c63a12069353c9c1305b45b6dc718bace6d' }, h("slot", { key: '41d2a221685739d726b282153f75c5d3c2ca08ae' }))));
+        return (h("div", { key: 'fb44be3a97b0d43bdc771a216cdf66dbb6d9fd60', class: 'dropdown-header' }, h("span", { key: 'e5303390c42d9f6d536fe747e3aece317ba4cf18' }, h("slot", { key: 'a513ba5f1960a0c00099103b81449ee1ec30b9c1' }))));
     }
     static get is() { return "ifx-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-header/dropdown-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-header/dropdown-header.tsx"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,iBAAiB;YAC1B;gBACE,8DAAQ,CACH,CACH,CACP,CAAA;IACH,CAAC;;;;;;;;;CACF","sourcesContent":["// dropdown-separator.tsx\r\nimport { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-header',\r\n styleUrl: 'dropdown-header.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownHeader {\r\n render() {\r\n return (\r\n <div class='dropdown-header'>\r\n <span>\r\n <slot />\r\n </span>\r\n </div>\r\n )\r\n }\r\n}"]}
1	+ {"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-header/dropdown-header.tsx"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7C,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,iBAAiB;YAC1B;gBACE,8DAAQ,CACH,CACH,CACP,CAAA;IACH,CAAC;;;;;;;;;CACF","sourcesContent":["// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-header',\n styleUrl: 'dropdown-header.scss',\n shadow: true\n})\n\nexport class DropdownHeader {\n render() {\n return (\n <div class='dropdown-header'>\n <span>\n <slot />\n </span>\n </div>\n )\n }\n}"]}