@infineon/infineon-design-system-stencil 38.0.0--canary.1954.2e876da3ab7a5b6c0fd09a30a0866dbb0381178d.0 → 38.0.0--canary.1954.025edc54dd9ef58411246fbb0e4c4729d11567e8.0

package/dist/components/ifx-date-picker.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
+import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$2 } from './p-0e4632d4.js';
+import { d as defineCustomElement$2 } from './p-28bc54da.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}";
 const IfxDatePickerStyle0 = datePickerCss;
@@ -87,7 +87,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
     }
     componentWillLoad() {
         if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-date-picker');
+            const framework = detectFramework();
+            trackComponent('ifx-date-picker', framework);
         }
     }
     componentDidLoad() {
@@ -103,8 +104,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '611b9da2e9922cc5221c57c503be407dd185013c', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '26d63c058e9d9d1d3a346979bb124b1ae9c4b19c', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: '65fccda39bee8d6d81cec71b7371b76ffcdf7aa8', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '9e8c690a63e83334b5f4084991336bd9f4268853', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'e2dcec3d13663bf52e9c1756f95d527aef6b9a99', 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: '24b059bb6580122073ff8886c43d37f531e39958', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '9804677d28d83002dec58ebf3c294d51ae738169', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'c5b2cee9eedc206e3f91cc0a0cb795309aa441fa', class: 'caption__wrapper' }, this.caption.trim()))));
+        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()))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-date-picker.js.map

@@ -1 +1 @@
-{"file":"ifx-date-picker.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';\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      trackComponent('ifx-date-picker')\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}
+{"file":"ifx-date-picker.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}

package/dist/components/ifx-download.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-9ea9e274.js';
+import { d as defineCustomElement$2 } from './p-80bd74d1.js';
 
 const downloadCss = "";
 const IfxDownloadStyle0 = downloadCss;

package/dist/components/ifx-dropdown-item.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-0e4632d4.js';
+import { d as defineCustomElement$2 } from './p-28bc54da.js';
 
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
 const IfxDropdownItemStyle0 = dropdownItemCss;

package/dist/components/ifx-dropdown-trigger-button.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$3 } from './p-816b2612.js';
-import { d as defineCustomElement$2 } from './p-0e4632d4.js';
+import { d as defineCustomElement$3 } from './p-e7f270c1.js';
+import { d as defineCustomElement$2 } from './p-28bc54da.js';
 
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
 const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;

package/dist/components/ifx-dropdown.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
+import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
 import { c as createPopper } from './p-e459974a.js';
 
@@ -29,7 +29,8 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         this.updateSlotContent();
         this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
         if (!isNestedInIfxComponent(this.el)) {
-            trackComponent('ifx-dropdown');
+            const framework = detectFramework();
+            trackComponent('ifx-dropdown', framework);
         }
     }
     watchHandlerIsOpen(newValue, oldValue) {
@@ -142,7 +143,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         }
     }
     render() {
-        return (h("div", { key: 'dcd149aa4b948818dae0df02014ee38facedce92', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '7aa8982632181090c05b9bf209995f7d0de9257a' })));
+        return (h("div", { key: '123f4d812d530e3eb1aa0cb1ce8e1320a9eb7548', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '1379248d96c14ab493a2b56b819e9a026cd8ff1b' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-dropdown.js.map

@@ -1 +1 @@
-{"file":"ifx-dropdown.js","mappings":"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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 { 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      trackComponent('ifx-dropdown')\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}
+{"file":"ifx-dropdown.js","mappings":"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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}

package/dist/components/ifx-faq.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$4 } from './p-cca71d97.js';
-import { d as defineCustomElement$3 } from './p-0590639e.js';
-import { d as defineCustomElement$2 } from './p-0e4632d4.js';
+import { d as defineCustomElement$4 } from './p-29a39b8c.js';
+import { d as defineCustomElement$3 } from './p-6ff767df.js';
+import { d as defineCustomElement$2 } from './p-28bc54da.js';
 
 const faqCss = ".container{padding-top:10px}";
 const IfxFaqStyle0 = faqCss;

package/dist/components/ifx-file-upload.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { t as trackComponent } from './p-6ecb6a6f.js';
+import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$5 } from './p-816b2612.js';
-import { d as defineCustomElement$4 } from './p-0e4632d4.js';
-import { d as defineCustomElement$3 } from './p-b1ca5daf.js';
-import { d as defineCustomElement$2 } from './p-6d95b3c1.js';
+import { d as defineCustomElement$5 } from './p-e7f270c1.js';
+import { d as defineCustomElement$4 } from './p-28bc54da.js';
+import { d as defineCustomElement$3 } from './p-4f6ab2e4.js';
+import { d as defineCustomElement$2 } from './p-bb9b541f.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}";
 const IfxFileUploadStyle0 = fileUploadCss;
@@ -504,7 +504,8 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends H {
     }
     componentWillLoad() {
         if (!isNestedInIfxComponent(this.hostElement)) {
-            trackComponent('ifx-file-upload');
+            const framework = detectFramework();
+            trackComponent('ifx-file-upload', framework);
         }
     }
     componentDidLoad() {
@@ -538,10 +539,10 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends H {
         this.validateRequired();
     }
     render() {
-        return (h("div", { key: '8c79c2a907261edc96e95d4981e2415aee908e9a', class: {
+        return (h("div", { key: 'a9cea6fe1f122bd00ddee401138c075911332968', class: {
                 'file-upload-wrapper': true,
                 'disabled': this.disabled
-            } }, this.label && (h("label", { key: '14324d0799e0293420912c52e040ebb05f69a23a', class: "file-upload-label", htmlFor: this.internalId }, this.label, this.required && (h("span", { key: 'edd5608d0a9efa3f6a7954a603925821d3eb0c38', 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: '6b9b95cee5dbadcc78026d8ab5c65190382a53f5', class: "file-list-wrapper" }, h("div", { key: '1ecf61f95c5530cd8f31499b735023122c17ffbb', class: "upload-heading" }, this.labelUploadedFilesHeading), h("ul", { key: '7b9b75bea087847d26f8adff7dbf8e4ec5e6c6c8', 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: '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) => {
             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;