@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 30.10.0--canary.1702.2f8c24c808faa60bcf4fb75afba38278325cc5a8.0

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-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.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,7 +7,6 @@ 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;;;;;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}
+{"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}

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-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.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;;;;;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}
+{"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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-dc4139fb.js';
+import { r as registerInstance, h } from './index-f6e95f3d.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-dc4139fb.js';
+import { r as registerInstance, h } from './index-f6e95f3d.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,9 +8,7 @@ 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;;;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}
+{"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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-dc4139fb.js';
+import { r as registerInstance, h } from './index-f6e95f3d.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;;;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}
+{"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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.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-dc4139fb.js';
+import { r as registerInstance, h } from './index-f6e95f3d.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: '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."))));
+        return (h("div", { key: '81dac064edfea12005954ca731cbbe00b8d69698', class: 'container' }, h("ifx-accordion", { key: 'f0a52cd1a0c95d038e036c3643504033b15cb342' }, h("ifx-accordion-item", { key: 'e1ed7801a5e7c5d83c8e0ee934dfdfea1925dc4d', 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: '792c48fae24d106277a76554f5d66f5aaa0bb384', 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: '4ed509e6535edf0408f9ed9163d66e979c653370', 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: 'a358a22ca675e01d5e402fe8a4268b27ccb471c5', 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: '88a06feeb2a093b38797667aec93adf4d82502d5', 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-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.js';
 
 // utils.ts
 function getInitiallySelectedItems(el) {
@@ -21,6 +21,10 @@ 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;
@@ -30,11 +34,6 @@ 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);
@@ -50,8 +49,8 @@ const FilterAccordion = class {
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        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" }))));
+        return (h("div", { key: '4aeae13a1f2811af139413ae351ab70cfbb8ecaf', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'e17ac3e8bc1dce7555e3824b2cb66228c333e6ae', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '2ac732ab1951cc921078be5757d01325d1794fd6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '3d5d4ae28ad2cba68d3d8a2096bda53242ac69f1', class: "text" }, h("span", { key: '669dc7417d9303199c3cb68ff7a4a0ef4dd8fdab' }, this.filterGroupName), h("ifx-number-indicator", { key: 'b154ed9d7824f62bd1fc18fcb524739de66c3260' }, this.count)), h("ifx-icon", { key: '1c02692efa10b0c4f3af56ce921599a4dc4c5ba0', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'be1893204c1771593d25e4ed24cfe7e5876012c8', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: '7c6e4e04a0e0050b3934184002348432dfe92245', class: "filter-accordion-container" }, h("slot", { key: '1ff8e788b37c48a82a65667d24ddecbb8675bcda', 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":";;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}
+{"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}

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-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-f6e95f3d.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,6 +7,10 @@ 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
@@ -63,11 +67,6 @@ 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 */
@@ -94,7 +93,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: '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"))))));
+        return (h(Host, { key: '8ffcbb0968bdd83b7d7f2e43ed48f42d39977732' }, h("div", { key: '7cb3a8a4d5f0ad7b0f2610ea27f0a805328e8eb7', class: "search-container" }, h("slot", { key: '4d9ea4aea490bf15c98011366594e6334e5cd2f1', name: "filter-search" }), " "), h("div", { key: '42c5b558e0095e81dea5440765c34e38c9658564', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'd202e60944d15b73281705ab9da10b0182881e38', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'ab0fcaa64cdc33211cb184f8797acade0874d95a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: 'f8258f0e65e87c38ed0a4b5355e17c76c083aca0', 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-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f6e95f3d.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,13 +7,9 @@ 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';
-        this.placeholder = undefined;
+        this.filterOrientation = 'sidebar'; //topbar
     }
     valueChanged(newValue) {
         this.host.setAttribute('value', newValue.toString());
@@ -33,7 +29,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: '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 })));
+        return (h("div", { key: '40579877c23e2f855a7c1f439b6a8a0a14cd7e83', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'aab33d490e5329cc5504f606e4fe90631600a180', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: 'a56866107ccab40040930c1569586d48ac8dbc07', 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;;;;;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}
+{"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}

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-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-f6e95f3d.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,6 +7,7 @@ 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 });
@@ -109,7 +110,6 @@ 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: '2a1841c46709c17e54e96771d6159059c50a6c0d' }, h("div", { key: 'cf005fd784b233663943a78c895ce079395a1e82', class: "filter-type-group" }, h("slot", { key: '8752f642c1a78b5da5429a8a5f51d7f6369d4cad', name: "filter-search" }), h("slot", { key: 'cbd72fbc57c3935db4e5d94a7c57ec3d83560297', name: "filter-accordion" }))));
+        return (h(Host, { key: '6405275c133f86c3eb19c7fac063343d99d2b77b' }, h("div", { key: '471679f96693465687eda614860de292e3744f0c', class: "filter-type-group" }, h("slot", { key: '237950feb8ca95af740409852150b7334227dd86', name: "filter-search" }), h("slot", { key: 'b7e30c2c8df31806ec755630f20e6a77db1a1c98', name: "filter-accordion" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ifx-filter-type-group.entry.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/filter-type-group/filter-type-group.scss?tag=ifx-filter-type-group&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-type-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n:host {\n  display: flex;\n}\n\n.filter-type-group {\n  width: 260px;\n  align-items: flex-start;\n  gap: tokens.$ifxSpace100;\n}\n\n.filter-type-group > ::slotted(*) {\n  margin-bottom: 8px;\n}\n\n","import { Component, h, State, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-type-group',\n  styleUrl: 'filter-type-group.scss',\n  shadow: true,\n})\nexport class IfxFilterTypeGroup {\n  @Element() el: HTMLElement;\n  @State() selectedOptions: Array<{ filterGroupName: string, selectedItems?: Array<{ filterName: string, value: boolean | string }>, value?: string }> = [];\n  @Event() ifxSidebarFilterChange: EventEmitter;\n\n\n\n  /* If the component is ever removed and then reattached to the DOM, \n  connectedCallback ensures that the event listeners are properly set up again */\n  connectedCallback() {\n    this.el.addEventListener('ifxFilterAccordionChange', this.handleAccordionChange);\n    this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n    window.addEventListener('ifxUpdateSidebarFilter', this.handleUpdateSidebarFilter);\n   }\n\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxFilterAccordionChange', this.handleAccordionChange);\n    this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  handleResetEvent = () => {\n    const accordionSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-accordion\"]');\n    const filterAccordionSlottedElements = (accordionSlot as HTMLSlotElement).assignedElements({ flatten: true });\n\n\n    filterAccordionSlottedElements.forEach(accordionElement => {\n      const ifxLists = accordionElement.querySelectorAll('ifx-list');\n\n      ifxLists.forEach((ifxListElement: HTMLIfxListElement) => {\n        ifxListElement.resetTrigger = !ifxListElement.resetTrigger;\n      });\n    });\n\n    const filterSearchSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-search\"]');\n    const filterSearchSlottedElements = (filterSearchSlot as HTMLSlotElement).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.ifxSidebarFilterChange.emit(this.selectedOptions);\n  }\n\n  handleUpdateSidebarFilter = (event: CustomEvent) => {\n    const { filterName } = event.detail;\n\n    const accordionSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-accordion\"]');\n    const filterAccordionSlottedElements = accordionSlot ? (accordionSlot as HTMLSlotElement).assignedElements({ flatten: true }) : [];\n\n    filterAccordionSlottedElements.forEach(accordionElement => {\n      const ifxLists = accordionElement.querySelectorAll('ifx-list');\n\n      ifxLists.forEach((ifxListElement: HTMLIfxListElement) => {\n        if (ifxListElement.getAttribute('name') === filterName) {\n          ifxListElement.resetTrigger = !ifxListElement.resetTrigger;\n        }\n      });\n    });\n\n    // Clear the search bar within the filter-search slot\n    const searchSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-search\"]');\n    const filterSearchSlottedElements = searchSlot ? (searchSlot as HTMLSlotElement).assignedNodes({ flatten: true }) : [];\n  \n    filterSearchSlottedElements.forEach(searchElement => {\n      if (searchElement.nodeType === Node.ELEMENT_NODE) {\n        // Identify the ifx-filter-search component within the slot\n        const filterSearchComponent = searchElement as HTMLElement;\n          const searchField: any = filterSearchComponent.firstElementChild;\n          if (searchField) {\n             searchField.setAttribute('value', '');\n            searchField.dispatchEvent(new CustomEvent('ifxInput', { bubbles: true, composed: true, detail: '' })); // Trigger ifxInput event to reset\n          }\n        \n      }\n    });\n\n    const newSelectedOptions = this.selectedOptions.map(option => {\n      if (option.filterGroupName === filterName) {\n        return { ...option, selectedItems: [], value: '' };\n      }\n      return option;\n    });\n\n    this.selectedOptions = newSelectedOptions;\n\n    this.ifxSidebarFilterChange.emit(this.selectedOptions);\n  }\n\n\n  handleAccordionChange = (event: CustomEvent) => {\n    this.handleFilterChange(event);\n  }\n\n  handleSearchChange = (event: CustomEvent) => {\n    // Call handleFilterChange with the created CustomEvent object\n    this.handleFilterChange(event);\n  }\n\n\n  handleFilterChange = (event: CustomEvent) => {\n    // Create a new array to hold the new state\n    const newSelectedOptions = [...this.selectedOptions];\n\n    // Check the type of the event\n    if (event.type === 'ifxFilterSearchChange') {\n      // Handle the ifxFilterSearchChange event\n      const { filterName, filterValue } = event.detail;\n\n      // Find the existing filter with the same filterName\n      const existingOptionIndex = newSelectedOptions.findIndex(option => typeof option !== 'string' && option.filterGroupName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter is found, update its value\n        newSelectedOptions[existingOptionIndex].value = filterValue;\n      } else {\n        // If no existing filter is found, append the new filter\n        newSelectedOptions.push({ filterGroupName: filterName, value: filterValue });\n      }\n    } else if (event.type === 'ifxFilterAccordionChange') {\n      const { filterGroupName, selectedItems } = event.detail;\n\n      // Find the existing filter group with the same filterGroupName\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterGroupName === filterGroupName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter group is found, update its selectedItems\n        newSelectedOptions[existingOptionIndex] = { filterGroupName, selectedItems };\n      } else {\n        // If no existing filter group is found, append the new filter group\n        newSelectedOptions.push({ filterGroupName, selectedItems });\n      }\n    }\n\n    // Update the state with the new selected options\n    this.selectedOptions = newSelectedOptions;\n\n    // Emit the entire selectedOptions array\n    this.ifxSidebarFilterChange.emit(this.selectedOptions);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"filter-type-group\">\n          <slot name=\"filter-search\" />\n          <slot name=\"filter-accordion\" />\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-filter-type-group.entry.js","mappings":"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","names":[],"sources":["src/components/table-advanced-version/filter-type-group/filter-type-group.scss?tag=ifx-filter-type-group&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-type-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n:host {\n  display: flex;\n}\n\n.filter-type-group {\n  width: 260px;\n  align-items: flex-start;\n  gap: tokens.$ifxSpace100;\n}\n\n.filter-type-group > ::slotted(*) {\n  margin-bottom: 8px;\n}\n\n","import { Component, h, State, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-type-group',\n  styleUrl: 'filter-type-group.scss',\n  shadow: true,\n})\nexport class IfxFilterTypeGroup {\n  @Element() el: HTMLElement;\n  @State() selectedOptions: Array<{ filterGroupName: string, selectedItems?: Array<{ filterName: string, value: boolean | string }>, value?: string }> = [];\n  @Event() ifxSidebarFilterChange: EventEmitter;\n\n\n\n  /* If the component is ever removed and then reattached to the DOM, \n  connectedCallback ensures that the event listeners are properly set up again */\n  connectedCallback() {\n    this.el.addEventListener('ifxFilterAccordionChange', this.handleAccordionChange);\n    this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n    window.addEventListener('ifxUpdateSidebarFilter', this.handleUpdateSidebarFilter);\n   }\n\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxFilterAccordionChange', this.handleAccordionChange);\n    this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  handleResetEvent = () => {\n    const accordionSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-accordion\"]');\n    const filterAccordionSlottedElements = (accordionSlot as HTMLSlotElement).assignedElements({ flatten: true });\n\n\n    filterAccordionSlottedElements.forEach(accordionElement => {\n      const ifxLists = accordionElement.querySelectorAll('ifx-list');\n\n      ifxLists.forEach((ifxListElement: HTMLIfxListElement) => {\n        ifxListElement.resetTrigger = !ifxListElement.resetTrigger;\n      });\n    });\n\n    const filterSearchSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-search\"]');\n    const filterSearchSlottedElements = (filterSearchSlot as HTMLSlotElement).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.ifxSidebarFilterChange.emit(this.selectedOptions);\n  }\n\n  handleUpdateSidebarFilter = (event: CustomEvent) => {\n    const { filterName } = event.detail;\n\n    const accordionSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-accordion\"]');\n    const filterAccordionSlottedElements = accordionSlot ? (accordionSlot as HTMLSlotElement).assignedElements({ flatten: true }) : [];\n\n    filterAccordionSlottedElements.forEach(accordionElement => {\n      const ifxLists = accordionElement.querySelectorAll('ifx-list');\n\n      ifxLists.forEach((ifxListElement: HTMLIfxListElement) => {\n        if (ifxListElement.getAttribute('name') === filterName) {\n          ifxListElement.resetTrigger = !ifxListElement.resetTrigger;\n        }\n      });\n    });\n\n    // Clear the search bar within the filter-search slot\n    const searchSlot = this.el.shadowRoot.querySelector('slot[name=\"filter-search\"]');\n    const filterSearchSlottedElements = searchSlot ? (searchSlot as HTMLSlotElement).assignedNodes({ flatten: true }) : [];\n  \n    filterSearchSlottedElements.forEach(searchElement => {\n      if (searchElement.nodeType === Node.ELEMENT_NODE) {\n        // Identify the ifx-filter-search component within the slot\n        const filterSearchComponent = searchElement as HTMLElement;\n          const searchField: any = filterSearchComponent.firstElementChild;\n          if (searchField) {\n             searchField.setAttribute('value', '');\n            searchField.dispatchEvent(new CustomEvent('ifxInput', { bubbles: true, composed: true, detail: '' })); // Trigger ifxInput event to reset\n          }\n        \n      }\n    });\n\n    const newSelectedOptions = this.selectedOptions.map(option => {\n      if (option.filterGroupName === filterName) {\n        return { ...option, selectedItems: [], value: '' };\n      }\n      return option;\n    });\n\n    this.selectedOptions = newSelectedOptions;\n\n    this.ifxSidebarFilterChange.emit(this.selectedOptions);\n  }\n\n\n  handleAccordionChange = (event: CustomEvent) => {\n    this.handleFilterChange(event);\n  }\n\n  handleSearchChange = (event: CustomEvent) => {\n    // Call handleFilterChange with the created CustomEvent object\n    this.handleFilterChange(event);\n  }\n\n\n  handleFilterChange = (event: CustomEvent) => {\n    // Create a new array to hold the new state\n    const newSelectedOptions = [...this.selectedOptions];\n\n    // Check the type of the event\n    if (event.type === 'ifxFilterSearchChange') {\n      // Handle the ifxFilterSearchChange event\n      const { filterName, filterValue } = event.detail;\n\n      // Find the existing filter with the same filterName\n      const existingOptionIndex = newSelectedOptions.findIndex(option => typeof option !== 'string' && option.filterGroupName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter is found, update its value\n        newSelectedOptions[existingOptionIndex].value = filterValue;\n      } else {\n        // If no existing filter is found, append the new filter\n        newSelectedOptions.push({ filterGroupName: filterName, value: filterValue });\n      }\n    } else if (event.type === 'ifxFilterAccordionChange') {\n      const { filterGroupName, selectedItems } = event.detail;\n\n      // Find the existing filter group with the same filterGroupName\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterGroupName === filterGroupName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter group is found, update its selectedItems\n        newSelectedOptions[existingOptionIndex] = { filterGroupName, selectedItems };\n      } else {\n        // If no existing filter group is found, append the new filter group\n        newSelectedOptions.push({ filterGroupName, selectedItems });\n      }\n    }\n\n    // Update the state with the new selected options\n    this.selectedOptions = newSelectedOptions;\n\n    // Emit the entire selectedOptions array\n    this.ifxSidebarFilterChange.emit(this.selectedOptions);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"filter-type-group\">\n          <slot name=\"filter-search\" />\n          <slot name=\"filter-accordion\" />\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/ifx-footer-column.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-dc4139fb.js';
+import { r as registerInstance, h, g as getElement } from './index-f6e95f3d.js';
 
 const footerColumnCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.col{display:flex;flex-direction:column;gap:12px;padding-right:8px;color:#1D1D1D;font-family:var(--ifx-font-family)}.col ::slotted([slot=title]){box-sizing:border-box;font-weight:600;font-size:1rem;line-height:1.5rem;margin:0;padding:0}.col span{display:flex;flex-direction:column;gap:12px;color:#1D1D1D}.col span ::slotted([slot=link]){box-sizing:border-box;font-weight:400;font-size:1rem;line-height:1.5rem}";
 const IfxFooterColumnStyle0 = footerColumnCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-dc4139fb.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-f6e95f3d.js';
 
 const footerCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block;width:100%}.footer__container{padding:0px 32px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.footer__container .footer__wrapper{display:flex;flex-direction:column;width:100%}@media (max-width: 768px){.footer__container .footer__wrapper{margin-top:48px}}.footer__container .footer__wrapper .footer__logo_top svg{display:none}@media (max-width: 768px){.footer__container .footer__wrapper .footer__logo_top svg{display:inline}}.footer__container .footer__wrapper .footer__logo_btm svg{display:inline;vertical-align:bottom}.footer__container .footer__wrapper .col-wrapper{display:flex;align-items:flex-start;width:100%;justify-content:space-between;margin:32px 0}@media (max-width: 768px){.footer__container .footer__wrapper .col-wrapper{flex-wrap:wrap;justify-content:space-between;margin:24px 0}}.footer__container .footer__wrapper .col-wrapper ::slotted([slot=col]){display:flex;gap:32px}@media (max-width: 768px){.footer__container .footer__wrapper .col-wrapper ::slotted([slot=col]){flex-wrap:wrap;margin-top:24px}}.footer__container .footer__wrapper .default{display:flex;justify-content:space-between;align-items:center;width:100%;padding:24px 0;border-bottom:1px solid #BFBBBB;margin-top:24px}.footer__container .footer__wrapper .default .footer__logo_btm svg{display:inline;vertical-align:bottom}@media (max-width: 768px){.footer__container .footer__wrapper .default .footer__logo_btm svg{display:none}}@media (max-width: 768px){.footer__container .footer__wrapper .default{margin-top:0px;flex-direction:column;align-items:flex-start}}.footer__container .footer__wrapper .default ::slotted([slot=socials]){display:flex;gap:32px}@media (max-width: 768px){.footer__container .footer__wrapper .default ::slotted([slot=socials]){flex-wrap:wrap}}.footer__container .footer__wrapper .footer__base{display:flex;justify-content:space-between;width:100%;padding:24px 0}.footer__container .footer__wrapper .footer__base .footer__brand{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D;flex-grow:1}.footer__container .footer__wrapper .footer__base .footer__info>::slotted([slot=info]){display:flex;gap:24px;padding-right:16px;justify-content:flex-end;flex-grow:1}.footer__container .footer__wrapper .footer__base .footer__info>::slotted([slot=info]) a{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;text-decoration:none}@media (max-width: 768px){.footer__container .footer__wrapper .footer__base .footer__info>::slotted([slot=info]){justify-content:flex-start;flex-wrap:wrap;gap:12px 16px}}@media (max-width: 768px){.footer__container .footer__wrapper .footer__base{flex-direction:column-reverse}.footer__container .footer__wrapper .footer__base .footer__brand{margin-top:16px}}";
 const IfxFooterStyle0 = footerCss;
@@ -6,10 +6,10 @@ const IfxFooterStyle0 = footerCss;
 const Footer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.hasColSlot = false;
-        this.hasSocialsSlot = false;
         this.currentYear = new Date().getFullYear();
         this.copyrightText = '© 1999 - ' + this.currentYear + ' Infineon Technologies AG';
+        this.hasColSlot = false;
+        this.hasSocialsSlot = false;
     }
     componentWillLoad() {
         this.hasColSlot = !!this.el.querySelector('[slot="col"]');