@infineon/infineon-design-system-stencil 39.4.4--canary.2130.4e289d5eee4c0769b9458514c7fb228750796ed6.0 → 39.4.4--canary.1723.9b272b74ec2d7a1946e675696ed8c09294c36bc3.0

package/dist/cjs/ifx-checkbox-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-checkbox-group.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font-size: tokens.$ifxFontSizeM;\n    color: tokens.$ifxColorBaseBlack;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n    color: tokens.$ifxColorEngineering500;\n    margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n    color: tokens.$ifxColorRed500;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } 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-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @Prop() required: boolean = false;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', await framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel && (\n          <div class=\"group-label\">\n            {this.groupLabelText}\n            {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n          </div>\n        )}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-checkbox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
 
@@ -121,3 +121,5 @@ Checkbox.style = checkboxCss;
 
 exports.ifx_checkbox = Checkbox;
 //# sourceMappingURL=ifx-checkbox.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-checkbox.cjs.entry.js.map

package/dist/cjs/ifx-checkbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-checkbox.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: tokens.$ifxFontFamilyBody;\n    vertical-align: bottom;\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid tokens.$ifxColorEngineering500;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n        &.error {\n            border-color: tokens.$ifxColorRed500;\n        }\n\n        &:focus-visible {\n            border: 1px solid tokens.$ifxColorEngineering500;\n            outline: 2px solid tokens.$ifxColorOcean500;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n            border: 1px solid tokens.$ifxColorEngineering500;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: tokens.$ifxColorEngineering300;;\n            border-color: tokens.$ifxColorEngineering300;;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked:not(.indeterminate) {\n            background-color: tokens.$ifxColorOcean500;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: tokens.$ifxColorRed500;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: tokens.$ifxColorOcean500;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: tokens.$ifxColorEngineering300;;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: tokens.$ifxColorOcean600; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } 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-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\n        if (this.value !== undefined) {\n          //this.internals.setFormValue(this.value);\n        } else {\n          //this.internals.setFormValue(\"on\")\n        }\n      } else {\n        //this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\n    }\n  }\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox', await framework)\n    }\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n    if (slot) {\n      hasSlot = true;\n    }\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-chip_3.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
 
@@ -611,3 +611,5 @@ exports.ifx_chip = Chip;
 exports.ifx_chip_item = ChipItem;
 exports.ifx_pagination = Pagination;
 //# sourceMappingURL=ifx-chip.ifx-chip-item.ifx-pagination.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-chip_3.cjs.entry.js.map

package/dist/cjs/ifx-chip_3.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-chip.ifx-chip-item.ifx-pagination.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n    box-sizing: border-box;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: tokens.$ifxColorBaseWhite;\n    cursor: pointer;  \n    transition: border 100ms ease;\n    font: tokens.$ifxBodyBody04;\n\n    & .icon__wrapper { \n        display: flex;\n    }\n\n    &.outlined, &.filled-dark, &.filled-light { \n        outline: 2px solid transparent;\n        &:focus-visible {\n            outline: 2px solid tokens.$ifxColorOcean500;\n            outline-offset: 2px;\n        }\n        \n        &.chip__wrapper--opened {\n         .wrapper__open-button {\n            transform: rotate(-180deg);\n         }\n        }\n\n        &.chip__wrapper--selected {\n        .wrapper__label {\n            .label__selected-options {\n                font: tokens.$ifxBodyBody04;\n            }\n        }\n      }\n    }\n\n    &.filled-dark, &.filled-light { \n        &.chip__wrapper--selected:not(.read-only) {\n        background-color: tokens.$ifxColorOcean500;\n        color: white;\n         &:hover { \n            background-color: tokens.$ifxColorOcean600;\n         }\n\n         &:hover.disabled { \n            background-color: tokens.$ifxColorOcean500;\n         }\n      }\n    }\n    \n    &.outlined { \n        border: 1px solid tokens.$ifxColorEngineering400;\n        &:hover:not(.read-only) {\n            border-color: tokens.$ifxColorEngineering500;\n            background-color: tokens.$ifxColorEngineering100;\n        }\n\n        &:active:not(.read-only) { \n            border-color: tokens.$ifxColorEngineering500;\n            background-color: tokens.$ifxColorEngineering300;\n        }\n\n        &.chip__wrapper--opened {\n            border: 1px solid tokens.$ifxColorOcean500;\n        }\n\n        &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        border: 1px solid transparent;\n        background-color: white;\n\n        &:focus-visible {\n            outline-offset: 0px;\n        }\n         &:hover:not(.read-only) { \n            outline-color: tokens.$ifxColorOcean600;\n         }\n\n         &.read-only { \n            outline: none;\n            border: 1px solid black;\n         }\n      }\n\n      &.disabled { \n        outline: none;\n        color: tokens.$ifxColorEngineering300;\n        border: 1px solid tokens.$ifxColorEngineering300;\n        &:hover { \n            outline: none;\n            border-color: tokens.$ifxColorEngineering300;\n            background-color: white;\n        }\n      }\n\n      &.read-only { \n        border: 1px solid black;\n        &:focus-visible { \n            outline: 2px solid tokens.$ifxColorOcean500;\n            outline-offset: 2px;\n        }\n      }\n    }\n\n    &.filled-dark { \n        background-color: tokens.$ifxColorEngineering600;\n        color: white;\n\n        &:hover:not(.chip__wrapper--selected, .disabled, .read-only) { \n        background-color: tokens.$ifxColorEngineering500;\n        }\n\n        &:active:not(.chip__wrapper--selected, .disabled, .read-only) { \n            background-color: tokens.$ifxColorEngineering400;\n            color: black;\n        }\n\n      &.disabled { \n        outline: none;\n        color: tokens.$ifxColorEngineering300;\n        &:hover:not(.chip__wrapper--selected) { \n        background-color: tokens.$ifxColorEngineering600;\n        }\n      }\n\n      &.chip__wrapper--selected { \n        &.read-only { \n            border: 1px solid tokens.$ifxColorEngineering400;\n         }\n      }\n\n      &.read-only { \n        border: 1px solid tokens.$ifxColorEngineering400;\n      }\n    }\n\n    &.filled-light { \n        background-color: tokens.$ifxColorEngineering200;\n\n        &:hover:not(.read-only) { \n        background-color: tokens.$ifxColorEngineering300;\n        }\n\n        &:active:not(.read-only) { \n            background-color: tokens.$ifxColorEngineering400;\n        }\n\n      &.disabled { \n        outline: none;\n        color: tokens.$ifxColorEngineering300;\n        &:hover:not(.chip__wrapper--selected) { \n        background-color: tokens.$ifxColorEngineering200;\n        }\n      }\n\n      &.chip__wrapper--selected { \n        &.read-only { \n            border: 1px solid black;\n         }\n      }\n\n      &.read-only { \n        border: 1px solid black;\n      }\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace100;\n        height: tokens.$ifxSize300;\n    }\n\n    &.chip__wrapper--medium {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n        height: tokens.$ifxSize350;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace150;\n        height: tokens.$ifxSize450;\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n    min-width: 222px;\n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() theme: 'outlined' | 'filled-light' | 'filled-dark' = 'outlined';\n  @Prop() readOnly: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() disabled: boolean = false;\n  @Prop() icon: string = \"\";\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChange) {\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: this.size ? this.size : 'medium',\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.chip)) { \n      const framework = detectFramework();\n      trackComponent('ifx-chip', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}\n                  ${this.theme ? this.theme : 'outlined'}\n                  ${this.disabled ? 'disabled' : \"\"}\n                  ${this.readOnly ? 'read-only' : \"\"}`}\n          tabIndex={0}\n          onClick={!this.readOnly && !this.disabled ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.ariaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n          \n          {this.icon && \n          <div class=\"icon__wrapper\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>}\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-indicator variant='number' inverted={this.theme === 'outlined' ? false : true} number={this.selectedOptions.length - 2}></ifx-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevron-down-16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={!this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e) } : undefined}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon='check-16'> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n  flex-wrap: wrap;\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\n.page__button {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & page__button {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & .page__button {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & .page__button {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & .page__button {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n@media (max-width: tokens.$ifxBreakpointM) {\n  .container {\n    gap: tokens.$ifxSpace200;\n    justify-content: left;\n\n    .items__total-wrapper {\n      .pagination {\n        ol {\n          gap: tokens.$ifxSpace150;\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 374px) {\n  .pagination {\n    .ellipsis + .active {\n      margin-left: tokens.$ifxSpace100;\n    }\n\n    .active + .ellipsis {\n      margin-left: tokens.$ifxSpace100;\n    }\n  }\n}\n","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } 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-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxItemsPerPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\n  @Prop() showItemsPerPage: boolean = true;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[] = [];\n  @State() visiblePages: (number | string)[] = [];\n\n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n  @Watch('total')\n  watchTotalHandler() {\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n  @Watch('currentPage')\n  currentPageWatcher(newVal: number) {\n    this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label;\n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1;\n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n    emitItemsPerPage(e) {\n      this.ifxItemsPerPageChange.emit((e as any).detail.label)\n    }\n\n  async componentDidLoad() {\n    if (this.showItemsPerPage) {\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n      if(select) {\n        select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n      }\n    }\n\n    // Add resize listener to update pagination on screen size changes\n    window.addEventListener('resize', this.handleResize);\n\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-pagination', await framework)\n    }\n    this.initPagination();\n  }\n\n  disconnectedCallback() {\n    if (this.showItemsPerPage) {\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n      if (select) {\n        select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n      }\n    }\n\n    // Remove resize listener\n    window.removeEventListener('resize', this.handleResize);\n\n    // Clear any pending resize timeout\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  updateVisiblePages() {\n    // Check if screen is mobile (< 375px)\n    const isMobile = window.innerWidth < 375;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n\n    if (isMobile) {\n      // Mobile logic: maximum 5 elements\n      if (totalPages <= 5) {\n        pages = [...this.numberOfPages];\n      } else {\n        // Always show first page\n        pages.push(1);\n\n        if (current <= 2) {\n          // Show: 1 2 3 … 10 (for pages 1 and 2)\n          pages.push(2, 3, '...', totalPages);\n        } else if (current >= totalPages - 1) {\n          // Show: 1 … 23 24 25 (for last 2 pages only)\n          pages.push('...', totalPages - 2, totalPages - 1, totalPages);\n        } else {\n          // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)\n          pages.push('...', current, '...', totalPages);\n        }\n      }\n    } else {\n      // Desktop logic: maximum 7 elements\n      const buffer = 2;\n\n      if (totalPages <= 7) {\n        pages = [...this.numberOfPages];\n      } else {\n        // Always show first page\n        pages.push(1);\n\n        // Determine the range around current page\n        let start = Math.max(2, current - buffer);\n        let end = Math.min(totalPages - 1, current + buffer);\n\n        // Adjust range to ensure we show enough pages\n        // If we're close to the beginning, extend the end\n        if (current <= 4) {\n          start = 2;\n          end = Math.min(totalPages - 1, 5);\n        }\n        // If we're close to the end, extend the start\n        else if (current >= totalPages - 3) {\n          start = Math.max(2, totalPages - 4);\n          end = totalPages - 1;\n        }\n        // For middle pages, show current +/- 1\n        else {\n          start = current - 1;\n          end = current + 1;\n        }\n\n        // Add ellipsis before the range if there's a gap\n        if (start > 2) {\n          pages.push('...');\n        }\n\n        // Add the range of pages\n        for (let i = start; i <= end; i++) {\n          pages.push(i);\n        }\n\n        // Add ellipsis after the range if there's a gap\n        if (end < totalPages - 1) {\n          pages.push('...');\n        }\n\n        // Always show last page\n        pages.push(totalPages);\n      }\n    }\n\n    this.visiblePages = pages;\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() {\n    const items = typeof this.itemsPerPage === 'string' ?\n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    this.filterOptionsArray();\n\n    const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\n    if (selectedOption) {\n      this.internalItemsPerPage = Number(selectedOption.value);\n    } else if (this.filteredItemsPerPage.length > 0) {\n      this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\n    }\n\n    this.calculateNumberOfPages();\n    this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() {\n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  private handleResize = () => {\n    // Debounce resize events to prevent excessive calls\n    clearTimeout(this.resizeTimeout);\n    this.resizeTimeout = setTimeout(() => {\n      this.updateVisiblePages();\n    }, 100);\n  };\n\n  private resizeTimeout: any;\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n\n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        {this.showItemsPerPage && (\n          <div class=\"items__per-page-wrapper\">\n            <div class=\"items__per-page-label\">Results per Page</div>\n            <div class=\"items__per-page-field\">\n              <ifx-select\n                id='itemsPerPageSelect'\n                placeholder='false'\n                show-search='false'\n                value={undefined}\n                disabled={false}\n                error={false}\n                size=\"s\"\n                options={this.filteredItemsPerPage}\n                placeholder-value=\"Select\"\n              ></ifx-select>\n            </div>\n          </div>\n        )}\n\n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              aria-label='Previous Page'\n              onClick={() => this.changePage(this.internalPage - 1)}\n              variant=\"secondary\"\n            ></ifx-icon-button>\n\n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li\n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <span \n                  class='page__button'\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-current={page === this.internalPage ? \"page\" : undefined}\n                  aria-label={`Page ${page}`}\n                  onClick={() => this.changePage(page)}\n                  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page)}\n                >\n                  {page}\n                </span>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span aria-hidden=\"true\">...</span>\n              </li>\n            ))}\n            </ol>\n\n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              aria-label='Next Page'\n              onClick={() => this.changePage(this.internalPage + 1)}\n              variant=\"secondary\"\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-content-switcher-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 
 const contentSwitcherItemCss = ".ifx-content-switcher-item{all:unset;height:36px;box-sizing:border-box;border-radius:9999px;border:3px solid transparent;padding:7px 20px;font-family:var(--ifx-font-family);font-weight:600;font-size:14px;line-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;background-color:transparent}.ifx-content-switcher-item.selected{color:#0A8276;background-color:#FFFFFF;border:3px solid #0A8276}.ifx-content-switcher-item:hover{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C;cursor:pointer}.ifx-content-switcher-item:active{color:#08665C;background-color:#FFFFFF;border:3px solid #06534B}.ifx-content-switcher-item:focus{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C}";
 
@@ -17,3 +17,5 @@ ContentSwitcherItem.style = contentSwitcherItemCss;
 
 exports.ifx_content_switcher_item = ContentSwitcherItem;
 //# sourceMappingURL=ifx-content-switcher-item.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-content-switcher-item.cjs.entry.js.map

package/dist/cjs/ifx-content-switcher-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-content-switcher-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,ktBAAktB;;MCOpuB,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAYlC;IATC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,2BAA2B,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,EAAA,EAC7EA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;","names":["h","Host"],"sources":["src/components/content-switcher/content-switcher-item.scss?tag=ifx-content-switcher-item&encapsulation=shadow","src/components/content-switcher/content-switcher-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher-item {\n    all: unset;\n\n    height: tokens.$ifxSize450;\n    box-sizing: border-box;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    border: 3px solid transparent; // avoid jumping around\n    padding: 7px tokens.$ifxSize250;\n\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    font-weight: tokens.$ifxFontWeightSemibold;\n    font-size: tokens.$ifxSize175;\n    line-height: 20px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    background-color: transparent;\n\n    &.selected {\n        color: tokens.$ifxColorOcean500;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 3px solid tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n        color: tokens.$ifxColorOcean600;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 3px solid tokens.$ifxColorOcean600;\n        cursor: pointer;\n    }\n\n    &:active {\n        color: tokens.$ifxColorOcean600;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 3px solid tokens.$ifxColorOcean700;\n    }\n\n    &:focus {\n        color: tokens.$ifxColorOcean600;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 3px solid tokens.$ifxColorOcean600;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-content-switcher-item',\n  styleUrl: './content-switcher-item.scss',\n  shadow: true,\n})\nexport class ContentSwitcherItem {\n  @Prop() selected: boolean = false;\n  @Prop() value: string;\n\n  render() {\n    return (\n      <Host>\n        <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-content-switcher.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
 
@@ -173,3 +173,5 @@ ContentSwitcher.style = contentSwitcherCss;
 
 exports.ifx_content_switcher = ContentSwitcher;
 //# sourceMappingURL=ifx-content-switcher.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-content-switcher.cjs.entry.js.map

package/dist/cjs/ifx-content-switcher.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-content-switcher.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host"],"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/cjs/ifx-date-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
 
@@ -116,3 +116,5 @@ DatePicker.style = datePickerCss;
 
 exports.ifx_date_picker = DatePicker;
 //# sourceMappingURL=ifx-date-picker.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-date-picker.cjs.entry.js.map

package/dist/cjs/ifx-date-picker.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-date-picker.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"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.$ifxColorEngineering300;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering300;\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    &:disabled {\n      color: tokens.$ifxColorBaseWhite;\n    }\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.$ifxColorEngineering300;\n    background-color: tokens.$ifxColorEngineering300;\n    cursor: default;\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  &:disabled::-webkit-datetime-edit,\n  &:disabled::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseWhite;\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.$ifxColorEngineering300;\n      color: tokens.$ifxColorBaseWhite;\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/cjs/ifx-download.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 
 const downloadCss = "";
 
@@ -34,3 +34,5 @@ Download.style = downloadCss;
 
 exports.ifx_download = Download;
 //# sourceMappingURL=ifx-download.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-download.cjs.entry.js.map

package/dist/cjs/ifx-download.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-download.entry.cjs.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,EAAE;;MCOT,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAmB,KAAK;AAoCvC;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,GAAG,EAAE,mBAAmB;AACxB,YAAA,IAAI,EAAE;SACP;AAED,QAAA,MAAM,QAAQ,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,MAAM,EAAE;QACjD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;AAEvC,QAAA,MAAM,OAAO,GAAG,CAA4E,yEAAA,EAAA,UAAU,EAAE;AAExG,QAAA,QACEA,OACA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,cAAc,EAAE;gBAClB,KAAK,CAAC,OAAO;qBACV,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE;qBACtB,IAAI,CAAC,IAAI,IAAG;oBACX,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;oBACxC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;AACrC,oBAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;oBACxB,IAAI,CAAC,KAAK,EAAE;AACd,iBAAC,CAAC;AACN,aAAC,EACC,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,EAAA,EAEdA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACC;;;;;;;","names":["h"],"sources":["src/components/download/download.scss?tag=ifx-download&encapsulation=shadow","src/components/download/download.tsx"],"sourcesContent":["","import { Component, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-download',\n  styleUrl: './download.scss',\n  shadow: true\n})\nexport class Download {\n  @Prop() tokens: 'css' | 'scss' = 'css';\n\n  render() {\n    const fileMap = {\n      css: 'css-variables.css',\n      scss: 'scss-variables.scss'\n    };\n\n    const fileName = `infineon-tokens.${this.tokens}`;\n    const sourceFile = fileMap[this.tokens];\n    \n    const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;\n\n    return (\n      <ifx-link \n      onClick={(e) => {\n        e.preventDefault();\n        fetch(fileUrl)\n          .then(res => res.blob())\n          .then(blob => {\n            const link = document.createElement('a');\n            link.href = URL.createObjectURL(blob);\n            link.download = fileName;\n            link.click();\n          });\n      }}\n        href={fileUrl}\n        download={fileName} \n        class=\"download__wrapper\" \n        size=\"m\" \n        variant=\"bold\"\n      >\n        <slot />\n      </ifx-link>\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-dropdown-header.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 
 const dropdownHeaderCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}";
 
@@ -16,3 +16,5 @@ DropdownHeader.style = dropdownHeaderCss;
 
 exports.ifx_dropdown_header = DropdownHeader;
 //# sourceMappingURL=ifx-dropdown-header.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-dropdown-header.cjs.entry.js.map

package/dist/cjs/ifx-dropdown-header.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-dropdown-header.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,6WAA6W;;MCS1X,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH,CACH;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-header {\n  display: flex;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  & span {\n    color: tokens.$ifxColorEngineering500;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    /* 142.857% */\n  }\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true\n})\n\nexport class DropdownHeader {\n  render() {\n    return (\n      <div class='dropdown-header'>\n        <span>\n          <slot />\n        </span>\n      </div>\n    )\n  }\n}"],"version":3}

package/dist/cjs/ifx-dropdown-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.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:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.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}";
 
@@ -36,3 +36,5 @@ DropdownItem.style = dropdownItemCss;
 
 exports.ifx_dropdown_item = DropdownItem;
 //# sourceMappingURL=ifx-dropdown-item.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-dropdown-item.cjs.entry.js.map

package/dist/cjs/ifx-dropdown-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-dropdown-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,qlBAAqlB;;MCQhmB,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AACxB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AA8B5B;AAzBC,IAAA,cAAc,CAAC,KAAkB,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM;;IAG1B,mBAAmB,GAAA;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AACjF,QAAA,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA;AACrF,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE;AACzC,YAAA,IAAI,EAAE;SACA;AAER,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,MAAM,CAAC,QAAQ,GAAG,CAAC;AAEjC,QAAA,QACEA,OAAO,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,MAAM,GAAO,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,EAAC,EACzE,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,EACjEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAMA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAO,CACnB;;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  &:focus{\n    outline: none;\n    box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &:active {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.icon {\n  margin-right: 4px;\n}","import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    const hasHref = this.href !== undefined && this.href !== null && this.href !== '';\n    const common = {\n      class: `dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`,\n      onClick: () => this.handleEventEmission(),\n      role: 'menuitem'\n    } as any;\n\n    if (!hasHref) common.tabIndex = 0;\n\n    return (\n      <a {...common} {...(hasHref ? { href: this.href, target: this.target } : {})}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span><slot /></span>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-dropdown-menu.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 
 const dropdownMenuCss = ":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 4px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";
 
@@ -61,3 +61,5 @@ DropdownMenu.style = dropdownMenuCss;
 
 exports.ifx_dropdown_menu = DropdownMenu;
 //# sourceMappingURL=ifx-dropdown-menu.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-dropdown-menu.cjs.entry.js.map

package/dist/cjs/ifx-dropdown-menu.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-dropdown-menu.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,yeAAye;;MCQpf,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AACvB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AACjB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAI/B,QAAA,IAAa,CAAA,aAAA,GAAiC,EAAE;AAyD1D;AArDC,IAAA,gBAAgB,CAAC,KAAkB,EAAA;AACjC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM;AAChC,QAAA,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC;;AAIvC,IAAA,+BAA+B,CAAC,KAAkB,EAAA;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAG7C,IAAA,mBAAmB,CAAC,WAAmB,EAAA;AACrC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC1E,IAAI,YAAY,EAAE,QAAQ;AAC1B,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE;AAErC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACxC,YAAA,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC;YAC1B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS;AAE7D,YAAA,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE;AAC9C,gBAAA,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;;iBACnC;AACL,gBAAA,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC;;;;IAK7C,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG/B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC;QAC9G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC;AAEnE,QAAA,IAAI,WAAW,IAAI,cAAc,EAAE;AACjC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;;AACrB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;IAIpC,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,EAElCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  position: relative;\n  z-index: 1000;\n}\n\n.dropdown-menu {\n  display: none;\n  visibility: hidden;\n  flex-direction: column;\n  width: 224px;\n  max-height: 289px;\n  min-width: 224px;\n  overflow-y: auto;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 4px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  &.small {\n    max-height: 266px;\n    max-width: 186px;\n    overflow-y: auto;\n  }\n\n  &.hideTopPadding {\n    padding-top: 0px;\n  }\n}\n\n.dropdown-menu.show {\n  display: flex;\n  visibility: visible;\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-menu',\n  styleUrl: 'dropdown-menu.scss',\n  shadow: true\n})\n\nexport class DropdownMenu {\n  @Prop() isOpen: boolean = false;\n  @Prop() size: string = 'l'\n  @State() hideTopPadding: boolean = false;\n  @Element() el;\n\n  @Event() menuSize: EventEmitter;\n  @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n  @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n  @Listen('ifxInput')\n  handleMenuFilter(event: CustomEvent) {\n    const searchValue = event.detail;\n    this.filterDropdownItems(searchValue)\n  }\n\n  @Listen('ifxDropdownItem')\n  handleDropdownItemValueEmission(event: CustomEvent) {\n    this.ifxDropdownMenuItem.emit(event.detail)\n  }\n\n  filterDropdownItems(searchValue: string) {\n    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n    let dropdownItem, txtValue;\n    let query = searchValue.toUpperCase()\n\n    for (let i = 0; i < allItems.length; i++) {\n      dropdownItem = allItems[i];\n      txtValue = dropdownItem.textContent || dropdownItem.innerText;\n\n      if (txtValue.toUpperCase().indexOf(query) > -1) {\n        dropdownItem.setAttribute('hide', false)\n      } else {\n        dropdownItem.setAttribute('hide', true)\n      }\n    }\n  }\n\n  componentWillUpdate() {\n    this.menuSize.emit(this.size)\n  }\n\n  componentWillLoad() {\n    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n    const searchField = this.el.querySelector('ifx-search-field')\n    const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n    if (searchField || dropdownHeader) {\n      this.hideTopPadding = true;\n    } else this.hideTopPadding = false;\n  }\n\n\n  render() {\n    return (\n      <div class={`dropdown-menu \n      ${this.isOpen ? 'show' : ''} \n      ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n      ${this.size === 's' ? 'small' : \"\"}`\n      } >\n        <slot />\n      </div >\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-dropdown-separator.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 
 const dropdownSeparatorCss = ".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";
 
@@ -16,3 +16,5 @@ DropdownSeparator.style = dropdownSeparatorCss;
 
 exports.ifx_dropdown_separator = DropdownSeparator;
 //# sourceMappingURL=ifx-dropdown-separator.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-dropdown-separator.cjs.entry.js.map

package/dist/cjs/ifx-dropdown-separator.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-dropdown-separator.entry.cjs.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,0EAA0E;;MCS1F,iBAAiB,GAAA,MAAA;;;;IAC5B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,CAAO;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-seperator/dropdown-separator.scss?tag=ifx-dropdown-separator&encapsulation=shadow","src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"sourcesContent":["// dropdown-separator.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.dropdown-separator {\n  height: 1px;\n  background-color: tokens.$ifxColorEngineering200;\n  margin: 8px 16px;\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-separator',\n  styleUrl: 'dropdown-separator.scss',\n  shadow: true\n})\n\nexport class DropdownSeparator {\n  render() {\n    return (\n      <div class='dropdown-separator'></div>\n    )\n  }\n}"],"version":3}

package/dist/cjs/ifx-dropdown-trigger-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.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}";
 
@@ -21,3 +21,5 @@ DropdownItem.style = dropdownTriggerButtonCss;
 
 exports.ifx_dropdown_trigger_button = DropdownItem;
 //# sourceMappingURL=ifx-dropdown-trigger-button.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-dropdown-trigger-button.cjs.entry.js.map

package/dist/cjs/ifx-dropdown-trigger-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-dropdown-trigger-button.entry.cjs.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,+KAA+K;;MCUnM,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEvB,QAAA,IAAK,CAAA,KAAA,GAAqC,SAAS;AAEnD,QAAA,IAAI,CAAA,IAAA,GAAc,GAAG;AAErB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAkBnC;IAhBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB,EAAA,EAE/BA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,CAAC,IAAI,CAAC,SAAS;AACd,YAAAA,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,CAAE,CAAA,EAAA,CAAI,CAExE;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n}\n\n.rotate {\n  transition: transform 0.2s ease-in-out;\n  transform: rotate(-180deg);\n  margin-top: 0em;\n}\n\n.icon {\n  margin-top: 0em;\n  transition: transform 0.2s ease-in-out;\n}\n","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger-button',\n  styleUrl: 'dropdown-trigger-button.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() variant: 'primary';\n  @Prop() size: 's' | 'm' = 'm';\n  @Prop() disabled: boolean;\n  @Prop() hideArrow: boolean = false;\n\n  render() {\n    return (\n      <ifx-button\n        variant={this.variant}\n        theme={this.theme}\n        size={this.size}\n        disabled={this.disabled}\n        class=\"dropdown-trigger-button\"\n      >\n        <slot />\n        {!this.hideArrow &&\n          <ifx-icon icon=\"chevron-down-16\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n        }\n      </ifx-button>\n    )\n  }\n}"],"version":3}

package/dist/cjs/ifx-dropdown-trigger.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 
 const dropdownTriggerCss = ":host{display:inline-block;cursor:pointer}";
 
@@ -17,3 +17,5 @@ DropdownItem.style = dropdownTriggerCss;
 
 exports.ifx_dropdown_trigger = DropdownItem;
 //# sourceMappingURL=ifx-dropdown-trigger.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-dropdown-trigger.cjs.entry.js.map

package/dist/cjs/ifx-dropdown-trigger.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-dropdown-trigger.entry.cjs.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,4CAA4C;;MCU1D,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOhC;IALC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n  cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger',\n  styleUrl: 'dropdown-trigger.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  render() {\n    return (\n      <slot />\n    )\n  }\n}"],"version":3}

