@infineon/infineon-design-system-stencil 30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0 → 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0

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

@@ -1 +1 @@
-{"file":"ifx-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \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;\n  @Prop() value: string;\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\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    if (!inputValue) {\n      this.internals.setFormValue(null);\n      this.ifxDate.emit({day, month, year});\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    this.ifxDate.emit({day, month, year})\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  componentDidLoad() { \n    this.setFireFoxClasses()\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        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type=\"date\"\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.AriaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"version":3}
+{"file":"ifx-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \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;\n  @Prop() value: string;\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\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    if (!inputValue) {\n      this.internals.setFormValue(null);\n      this.ifxDate.emit({day, month, year});\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    this.ifxDate.emit({day, month, year})\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  componentDidLoad() { \n    this.setFireFoxClasses()\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        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type=\"date\"\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.AriaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-12dad3f6.js';
+import { r as registerInstance, h } from './index-dc4139fb.js';
 
 const dropdownHeaderCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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;}";
 const IfxDropdownHeaderStyle0 = dropdownHeaderCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.js';
 
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
 const IfxDropdownItemStyle0 = dropdownItemCss;
@@ -7,6 +7,7 @@ const DropdownItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ifxDropdownItem = createEvent(this, "ifxDropdownItem", 7);
+        this.icon = undefined;
         this.href = "";
         this.target = "_self";
         this.hide = false;

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

@@ -1 +1 @@
-{"file":"ifx-dropdown-item.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,2hBAA2hB,CAAC;AACpjB,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;;QAQU,SAAI,GAAW,EAAE,CAAA;QACjB,WAAM,GAAW,OAAO,CAAA;QACxB,SAAI,GAAY,KAAK,CAAC;QACrB,SAAI,GAAW,GAAG,CAAA;KAwB5B;IAnBC,cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC/C;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;QACzE,QACE,0EAAO,QAAQ,IAAE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KAC9I,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACjE,+DACE,8DAAQ,CACH,CACL,EACJ;KACH;;;;;;;","names":[],"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);\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}","// dropdown-item.tsx\nimport { 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    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-dropdown-item.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,2hBAA2hB,CAAC;AACpjB,8BAAe,eAAe;;MCQjB,YAAY;;;;;oBAEA,EAAE;sBACA,OAAO;oBACR,KAAK;oBACL,GAAG;;IAK3B,cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC/C;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;QACzE,QACE,0EAAO,QAAQ,IAAE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KAC9I,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACjE,+DACE,8DAAQ,CACH,CACL,EACJ;KACH;;;;;;;","names":[],"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);\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}","// dropdown-item.tsx\nimport { 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    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.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 0px;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}";
 const IfxDropdownMenuStyle0 = dropdownMenuCss;

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

@@ -1 +1 @@
-{"file":"ifx-dropdown-menu.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye,CAAC;AAClgB,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;;;QAOU,WAAM,GAAY,KAAK,CAAC;QACxB,SAAI,GAAW,GAAG,CAAA;QACjB,mBAAc,GAAY,KAAK,CAAC;QAIhC,kBAAa,GAAiC,EAAE,CAAC;KAyD3D;IArDC,gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;KACtC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAC5C;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;aACzC;iBAAM;gBACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;aACxC;SACF;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KACpC;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,8DAAQ,CACH,EACP;KACH;;;;;;;","names":[],"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 0px;\n  font-family: var(--ifx-font-family);\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}","// dropdown-menu.tsx\nimport { 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}
+{"file":"ifx-dropdown-menu.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye,CAAC;AAClgB,8BAAe,eAAe;;MCQjB,YAAY;;;;;sBACG,KAAK;oBACR,GAAG;8BACS,KAAK;6BAIe,EAAE;;IAIzD,gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;KACtC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAC5C;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;aACzC;iBAAM;gBACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;aACxC;SACF;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KACpC;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,8DAAQ,CACH,EACP;KACH;;;;;;;","names":[],"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 0px;\n  font-family: var(--ifx-font-family);\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}","// dropdown-menu.tsx\nimport { 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/esm/ifx-dropdown-separator.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-12dad3f6.js';
+import { r as registerInstance, h } from './index-dc4139fb.js';
 
 const dropdownSeparatorCss = ".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";
 const IfxDropdownSeparatorStyle0 = dropdownSeparatorCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-12dad3f6.js';
+import { r as registerInstance, h } from './index-dc4139fb.js';
 
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
 const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;
@@ -8,7 +8,9 @@ const DropdownItem = class {
         registerInstance(this, hostRef);
         this.isOpen = false;
         this.theme = 'default';
+        this.variant = undefined;
         this.size = 'm';
+        this.disabled = undefined;
         this.hideArrow = false;
     }
     render() {

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

@@ -1 +1 @@
-{"file":"ifx-dropdown-trigger-button.entry.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,+KAA+K,CAAC;AACjN,uCAAe,wBAAwB;;MCS1B,YAAY;IANzB;;QAOU,WAAM,GAAY,KAAK,CAAC;QAExB,UAAK,GAAqC,SAAS,CAAC;QAEpD,SAAI,GAAc,GAAG,CAAC;QAEtB,cAAS,GAAY,KAAK,CAAC;KAkBpC;IAhBC,MAAM;QACJ,QACE,mEACE,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,IAE/B,8DAAQ,EACP,CAAC,IAAI,CAAC,SAAS;YACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CAExE,EACd;KACF;;;;;;","names":[],"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-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n        }\n      </ifx-button>\n    )\n  }\n}"],"version":3}
+{"file":"ifx-dropdown-trigger-button.entry.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,+KAA+K,CAAC;AACjN,uCAAe,wBAAwB;;MCS1B,YAAY;;;sBACG,KAAK;qBAEmB,SAAS;;oBAEjC,GAAG;;yBAEA,KAAK;;IAElC,MAAM;QACJ,QACE,mEACE,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,IAE/B,8DAAQ,EACP,CAAC,IAAI,CAAC,SAAS;YACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CAExE,EACd;KACF;;;;;;","names":[],"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-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n        }\n      </ifx-button>\n    )\n  }\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-12dad3f6.js';
+import { r as registerInstance, h } from './index-dc4139fb.js';
 
 const dropdownTriggerCss = ":host{display:inline-block;cursor:pointer}";
 const IfxDropdownTriggerStyle0 = dropdownTriggerCss;

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

@@ -1 +1 @@
-{"file":"ifx-dropdown-trigger.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AACxE,iCAAe,kBAAkB;;MCSpB,YAAY;IANzB;;QAOU,WAAM,GAAY,KAAK,CAAC;KAOjC;IALC,MAAM;QACJ,QACE,8DAAQ,EACT;KACF;;;;;;","names":[],"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}
+{"file":"ifx-dropdown-trigger.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AACxE,iCAAe,kBAAkB;;MCSpB,YAAY;;;sBACG,KAAK;;IAE/B,MAAM;QACJ,QACE,8DAAQ,EACT;KACF;;;;;;","names":[],"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/esm/ifx-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.js';
 import { c as createPopper } from './popper-1604923e.js';
 
 const dropdownCss = ":host{display:inline-block}";
@@ -11,14 +11,14 @@ const Dropdown = class {
         this.ifxClose = createEvent(this, "ifxClose", 7);
         this.ifxDropdown = createEvent(this, "ifxDropdown", 7);
         this.placement = 'bottom-start';
-        // isOpen prop
         this.defaultOpen = false;
-        // internal state for isOpen prop
         this.internalIsOpen = false;
-        // isOpen prop
         this.noAppendToBody = false;
+        this.disabled = undefined;
         this.noCloseOnOutsideClick = false;
         this.noCloseOnMenuClick = false;
+        this.trigger = undefined;
+        this.menu = undefined;
     }
     componentWillLoad() {
         //maybe not needed

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

@@ -1 +1 @@
-{"file":"ifx-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n\n  // isOpen prop\n  @Prop() defaultOpen: boolean = false;\n  // internal state for isOpen prop\n  @State() internalIsOpen: boolean = false;\n\n  // isOpen prop\n  @Prop() noAppendToBody: boolean = false;\n\n  // Custom events for opening and closing dropdown\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n\n  // determine if dropdown is disabled\n  @Prop() disabled: boolean;\n\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n\n  // Reference to host element\n  @Element() el;\n  // Dropdown trigger and menu\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n  }\n\n\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\n\n\n  // handling assignment of trigger and menu\n  updateSlotContent() {\n    // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n    }\n    // Remove menu if exists from body\n    if (!this.noAppendToBody) {\n      if (this.menu) {\n        this.menu.remove();\n      }\n      // Get new menu and add to body\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n      // event handler for closing dropdown on menu click\n      document.body.append(this.menu);\n    } else {\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n    }\n    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n    this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  triggerClickHandler() {\n    if (!this.internalIsOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n    // Remove menu if exists\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n      // Emit close event\n      this.ifxClose.emit();\n    }\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = true;\n      (this.menu as unknown as IOpenable).isOpen = true;\n      // Create popper instance for positioning\n      this.popperInstance = createPopper(\n        this.el,\n        this.menu,\n        { placement: this.placement });\n\n      this.ifxOpen.emit();\n    }\n  }\n\n  //emitted by and listening to it from the dropdown menu right now\n  // @Listen('ifxDropdownMenu')\n  // handleDropdownMenuEvents(event: CustomEvent) {\n  //   this.ifxDropdown.emit(event.detail)\n  //   console.log('Selected item received in higher-level parent:');\n  // }\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    // Close dropdown if outside click\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}"],"version":3}
+{"file":"ifx-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n\n  // isOpen prop\n  @Prop() defaultOpen: boolean = false;\n  // internal state for isOpen prop\n  @State() internalIsOpen: boolean = false;\n\n  // isOpen prop\n  @Prop() noAppendToBody: boolean = false;\n\n  // Custom events for opening and closing dropdown\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n\n  // determine if dropdown is disabled\n  @Prop() disabled: boolean;\n\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n\n  // Reference to host element\n  @Element() el;\n  // Dropdown trigger and menu\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n  }\n\n\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\n\n\n  // handling assignment of trigger and menu\n  updateSlotContent() {\n    // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n    }\n    // Remove menu if exists from body\n    if (!this.noAppendToBody) {\n      if (this.menu) {\n        this.menu.remove();\n      }\n      // Get new menu and add to body\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n      // event handler for closing dropdown on menu click\n      document.body.append(this.menu);\n    } else {\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n    }\n    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n    this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  triggerClickHandler() {\n    if (!this.internalIsOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n    // Remove menu if exists\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n      // Emit close event\n      this.ifxClose.emit();\n    }\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = true;\n      (this.menu as unknown as IOpenable).isOpen = true;\n      // Create popper instance for positioning\n      this.popperInstance = createPopper(\n        this.el,\n        this.menu,\n        { placement: this.placement });\n\n      this.ifxOpen.emit();\n    }\n  }\n\n  //emitted by and listening to it from the dropdown menu right now\n  // @Listen('ifxDropdownMenu')\n  // handleDropdownMenuEvents(event: CustomEvent) {\n  //   this.ifxDropdown.emit(event.detail)\n  //   console.log('Selected item received in higher-level parent:');\n  // }\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    // Close dropdown if outside click\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-12dad3f6.js';
+import { r as registerInstance, h } from './index-dc4139fb.js';
 
 const faqCss = ".container{padding-top:10px}";
 const IfxFaqStyle0 = faqCss;
@@ -8,7 +8,7 @@ const Faq = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '77991eaf504d4e891e9e6bbadb7ed25d3c6fcf44', class: 'container' }, h("ifx-accordion", { key: '86a953a5ebd22ec3be713b7cf50f879fca17b5a2' }, h("ifx-accordion-item", { key: 'f51481687b8b49004292a1dde4a77a666cfb2f19', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '69dd8d8a4c446656c23ef1c4debb2d5b9d77a7ff', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '82491083166f9d6acdac25cd31f4138e26884118', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'c1e4c7b1958d87089ceeb7c4cd89ab0888f6392a', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '9ebe0e3f8e16cf867086c07aa044def5f4d7d6de', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: '738b7cb857432407faa6c5f30937ab61387f68de', class: 'container' }, h("ifx-accordion", { key: 'e1ae6351d53e781a3b41ac49e16cc2093b0b6807' }, h("ifx-accordion-item", { key: '41284177166adc4b2840f9f9c77c0a45f7199f97', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '3e268136bed4d1b8ab81df1292316109a91981ce', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: 'ae3f36e903b49a95399672c841caa346f710adf4', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '74a86da45e80299dbb2c71ae24ed38786a9bbfd9', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '9ada819b3bd9aa0dac03428847ac7004139078b1', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
 };
 Faq.style = IfxFaqStyle0;

package/dist/esm/ifx-filter-accordion.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.js';
 
 // utils.ts
 function getInitiallySelectedItems(el) {
@@ -21,10 +21,6 @@ const FilterAccordion = class {
         registerInstance(this, hostRef);
         this.ifxFilterAccordionChange = createEvent(this, "ifxFilterAccordionChange", 7);
         this.initialized = false;
-        this.expanded = false;
-        this.count = 0;
-        this.totalItems = 0;
-        this.filterGroupName = "";
         this.handleCheckedChange = (event) => {
             const selectedItems = event.detail.selectedItems;
             this.count = selectedItems.length;
@@ -34,6 +30,11 @@ const FilterAccordion = class {
             event.stopPropagation();
             this.expanded = !this.expanded;
         };
+        this.expanded = false;
+        this.maxVisibleItems = undefined;
+        this.count = 0;
+        this.totalItems = 0;
+        this.filterGroupName = "";
     }
     componentWillLoad() {
         this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);
@@ -49,8 +50,8 @@ const FilterAccordion = class {
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (h("div", { key: 'b5be6a4c8e2b8406e20b4139461d75d1acc5e88c', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '88ce1afb0ab07d2b3b1351d698632d24521f6870', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '2c850d5b01d985473ba69ca347fbfcfa076670b5', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'b50240640314ca9d971f1db017d8f2bf4fae5cc1', class: "text" }, h("span", { key: '12a6ef3c45f33540669af8dc60f2d8c104e07953' }, this.filterGroupName), h("ifx-number-indicator", { key: '049ecf530b429920f6f977e240de3913fbd0c013' }, this.count)), h("ifx-icon", { key: 'fee323359acf051fb4bd0040c0eb1bea7a9696fe', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'f7b60e6232b404bc5f4345dd9db80e513c4a6dcd', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: 'f802a7ec2ff47ecf22b3f69ec5b4adbcdb599522', class: "filter-accordion-container" }, h("slot", { key: '5877962924effa0e52163d9ec5a2d436ac8a3ac7', name: "list" }))));
+        return (h("div", { key: 'aa3625120584b17c8c60dfa60d652064e3730302', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'd58e8752ab6427e0f7c3cffa6111b8084f06f3f7', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'fabff11cffb12322724123a85bb8a9fcb5d722e6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '608f87f282eae985bfab164fa3285722f0bb7003', class: "text" }, h("span", { key: '53d4b29a76a9f2e560a5e90ac5ecaeb2bbce2e41' }, this.filterGroupName), h("ifx-number-indicator", { key: '8e05960cf2af1d6fcaadcd9dea7418b356336230' }, this.count)), h("ifx-icon", { key: '0586c6fa00fdf20ba8e9fa33c7125762f430a240', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '6c22169af8545f711c91b13bdd138ce9121fab1c', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: '43b2be13c353da05d9101e3dde1fc1ed7911bd7d', class: "filter-accordion-container" }, h("slot", { key: 'e738f6ed3f867f155b284e4987e526eb639ec6a7', name: "list" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ifx-filter-accordion.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-filter-accordion.entry.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\nexport function getInitiallySelectedItems(el: HTMLElement) {\n   return Array.from(el.querySelectorAll('ifx-list-entry'))\n\n    .filter(entry => entry.getAttribute('value') === 'true')\n    .map(entry => {\n      return {\n        label: entry.getAttribute('label'),\n        value: entry.getAttribute('value'),\n        type: entry.getAttribute('type')\n      };\n    });\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  align-self: stretch;\n  cursor: pointer;\n  border-left: 3px solid transparent;\n}\n\n.text-and-icon {\n  display: flex;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\n  align-items: center;\n  gap: tokens.$ifxSpace200;\n  flex: 1 0 0;\n}\n\n.header.expanded {\n  border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n.text {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  color: tokens.$ifxColorBaseBlack;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px;\n}\n\n.hidden {\n  display: none;\n}\n\n.accordion {\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n.filter-accordion-container {\n  display: flex;\n  padding: 8px 16px 16px 20px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n  align-self: stretch;\n  border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n::slotted(ifx-filter-entry:nth-child(n+7)) {\n  display: none;\n}\n\n.link {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\n  display: block;\n}\n\n.show-more .show-more-link {\n  display: none;\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { getInitiallySelectedItems } from '../utils';\n\n@Component({\n  tag: 'ifx-filter-accordion',\n  styleUrl: 'filter-accordion.scss',\n  shadow: true,\n})\nexport class FilterAccordion {\n  private initialized = false;\n  @Element() private el: HTMLElement;\n  @State() expanded: boolean = false;\n  @Prop() maxVisibleItems: number;\n  @State() count: number = 0;\n  @State() totalItems = 0;\n\n  @Prop() filterGroupName = \"\";\n\n  @Event() ifxFilterAccordionChange: EventEmitter;\n\n  componentWillLoad() {\n    this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\n\n  }\n\ncomponentDidLoad() {\n  if (!this.initialized) {\n    const selectedItems = getInitiallySelectedItems(this.el);\n    this.count = selectedItems.length;\n    this.initialized = true; // Prevent further execution in future calls\n  }\n}\n\n\nhandleCheckedChange = (event: CustomEvent) => {\n    const selectedItems = event.detail.selectedItems;\n    this.count = selectedItems.length;\n    this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\n  }\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\n  }\n\n  toggleAccordion = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.expanded = !this.expanded;\n  }\n\n  render() {\n    return (\n      <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\n        <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\n          <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\n            <div class=\"text\">\n              <span>{this.filterGroupName}</span>\n              <ifx-number-indicator>{this.count}</ifx-number-indicator>\n            </div>\n            <ifx-icon\n              class={this.expanded ? '' : 'hidden'}\n              icon=\"minus-16\"\n              onClick={this.toggleAccordion}\n            ></ifx-icon>\n            <ifx-icon\n              class={this.expanded ? 'hidden' : ''}\n              icon=\"plus-16\"\n              onClick={this.toggleAccordion}\n            ></ifx-icon>\n          </div>\n        </div>\n        {this.expanded &&\n          <div class=\"filter-accordion-container\">\n            <slot name=\"list\"></slot>\n          </div>\n        }\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-filter-accordion.entry.js","mappings":";;AAAA;SACgB,yBAAyB,CAAC,EAAe;IACtD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;SAEtD,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,MAAM,CAAC;SACvD,GAAG,CAAC,KAAK;QACR,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;SACjC,CAAC;KACH,CAAC,CAAC;AACP;;ACZA,MAAM,kBAAkB,GAAG,s0BAAs0B,CAAC;AACl2B,iCAAe,kBAAkB;;MCOpB,eAAe;;;;QAClB,gBAAW,GAAG,KAAK,CAAC;QAyB9B,wBAAmB,GAAG,CAAC,KAAkB;YACrC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;YACjD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;SAC9F,CAAA;QAMD,oBAAe,GAAG,CAAC,KAAiB;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAChC,CAAA;wBApC4B,KAAK;;qBAET,CAAC;0BACJ,CAAC;+BAEG,EAAE;;IAI5B,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAErE;IAEH,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,aAAa,GAAG,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACzD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;KACF;IASC,mBAAmB;QACjB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACxE;IAOD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACxD,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACpF,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC5D,4DAAK,KAAK,EAAC,MAAM,IACf,+DAAO,IAAI,CAAC,eAAe,CAAQ,EACnC,+EAAuB,IAAI,CAAC,KAAK,CAAwB,CACrD,EACN,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,QAAQ,EACpC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,EACZ,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EACpC,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,CACR,CACF,EACL,IAAI,CAAC,QAAQ;YACZ,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CAEJ,EACN;KACH;;;;;;;","names":[],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\nexport function getInitiallySelectedItems(el: HTMLElement) {\n   return Array.from(el.querySelectorAll('ifx-list-entry'))\n\n    .filter(entry => entry.getAttribute('value') === 'true')\n    .map(entry => {\n      return {\n        label: entry.getAttribute('label'),\n        value: entry.getAttribute('value'),\n        type: entry.getAttribute('type')\n      };\n    });\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  align-self: stretch;\n  cursor: pointer;\n  border-left: 3px solid transparent;\n}\n\n.text-and-icon {\n  display: flex;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\n  align-items: center;\n  gap: tokens.$ifxSpace200;\n  flex: 1 0 0;\n}\n\n.header.expanded {\n  border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n.text {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  color: tokens.$ifxColorBaseBlack;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px;\n}\n\n.hidden {\n  display: none;\n}\n\n.accordion {\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n.filter-accordion-container {\n  display: flex;\n  padding: 8px 16px 16px 20px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n  align-self: stretch;\n  border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n::slotted(ifx-filter-entry:nth-child(n+7)) {\n  display: none;\n}\n\n.link {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\n  display: block;\n}\n\n.show-more .show-more-link {\n  display: none;\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { getInitiallySelectedItems } from '../utils';\n\n@Component({\n  tag: 'ifx-filter-accordion',\n  styleUrl: 'filter-accordion.scss',\n  shadow: true,\n})\nexport class FilterAccordion {\n  private initialized = false;\n  @Element() private el: HTMLElement;\n  @State() expanded: boolean = false;\n  @Prop() maxVisibleItems: number;\n  @State() count: number = 0;\n  @State() totalItems = 0;\n\n  @Prop() filterGroupName = \"\";\n\n  @Event() ifxFilterAccordionChange: EventEmitter;\n\n  componentWillLoad() {\n    this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\n\n  }\n\ncomponentDidLoad() {\n  if (!this.initialized) {\n    const selectedItems = getInitiallySelectedItems(this.el);\n    this.count = selectedItems.length;\n    this.initialized = true; // Prevent further execution in future calls\n  }\n}\n\n\nhandleCheckedChange = (event: CustomEvent) => {\n    const selectedItems = event.detail.selectedItems;\n    this.count = selectedItems.length;\n    this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\n  }\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\n  }\n\n  toggleAccordion = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.expanded = !this.expanded;\n  }\n\n  render() {\n    return (\n      <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\n        <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\n          <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\n            <div class=\"text\">\n              <span>{this.filterGroupName}</span>\n              <ifx-number-indicator>{this.count}</ifx-number-indicator>\n            </div>\n            <ifx-icon\n              class={this.expanded ? '' : 'hidden'}\n              icon=\"minus-16\"\n              onClick={this.toggleAccordion}\n            ></ifx-icon>\n            <ifx-icon\n              class={this.expanded ? 'hidden' : ''}\n              icon=\"plus-16\"\n              onClick={this.toggleAccordion}\n            ></ifx-icon>\n          </div>\n        </div>\n        {this.expanded &&\n          <div class=\"filter-accordion-container\">\n            <slot name=\"list\"></slot>\n          </div>\n        }\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/esm/ifx-filter-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-12dad3f6.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-dc4139fb.js';
 
 const filterBarCss = ":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";
 const IfxFilterBarStyle0 = filterBarCss;
@@ -7,10 +7,6 @@ const FilterBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ifxTopbarFilterChange = createEvent(this, "ifxTopbarFilterChange", 7);
-        this.selectedOptions = [];
-        this.showAllFilters = false;
-        this.maxShownFilters = 4; // Default to 4, can be overridden by parent component
-        this.showMoreFiltersButton = true;
         this.handleMoreFiltersClick = () => {
             this.showAllFilters = true;
             this.updateVisibleSlots(); // Recalculate visible slots based on the new state
@@ -67,6 +63,11 @@ const FilterBar = class {
             this.selectedOptions = newSelectedOptions;
             this.ifxTopbarFilterChange.emit(this.selectedOptions);
         };
+        this.selectedOptions = [];
+        this.showAllFilters = false;
+        this.maxShownFilters = 4;
+        this.visibleSlots = undefined;
+        this.showMoreFiltersButton = true;
     }
     /* If the component is ever removed and then reattached to the DOM,
   connectedCallback ensures that the event listeners are properly set up again */
@@ -93,7 +94,7 @@ const FilterBar = class {
         // Calculate slotsToShow safely
         const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
         const slots = Array.from({ length: slotsToShow }, (_, i) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
-        return (h(Host, { key: 'd5aad85edc16369a3487a18f3e3f24a5b914e820' }, h("div", { key: '7f49a493bd5bafec1286794e89ae67adea9e1967', class: "search-container" }, h("slot", { key: '9d7ab3a3294ac64f7cc47ae33b1839871d06df94', name: "filter-search" }), " "), h("div", { key: '9bf93a1030392d67940228df88b11b52685b757f', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'fc4c6c9e15cf96fc1c129638688fdf2a27f91dc7', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '8f26ef634ef3e27d893e1998167f07a4315cb59a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '23cece990fc63afda2e9864887865467bec55e6f', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: '35a34ca34dd85212aed13e7b39aa8dc9aedfea23' }, h("div", { key: '2111e92aa836710a87dc3ac6d9cbb3540e99aee5', class: "search-container" }, h("slot", { key: 'b76a2f2c6c03ba37409a981ed86c629d9fade984', name: "filter-search" }), " "), h("div", { key: 'e279a2f70040fd54e91b679a00ac29c13e63fbab', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '569dc71e0b56cf291b203563e352f653c12c54a5', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '15595408192d1f6db0021e2f5c01cf28a2aa38c2', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: 'f3795573912575cd8139f170b577ffb6aca518ca', icon: "filter-16" }), "More filters"))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ifx-filter-bar.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-filter-bar.entry.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss */\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.search-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-start;\n  margin-bottom: tokens.$ifxSpace200;\n}\n\n.components-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-end;\n  align-content:flex-end;\n  flex-wrap: wrap;\n  gap: tokens.$ifxSpace200;\n}\n\n.filter-slot-wrapper {\n    flex-grow: 1;\n    flex-basis: 100%; \n    max-width: 100%; \n  }\n\n@media (max-width: 1024px) { /* Adjust based on your breakpoints for mid/small screens */\n    .more-filters-wrapper {\n        order: 3; /* Keeps the button at the end/new row */\n        width: 100%; /* Takes full width to allow centering */\n        display: flex; /* Enables flexbox properties */\n        justify-content: center; /* Centers the button horizontally */\n        padding-top: tokens.$ifxSpace200; /* Adds space above the button, adjust as needed */\n      }\n  }\n\n\n  @media (min-width: 720px) and (max-width: 1024px) {\n    .filter-slot-wrapper {\n        flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\n        max-width: calc((100% - tokens.$ifxSpace200) / 2);\n      }\n    \n\n}\n\n  @media (min-width: 1025px) {\n    .filter-slot-wrapper {\n        flex-basis: auto; \n        max-width: 200px; \n      }\n\n    ::slotted([slot=\"filter-search\"]) {\n        max-width: 828px;\n      }\n  }\n  \n  ::slotted([slot=\"filter-search\"]) {\n    flex-grow: 1;\n    flex-basis: 100%;\n    width: 100%; \n  }","// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-bar',\n  styleUrl: 'filter-bar.scss',\n  shadow: true\n})\nexport class FilterBar {\n  @Element() el: HTMLElement;\n  @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n  @Event() ifxTopbarFilterChange: EventEmitter;\n  @State() showAllFilters: boolean = false;\n  @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n  @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n  /* If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again */\n  connectedCallback() {\n    this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  \n  componentDidLoad() {\n    this.updateVisibleSlots();\n  }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n   this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n  handleMoreFiltersClick = () => {\n    this.showAllFilters = true;\n    this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n  }\n\n  handleResetEvent = () => {\n    const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n    if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n      const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n  \n    filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n      const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n      const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n      if (searchField.length > 0) {\n        searchField.forEach((searchFieldElement: any) => {\n          searchFieldElement.value = '';\n        });\n      }\n    });\n  }\n\n    this.selectedOptions = [];\n\n    // Emit the change to inform any parent components that the filters have been reset\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n\n  handleSearchChange = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleFilterSelect = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleTopbarFilterChange = (event: CustomEvent) => {\n    const newSelectedOptions = [...this.selectedOptions];\n\n    if (event.type === 'ifxFilterSearchChange') {\n      const { filterName, filterValue } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter is found, update its value\n        newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n      }\n    } else if (event.type === 'ifxFilterSelect') {\n      const { filterName, filterValues, type } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n        newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n      }\n    }\n\n    this.selectedOptions = newSelectedOptions;\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n  render() {\n    const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n    const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n     // Calculate slotsToShow safely\n    const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n    const slots = Array.from({ length: slotsToShow }, (_, i) => (\n      <div class=\"filter-slot-wrapper\">\n        <slot name={`filter-component-${i + 1}`}></slot>\n      </div>\n    ));\n\n    return (\n      <Host>\n        <div class=\"search-container\">\n          <slot name=\"filter-search\"></slot> {/* Directly place the search slot here */}\n        </div>\n        <div class=\"components-container\">\n          {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n          {this.showMoreFiltersButton && !this.showAllFilters && (\n            <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n              <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n                <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n              </ifx-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-filter-bar.entry.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss */\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.search-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-start;\n  margin-bottom: tokens.$ifxSpace200;\n}\n\n.components-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-end;\n  align-content:flex-end;\n  flex-wrap: wrap;\n  gap: tokens.$ifxSpace200;\n}\n\n.filter-slot-wrapper {\n    flex-grow: 1;\n    flex-basis: 100%; \n    max-width: 100%; \n  }\n\n@media (max-width: 1024px) { /* Adjust based on your breakpoints for mid/small screens */\n    .more-filters-wrapper {\n        order: 3; /* Keeps the button at the end/new row */\n        width: 100%; /* Takes full width to allow centering */\n        display: flex; /* Enables flexbox properties */\n        justify-content: center; /* Centers the button horizontally */\n        padding-top: tokens.$ifxSpace200; /* Adds space above the button, adjust as needed */\n      }\n  }\n\n\n  @media (min-width: 720px) and (max-width: 1024px) {\n    .filter-slot-wrapper {\n        flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\n        max-width: calc((100% - tokens.$ifxSpace200) / 2);\n      }\n    \n\n}\n\n  @media (min-width: 1025px) {\n    .filter-slot-wrapper {\n        flex-basis: auto; \n        max-width: 200px; \n      }\n\n    ::slotted([slot=\"filter-search\"]) {\n        max-width: 828px;\n      }\n  }\n  \n  ::slotted([slot=\"filter-search\"]) {\n    flex-grow: 1;\n    flex-basis: 100%;\n    width: 100%; \n  }","// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-bar',\n  styleUrl: 'filter-bar.scss',\n  shadow: true\n})\nexport class FilterBar {\n  @Element() el: HTMLElement;\n  @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n  @Event() ifxTopbarFilterChange: EventEmitter;\n  @State() showAllFilters: boolean = false;\n  @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n  @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n  /* If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again */\n  connectedCallback() {\n    this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  \n  componentDidLoad() {\n    this.updateVisibleSlots();\n  }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n   this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n  handleMoreFiltersClick = () => {\n    this.showAllFilters = true;\n    this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n  }\n\n  handleResetEvent = () => {\n    const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n    if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n      const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n  \n    filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n      const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n      const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n      if (searchField.length > 0) {\n        searchField.forEach((searchFieldElement: any) => {\n          searchFieldElement.value = '';\n        });\n      }\n    });\n  }\n\n    this.selectedOptions = [];\n\n    // Emit the change to inform any parent components that the filters have been reset\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n\n  handleSearchChange = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleFilterSelect = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleTopbarFilterChange = (event: CustomEvent) => {\n    const newSelectedOptions = [...this.selectedOptions];\n\n    if (event.type === 'ifxFilterSearchChange') {\n      const { filterName, filterValue } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter is found, update its value\n        newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n      }\n    } else if (event.type === 'ifxFilterSelect') {\n      const { filterName, filterValues, type } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n        newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n      }\n    }\n\n    this.selectedOptions = newSelectedOptions;\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n  render() {\n    const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n    const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n     // Calculate slotsToShow safely\n    const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n    const slots = Array.from({ length: slotsToShow }, (_, i) => (\n      <div class=\"filter-slot-wrapper\">\n        <slot name={`filter-component-${i + 1}`}></slot>\n      </div>\n    ));\n\n    return (\n      <Host>\n        <div class=\"search-container\">\n          <slot name=\"filter-search\"></slot> {/* Directly place the search slot here */}\n        </div>\n        <div class=\"components-container\">\n          {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n          {this.showMoreFiltersButton && !this.showAllFilters && (\n            <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n              <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n                <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n              </ifx-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/ifx-filter-search.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-12dad3f6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.js';
 
 const filterSearchCss = ".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}";
 const IfxFilterSearchStyle0 = filterSearchCss;
@@ -7,9 +7,13 @@ const FilterSearch = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ifxFilterSearchChange = createEvent(this, "ifxFilterSearchChange", 7);
+        this.filterName = undefined;
         this.disabled = false;
+        this.filterValue = undefined;
+        this.filterKey = undefined;
         this.showDeleteIcon = false;
-        this.filterOrientation = 'sidebar'; //topbar
+        this.filterOrientation = 'sidebar';
+        this.placeholder = undefined;
     }
     valueChanged(newValue) {
         this.host.setAttribute('value', newValue.toString());
@@ -29,7 +33,7 @@ const FilterSearch = class {
         this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
     }
     render() {
-        return (h("div", { key: '7b5ee1b95e95e19d2fc959c2a9ed59fa1d90a4e6', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'c7dfdabe9e9eb6dcea53361df02a2a5e4325f43f', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '5a396959e4ab983a06796203a3efbcc608f1a16c', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: 'f8bea93373642731922b3610ef84f2e935f63584', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'ae500d8aa6c48584a2382df67be6bfbd92f98558', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '0c472e57c19c91b1d08eb6d32285a95298e5d4dc', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-filter-search.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-filter-search.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wdAAwd,CAAC;AACjf,8BAAe,eAAe;;MCMjB,YAAY;IALzB;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAGzB,mBAAc,GAAY,KAAK,CAAC;QACjC,sBAAiB,GAAW,SAAS,CAAC;KAwC/C;IAlCC,YAAY,CAAC,QAAiB;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;KACtD;IAGD,wBAAwB,CAAC,KAAkB;;QAEzC,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,kCAAkC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;QACpH,IAAI,cAAc,IAAI,cAAc,KAAK,IAAI,CAAC,IAAI,EAAE;YAClD,MAAM,IAAI,KAAK,CAAC,kCAAkC,IAAI,CAAC,UAAU,mBAAmB,CAAC,CAAC;SACvF;;;;;QAOD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,KAAK,EAAE,CAAC;QAC9C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;KAC5H;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,GACZ,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,+BAA+B,GAAG,8BACzE,EAAE,IACF,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAO,EAChD,yEAAkB,WAAW,EAAE,IAAI,CAAC,WAAW,sBAAoB,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GACrH,CACb,EACN;KACH;;;;;;;;;;","names":[],"sources":["src/components/table-advanced-version/filter-type-group/filter-search/filter-search.scss?tag=ifx-filter-search&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-search/filter-search.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n\n.sidebar-filter-search-wrapper {\n  display: flex;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace200 tokens.$ifxSpace200;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  gap: tokens.$ifxSpace50;\n  font-family: var(--ifx-font-family);\n  background: tokens.$ifxColorEngineering200;\n}\n\n.topbar-filter-search-wrapper {\n  display:flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  gap: tokens.$ifxSpace50;\n  font-family: var(--ifx-font-family);\n}\n\n.topbar-filter-search-wrapper ifx-search-field {\n  width: 100%; /* Ensure ifx-search-field takes up full width */\n}\n\n.filter-name {\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightM;\n  font-weight: 600;\n}","import { Component, h, Listen, Watch, Element, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-search',\n  styleUrl: 'filter-search.scss',\n  shadow: true,\n})\nexport class FilterSearch {\n  @Element() host: HTMLElement;\n  @Prop() filterName: string;\n  @Prop() disabled: boolean = false;\n  @Prop({ mutable: true }) filterValue: string;\n  @Prop() filterKey: string;\n  @State() showDeleteIcon: boolean = false;\n  @Prop() filterOrientation: string = 'sidebar'; //topbar\n  @Prop() placeholder: string;\n\n  @Event() ifxFilterSearchChange: EventEmitter;\n\n  @Watch('value')\n  valueChanged(newValue: boolean) {\n    this.host.setAttribute('value', newValue.toString());\n  }\n\n  @Listen('ifxInput')\n  handleFilterSearchChange(event: CustomEvent) {\n    // Check if a search filter with the same filterName already exists\n    const existingFilter = this.host.parentElement.querySelector(`ifx-filter-search[filter-name=\"${this.filterName}\"]`);\n    if (existingFilter && existingFilter !== this.host) {\n      throw new Error(`A search filter with the name '${this.filterName}' already exists.`);\n    }\n\n    // // Check if the filterName is 'search' and the filter is not the search component\n    // if (this.filterName === 'search' && this.filterKey !== 'text') {\n    //   throw new Error(\"The filter name 'search' is reserved for the search component.\");\n    // }\n\n    this.filterValue = event.detail;\n    this.showDeleteIcon = this.filterValue !== \"\";\n    this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties\n  }\n\n\n  render() {\n    return (\n      <div class={`${\n      this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'\n      }`}>\n      <div class=\"filter-name\">{this.filterName}</div>\n      <ifx-search-field placeholder={this.placeholder} show-delete-icon={this.showDeleteIcon} disabled={this.disabled} value={this.filterValue}>\n      </ifx-search-field>\n      </div>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"ifx-filter-search.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wdAAwd,CAAC;AACjf,8BAAe,eAAe;;MCMjB,YAAY;;;;;wBAGK,KAAK;;;8BAGE,KAAK;iCACJ,SAAS;;;IAM7C,YAAY,CAAC,QAAiB;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;KACtD;IAGD,wBAAwB,CAAC,KAAkB;;QAEzC,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,kCAAkC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;QACpH,IAAI,cAAc,IAAI,cAAc,KAAK,IAAI,CAAC,IAAI,EAAE;YAClD,MAAM,IAAI,KAAK,CAAC,kCAAkC,IAAI,CAAC,UAAU,mBAAmB,CAAC,CAAC;SACvF;;;;;QAOD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,KAAK,EAAE,CAAC;QAC9C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;KAC5H;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,GACZ,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,+BAA+B,GAAG,8BACzE,EAAE,IACF,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAO,EAChD,yEAAkB,WAAW,EAAE,IAAI,CAAC,WAAW,sBAAoB,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,GACrH,CACb,EACN;KACH;;;;;;;;;;","names":[],"sources":["src/components/table-advanced-version/filter-type-group/filter-search/filter-search.scss?tag=ifx-filter-search&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-search/filter-search.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n\n.sidebar-filter-search-wrapper {\n  display: flex;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace200 tokens.$ifxSpace200;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  gap: tokens.$ifxSpace50;\n  font-family: var(--ifx-font-family);\n  background: tokens.$ifxColorEngineering200;\n}\n\n.topbar-filter-search-wrapper {\n  display:flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  gap: tokens.$ifxSpace50;\n  font-family: var(--ifx-font-family);\n}\n\n.topbar-filter-search-wrapper ifx-search-field {\n  width: 100%; /* Ensure ifx-search-field takes up full width */\n}\n\n.filter-name {\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightM;\n  font-weight: 600;\n}","import { Component, h, Listen, Watch, Element, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-search',\n  styleUrl: 'filter-search.scss',\n  shadow: true,\n})\nexport class FilterSearch {\n  @Element() host: HTMLElement;\n  @Prop() filterName: string;\n  @Prop() disabled: boolean = false;\n  @Prop({ mutable: true }) filterValue: string;\n  @Prop() filterKey: string;\n  @State() showDeleteIcon: boolean = false;\n  @Prop() filterOrientation: string = 'sidebar'; //topbar\n  @Prop() placeholder: string;\n\n  @Event() ifxFilterSearchChange: EventEmitter;\n\n  @Watch('value')\n  valueChanged(newValue: boolean) {\n    this.host.setAttribute('value', newValue.toString());\n  }\n\n  @Listen('ifxInput')\n  handleFilterSearchChange(event: CustomEvent) {\n    // Check if a search filter with the same filterName already exists\n    const existingFilter = this.host.parentElement.querySelector(`ifx-filter-search[filter-name=\"${this.filterName}\"]`);\n    if (existingFilter && existingFilter !== this.host) {\n      throw new Error(`A search filter with the name '${this.filterName}' already exists.`);\n    }\n\n    // // Check if the filterName is 'search' and the filter is not the search component\n    // if (this.filterName === 'search' && this.filterKey !== 'text') {\n    //   throw new Error(\"The filter name 'search' is reserved for the search component.\");\n    // }\n\n    this.filterValue = event.detail;\n    this.showDeleteIcon = this.filterValue !== \"\";\n    this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties\n  }\n\n\n  render() {\n    return (\n      <div class={`${\n      this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'\n      }`}>\n      <div class=\"filter-name\">{this.filterName}</div>\n      <ifx-search-field placeholder={this.placeholder} show-delete-icon={this.showDeleteIcon} disabled={this.disabled} value={this.filterValue}>\n      </ifx-search-field>\n      </div>\n    );\n  }\n}\n\n"],"version":3}

package/dist/esm/ifx-filter-type-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-12dad3f6.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-dc4139fb.js';
 
 const filterTypeGroupCss = ":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";
 const IfxFilterTypeGroupStyle0 = filterTypeGroupCss;
@@ -7,7 +7,6 @@ const IfxFilterTypeGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ifxSidebarFilterChange = createEvent(this, "ifxSidebarFilterChange", 7);
-        this.selectedOptions = [];
         this.handleResetEvent = () => {
             const accordionSlot = this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');
             const filterAccordionSlottedElements = accordionSlot.assignedElements({ flatten: true });
@@ -110,6 +109,7 @@ const IfxFilterTypeGroup = class {
             // Emit the entire selectedOptions array
             this.ifxSidebarFilterChange.emit(this.selectedOptions);
         };
+        this.selectedOptions = [];
     }
     /* If the component is ever removed and then reattached to the DOM,
     connectedCallback ensures that the event listeners are properly set up again */
@@ -125,7 +125,7 @@ const IfxFilterTypeGroup = class {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (h(Host, { key: 'd794c0d53d4cdf1d9e7a233dc36da89b7407bc57' }, h("div", { key: 'f59f81f2402e974ce04c937c620907fc553b3752', class: "filter-type-group" }, h("slot", { key: '35b06d9b7d04566fce7497c81a641a76bcf987e4', name: "filter-search" }), h("slot", { key: '86614c6a09e9d42392cef57017965abd337582e4', name: "filter-accordion" }))));
+        return (h(Host, { key: '2a1841c46709c17e54e96771d6159059c50a6c0d' }, h("div", { key: 'cf005fd784b233663943a78c895ce079395a1e82', class: "filter-type-group" }, h("slot", { key: '8752f642c1a78b5da5429a8a5f51d7f6369d4cad', name: "filter-search" }), h("slot", { key: 'cbd72fbc57c3935db4e5d94a7c57ec3d83560297', name: "filter-accordion" }))));
     }
     get el() { return getElement(this); }
 };