npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.4.0 → 37.4.1--canary.1962.baa360da219f37054f79b2e93a00d1e1821bfba2.0 - Mend

@infineon/infineon-design-system-stencil 37.4.0 → 37.4.1--canary.1962.baa360da219f37054f79b2e93a00d1e1821bfba2.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 (626) hide show

package/dist/esm/ifx-content-switcher.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c9eba32.js';
-import { d as detectFramework, t as trackComponent } from './framework-detection-198a17af.js';
+import { d as detectFramework, t as trackComponent } from './framework-detection-e9695d02.js';
 import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 const contentSwitcherCss = ".ifx-content-switcher{background-color:#FFFFFF;border:1px solid #BFBBBB;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8D8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}";
@@ -20,9 +20,11 @@ const ContentSwitcher = class {
         this.initializeDividers();
         this.addEventListeners();
         this.ensureSingleSelectedItem();
+    }
+    async componentDidLoad() {
         if (!isNestedInIfxComponent(this.el)) {
             const framework = detectFramework();
-            trackComponent('ifx-content-switcher', framework);
+            trackComponent('ifx-content-switcher', await framework);
         }
     }
     disconnectedCallback() {
@@ -162,7 +164,7 @@ const ContentSwitcher = class {
         return this.items[index].getAttribute('value') || index.toLocaleString();
     }
     render() {
-        return (h(Host, { key: '7a17194a411d28a7ed2c2e023806544b07b1a812' }, h("div", { key: '1f13bedb6a6667b4ae12b0fa79c7f29d1d292c38', class: "ifx-content-switcher", role: "group" }, h("slot", { key: '7103ff1529b399632fde43740bd1c05966cdbf69' }))));
+        return (h(Host, { key: 'dc8ed1e40d00b2fb5b8274f3a1be386be2b7e6ff' }, h("div", { key: '12f9002e81a381891cc9c3e89b081966edc3daff', class: "ifx-content-switcher", role: "group" }, h("slot", { key: 'b2b0b7f694d08c9b04b9c0b763d32a29778871bd' }))));
     }
     get el() { return getElement(this); }
 };

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

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

package/dist/esm/ifx-date-picker.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c9eba32.js';
-import { d as detectFramework, t as trackComponent } from './framework-detection-198a17af.js';
+import { d as detectFramework, t as trackComponent } from './framework-detection-e9695d02.js';
 import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
@@ -88,13 +88,11 @@ const DatePicker = class {
             input.classList.remove('firefox__classes');
         }
     }