package/dist/cjs/ifx-dropdown.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
 var popper = require('./popper-Dmp8OTYh.js');
@@ -223,3 +223,5 @@ Dropdown.style = dropdownCss;
 
 exports.ifx_dropdown = Dropdown;
 //# sourceMappingURL=ifx-dropdown.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-dropdown.cjs.entry.js.map

package/dist/cjs/ifx-dropdown.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-dropdown.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","createPopper","h"],"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}","import { 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  @Prop() defaultOpen: boolean = false;\n  @State() internalIsOpen: boolean = false;\n  @Prop() noAppendToBody: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n  @Prop() disabled: boolean;\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n  @Element() el;\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  @Listen('focusin', { target: 'document' })\n  handleFocusOutside(event: FocusEvent) {\n    const target = event.target as HTMLElement;\n    if (\n      this.internalIsOpen &&\n      !this.el.contains(target) &&\n      !this.menu.contains(target)\n    ) {\n      this.closeDropdown();\n    }\n  }\n\n  private handleTriggerClick = () => {\n    if (!this.internalIsOpen) this.openDropdown();\n    else this.closeDropdown();\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    const key = e.key;\n    if (key === 'Tab' && this.internalIsOpen && !e.shiftKey) {\n      e.preventDefault();\n      this.focusFirstItem();\n    }\n  };\n\n  private handleMenuClick = () => {\n  if (!this.noCloseOnMenuClick) this.closeDropdown();\n};\n\n\nprivate getItemFocusables(): HTMLElement[] {\n  if (!this.menu) return [];\n  const hosts = Array.from(this.menu.querySelectorAll('ifx-dropdown-item')) as HTMLElement[];\n  return hosts\n    .filter(h => !(h.getAttribute('hide') === 'true' || h.classList.contains('hide')))\n    .map(h => h.shadowRoot?.querySelector('a') as HTMLElement | null)\n    .filter((el): el is HTMLElement => !!el);\n}\n\nprivate handleMenuKeyDown = (e: KeyboardEvent) => {\n const items = this.getItemFocusables();\n  if (!items.length) return;\n\n  const i = items.indexOf(document.activeElement as HTMLElement);\n\n  switch (e.key) {\n    case 'ArrowDown':\n      e.preventDefault();\n      items[(i + 1) % items.length].focus();\n      break;\n    case 'ArrowUp':\n      e.preventDefault();\n      items[(i - 1 + items.length) % items.length].focus();\n      break;\n    case 'Home':\n      e.preventDefault();\n      items[0].focus();\n      break;\n    case 'End':\n      e.preventDefault();\n      items[items.length - 1].focus();\n      break;\n    case 'Enter':\n    case ' ':\n    case 'Spacebar':\n      e.preventDefault();\n      (document.activeElement as HTMLElement)?.click();\n      break;\n    case 'Escape':\n      e.preventDefault();\n      this.closeDropdown();\n      (this.trigger as HTMLElement)?.focus();\n      break;\n    case 'Tab':\n      if (e.shiftKey && i === 0) {\n        e.preventDefault();\n        this.closeDropdown();\n        (this.trigger as HTMLElement)?.focus();\n      }\n      break;\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  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\nprivate focusFirstItem() {\n  const [first] = this.getItemFocusables();\n  first?.focus();\n}\n\n\n  updateSlotContent() {\n   const newTrigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger') as HTMLElement | null;\n\n    if (newTrigger !== this.trigger) {\n      if (this.trigger) {\n        this.trigger.removeEventListener('click', this.handleTriggerClick);\n        this.trigger.removeEventListener('keydown', this.handleTriggerKeyDown);\n      }\n      this.trigger = newTrigger!;\n      if (this.trigger) {\n        (this.trigger as any).disabled = this.disabled;\n        this.trigger.addEventListener('click', this.handleTriggerClick);\n        this.trigger.addEventListener('keydown', this.handleTriggerKeyDown);\n      }\n    }\n\n  const newMenu = this.el.querySelector('ifx-dropdown-menu') as HTMLElement | null;\n\n  if (!this.noAppendToBody) {\n    if (this.menu && this.menu !== newMenu) {\n      this.menu.removeEventListener('click', this.handleMenuClick);\n      this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\n      this.menu.remove();\n    }\n    this.menu = newMenu!;\n    if (this.menu && !document.body.contains(this.menu)) {\n      document.body.append(this.menu);\n    }\n  } else {\n    this.menu = newMenu!;\n  }\n\n  if (this.menu) {\n    this.menu.removeEventListener('click', this.handleMenuClick);\n    this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\n    this.menu.addEventListener('click', this.handleMenuClick);\n    this.menu.addEventListener('keydown', this.handleMenuKeyDown);\n  }\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\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    \n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n   \n      this.ifxClose.emit();\n    }\n \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      (this.trigger as any).isOpen = true;\n      (this.menu as any).isOpen = true;\n      this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });\n      this.ifxOpen.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-faq.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDktl7Xq.js');
+var index = require('./index-Dc5gCGlQ.js');
 
 const faqCss = ".container{padding-top:10px}";
 
@@ -16,3 +16,5 @@ Faq.style = faqCss;
 
 exports.ifx_faq = Faq;
 //# sourceMappingURL=ifx-faq.entry.cjs.js.map
+
+//# sourceMappingURL=ifx-faq.cjs.entry.js.map