@infineon/infineon-design-system-stencil 32.9.0--canary.1690.0fd1d4f3930adff7951d6ac8fa7cd8a2f129f926.0 → 32.9.0--canary.1690.068dfcbe53f27141aecedef167d7bc4258a4c9cf.0

package/dist/components/{p-4d4f8f00.js.map → p-bf2666f8.js.map}

@@ -1 +1 @@
-{"file":"p-4d4f8f00.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,+pDAA+pD,CAAC;AACxrD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"p-bf2666f8.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,+pDAA+pD,CAAC;AACxrD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -173,7 +173,7 @@ const Template = class {
         }
     }
     render() {
-        return (h("div", { key: '2bbc2bcf69e0a7c3622bc09532a5ce544993aab1' }, this.isTemplatePage
+        return (h("div", { key: 'f65bcad4089f5c8b672184729dcdd17c6eda8cba' }, this.isTemplatePage
             ?
                 h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && h("div", null, h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && h("div", null, this.repoError))

package/dist/esm/ifx-basic-table.entry.js

@@ -178,7 +178,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (h(Host, { key: 'b8a64dc733f199d3cd39cfa845f9038fd19591c2' }, h("div", { key: '106e6ef4925dd559544abf7c32031164ef4a3aca', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'f3d0785c0ce382028b6d197b2d8463b16039c15b', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'ad2d7535d94aba7f303088599101f365f077f65e' }, h("div", { key: 'ab6135affa957b20efc6fcd96be4e5308e767659', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '2aac286f7422d5c0106c1a13beab760abb3e03fe', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -508,7 +508,7 @@ const Pagination = class {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'a693ae5fe2e3ded229062356629f14c76bf5ad51', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '41d1d12a964cce4349f5128625975db66b29ea8a', class: 'items__per-page-wrapper' }, h("div", { key: '6458db661b207bc22229c08ee2aabf8282f34538', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'c62a635ec495daa54c4842b916115586d6a173a3', class: 'items__per-page-field' }, h("ifx-select", { key: '7fcfafba3abc954a84dfce2f653700d0e6217aad', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: this.filteredItemsPerPage }))), h("div", { key: 'a96bbfe38514ea1f227228e7f91a4a89afc6d3b4', class: 'items__total-wrapper' }, h("div", { key: '99cd98bda4e1cc7124dd7c4c7bdd7d9179b4d68c', class: 'page__numbers-wrapper' }, h("div", { key: 'b6ef27bd27e2b5f13abb5a82afd30a928a0f5dfa', class: "pagination" }, h("ifx-icon-button", { key: 'a5c009483d5abf059da48dc259c1636699630fa3', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: 'fc06c289d9c101c65145dd441fde88a8610384e0' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '4e9e6fea55615a305ee040bceb4b4f9f565fa182', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'b0c95fd2d1f3eff8c2a02773b7332fa8a0e8df4b', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '5258c41927e8699f3abedd4e4cf127abc9b9d621', class: 'items__per-page-wrapper' }, h("div", { key: 'c1613e4f10bddd59733f92a18b02df25fb2bd41c', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'c51981aec1cf851bba48ccac2bfdfc0d6889efdf', class: 'items__per-page-field' }, h("ifx-select", { key: 'df0af4e9e347a3bad00477d187df5dfa2336a3a8', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: this.filteredItemsPerPage }))), h("div", { key: 'ef3a823246abfd7c22f4e3a214c87880491a97ce', class: 'items__total-wrapper' }, h("div", { key: 'd358a8c56ea8a2963b4de1cb0e3424e45bef5486', class: 'page__numbers-wrapper' }, h("div", { key: 'e0fd96bf52b67c9010f567bc11856f57f1fb9128', class: "pagination" }, h("ifx-icon-button", { key: '094f2b269326b82f332375bbf0bf94b25c895051', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '1cbe4f1104728aaf5c384d2328db1f2cfc10e6e5' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '8befcf76b3fb5d7c349dbde7f45041b7cf661882', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -8,7 +8,7 @@ const Faq = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '2a4601043cc5f6a5f40d33e341b61a1dd9854b02', class: 'container' }, h("ifx-accordion", { key: '5e00a8d1efb02edb07dd64c3948bea7d5b703625' }, h("ifx-accordion-item", { key: '2d025c838b2d1ddef74d3a540005bee97913198c', 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: 'c863ca331816f23d6de8d0177f3c84e05df968e3', 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: '3616f6218e23af7918d12b57ac5a469289bc51e1', 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: '319095da97862f3d7a88ac1102e1e84114228cc1', 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: 'a4e8a4c1368c6c3532c3d4f8ad8fbcfa858fb2df', 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: '38fe3ec5631fe45adcc35588f571cb04b9c2ff86', class: 'container' }, h("ifx-accordion", { key: '0a200c6d581b25df4d1ac5109a552fb03ce19248' }, h("ifx-accordion-item", { key: '817f3277cafe0434924c77df5f535a1aed24c31d', 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: 'c26ade22de3178d88f441dfeaf13af56b39a225e', 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: 'f294796deb5779d31b8d0436c0ebce363e17d51b', 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: '17996798e2b1a74e4ba64e0745cccc3de1af63dc', 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: 'f3246800892322c806e8710a8c7824b7dffa6a34', 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

@@ -49,8 +49,8 @@ const FilterAccordion = class {
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (h("div", { key: 'cb145b6670a80170141ed679bf35967a076e9f36', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '8f0ffba46008dff714481e373c57f3d5420a9f91', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'b1e21649d51e942a01faa99e244ea8a3aff70067', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '776586b04064a1a30dc7f2eaa6ee3e71c679a6f7', class: "text" }, h("span", { key: 'e7df1011d2b51f9e7c90b6acafdd9e8c0fdb6612' }, this.filterGroupName), h("ifx-number-indicator", { key: '8d67c24dbee2258bdad84e5273a8791269d4a4d6' }, this.count)), h("ifx-icon", { key: '6790c5defc2f0f0ff391a8bea0fe035dcd017ffe', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '05d384131f5ba652a82c7210156a3d8b54cd0b35', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '91ea5b277b3d514ea3a25b5b7cee8e6336802f60', class: "filter-accordion-container" }, h("slot", { key: 'd44e95c756e1cc37b28f8b3c4ed3811e327ee2d1', name: "list" }))));
+        return (h("div", { key: '04f5bf30e72842f9933b4e996d0f1f8fd05a7e20', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'db74e70636d12b7eda258cd51b970efabca762b1', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '275bb4906b9bf54d3f7a3d92127c2b5f5929f66f', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '196c8da9491b30ee1b9340f2d608dcc0fbc77e8d', class: "text" }, h("span", { key: 'ca7a0e16bdec5ad7c7712eacc663e93016745274' }, this.filterGroupName), h("ifx-number-indicator", { key: 'ded7fee1ddad870fd8ab71c552443b10c64fe16b' }, this.count)), h("ifx-icon", { key: 'bf3c7d0609df661cf80d2a54d6541f00ad12e4fe', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'e51d932d03376e78da2a7c7023b7a730c485735e', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: '9f918e904eac2a581a2964c151a968745ac947f3', class: "filter-accordion-container" }, h("slot", { key: 'dd76a13a2b0eacbdf472d80418b3c003c9a4fac5', name: "list" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -93,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: 'b229339c4a69f89412ab76c74d6d6e7841d23638' }, h("div", { key: '9dd16a7b0d0aad56a1153034691cfbd0cf5b351b', class: "search-container" }, h("slot", { key: 'e0f5f4984744bbed88448c019dcfb6d3df5f3829', name: "filter-search" }), " "), h("div", { key: 'e2a4089f0d2b039f56f8d903505fad17cc1d24e6', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '886b702ec95387d15b9c55f6b8ee874a2dfc5968', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'bfabd7b2af1e34d8ec60b0826a4d30af3c0b8d26', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '1a57564f2e2799f4d2b9df4fafb1fb1373e163e2', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: '3918b1d231610b4f950c76a2ed07d925d7ba29e3' }, h("div", { key: 'd72e6b4183d5f89b28f837ffb7996a63d33f5c4f', class: "search-container" }, h("slot", { key: 'e01e5096996fe278288ca45a4556df6f887e95b2', name: "filter-search" }), " "), h("div", { key: 'd98c1aabedb706e1cd87329e1b5f223395692e01', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '655e3d96f5265ad5c2f412c27b715a083456e8b6', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '47dabee1d37f6c673b2d62de1547eaba96262e8a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: 'de59be45b90578acde9c141129f4579562e348cf', icon: "filter-16" }), "More filters"))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -29,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: 'afe820415b91e594797fe29d0e63c17872a721c0', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '80aa48ee8d8f5a7907fb117ff6859f2c7010523f', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '157685c4bbb4f285529615df802bbc93e44952da', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: '53a34910aec55e31b40d2d2868481fea46dec401', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'eb4451b33cf8815237b0543d22f0cabcc2129070', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '6240cf45bc67f23d9899ee67914974104801f632', 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-type-group.entry.js

@@ -125,7 +125,7 @@ const IfxFilterTypeGroup = class {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (h(Host, { key: '4f530d59ead6338b06e1f913cd7124225c47123d' }, h("div", { key: '6a3a1fb38642e4130ea57d39a70b90154d22d23a', class: "filter-type-group" }, h("slot", { key: '0f8da1bbdf3daa62ea04cdb4643146d26552686e', name: "filter-search" }), h("slot", { key: '8f16788df7c99451d0db594342a2d8842fb0a309', name: "filter-accordion" }))));
+        return (h(Host, { key: 'b3c13d48da96a74d05ba0af9f592fc4f4bf688fc' }, h("div", { key: 'd0bea155f2d083279710607bde2957fa7f2bdd41', class: "filter-type-group" }, h("slot", { key: '71c60c9cdc705fb1d845b93d9871f3257090b88f', name: "filter-search" }), h("slot", { key: 'd3ecbbd9e98a227cd2d6902e28ce13c1511bd451', name: "filter-accordion" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -0,0 +1,74 @@
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-c77e25a0.js';
+import { g as getIcon } from './icons-4575d84a.js';
+
+const infineonIconStencilCss = "ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";
+const IfxIconStyle0 = infineonIconStencilCss;
+
+const InfineonIconStencil = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.consoleError = createEvent(this, "consoleError", 7);
+        this.icon = "";
+    }
+    convertStringToHtml(htmlString) {
+        const div = document.createElement('div');
+        div.innerHTML = htmlString;
+        return div.firstChild;
+    }
+    convertHtmlToObject(htmlElement) {
+        let pathToObject = Array
+            .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))
+            .reduce((acc, current) => {
+            acc[current.name] = current.value;
+            return acc;
+        }, {});
+        return pathToObject;
+    }
+    convertPathsToVnode(htmlPath) {
+        let svgPaths = [];
+        const parentPath = this.convertHtmlToObject(htmlPath);
+        const parentPathToVnode = h("path", parentPath);
+        svgPaths.push(parentPathToVnode);
+        if (htmlPath.firstChild) {
+            const paths = htmlPath.querySelectorAll('path');
+            const pathLength = htmlPath.querySelectorAll('path').length;
+            for (let i = 0; i < pathLength; i++) {
+                let pathToObject = this.convertHtmlToObject(paths[i]);
+                let objToVnode = h("path", pathToObject);
+                svgPaths.push(objToVnode);
+            }
+        }
+        return svgPaths;
+    }
+    getSVG(svgPath) {
+        return h("svg", { class: "inline-svg", width: this.ifxIcon.width, height: this.ifxIcon.height, xmlns: "http://www.w3.org/2000/svg", fill: this.ifxIcon.fill, viewBox: this.ifxIcon.viewBox }, ...svgPath);
+    }
+    constructIcon() {
+        if (this.ifxIcon) {
+            const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent);
+            const svgPath = this.convertPathsToVnode(htmlPath);
+            const SVG = this.getSVG(svgPath);
+            return SVG;
+        }
+        else if (this.icon !== "") {
+            console.error('Icon not found!');
+            this.consoleError.emit(true);
+            return;
+        }
+        else {
+            return;
+        }
+    }
+    componentWillLoad() {
+        const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);
+        this.ifxIcon = getIcon(removeHyphen(this.icon));
+    }
+    render() {
+        return (h(Host, { key: 'b9e7a70969306d21d04013a291d7f1c6c12a2f40' }, this.constructIcon()));
+    }
+};
+InfineonIconStencil.style = IfxIconStyle0;
+
+export { InfineonIconStencil as ifx_icon };
+
+//# sourceMappingURL=ifx-icon.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ifx-icon.entry.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,kFAAkF,CAAC;AAClH,sBAAe,sBAAsB;;MCSxB,mBAAmB;IALhC;;;QAM2B,SAAI,GAAW,EAAE,CAAA;KAuE3C;IAnEC,mBAAmB,CAAC,UAAU;QAC5B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACzC,GAAG,CAAC,SAAS,GAAG,UAAU,CAAA;QAC1B,OAAO,GAAG,CAAC,UAAU,CAAA;KACtB;IAED,mBAAmB,CAAC,WAAW;QAC7B,IAAI,YAAY,GAAG,KAAK;aACrB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;aACpE,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO;YACnB,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAA;YACjC,OAAO,GAAG,CAAA;SACX,EAAE,EAAE,CAAC,CAAA;QAER,OAAO,YAAY,CAAA;KACpB;IAED,mBAAmB,CAAC,QAAQ;QAC1B,IAAI,QAAQ,GAAG,EAAE,CAAA;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,iBAAiB,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAChD,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;QAChC,IAAG,QAAQ,CAAC,UAAU,EAAE;YACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;YAChD,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;YAC5D,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE;gBAClC,IAAI,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;gBACrD,IAAI,UAAU,GAAG,CAAC,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;gBACxC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;aAC1B;SACF;QACD,OAAO,QAAQ,CAAA;KAChB;IAED,MAAM,CAAC,OAAO;QACZ,OAAO,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,OAAM,OAAO,CAAO,CAAA;KACrM;IAED,aAAa;QACX,IAAG,IAAI,CAAC,OAAO,EAAE;YACf,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;YAClE,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAA;YAClD,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YAChC,OAAO,GAAG,CAAC;SACZ;aAAM,IAAG,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;YAC1B,OAAO,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;YAChC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5B,OAAO;SACR;aAAO;YACN,OAAO;SACR;KACF;IAED,iBAAiB;QACf,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;QAC/F,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACjD;IAID,MAAM;QACJ,QACE,EAAC,IAAI,uDACJ,IAAI,CAAC,aAAa,EAAE,CACd,EACP;KACH;;;;;;","names":[],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n  display: inline-flex;\n  justify-content: center;\n\n  &:empty {\n    display: none;\n  }\n}","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n  tag: 'ifx-icon',\n  styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n  @Prop({ mutable: true }) icon: string = \"\"\n  @Prop({ mutable: true }) ifxIcon: any;\n  @Event() consoleError: EventEmitter<boolean>;\n \n  convertStringToHtml(htmlString) { \n    const div = document.createElement('div')\n    div.innerHTML = htmlString\n    return div.firstChild\n  }\n\n  convertHtmlToObject(htmlElement) { \n    let pathToObject = Array\n      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n      .reduce((acc, current) => {\n        acc[current.name] = current.value\n        return acc\n      }, {})\n\n    return pathToObject\n  }\n\n  convertPathsToVnode(htmlPath) { \n    let svgPaths = []\n    const parentPath = this.convertHtmlToObject(htmlPath);\n    const parentPathToVnode = h(\"path\", parentPath);\n    svgPaths.push(parentPathToVnode)\n    if(htmlPath.firstChild) { \n      const paths = htmlPath.querySelectorAll('path');\n      const pathLength = htmlPath.querySelectorAll('path').length;\n      for(let i = 0; i < pathLength; i++) { \n        let pathToObject = this.convertHtmlToObject(paths[i])\n        let objToVnode = h(\"path\", pathToObject)\n        svgPaths.push(objToVnode)\n      }      \n    }\n    return svgPaths\n  }\n\n  getSVG(svgPath) {\n    return <svg class=\"inline-svg\" width={this.ifxIcon.width} height={this.ifxIcon.height} xmlns=\"http://www.w3.org/2000/svg\" fill={this.ifxIcon.fill} viewBox={this.ifxIcon.viewBox}>{...svgPath}</svg>\n  }\n\n  constructIcon() {\n    if(this.ifxIcon) {\n      const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent)\n      const svgPath = this.convertPathsToVnode(htmlPath)\n      const SVG = this.getSVG(svgPath)\n      return SVG;\n    } else if(this.icon !== \"\") {\n      console.error('Icon not found!')\n      this.consoleError.emit(true)\n      return;\n    }  else { \n      return;\n    }\n  }\n\n  componentWillLoad() {\n    const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n    this.ifxIcon = getIcon(removeHyphen(this.icon));\n  }\n\n\n\n  render() {\n    return (\n      <Host>\n      {this.constructIcon()}\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -21,7 +21,7 @@ const ListEntry = class {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (h("div", { key: 'd604b43664dbfc8b5ca08f09ae282300054a8fdd', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+        return (h("div", { key: 'e7beb5ddc5e3493eac6f47d2eaf066a6f8a09add', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -0,0 +1,347 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c77e25a0.js';
+
+const navbarItemCss = ":host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .dot__indicator-wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276;position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:\"Source Sans 3\";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:\"Source Sans 3\";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;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)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}";
+const IfxNavbarItemStyle0 = navbarItemCss;
+
+const NavbarItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxNavItem = createEvent(this, "ifxNavItem", 7);
+        this.showLabel = true;
+        this.icon = "";
+        this.href = "";
+        this.target = "_self";
+        this.hideOnMobile = true;
+        this.internalHref = "";
+        this.isMenuItem = false;
+        this.hasChildNavItems = false;
+        this.isSidebarMenuItem = false;
+        this.dotIndicator = false;
+    }
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        const itemMenu = this.getItemMenu();
+        if (itemMenu) {
+            if (itemMenu.classList.contains('open')) {
+                if (!path.includes(this.el)) {
+                    this.closeItemMenu();
+                }
+            }
+        }
+    }
+    async hideComponent() {
+        this.el.style.display = 'none';
+    }
+    async showComponent() {
+        this.el.style.display = '';
+    }
+    async toggleChildren(action) {
+        const itemMenu = this.getItemMenu();
+        const arrowIcon = this.getChevronDownIconWrapper();
+        if (itemMenu) {
+            this.handleClassList(arrowIcon, action, 'hide');
+            this.handleClassList(itemMenu, action, 'itemInMobileMenu');
+        }
+    }
+    async moveChildComponentsIntoSubLayerMenu() {
+        const subLayerMenu = this.getItemMenu();
+        if (subLayerMenu) {
+            const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open');
+            if (subLayerMenuIsOpened) {
+                const navbarItem = this.getNavBarItem();
+                const subLayerBackButton = this.getSubLayerBackButton();
+                this.handleClassList(navbarItem, 'add', 'layer__item-parent');
+                this.handleClassList(subLayerBackButton, 'add', 'show');
+                this.ifxNavItem.emit({ component: this.el, action: 'hideFirstLayer' });
+            }
+        }
+        const navItems = this.el.querySelectorAll('[slot="first__layer"]');
+        this.isSidebarMenuItem = true;
+        for (let i = 0; i < navItems.length; i++) {
+            navItems[i].setAttribute('slot', 'second__layer');
+            navItems[i].moveChildComponentsIntoSubLayerMenu();
+        }
+    }
+    getSubLayerBackButton() {
+        const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button');
+        return sublayerBackButton;
+    }
+    async toggleFirstLayerItem(actionOne, actionTwo) {
+        const navbarItem = this.getNavBarItem();
+        const secondLayerMenu = this.getSubLayerMenu();
+        const subLayerBackButton = this.getSubLayerBackButton();
+        this.handleClassList(subLayerBackButton, [actionOne], 'show');
+        this.handleClassList(navbarItem, [actionTwo], 'hide');
+        this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin');
+    }
+    openSubLayerMenu() {
+        if (this.hasChildNavItems) {
+            const subLayerBackButton = this.getSubLayerBackButton();
+            const rightArrowIcon = this.getRightArrowIcon();
+            const navbarItem = this.getNavBarItem();
+            const subLayerMenu = this.getSubLayerMenu();
+            const slotName = this.el.getAttribute('slot');
+            this.handleClassList(subLayerBackButton, 'add', 'show');
+            this.handleClassList(rightArrowIcon, 'add', 'hide');
+            this.handleClassList(navbarItem, 'add', 'layer__item-parent');
+            this.handleClassList(subLayerMenu, 'add', 'open');
+            if (slotName.toLowerCase() === 'second__layer') {
+                this.ifxNavItem.emit({ component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer' });
+                this.handleClassList(navbarItem, 'remove', 'menuItem');
+            }
+            else {
+                this.ifxNavItem.emit({ component: this.el, action: 'hideFirstLayer' });
+            }
+        }
+    }
+    async addMenuItemClass() {
+        const navbarItem = this.getNavBarItem();
+        this.handleClassList(navbarItem, 'add', 'menuItem');
+        const rightArrowIcon = this.getRightArrowIcon();
+        if (this.hasChildNavItems) {
+            this.handleClassList(rightArrowIcon, 'remove', 'hide');
+        }
+    }
+    async moveChildComponentsBackIntoNavbar() {
+        const subLayerBackButton = this.getSubLayerBackButton();
+        const navbarItem = this.getNavBarItem();
+        const secondLayerMenu = this.getSubLayerMenu();
+        this.handleClassList(subLayerBackButton, 'remove', 'show');
+        this.handleClassList(navbarItem, 'remove', 'layer__item-parent');
+        this.handleClassList(secondLayerMenu, 'remove', 'remove__margin');
+        this.ifxNavItem.emit({ component: this.el, action: 'show' });
+        const navItems = this.el.querySelectorAll('[slot="second__layer"]');
+        this.isSidebarMenuItem = false;
+        this.showComponent();
+        this.handleClassList(navbarItem, 'remove', 'hide');
+        for (let i = 0; i < navItems.length; i++) {
+            navItems[i].setAttribute('slot', 'first__layer');
+            navItems[i].moveChildComponentsBackIntoNavbar();
+            navItems[i].addMenuItemClass();
+            navItems[i].returnToFirstLayer();
+        }
+    }
+    getRightArrowIcon() {
+        const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper');
+        return menuItemRightIconWrapper;
+    }
+    getChevronDownIconWrapper() {
+        const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');
+        return arrowIcon;
+    }
+    async returnToFirstLayer() {
+        const subLayerBackButton = this.getSubLayerBackButton();
+        const navbarItem = this.getNavBarItem();
+        const rightArrowIcon = this.getRightArrowIcon();
+        const subLayerMenu = this.getSubLayerMenu();
+        const slotName = this.el.getAttribute('slot');
+        this.handleClassList(subLayerBackButton, 'remove', 'show');
+        this.handleClassList(navbarItem, 'remove', 'layer__item-parent');
+        this.handleClassList(subLayerMenu, 'remove', 'open');
+        if (this.hasChildNavItems) {
+            this.handleClassList(rightArrowIcon, 'remove', 'hide');
+        }
+        if (slotName.toLowerCase() === 'second__layer') {
+            this.ifxNavItem.emit({ component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer' });
+            this.handleClassList(navbarItem, 'add', 'menuItem');
+        }
+        else {
+            this.ifxNavItem.emit({ component: this.el, action: 'return' });
+        }
+    }
+    componentWillLoad() {
+        this.setHref();
+        this.checkIfItemIsNested();
+        this.checkIfItemHasChildren();
+        this.removeEmptyItem();
+    }
+    componentDidLoad() {
+        this.handleItemGap();
+        this.handleLabelWrapper();
+        if (this.hasChildNavItems) {
+            const navItems = this.getNavbarItems();
+            this.relocateItemsToFirstlayer(navItems);
+        }
+    }
+    componentDidUpdate() {
+        const navbarItem = this.getNavBarItem();
+        const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent');
+        if (this.isSidebarMenuItem && isLayerItemParent) {
+            const rightArrowIcon = this.getRightArrowIcon();
+            this.handleClassList(rightArrowIcon, 'add', 'hide');
+        }
+    }
+    async setMenuItemPosition() {
+        if (this.isMenuItem && this.hasChildNavItems) {
+            const menuPosition = this.getItemMenuPosition();
+            if (menuPosition === 'left') {
+                this.itemPosition = 'left';
+            }
+            else if (menuPosition === 'right') {
+                this.itemPosition = 'right';
+            }
+        }
+    }
+    handleClassList(el, type, className) {
+        el.classList[type](className);
+        if (type === 'contains') {
+            return el.classList.contains(className);
+        }
+    }
+    getNavbarItems() {
+        const navItems = this.el.querySelectorAll('ifx-navbar-item');
+        return navItems;
+    }
+    getNavBarItem() {
+        const navItem = this.el.shadowRoot.querySelector('.navbar__item');
+        return navItem;
+    }
+    getSubLayerMenu() {
+        const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu');
+        return subLayerMenu;
+    }
+    relocateItemsToFirstlayer(navItems) {
+        navItems.forEach(item => {
+            item.setAttribute('slot', 'first__layer');
+        });
+    }
+    setHref() {
+        if (this.href.toLowerCase().trim() === "") {
+            this.internalHref = undefined;
+        }
+        else
+            this.internalHref = this.href;
+    }
+    checkIfItemIsNested() {
+        const parentElement = this.el.parentElement;
+        if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM'
+            || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {
+            this.isMenuItem = true;
+            return;
+        }
+        else {
+            this.isMenuItem = false;
+        }
+    }
+    checkIfItemHasChildren() {
+        const sidebarItems = this.getNavbarItems();
+        if (sidebarItems.length !== 0) {
+            this.hasChildNavItems = true;
+        }
+        else {
+            this.hasChildNavItems = false;
+        }
+    }
+    async setItemSideSpecifications() {
+        const menuItem = this.el;
+        const itemMenu = this.getItemMenu();
+        const slotValue = menuItem.getAttribute('slot');
+        if (slotValue.toLowerCase().trim() === "right-item") {
+            this.handleClassList(itemMenu, 'add', 'rightSideItemMenu');
+        }
+        return true;
+    }
+    getItemMenu() {
+        const menu = this.el.shadowRoot.querySelector('.navbar-menu');
+        return menu;
+    }
+    closeItemMenu() {
+        const itemMenu = this.getItemMenu();
+        const menuItem = this.getNavBarItem();
+        if (itemMenu) {
+            this.handleClassList(itemMenu, 'remove', 'open');
+            this.handleClassList(menuItem, 'remove', 'open');
+        }
+    }
+    getItemMenuPosition() {
+        let parentElement = this.el;
+        while (parentElement) {
+            if (parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {
+                return 'left';
+            }
+            parentElement = parentElement.parentElement || parentElement.getRootNode().host;
+        }
+        return 'right';
+    }
+    toggleItemMenu() {
+        const slotName = this.el.getAttribute('slot');
+        if (slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') {
+            this.openSubLayerMenu();
+        }
+        if (!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer') {
+            const itemMenu = this.getItemMenu();
+            if (this.hasChildNavItems) {
+                const menuItem = this.getNavBarItem();
+                this.handleClassList(itemMenu, 'toggle', 'open');
+                this.handleClassList(menuItem, 'toggle', 'open');
+            }
+        }
+    }
+    handleNestedLayerMenu(e) {
+        if (this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) {
+            const itemMenu = this.getItemMenu();
+            const menuPosition = this.getItemMenuPosition();
+            if (e.type.toUpperCase() === 'MOUSEENTER') {
+                this.handleClassList(itemMenu, 'add', 'open');
+                if (menuPosition === 'left') {
+                    this.handleClassList(itemMenu, 'add', 'left');
+                }
+                else if (menuPosition === 'right') {
+                    this.handleClassList(itemMenu, 'add', 'right');
+                }
+            }
+            if (e.type.toUpperCase() === 'MOUSELEAVE') {
+                this.handleClassList(itemMenu, 'remove', 'open');
+                if (menuPosition === 'left') {
+                    this.handleClassList(itemMenu, 'remove', 'left');
+                }
+                else if (menuPosition === 'right') {
+                    this.handleClassList(itemMenu, 'remove', 'right');
+                }
+            }
+        }
+    }
+    handleLabelWrapper() {
+        const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');
+        const navItem = this.getNavBarItem();
+        const slot = labelWrapper.querySelector('slot');
+        if (!slot.assignedNodes().length) {
+            navItem.classList.add('removeLabel');
+        }
+        else if (this.showLabel && navItem.classList.contains('removeLabel')) {
+            navItem.classList.remove('removeLabel');
+        }
+    }
+    handleItemGap() {
+        const innerContentWrapper = this.el.shadowRoot.querySelector('.navbar__item');
+        const numberIndicatorWrapper = innerContentWrapper.querySelector('.navbar__container-right-content-navigation-item-icon-wrapper');
+        if (this.numberIndicator || this.dotIndicator) {
+            this.handleClassList(numberIndicatorWrapper, 'add', 'no-gap');
+        }
+        else {
+            this.handleClassList(numberIndicatorWrapper, 'remove', 'no-gap');
+        }
+    }
+    removeEmptyItem() {
+        const hostElement = this.el.shadowRoot.host;
+        if (!this.showLabel && !this.icon) {
+            this.handleClassList(hostElement, 'add', 'hidden');
+        }
+    }
+    render() {
+        return (h("div", { key: '98a3a5584ce6970b42c1362533aeceb82009e91b', class: "container", onMouseLeave: e => this.handleNestedLayerMenu(e), onMouseEnter: e => this.handleNestedLayerMenu(e) }, h("div", { key: '21eeccfc5a01721c14033b98c3ebe38522ba6ab9', class: "sub__layer-back-button" }, h("div", { key: '08825ed5d7c6c3a1e0dd582a7e6528b201240959', class: "back__button-wrapper", onClick: () => this.returnToFirstLayer() }, h("ifx-icon", { key: '5763b65a915c8bf0d554e79cae52dabe8b810986', icon: "arrow-left-16" }), h("span", { key: '300ddc647f93f8ef78921ba67ce12233affe3cb4' }, "Back"))), h("a", { key: 'dab2a111f7170f50b30de5824cdcdd471899adfc', href: this.internalHref, target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : ""} ${!this.showLabel ? 'removeLabel' : ""} ${this.isMenuItem ? 'menuItem' : ""} ${this.hasChildNavItems ? 'isParent' : ""}` }, h("div", { key: 'f2c6800d93b7607cf2952e63aa5ab34ecaae48be', class: "inner__content-wrapper" }, h("div", { key: 'fafd3d1472c2dfca443e655e1acd2dc697489621', class: `navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? "removeWrapper" : ""}` }, this.icon && h("ifx-icon", { key: '6f00f8d13482ab9ecd74db4de66f4367abcd255e', icon: this.icon }), this.icon && !this.showLabel && !isNaN(this.numberIndicator) &&
+            h("div", { key: 'f0d7d1be990c6583be95b5d65569381c85195bff', class: "number__indicator-wrapper" }, h("ifx-number-indicator", { key: 'd0139e514dadeefdc09f2ace9ba1bc754a42ecfc' }, this.numberIndicator)), this.icon && !this.showLabel && !this.numberIndicator && this.dotIndicator &&
+            h("div", { key: '1d616918f156bc28a91c9e734b04df5facc45ee8', class: "dot__indicator-wrapper" })), this.itemPosition === 'left'
+            && this.hasChildNavItems
+            && this.isMenuItem &&
+            h("div", { key: 'c23a19ba3b2b6fe3c5eb79a3a004c0d0107d682b', class: "menuItemLeftIconWrapper" }, h("ifx-icon", { key: '373e318e386e976213fbd9592a37b7afa7488d7b', icon: "chevron-left-12" })), h("span", { key: 'a4463d2ee853ca5731b276f14c9e6cbe3b7f8108', class: "label__wrapper" }, h("slot", { key: 'd682377d8e98e612bf2597e4b749c0ff18b10774' }))), this.showLabel && this.numberIndicator && !isNaN(this.numberIndicator) ?
+            h("div", { class: "number__indicator-wrapper" }, h("ifx-number-indicator", null, this.numberIndicator)) : "", this.showLabel && !this.numberIndicator && this.dotIndicator ?
+            h("div", { class: "dot__indicator-wrapper" }) : "", h("div", { key: '0dade0d6eb4062bd0e31804ff501a93711dccd43', class: `navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : "hide"}` }, h("ifx-icon", { key: '8ec6bff717321e37a8e36ae8623f9d9cd5506ed0', icon: "chevron-down-12" })), h("div", { key: '6d75cd61b28fa198e55436d0b783725943c5d314', class: `menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : "hide"}` }, h("ifx-icon", { key: '26c1d540a395b96c4d699bb050065f7e104d263b', icon: "chevron-right-12" }))), this.hasChildNavItems && !this.isSidebarMenuItem && h("ul", { key: '35c6a68f085200d3b1c3da2d994448b87201d7f9', class: 'navbar-menu' }, " ", h("slot", { key: 'a7fff45b205883f0a7e83a1d2b98f52e40e3caa0', name: "first__layer" }), " "), this.isSidebarMenuItem && h("ul", { key: '1af92bb3811e89b576b7794e214d750bb7e340c2', class: 'sub__layer-menu' }, " ", h("slot", { key: '629fb9090d0382885b248ed1b98a260b969e3b43', name: "second__layer" }), " ")));
+    }
+    get el() { return getElement(this); }
+};
+NavbarItem.style = IfxNavbarItemStyle0;
+
+export { NavbarItem as ifx_navbar_item };
+
+//# sourceMappingURL=ifx-navbar-item.entry.js.map