-    componentWillLoad() {
+    async componentDidLoad() {
         if (!isNestedInIfxComponent(this.el)) {
             const framework = detectFramework();
-            trackComponent('ifx-date-picker', framework);
+            trackComponent('ifx-date-picker', await framework);
         }
-    }
-    componentDidLoad() {
         this.setFireFoxClasses();
     }
     componentWillUpdate() {
@@ -107,8 +105,8 @@ const DatePicker = class {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'd8d3c4d9b9aa9259b89d77a7e9056f21a82af5b4', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'fe8580944744253399c5ce50faf1a0452f1e85e8', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: '42431f2b1c078094887a407632cc661d562ab60f', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '68d85b681e3676afde63291158b645e2431a39ee', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '57a4e08affca8edd6fa544b6006e177eea80e15b', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'ad2175060bf9afab77128c2cf020bba04b511a21', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '5a35ecf8f8a041a0b9ba195bccfbdc68ab85ef59', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'c516e70fb0ddeb537467f86fba2d22adeb310a70', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: 'f875ef689c357c95a73bb541f3ac6457d6fe564c', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '0d98faaa4319093e982a5d7eba2a4500bf8ceead', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: '5b2e4e755d291daaae7c91a445f709346a6765d0', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '6de0a53bc4d96f646845b1ee45143ec0c1d8e767', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '5fdeb8217f0949e897639079dde94c898f859ed5', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '6461b8951ec7cfb4ef206f85d499fa787c792bc2', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '1ad41185d7c05db70102d5c5404ef19f1758e5cd', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'b81efc9cd12231b7e3c1e942d2795a23fe5230e0', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

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

package/dist/esm/ifx-dropdown.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c9eba32.js';
-import { d as detectFramework, t as trackComponent } from './framework-detection-198a17af.js';
+import { d as detectFramework, t as trackComponent } from './framework-detection-e9695d02.js';
 import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 import { c as createPopper } from './popper-1604923e.js';
@@ -26,9 +26,11 @@ const Dropdown = class {
         //maybe not needed
         this.updateSlotContent();
         this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
+    }
+    async componentDidLoad() {
         if (!isNestedInIfxComponent(this.el)) {
             const framework = detectFramework();
-            trackComponent('ifx-dropdown', framework);
+            trackComponent('ifx-dropdown', await framework);
         }
     }
     watchHandlerIsOpen(newValue, oldValue) {
@@ -141,7 +143,7 @@ const Dropdown = class {
         }
     }
     render() {
-        return (h("div", { key: '123f4d812d530e3eb1aa0cb1ce8e1320a9eb7548', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '1379248d96c14ab493a2b56b819e9a026cd8ff1b' })));
+        return (h("div", { key: '0ffd99254e002f76cd794c4a2acde1a18cad57a1', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '59d55b2e78574b583a2e3aad577790214812233e' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-dropdown.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,6BAA6B,CAAC;AAClD,0BAAe,WAAW;;MCgCb,QAAQ;IANrB;;;;;QAOU,cAAS,GAAc,cAAc,CAAC;;QAGtC,gBAAW,GAAY,KAAK,CAAC;;QAE5B,mBAAc,GAAY,KAAK,CAAC;;QAGjC,mBAAc,GAAY,KAAK,CAAC;QAUhC,0BAAqB,GAAY,KAAK,CAAC;QACvC,uBAAkB,GAAY,KAAK,CAAC;~~KAsK7C~~;~~IA1JC~~,iBAAiB;;QAEf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;~~QAC/D~~,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,cAAc,EAAE,SAAS,CAAC,CAAA;~~SAC1C~~;KACF;~~IAKD~~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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n\n@Component({\n tag: 'ifx-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true\n})\n\nexport class Dropdown {\n @Prop() placement: Placement = 'bottom-start';\n\n // isOpen prop\n @Prop() defaultOpen: boolean = false;\n // internal state for isOpen prop\n @State() internalIsOpen: boolean = false;\n\n // isOpen prop\n @Prop() noAppendToBody: boolean = false;\n\n // Custom events for opening and closing dropdown\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n @Event() ifxDropdown: EventEmitter;\n\n // determine if dropdown is disabled\n @Prop() disabled: boolean;\n\n @Prop() noCloseOnOutsideClick: boolean = false;\n @Prop() noCloseOnMenuClick: boolean = false;\n\n // Reference to host element\n @Element() el;\n // Dropdown trigger and menu\n @State() trigger: HTMLElement;\n @State() menu: HTMLElement\n // Popper instance for positioning\n popperInstance: any;\n\n\n\n componentWillLoad() {\n //maybe not needed\n this.updateSlotContent();\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-dropdown', framework)\n }\n }\n\n~~\n\n~~ @Watch('defaultOpen')\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n if (newValue) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n @Watch('disabled')\n watchHandlerDisabled(newValue: boolean) {\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n }\n }\n\n\n @Listen('slotchange')\n watchHandlerSlot() {\n this.updateSlotContent();\n }\n\n\n\n // handling assignment of trigger and menu\n updateSlotContent() {\n // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n }\n // Remove menu if exists from body\n if (!this.noAppendToBody) {\n if (this.menu) {\n this.menu.remove();\n }\n // Get new menu and add to body\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n // event handler for closing dropdown on menu click\n document.body.append(this.menu);\n } else {\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n }\n this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n }\n\n menuClickHandler() {\n if (!this.noCloseOnMenuClick) {\n this.closeDropdown();\n }\n }\n\n triggerClickHandler() {\n if (!this.internalIsOpen) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n\n disconnectedCallback() {\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n // Remove menu if exists\n if (this.menu) {\n this.menu.remove();\n }\n }\n\n @Method()\n async isOpen() {\n return this.internalIsOpen;\n }\n\n @Method()\n async closeDropdown() {\n if (this.internalIsOpen) {\n this.internalIsOpen = false;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = false;\n (this.menu as unknown as IOpenable).isOpen = false;\n // Emit close event\n this.ifxClose.emit();\n }\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n @Method()\n async openDropdown() {\n if (!this.internalIsOpen && !this.disabled) {\n this.internalIsOpen = true;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = true;\n (this.menu as unknown as IOpenable).isOpen = true;\n // Create popper instance for positioning\n this.popperInstance = createPopper(\n this.el,\n this.menu,\n { placement: this.placement });\n\n this.ifxOpen.emit();\n }\n }\n\n //emitted by and listening to it from the dropdown menu right now\n // @Listen('ifxDropdownMenu')\n // handleDropdownMenuEvents(event: CustomEvent) {\n // this.ifxDropdown.emit(event.detail)\n // console.log('Selected item received in higher-level parent:');\n // }\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n // Close dropdown if outside click\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n this.closeDropdown();\n }\n }\n\n render() {\n return (\n <div aria-label='dropdown menu' class='dropdown'>\n <slot />\n </div>\n )\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,6BAA6B,CAAC;AAClD,0BAAe,WAAW;;MCgCb,QAAQ;IANrB;;;;;QAOU,cAAS,GAAc,cAAc,CAAC;;QAGtC,gBAAW,GAAY,KAAK,CAAC;;QAE5B,mBAAc,GAAY,KAAK,CAAC;;QAGjC,mBAAc,GAAY,KAAK,CAAC;QAUhC,0BAAqB,GAAY,KAAK,CAAC;QACvC,uBAAkB,GAAY,KAAK,CAAC;KAuK7C;IA3JC,iBAAiB;;QAEf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAChE;IAED,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,cAAc,EAAE,MAAM,SAAS,CAAC,CAAA;SAChD;KACF;IAGD,kBAAkB,CAAC,QAAiB,EAAE,QAAiB;QACrD,IAAI,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,CAAC,cAAc,EAAE;YAC7D,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;SACF;KACF;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAA4D,CAAC,QAAQ,GAAG,QAAQ,CAAC;SACxF;KACF;IAID,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;;IAKD,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mDAAmD,CAAC,CAAC;QAC1F,IAAI,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAA4D,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5F,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/E,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7E;;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;aACpB;;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;;YAGvD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjC;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;SAExD;QACD,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAEvE;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;aAAM;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAED,oBAAoB;;QAElB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;SACpB;KACF;IAGD,MAAM,MAAM;QACV,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;IAGD,MAAM,aAAa;QACjB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;;YAE3B,IAAI,CAAC,OAAgC,CAAC,MAAM,GAAG,KAAK,CAAC;YACrD,IAAI,CAAC,IAA6B,CAAC,MAAM,GAAG,KAAK,CAAC;;YAEnD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB;;QAED,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;KACF;IAGD,MAAM,YAAY;QAChB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC1C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;YAE1B,IAAI,CAAC,OAAgC,CAAC,MAAM,GAAG,IAAI,CAAC;YACpD,IAAI,CAAC,IAA6B,CAAC,MAAM,GAAG,IAAI,CAAC;;YAElD,IAAI,CAAC,cAAc,GAAG,YAAY,CAChC,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,IAAI,EACT,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YAEjC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB;KACF;;;;;;;IAUD,kBAAkB,CAAC,KAAiB;QAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;QAE3C,IAAI,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YAC3F,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,eAAe,EAAC,KAAK,EAAC,UAAU,IAC9C,8DAAQ,CACJ,EACP;KACF;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n\n@Component({\n tag: 'ifx-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true\n})\n\nexport class Dropdown {\n @Prop() placement: Placement = 'bottom-start';\n\n // isOpen prop\n @Prop() defaultOpen: boolean = false;\n // internal state for isOpen prop\n @State() internalIsOpen: boolean = false;\n\n // isOpen prop\n @Prop() noAppendToBody: boolean = false;\n\n // Custom events for opening and closing dropdown\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n @Event() ifxDropdown: EventEmitter;\n\n // determine if dropdown is disabled\n @Prop() disabled: boolean;\n\n @Prop() noCloseOnOutsideClick: boolean = false;\n @Prop() noCloseOnMenuClick: boolean = false;\n\n // Reference to host element\n @Element() el;\n // Dropdown trigger and menu\n @State() trigger: HTMLElement;\n @State() menu: HTMLElement\n // Popper instance for positioning\n popperInstance: any;\n\n\n\n componentWillLoad() {\n //maybe not needed\n this.updateSlotContent();\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-dropdown', await framework)\n }\n }\n\n @Watch('defaultOpen')\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n if (newValue) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n @Watch('disabled')\n watchHandlerDisabled(newValue: boolean) {\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n }\n }\n\n\n @Listen('slotchange')\n watchHandlerSlot() {\n this.updateSlotContent();\n }\n\n\n\n // handling assignment of trigger and menu\n updateSlotContent() {\n // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n }\n // Remove menu if exists from body\n if (!this.noAppendToBody) {\n if (this.menu) {\n this.menu.remove();\n }\n // Get new menu and add to body\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n // event handler for closing dropdown on menu click\n document.body.append(this.menu);\n } else {\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n }\n this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n }\n\n menuClickHandler() {\n if (!this.noCloseOnMenuClick) {\n this.closeDropdown();\n }\n }\n\n triggerClickHandler() {\n if (!this.internalIsOpen) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n\n disconnectedCallback() {\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n // Remove menu if exists\n if (this.menu) {\n this.menu.remove();\n }\n }\n\n @Method()\n async isOpen() {\n return this.internalIsOpen;\n }\n\n @Method()\n async closeDropdown() {\n if (this.internalIsOpen) {\n this.internalIsOpen = false;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = false;\n (this.menu as unknown as IOpenable).isOpen = false;\n // Emit close event\n this.ifxClose.emit();\n }\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n @Method()\n async openDropdown() {\n if (!this.internalIsOpen && !this.disabled) {\n this.internalIsOpen = true;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = true;\n (this.menu as unknown as IOpenable).isOpen = true;\n // Create popper instance for positioning\n this.popperInstance = createPopper(\n this.el,\n this.menu,\n { placement: this.placement });\n\n this.ifxOpen.emit();\n }\n }\n\n //emitted by and listening to it from the dropdown menu right now\n // @Listen('ifxDropdownMenu')\n // handleDropdownMenuEvents(event: CustomEvent) {\n // this.ifxDropdown.emit(event.detail)\n // console.log('Selected item received in higher-level parent:');\n // }\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n // Close dropdown if outside click\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n this.closeDropdown();\n }\n }\n\n render() {\n return (\n <div aria-label='dropdown menu' class='dropdown'>\n <slot />\n </div>\n )\n }\n}"],"version":3}

package/dist/esm/ifx-file-upload.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c9eba32.js';
-import { d as detectFramework, t as trackComponent } from './framework-detection-198a17af.js';
+import { d as detectFramework, t as trackComponent } from './framework-detection-e9695d02.js';
 import { i as isNestedInIfxComponent } from './dom-utils-1988cdf1.js';
 const fileUploadCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.file-upload-wrapper.disabled{pointer-events:none}.file-upload-wrapper.disabled label,.file-upload-wrapper.disabled .file-upload-info{color:#575352}.file-upload-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D}.file-upload-label .required{display:inline-block;margin-left:4px}.file-upload-label .required.error{color:#CD002F}.upload-dropzone{border:1px dashed #BFBBBB;padding:40px;text-align:center;cursor:pointer;color:#1D1D1D;transition:border-color 0.3s ease;border-radius:1px;background:#FFFFFF}.upload-dropzone ifx-icon{color:#0A8276}.upload-dropzone:hover{border:1px dashed #8D8786}.upload-dropzone.drag-over{border:1px solid #0A8276;background:#F7F7F7}.upload-dropzone.drag-over.error{border:1px solid #0A8276}.upload-dropzone.error{border-color:#CD002F}.disabled .upload-dropzone{pointer-events:none;border-color:#BFBBBB;color:#BFBBBB}.disabled .upload-dropzone ifx-icon{color:#BFBBBB}.upload-dropzone input{display:none}.file-upload-info{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0em;color:#1D1D1D;margin:0;margin-top:4px}.file-upload-status{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;margin-top:8px}.file-upload-status.file-upload-status__error{display:flex;align-items:center;color:#CD002F}.file-upload-status.file-upload-status__error ifx-icon{position:relative;top:-1px;color:#CD002F;margin-right:8px}.upload-heading{font:600 1.125rem/1.625rem \"Source Sans 3\";margin-bottom:8px}.file-list-wrapper{margin-top:16px}.file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding-top:12px;padding-right:16px;padding-bottom:8px;padding-left:16px;display:flex;gap:8px}.file-info{width:100%;min-width:0}.file-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}.file-top-row ifx-icon{flex-shrink:0}.file-name-wrapper{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;font-weight:400;font-size:0.875rem}.file-name-base{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.file-name-ext{flex-shrink:0;margin-left:0}.file-middle-row{display:flex;align-items:center;font-size:0.75rem;line-height:1rem;flex-wrap:wrap;color:#575352}.file-middle-row .file-status{margin-left:12px}.file-middle-row .file-status ifx-icon{margin-right:8px}.file-progress-row{margin-top:4px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:1px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}";
@@ -496,13 +496,11 @@ const FileUpload = class {
     isInputDisabled() {
         return this.disabled || (this.maxFiles !== undefined && this.files.length >= this.maxFiles);
     }
-    componentWillLoad() {
+    async componentDidLoad() {
         if (!isNestedInIfxComponent(this.hostElement)) {
             const framework = detectFramework();
-            trackComponent('ifx-file-upload', framework);
+            trackComponent('ifx-file-upload', await framework);
         }
-    }
-    componentDidLoad() {
         if (this.hostElement.hasAttribute('show-demo-states')) {
             this.showDemoStates = true;
         }
@@ -533,10 +531,10 @@ const FileUpload = class {
         this.validateRequired();
     }
     render() {
-        return (h("div", { key: 'a9cea6fe1f122bd00ddee401138c075911332968', class: {
+        return (h("div", { key: 'f98ff0d0152f1b8f2d7a96f4b4860a9836398dfe', class: {
                 'file-upload-wrapper': true,
                 'disabled': this.disabled
-            } }, this.label && (h("label", { key: '05c0b05bd08e2e6850ed568165416d249ce72e10', class: "file-upload-label", htmlFor: this.internalId }, this.label, this.required && (h("span", { key: '3c30d8f88259072e9548054131b1963e527902a2', class: `required ${this.requiredError ? 'error' : ''}` }, "*")))), this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea(), (this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (h("div", { key: 'cf05de4f4ca9bec4a2d17e4134356b4027cf93a3', class: "file-list-wrapper" }, h("div", { key: '63afc1dea10b55f33b5957c8195a624d5224cc15', class: "upload-heading" }, this.labelUploadedFilesHeading), h("ul", { key: '680c4247f6046899bad807cb277a7e21d7b89022', class: "file-list" }, this.rejectedSizeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-size-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'size') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString()) }, this.getFormattedFileTooLargeText())))))), this.rejectedTypeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-type-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'type') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelUnsupportedFileType }, this.labelUnsupportedFileType)))))), this.files.map((file) => {
+            } }, this.label && (h("label", { key: '2639246e2dc34728aa25c44ba7a9c4786f56552c', class: "file-upload-label", htmlFor: this.internalId }, this.label, this.required && (h("span", { key: '2b0a0e62e815f75b5a2e5d7ac886a809ad46d031', class: `required ${this.requiredError ? 'error' : ''}` }, "*")))), this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea(), (this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (h("div", { key: 'd32153fac7ad16ed56ca6d388032883ba31355ea', class: "file-list-wrapper" }, h("div", { key: 'b3f72dc0e9b46933b192f31a98dd6eb2d3778bef', class: "upload-heading" }, this.labelUploadedFilesHeading), h("ul", { key: '23b8539f0d7d38a9c434d95a10eee392d57b2b23', class: "file-list" }, this.rejectedSizeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-size-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'size') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString()) }, this.getFormattedFileTooLargeText())))))), this.rejectedTypeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-type-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'type') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelUnsupportedFileType }, this.labelUnsupportedFileType)))))), this.files.map((file) => {
             var _a;
             const task = this.uploadTasks.find(t => t.file.name === file.name);
             const progress = (_a = task === null || task === void 0 ? void 0 : task.progress) !== null && _a !== void 0 ? _a : 100;