npm - @infineon/infineon-design-system-stencil - Versions diffs - 34.6.0 → 34.7.0--canary.1900.8208b6e8047340fe22e9d82395c9cff3e35ff3d7.0 - Mend

@infineon/infineon-design-system-stencil 34.6.0 → 34.7.0--canary.1900.8208b6e8047340fe22e9d82395c9cff3e35ff3d7.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 (316) hide show

package/dist/components/{p-55dccf7f.js → p-1d3bba0f.js} RENAMED Viewed

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

package/dist/components/{p-55dccf7f.js.map → p-1d3bba0f.js.map} RENAMED Viewed

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

package/dist/components/{p-de6b551c.js → p-357107c5.js} RENAMED Viewed

@@ -96,10 +96,10 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
         }
     }
     render() {
-        return (h("div", { key: 'cb8013aba3a9cf425b0248db8a7128888444566e', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '5a49ef6b37fdcc7c890aa537e1c0a655d015d94c', class: `radioButton__wrapper
+        return (h("div", { key: '95e83d8c2acc9e2816eafa572c15d23a62ad8397', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '0f069aee0c34e4a412febc8bce0f6146526533f4', class: `radioButton__wrapper
             ${this.internalChecked ? 'checked' : ''}
             ${this.disabled ? 'disabled' : ''}
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '378453dd15442d1f8eccf902a5782b3b2bedf014', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'c75daf157328dc01f9b3c5dd902dfadad4a42429', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'a775312d6de569972bafa22faa3eca5f28d5488e' }))), h("input", { key: '3e7e5a463cba5f66ce9309cf538d37f5831d150d', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '5bfb321964a7f772f1deb9aad645944f9f465d82', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '52b233fdf2725ce78448d1c535dfaa539b417d12', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'c0890ab3ce5a7a7a0e851a68865e0f8567b3d80c' }))), h("input", { key: '494e9271029854250e5f767352a65a93021dbee9', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -139,4 +139,4 @@ function defineCustomElement() {
 export { RadioButton as R, defineCustomElement as d };
-//# sourceMappingURL=p-de6b551c.js.map
+//# sourceMappingURL=p-357107c5.js.map

package/dist/components/{p-de6b551c.js.map → p-357107c5.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-de6b551c.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n border: 0 !important;\n }\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n &.error::after {\n border-color: #CD002F;\n background-color: #CD002F;\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" \| \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n private inputElement: HTMLInputElement;\n private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked \|\| false;\n this.hasSlot = !!this.el.querySelector('[slot]') \|\| this.el.innerHTML.trim() !== '';\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n if (this.internals?.setFormValue) {\n this.internals.setFormValue(this.internalChecked ? this.value : null);\n }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el \|\| target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"p-357107c5.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n border: 0 !important;\n }\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n &.error::after {\n border-color: #CD002F;\n background-color: #CD002F;\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" \| \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n private inputElement: HTMLInputElement;\n private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked \|\| false;\n this.hasSlot = !!this.el.querySelector('[slot]') \|\| this.el.innerHTML.trim() !== '';\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n if (this.internals?.setFormValue) {\n this.internals.setFormValue(this.internalChecked ? this.value : null);\n }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el \|\| target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"version":3}

package/dist/components/{p-38037d65.js → p-53d4339c.js} RENAMED Viewed

@@ -39,7 +39,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
         }
     }
     render() {
-        return (h("a", { key: '2897df5640a0bcc1c032f1329b53636a1567e6aa', role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '35b879c6940b9211d07c1cc043d61da45f2a3035' })));
+        return (h("a", { key: 'f9fa681a791a4184c448d7072425c014a83020bd', role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '2e6a023c4693eedfa03e8440e5e62e76386ec2ef' })));
     }
     getSizeClass() {
         const small = this.size === 's' ? 'small' : null;
@@ -116,4 +116,4 @@ function defineCustomElement() {
 export { Link as L, defineCustomElement as d };
-//# sourceMappingURL=p-38037d65.js.map
+//# sourceMappingURL=p-53d4339c.js.map

package/dist/components/{p-38037d65.js.map → p-53d4339c.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~38037d65~~.js","mappings":"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","names":[],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.link {\n display: inline-flex;\n align-items: center;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n text-decoration: none;\n color: tokens.$ifxColorOcean500;\n gap: tokens.$ifxSpace100;\n line-height: 1.6;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &:hover { \n cursor: pointer;\n }\n\n &:focus {\n outline-width: 2px;\n outline-style: solid;\n outline-color: #0A8276;\n outline-offset: 4px;\n border-radius: 3px;\n }\n\n &.bold {\n font-weight: tokens.$ifxFontWeightSemibold;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:active {\n color: #08665C;\n font-style: normal;\n font-weight: 600;\n text-decoration: underline;\n }\n\n }\n\n &.underlined {\n text-decoration: underline;\n text-decoration-color: tokens.$ifxColorOcean500;\n color: #1D1D1D;\n text-underline-offset: 8px;\n \n &:hover {\n color: tokens.$ifxColorOcean500;;\n }\n \n &:active {\n color: #0A8276;\n }\n\n &:disabled,\n &.disabled {\n text-decoration-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.title {\n text-decoration: none;\n font-weight: tokens.$ifxFontWeightSemibold;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.menu {\n font-weight: 400;\n font-style: normal;\n line-height: 26px;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.small {\n font-size: tokens.$ifxFontSizeS;\n }\n\n &.medium {\n font-size: tokens.$ifxFontSizeM;\n }\n\n &.large {\n font-size: tokens.$ifxFontSizeL;\n }\n\n &.extraLarge {\n font-size: tokens.$ifxFontSizeXl;\n }\n\n &.underline {\n text-decoration: underline;\n }\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n cursor: default;\n pointer-events: none;\n }\n\n}","import { Component, Prop, h, State } from \"@stencil/core\";\nimport classNames from 'classnames';\n \n\n@Component({\n tag: 'ifx-link',\n styleUrl: 'link.scss',\n shadow: true\n})\n\nexport class Link {\n @Prop() href: string = undefined;\n @Prop() target: string = '_self';\n @Prop() variant: string = 'bold';\n @Prop() size: string;\n @Prop() disabled: boolean = false;\n @Prop() download: string;\n @Prop() ariaLabel: string \| null;\n @State() internalHref: string ='';\n @State() internalTarget: string = '';\n @State() internalVariant: string = '';\n\n setInternalStates() {\n if(this.href){\n this.internalHref = this.href.trim();\n }else{\n this.internalHref = undefined;\n }\n this.internalTarget = this.target.trim();\n this.internalVariant = this.variant.trim().toLowerCase();\n }\n\n componentWillRender(){\n this.setInternalStates();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) {\n event.preventDefault();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n }\n }\n\n render() {\n return (\n <a\n role=\"link\"\n aria-label={this.ariaLabel}\n aria-disabled={this.disabled \|\| !this.internalHref}\n href={this.disabled ? undefined : this.internalHref}\n download={this.download}\n target={this.internalTarget}\n class={this.linkClassNames()}>\n <slot></slot>\n </a>)\n }\n\n getSizeClass() {\n const small = this.size === 's' ? 'small' : null;\n const medium = this.size === 'm' ? 'medium' : null;\n const large = this.size === 'l' ? 'large' : null;\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n if (small) {\n return small;\n } else if (medium) {\n return medium;\n } else if (large) {\n return large;\n } else if (extraLarge && this.internalVariant === 'underlined') {\n return 'large';\n } else if (extraLarge && this.internalVariant !== 'underlined') {\n return extraLarge;\n } else return \"\";\n }\n\n getVariantClass() {\n const bold = this.internalVariant === 'bold' ? 'bold' : null;\n const title = this.internalVariant === 'title' ? 'title' : null;\n const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n if (bold) {\n return bold\n } else if (title) {\n return title;\n } else if (underlined) {\n return underlined;\n } else if (menu) {\n return menu;\n } else return bold;\n }\n\n linkClassNames() {\n return classNames(\n 'link',\n 'primary',\n this.getVariantClass(),\n this.getSizeClass(),\n this.disabled ? 'disabled' : '',\n );\n }\n}"],"version":3}
1	+ {"file":"p-53d4339c.js","mappings":"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","names":[],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.link {\n display: inline-flex;\n align-items: center;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n text-decoration: none;\n color: tokens.$ifxColorOcean500;\n gap: tokens.$ifxSpace100;\n line-height: 1.6;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &:hover { \n cursor: pointer;\n }\n\n &:focus {\n outline-width: 2px;\n outline-style: solid;\n outline-color: #0A8276;\n outline-offset: 4px;\n border-radius: 3px;\n }\n\n &.bold {\n font-weight: tokens.$ifxFontWeightSemibold;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:active {\n color: #08665C;\n font-style: normal;\n font-weight: 600;\n text-decoration: underline;\n }\n\n }\n\n &.underlined {\n text-decoration: underline;\n text-decoration-color: tokens.$ifxColorOcean500;\n color: #1D1D1D;\n text-underline-offset: 8px;\n \n &:hover {\n color: tokens.$ifxColorOcean500;;\n }\n \n &:active {\n color: #0A8276;\n }\n\n &:disabled,\n &.disabled {\n text-decoration-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.title {\n text-decoration: none;\n font-weight: tokens.$ifxFontWeightSemibold;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.menu {\n font-weight: 400;\n font-style: normal;\n line-height: 26px;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.small {\n font-size: tokens.$ifxFontSizeS;\n }\n\n &.medium {\n font-size: tokens.$ifxFontSizeM;\n }\n\n &.large {\n font-size: tokens.$ifxFontSizeL;\n }\n\n &.extraLarge {\n font-size: tokens.$ifxFontSizeXl;\n }\n\n &.underline {\n text-decoration: underline;\n }\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n cursor: default;\n pointer-events: none;\n }\n\n}","import { Component, Prop, h, State } from \"@stencil/core\";\nimport classNames from 'classnames';\n \n\n@Component({\n tag: 'ifx-link',\n styleUrl: 'link.scss',\n shadow: true\n})\n\nexport class Link {\n @Prop() href: string = undefined;\n @Prop() target: string = '_self';\n @Prop() variant: string = 'bold';\n @Prop() size: string;\n @Prop() disabled: boolean = false;\n @Prop() download: string;\n @Prop() ariaLabel: string \| null;\n @State() internalHref: string ='';\n @State() internalTarget: string = '';\n @State() internalVariant: string = '';\n\n setInternalStates() {\n if(this.href){\n this.internalHref = this.href.trim();\n }else{\n this.internalHref = undefined;\n }\n this.internalTarget = this.target.trim();\n this.internalVariant = this.variant.trim().toLowerCase();\n }\n\n componentWillRender(){\n this.setInternalStates();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) {\n event.preventDefault();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n }\n }\n\n render() {\n return (\n <a\n role=\"link\"\n aria-label={this.ariaLabel}\n aria-disabled={this.disabled \|\| !this.internalHref}\n href={this.disabled ? undefined : this.internalHref}\n download={this.download}\n target={this.internalTarget}\n class={this.linkClassNames()}>\n <slot></slot>\n </a>)\n }\n\n getSizeClass() {\n const small = this.size === 's' ? 'small' : null;\n const medium = this.size === 'm' ? 'medium' : null;\n const large = this.size === 'l' ? 'large' : null;\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n if (small) {\n return small;\n } else if (medium) {\n return medium;\n } else if (large) {\n return large;\n } else if (extraLarge && this.internalVariant === 'underlined') {\n return 'large';\n } else if (extraLarge && this.internalVariant !== 'underlined') {\n return extraLarge;\n } else return \"\";\n }\n\n getVariantClass() {\n const bold = this.internalVariant === 'bold' ? 'bold' : null;\n const title = this.internalVariant === 'title' ? 'title' : null;\n const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n if (bold) {\n return bold\n } else if (title) {\n return title;\n } else if (underlined) {\n return underlined;\n } else if (menu) {\n return menu;\n } else return bold;\n }\n\n linkClassNames() {\n return classNames(\n 'link',\n 'primary',\n this.getVariantClass(),\n this.getSizeClass(),\n this.disabled ? 'disabled' : '',\n );\n }\n}"],"version":3}

package/dist/components/{p-951ea0ac.js → p-5a9a16b5.js} RENAMED Viewed

@@ -55,7 +55,7 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: 'ab26f0cfe5f6ac53e721556b8c5541da19fb1795', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '36c3dd4d8c104c5ff50468e2af722e2a3518b014', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '5c39c1ef5966879ec8943500acf2eed059048f4f', icon: "search-16", class: "search-icon" }), h("input", { key: '0d960e2d3f9724583337d772fc0d941e05df1449', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (h("div", { key: '1c934e49ec338b1143beb1b38cbc81fc4b9143f7', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'ee18e7140c47744ac35f15afef353162e36743df', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '80b1068a48da7f09ba2587889b121acdaeee4559', icon: "search-16", class: "search-icon" }), h("input", { key: '006e6806d44fe10331b051b1f44f310276026ffe', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -104,4 +104,4 @@ function defineCustomElement() {
 export { SearchField as S, defineCustomElement as d };
-//# sourceMappingURL=p-951ea0ac.js.map
+//# sourceMappingURL=p-5a9a16b5.js.map

package/dist/components/{p-951ea0ac.js.map → p-5a9a16b5.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~951ea0ac~~.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,s0CAAs0C,CAAC;AAC91C,6BAAe,cAAc;;MCWhB,WAAW;IAPxB;;;;;QAS2B,UAAK,GAAW,EAAE,CAAC;QAGnC,mBAAc,GAAY,KAAK,CAAC;QAEjC,mBAAc,GAAY,KAAK,CAAC;QAC/B,gCAA2B,GAAY,KAAK,CAAC;QAC9C,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAW,GAAG,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;QAC5B,gBAAW,GAAW,WAAW,CAAC;QAClC,iBAAY,GAAW,IAAI,CAAC;QAC5B,cAAS,GAAY,IAAI,CAAC;QAkBlC,gBAAW,GAAG;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC,CAAC;QAEF,iBAAY,GAAG;YACb,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC,CAAA;KA0DF;IAnFC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;KACF;IAGD,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;SACpC;KACF;IAeD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;IAKD,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;SACzC;;YAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;KACjD;IAED,MAAM;QACJ,QACE,0EAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,IACxH,4DAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhC,iEAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY,EAC1D,8DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,IACtD,gBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,IACT,IAAI,CACJ,CACF,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,yBAAyB;cACzB,EAAE,CAAC;KACR;IAGD,oBAAoB;QAClB,OAAO,UAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,EAAE,CACrC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: tokens.$ifxColorEngineering400;\n\n &.focused {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & ifx-icon {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n }\n\n &:focus {\n outline: none;\n border: 1px solid #0A8276;\n }\n\n\n .delete-icon {\n right: 12px;\n cursor: pointer;\n }\n\n input[type='text'] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background-color: #EEEDED;\n }\n }\n\n &:has(input[disabled]) {\n background-color: #EEEDED;\n }\n }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() autocomplete: string = \"on\";\n @Prop() maxlength?: number = null; \n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n \n\n\n\n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n autocomplete={this.autocomplete}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"],"version":3}
1	+ {"file":"p-5a9a16b5.js","mappings":"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","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: tokens.$ifxColorEngineering400;\n\n &.focused {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & ifx-icon {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n }\n\n &:focus {\n outline: none;\n border: 1px solid #0A8276;\n }\n\n\n .delete-icon {\n right: 12px;\n cursor: pointer;\n }\n\n input[type='text'] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background-color: #EEEDED;\n }\n }\n\n &:has(input[disabled]) {\n background-color: #EEEDED;\n }\n }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() autocomplete: string = \"on\";\n @Prop() maxlength?: number = null; \n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n \n\n\n\n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n autocomplete={this.autocomplete}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"],"version":3}

package/dist/components/{p-a541805b.js → p-5e9d3450.js} RENAMED Viewed

@@ -20,7 +20,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         this.internalValue = this.value;
     }
     render() {
-        return (h("div", { key: '2eca6f70ca084387ee586e7758ef9d9658c52c1b', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: 'ba8a2378b6b0d16ed5c5423f76dc2c7073e7943d', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: 'd3a93894eeed65e5e9211e007ecb812a5992319a', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '82861c170a3b32675e7a2c1b59125cf30660f1cf', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '5d6c41afbdc76de9b253b43c0712957e79fe5ed0', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '94a7298d8c69d42d737b93092612771d9d8fab59', class: "label" }, `${this.internalValue}%`))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -50,4 +50,4 @@ function defineCustomElement() {
 export { ProgressBar as P, defineCustomElement as d };
-//# sourceMappingURL=p-a541805b.js.map
+//# sourceMappingURL=p-5e9d3450.js.map

package/dist/components/{p-a541805b.js.map → p-5e9d3450.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~a541805b~~.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ukBAAukB,CAAC;AAC/lB,6BAAe,cAAc;;MCOhB,WAAW;IALxB;;;;QAMU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KA2BpC;IAtBC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;KACF;IAGD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;KACjC;IAID,MAAM;QACJ,QACE,0EAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IAC1F,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n width: 100%;\n}\n\n.progress-bar {\n height: tokens.$ifxSize200;\n bottom: 0;\n right: 0;\n top: 0;\n left: 0;\n display: flex;\n height: tokens.$ifxSize250;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%; // Ensure the bar itself can grow up to 100% width\n overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n background-color: tokens.$ifxColorEngineering200;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n \n \n &.s {\n height: 4px;\n }\n\n .label {\n font-style: normal;\n font-size: tokens.$ifxFontSizeS;\n font-weight: 400;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseWhite;\n }\n \n .progress {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: fit-content;\n height: 100%;\n background-color: #0A8276;\n transition: width 0.2s ease;\n }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Prop() value: number = 0;\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n \n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n\n\n render() {\n return (\n <div aria-label='a progress bar' aria-value={this.value} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-5e9d3450.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ukBAAukB,CAAC;AAC/lB,6BAAe,cAAc;;MCOhB,WAAW;IALxB;;;;QAMU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KA2BpC;IAtBC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;KACF;IAGD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;KACjC;IAID,MAAM;QACJ,QACE,0EAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IAC1F,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n width: 100%;\n}\n\n.progress-bar {\n height: tokens.$ifxSize200;\n bottom: 0;\n right: 0;\n top: 0;\n left: 0;\n display: flex;\n height: tokens.$ifxSize250;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%; // Ensure the bar itself can grow up to 100% width\n overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n background-color: tokens.$ifxColorEngineering200;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n \n \n &.s {\n height: 4px;\n }\n\n .label {\n font-style: normal;\n font-size: tokens.$ifxFontSizeS;\n font-weight: 400;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseWhite;\n }\n \n .progress {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: fit-content;\n height: 100%;\n background-color: #0A8276;\n transition: width 0.2s ease;\n }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Prop() value: number = 0;\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n \n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n\n\n render() {\n return (\n <div aria-label='a progress bar' aria-value={this.value} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-99aca927.js → p-69b9d3fb.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
 import { d as defineCustomElement$2 } from './p-11e95622.js';
-import { d as defineCustomElement$1 } from './p-38037d65.js';
+import { d as defineCustomElement$1 } from './p-53d4339c.js';
 const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";
 const IfxNotificationStyle0 = notificationCss;
@@ -28,8 +28,8 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         }
     }
     render() {
-        return (h(Host, { key: 'b9dadad41cad910e7e21650aceb29d5af6643c51' }, h("div", { key: 'cd41ee1636de78a194ef95f9e2bd06b694e11a6b', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '776d12dbdd3507d2eeffae5acb43d0cc7bb38522', class: "ifx-notification__icon" }, h("ifx-icon", { key: 'a76019027824d778f963e35141a7fd11cdded756', icon: this.icon })), h("div", { key: '53d4f45a00e2fafe215763e92f5d93b197b6fa48', class: "ifx-notification__body" }, h("div", { key: '805f47c98958592fbeb012bf63692a5209006bb9', class: "ifx-notification__slot" }, h("slot", { key: 'f197bced5fd1ba1251f0ba0f2391e05d2d55ce7c' })), this.linkText && this.linkHref &&
-            h("div", { key: '132c845a13e2eebcbf77fb8388c0f6f215f8f5d6', class: "ifx-notification__link" }, h("ifx-link", { key: 'f9ff3ec9dfa037606be40ee682b7b99003be14ae', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: 'aa3c3662121113ed8c0d695bf10a2a9574be6df0', icon: "arrow-right-16" })))))));
+        return (h(Host, { key: 'e2ab3e7cd454516b3c9bacded8acd514f8acf6bb' }, h("div", { key: 'd697282d6b47fed553f2130b63b32858adb6e69a', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '9380c5dc81b6be5fe94f135e68af584c0be33999', class: "ifx-notification__icon" }, h("ifx-icon", { key: 'd93f47c6edf12e5578f681a1e2833e13cf316a73', icon: this.icon })), h("div", { key: 'cb4074d0f34c00043da6a25d86e9a7f0026fc0f3', class: "ifx-notification__body" }, h("div", { key: '8d6c5a5fb3e7dc4a17fec88b0f0e5818c5c4dacd', class: "ifx-notification__slot" }, h("slot", { key: 'ddc531bff82a4f0503dc5a31a44936bc06278a30' })), this.linkText && this.linkHref &&
+            h("div", { key: '5a04c972588dcad668fe4f177b2dfe1073ea1a8a', class: "ifx-notification__link" }, h("ifx-link", { key: 'e1a479722c277eec76e5d2f77fd1308047d1ed15', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '68d0ab0162a138cafdca9bfe26ae321b510ed8fe', icon: "arrow-right-16" })))))));
     }
     static get style() { return IfxNotificationStyle0; }
 }, [1, "ifx-notification", {
@@ -65,4 +65,4 @@ function defineCustomElement() {
 export { Notification as N, defineCustomElement as d };
-//# sourceMappingURL=p-99aca927.js.map
+//# sourceMappingURL=p-69b9d3fb.js.map

package/dist/components/{p-99aca927.js.map → p-69b9d3fb.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~99aca927~~.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' \| 'locked' \| 'error' \| 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"p-69b9d3fb.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' \| 'locked' \| 'error' \| 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}

package/dist/components/{p-dc9a6113.js → p-7d9b9a93.js} RENAMED Viewed

@@ -57,12 +57,12 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
         this.handleTypeProp();
     }
     render() {
-        return (h("div", { key: 'a7e11de99939dfedbc4048fdaacb3a543a7c199a', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: 'f06e2fa62b60a9e7b1fc5ad043ec82b0e70a91bd', class: "textInput__top-wrapper" }, h("label", { key: 'ccb61bfdf7249d091a315ba44e2172f1bbe6a567', htmlFor: this.internalId }, h("slot", { key: '935be543d95be08188600ec85e363af902587f58' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: 'a810ad0bcdd3b503df1c17e805bec11de84a142f', class: "textInput__bottom-wrapper" }, h("div", { key: '80a1ea5f90796c5284018e875aadcbd7f49177eb', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'f5ee155afa4d624ba7ebcb9308f76fc1071393db', class: 'input-icon', icon: this.icon })), h("input", { key: '7d927675d0e33cdc265ac5fe9909ccb2228cb15a', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: '597efeba3e10b6550f1b8de39502b85bb170c873', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '4b705913732e503ee735081aafa6336b8d4435a7', class: "textInput__top-wrapper" }, h("label", { key: '33ee2954bbe2cfde7957b28dda1aee099f9d81b0', htmlFor: this.internalId }, h("slot", { key: 'a38c2c00e1c236c036cf2d64bc7a28db2afe45a2' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '94ba742c9ec8a04df44d5bf14e03f91401688367', class: "textInput__bottom-wrapper" }, h("div", { key: '6dd7c491a798dae351f1cd25f085a473f83a6eb9', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'f80c38244c33fd0e3337d50dc40ed3c02693348a', class: 'input-icon', icon: this.icon })), h("input", { key: 'a639ec62f30d100b35c452e2bbbfa5abe134eed6', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""}
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '6214dd96307b46c8fa2b921f5f4f91284006b697', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: '957a563bc1f8b70347afb0c56f7e886f5c9d66a2', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: '0cd0a783e3e53c4d5041ce05f508bdfdebefc991', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '9ef57617c8f1a227ce0053f3aaecb93c20fb8a72', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '0e3ab81b4b14c9a47f77b5b3fd65cc957e00ef6f', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: '4455db6ddff04ed0615c2e4f295614ed66a3d12f', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -113,4 +113,4 @@ function defineCustomElement() {
 export { TextField as T, defineCustomElement as d };
-//# sourceMappingURL=p-dc9a6113.js.map
+//# sourceMappingURL=p-7d9b9a93.js.map

package/dist/components/{p-dc9a6113.js.map → p-7d9b9a93.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-dc9a6113.js","mappings":"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","names":[],"sources":["src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.textInput__container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n width: 100%;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n }\n }\n }\n }\n\n & .textInput__top-wrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .optional-required {\n margin-left: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n\n & .textInput__bottom-wrapper {\n flex-grow: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n & input {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n text-overflow: ellipsis;\n\n &.input-s {\n height: tokens.$ifxSize450;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & .input-icon {\n // Position the icon within the icon container\n // Adjust the positioning as needed\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: tokens.$ifxSpace200;\n /* Adjust this value to control the icon's left offset /\n transition: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class TextField {\n private inputElement: HTMLInputElement;\n @Element() el;\n @Prop() placeholder: string = \"Placeholder\"\n @Prop({ mutable: true }) value: string = '';\n @Prop() error: boolean = false;\n @Prop() label: string = \"\";\n @Prop() icon: string = \"\";\n @Prop() caption: string = \"\";\n @Prop() size: string = 'm';\n @Prop() required: boolean = false;\n @Prop() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() maxlength?: number;\n @Prop() showDeleteIcon: boolean = false;\n @Prop() autocomplete: string = 'on'\n @Prop() type: 'text' \| 'password' = 'text';\n @Prop() internalId: string = \"text-field\"\n @State() internalType: string;\n @Event() ifxInput: EventEmitter<String>;\n // @Prop({ reflect: true })\n // resetOnSubmit: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n @Method()\n async reset() {\n this.value = '';\n this.inputElement.value = '';\n }\n\n handleDeleteContent() {\n this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.internals.setFormValue(query) // update form value\n this.ifxInput.emit(this.value);\n }\n\n handleTypeProp() { \n this.internalType = this.type === 'text' \|\| this.type === 'password' ? this.type : 'text'\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n componentWillLoad() { \n this.handleTypeProp()\n }\n\n render() {\n return (\n <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) </span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\n autocomplete={this.autocomplete}\n type={this.internalType}\n id={this.internalId}\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cremove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-7d9b9a93.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,8qHAA8qH,CAAC;AACpsH,2BAAe,YAAY;;MCSd,SAAS;IAPtB;;;;;;QAUU,gBAAW,GAAW,aAAa,CAAA;QAClB,UAAK,GAAW,EAAE,CAAC;QACpC,UAAK,GAAY,KAAK,CAAC;QACvB,UAAK,GAAW,EAAE,CAAC;QACnB,SAAI,GAAW,EAAE,CAAC;QAClB,YAAO,GAAW,EAAE,CAAC;QACrB,SAAI,GAAW,GAAG,CAAC;QACnB,aAAQ,GAAY,KAAK,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;QACzB,aAAQ,GAAY,KAAK,CAAC;QAE1B,mBAAc,GAAY,KAAK,CAAC;QAChC,iBAAY,GAAW,IAAI,CAAA;QAC3B,SAAI,GAAwB,MAAM,CAAC;QACnC,eAAU,GAAW,YAAY,CAAA;KAoG1C;IA1FC,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;SACpC;KACF;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;KAC9B;IAED,mBAAmB;QACjB,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChC;IAED,WAAW;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChC;IAED,cAAc;QACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAA;KACzF;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAA;KACtB;IAED,MAAM;QACJ,QACE,0EAAgB,6BAA6B,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAClK,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,8DAAa,EACZ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAC7B,YAAM,KAAK,EAAC,mBAAmB,mBAAoB,IACjD,IAAI,CAAC,QAAQ,IACf,YAAM,KAAK,EAAC,UAAU,iBAAkB,IACtC,IAAI,CAAC,QAAQ,IACf,YAAM,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,QAAU,IAC5D,IAAI,CACF,CACJ,EAEN,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,KACR,iEAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACjD,EACD,8DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EACH,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE;kBACxB,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE;gBAC3B,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE;gBAClC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,EAEnC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,MAClC,iEAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,GAAa,CACtG,CACC,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK;YAC1B,4DAAK,KAAK,EAAE,qCAAqC,IAAI,CAAC,QAAQ,kBAAkB,IAC7E,IAAI,CAAC,OAAO,CACT,EACP,IAAI,CAAC,KAAK;YACT,4DAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,OAAO,CACT,CACJ,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.textInput__container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n width: 100%;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n }\n }\n }\n }\n\n & .textInput__top-wrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .optional-required {\n margin-left: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n\n & .textInput__bottom-wrapper {\n flex-grow: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n & input {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n text-overflow: ellipsis;\n\n &.input-s {\n height: tokens.$ifxSize450;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & .input-icon {\n // Position the icon within the icon container\n // Adjust the positioning as needed\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: tokens.$ifxSpace200;\n /* Adjust this value to control the icon's left offset /\n transition: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class TextField {\n private inputElement: HTMLInputElement;\n @Element() el;\n @Prop() placeholder: string = \"Placeholder\"\n @Prop({ mutable: true }) value: string = '';\n @Prop() error: boolean = false;\n @Prop() label: string = \"\";\n @Prop() icon: string = \"\";\n @Prop() caption: string = \"\";\n @Prop() size: string = 'm';\n @Prop() required: boolean = false;\n @Prop() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() maxlength?: number;\n @Prop() showDeleteIcon: boolean = false;\n @Prop() autocomplete: string = 'on'\n @Prop() type: 'text' \| 'password' = 'text';\n @Prop() internalId: string = \"text-field\"\n @State() internalType: string;\n @Event() ifxInput: EventEmitter<String>;\n // @Prop({ reflect: true })\n // resetOnSubmit: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n @Method()\n async reset() {\n this.value = '';\n this.inputElement.value = '';\n }\n\n handleDeleteContent() {\n this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.internals.setFormValue(query) // update form value\n this.ifxInput.emit(this.value);\n }\n\n handleTypeProp() { \n this.internalType = this.type === 'text' \|\| this.type === 'password' ? this.type : 'text'\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n componentWillLoad() { \n this.handleTypeProp()\n }\n\n render() {\n return (\n <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) </span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\n autocomplete={this.autocomplete}\n type={this.internalType}\n id={this.internalId}\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cremove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-643bcbdf.js → p-9142f93b.js} RENAMED Viewed

@@ -22,8 +22,8 @@ const Indicator = /*@__PURE__*/ proxyCustomElement(class Indicator extends H {
         this.handleNumber();
     }
     render() {
-        return (h("div", { key: 'd5990eba87822345236d9fbe47c882e205b1ec5f', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
-            h("div", { key: '3a00aed3a5061e233420ec4fa8dfbce1c62e6f92', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: 'a1c61453d1d4eaa38f78ef839a4a9ba0c1cfe812', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '4ab45b177a45afda00886b77ae101299c134d201', class: "dot__wrapper" })));
+        return (h("div", { key: '38dd6e80e8950d4b8fa1062cb2276c6a9214809e', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
+            h("div", { key: '419f38192a6fdaf19e3c71108a01d0170239cecd', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '40a78fd803c313a5e8be4101c428f70a5d336ec8', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: 'dbbf946c8aa56c26e7a4da8d5e2320ccf1cb0c0b', class: "dot__wrapper" })));
     }
     get el() { return this; }
     static get style() { return IfxIndicatorStyle0; }
@@ -50,4 +50,4 @@ function defineCustomElement() {
 export { Indicator as I, defineCustomElement as d };
-//# sourceMappingURL=p-643bcbdf.js.map
+//# sourceMappingURL=p-9142f93b.js.map

package/dist/components/{p-643bcbdf.js.map → p-9142f93b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~643bcbdf~~.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ywBAAywB,CAAC;AAC/xB,2BAAe,YAAY;;MCOd,SAAS;IALtB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,QAAQ,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAC;KA2B5B;IAzBC,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;KACrF;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1B,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC/D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,4DAAK,KAAK,EAAC,cAAc,GAAO,CACtD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.indicator__container { \n & .dot__wrapper { \n display: flex;\n width: 8px;\n height: 8px;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n border-radius: 50%;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .number__container {\n height: 16px;\n display: inline-flex;\n padding: 0; \n min-width: 16px; \n justify-content: center;\n align-items: center;\n border-radius: 100px;\n background-color: tokens.$ifxColorOcean500;\n\n & .number__wrapper {\n padding: 0 4px;\n color: tokens.$ifxColorBaseWhite;\n text-align: center;\n font-size: tokens.$ifxFontSizeS;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: 16px;\n }\n\n &.inverted {\n background-color: tokens.$ifxColorBaseWhite;\n\n & .number__wrapper {\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-indicator',\n styleUrl: 'indicator.scss',\n shadow: true\n})\nexport class Indicator {\n @Element() el;\n @State() filteredNumber: string \| number;\n @Prop() inverted: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() variant: string = 'number'\n @Prop() number: number = 0;\n\n handleNumber() {\n this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n }\n\n componentWillLoad() { \n this.handleNumber()\n }\n\n componentWillUpdate() {\n this.handleNumber()\n }\n\n render() {\n return (\n <div aria-label={this.ariaLabel} class='indicator__container'>\n {this.variant === 'number' && \n <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n <div class=\"number__wrapper\">\n {this.filteredNumber}\n </div> \n </div>}\n {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"p-9142f93b.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ywBAAywB,CAAC;AAC/xB,2BAAe,YAAY;;MCOd,SAAS;IALtB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,QAAQ,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAC;KA2B5B;IAzBC,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;KACrF;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1B,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC/D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,4DAAK,KAAK,EAAC,cAAc,GAAO,CACtD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.indicator__container { \n & .dot__wrapper { \n display: flex;\n width: 8px;\n height: 8px;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n border-radius: 50%;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .number__container {\n height: 16px;\n display: inline-flex;\n padding: 0; \n min-width: 16px; \n justify-content: center;\n align-items: center;\n border-radius: 100px;\n background-color: tokens.$ifxColorOcean500;\n\n & .number__wrapper {\n padding: 0 4px;\n color: tokens.$ifxColorBaseWhite;\n text-align: center;\n font-size: tokens.$ifxFontSizeS;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: 16px;\n }\n\n &.inverted {\n background-color: tokens.$ifxColorBaseWhite;\n\n & .number__wrapper {\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-indicator',\n styleUrl: 'indicator.scss',\n shadow: true\n})\nexport class Indicator {\n @Element() el;\n @State() filteredNumber: string \| number;\n @Prop() inverted: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() variant: string = 'number'\n @Prop() number: number = 0;\n\n handleNumber() {\n this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n }\n\n componentWillLoad() { \n this.handleNumber()\n }\n\n componentWillUpdate() {\n this.handleNumber()\n }\n\n render() {\n return (\n <div aria-label={this.ariaLabel} class='indicator__container'>\n {this.variant === 'number' && \n <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n <div class=\"number__wrapper\">\n {this.filteredNumber}\n </div> \n </div>}\n {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n </div>\n );\n }\n}"],"version":3}