npm - @infineon/infineon-design-system-stencil - Versions diffs - 32.8.3--canary.1801.9e100fbdf7acebdfe2817708727a43d1a0b9be13.0 → 32.9.0--canary.1690.ef94902073425116647c9c7d684cb0b9cb0173a2.0 - Mend

@infineon/infineon-design-system-stencil 32.8.3--canary.1801.9e100fbdf7acebdfe2817708727a43d1a0b9be13.0 → 32.9.0--canary.1690.ef94902073425116647c9c7d684cb0b9cb0173a2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (285) hide show

package/dist/components/{p-62623d25.js → p-db280209.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
 import { d as defineCustomElement$3 } from './p-e7551b24.js';
 import { d as defineCustomElement$2 } from './p-3954dc5f.js';
-import { d as defineCustomElement$1 } from './p-b13e8e96.js';
+import { d as defineCustomElement$1 } from './p-d092c793.js';
 const paginationCss = "@charset \"UTF-8\";:root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}";
 const IfxPaginationStyle0 = paginationCss;
@@ -159,7 +159,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'b8dda1714435952c7adf00e9b480e06f0d0a4b00', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '448d3ebb3b41a20a345a61c2d335052097824deb', class: 'items__per-page-wrapper' }, h("div", { key: '5c33123d7d66094eeb631bd965c036c350bb2ca2', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '020d543b8159f37b2e69dacb5a56b6841f25f2eb', class: 'items__per-page-field' }, h("ifx-select", { key: 'a75df9c097738daca9b930843b600469f1946722', 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: '01b00c516332ad10de30dd92e059fec58e9357cf', class: 'items__total-wrapper' }, h("div", { key: '70e50c9b90608c2bf697c3e897190522e08757be', class: 'page__numbers-wrapper' }, h("div", { key: '549dd32dd6b84482cf2ae43be43c055a8970c10b', class: "pagination" }, h("ifx-icon-button", { key: 'b1d80538b4698c75579baedc9f88ec0694d9ccb5', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: 'cace7369c96e6b0bb9813c5ce6d8a92fd9b2a355' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '132ab46a2a3a37a7489cd1190bc0d255b70bdf83', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: '28020981686b2a32bf9b401bb33335254046b6af', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'f01128bd9ac5ae78e0e81f457031e853d5775283', class: 'items__per-page-wrapper' }, h("div", { key: '7a7a46f6377886af8dbaa48a50cbf45b0c31ec45', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0dbe7da930e8b694cc10e3ccd971721bd2099c74', class: 'items__per-page-field' }, h("ifx-select", { key: '594c244d8e3007c982cce28cdb2a140ff84fa98a', 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: '41e29a9570a38ad84639bfaccdbae35e63369e82', class: 'items__total-wrapper' }, h("div", { key: 'ea0de6169ec9bf2f52b188cb08ad9c30acbe40af', class: 'page__numbers-wrapper' }, h("div", { key: 'ef97f91d487cb04157ac259c38b586a14f7b298b', class: "pagination" }, h("ifx-icon-button", { key: 'c5f7049f4e0b7b2e1f11166b7e72ca165878a4dc', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '1825c56cd64c3e8688352ca1ecc031d60264adbc' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '7cc205cc4d5f5c8ee8d8f0917c5634670daba0fe', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     get el() { return this; }
     static get style() { return IfxPaginationStyle0; }
@@ -203,4 +203,4 @@ function defineCustomElement() {
 export { Pagination as P, defineCustomElement as d };
-//# sourceMappingURL=p-62623d25.js.map
+//# sourceMappingURL=p-db280209.js.map

package/dist/components/{p-62623d25.js.map → p-db280209.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-62623d25.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n font-family: var(--ifx-font-family);\n\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label {\n color: #1D1D1D;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n }\n\n & .items__per-page-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n & ifx-select {\n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item {\n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active {\n background-color: #0A8276;\n\n & span {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover:not(.active) {\n background-color: #ddd;\n\n }\n\n &:active:not(.active) {\n background-color: #575352;\n }\n\n & span {\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type {\n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type {\n margin-left: 12px;\n }\n}\n\na {\n padding: 8px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) {\n & a {\n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a {\n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active {\n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n align-items: center;\n }\n}\n\n.prev,\n.next {\n &.disabled {\n cursor: default;\n\n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n\n.prev {\n margin-right: 2.5px;\n}\n\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n\n @if($before) {\n margin-right: 6px;\n }\n\n @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n\n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n\n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n\n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n\n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n\n// }\n\n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n\n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n\n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n\n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n\n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n\n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n\n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n\n\n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n\n &:first-child,\n &.active-sibling,\n &.active,\n &.active+li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n\n &~li {\n // Start out with all siblings hidden\n display: none;\n\n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true);\n }\n\n // Show ellipsis after the next one\n &.active+li:after {\n @include ellipsis(false);\n }\n\n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n\n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n\n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n &:before,\n &:after {\n display: none !important;\n }\n }\n }\n\n &.active,\n &~li.active {\n\n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n\n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n\n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n\n\n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n\n // \"active\" should never show ellipsis\n &:before,\n &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() internalItemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n @Prop() itemsPerPage: any[] \| string;\n @State() filteredItemsPerPage: any[]\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n if(e.detail) {\n this.internalItemsPerPage = parseInt(e.detail.label)\n } else { \n this.internalItemsPerPage = 10;\n }\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;\n const itemsPerPage = this.internalItemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n filterOptionsArray() { \n let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);\n for(let i = 0; i < obj.length; i++) { \n let item = obj[i];\n if(!item.label) { \n item.label = item.value;\n }\n }\n this.filteredItemsPerPage = obj;\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n this.filterOptionsArray()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.internalItemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options={this.filteredItemsPerPage} >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"p-db280209.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n font-family: var(--ifx-font-family);\n\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label {\n color: #1D1D1D;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n }\n\n & .items__per-page-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n & ifx-select {\n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item {\n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active {\n background-color: #0A8276;\n\n & span {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover:not(.active) {\n background-color: #ddd;\n\n }\n\n &:active:not(.active) {\n background-color: #575352;\n }\n\n & span {\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type {\n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type {\n margin-left: 12px;\n }\n}\n\na {\n padding: 8px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) {\n & a {\n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a {\n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active {\n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n align-items: center;\n }\n}\n\n.prev,\n.next {\n &.disabled {\n cursor: default;\n\n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n\n.prev {\n margin-right: 2.5px;\n}\n\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n\n @if($before) {\n margin-right: 6px;\n }\n\n @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n\n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n\n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n\n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n\n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n\n// }\n\n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n\n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n\n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n\n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n\n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n\n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n\n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n\n\n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n\n &:first-child,\n &.active-sibling,\n &.active,\n &.active+li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n\n &~li {\n // Start out with all siblings hidden\n display: none;\n\n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true);\n }\n\n // Show ellipsis after the next one\n &.active+li:after {\n @include ellipsis(false);\n }\n\n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n\n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n\n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n &:before,\n &:after {\n display: none !important;\n }\n }\n }\n\n &.active,\n &~li.active {\n\n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n\n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n\n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n\n\n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n\n // \"active\" should never show ellipsis\n &:before,\n &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() internalItemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n @Prop() itemsPerPage: any[] \| string;\n @State() filteredItemsPerPage: any[]\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n if(e.detail) {\n this.internalItemsPerPage = parseInt(e.detail.label)\n } else { \n this.internalItemsPerPage = 10;\n }\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;\n const itemsPerPage = this.internalItemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n filterOptionsArray() { \n let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);\n for(let i = 0; i < obj.length; i++) { \n let item = obj[i];\n if(!item.label) { \n item.label = item.value;\n }\n }\n this.filteredItemsPerPage = obj;\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n this.filterOptionsArray()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.internalItemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options={this.filteredItemsPerPage} >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}

package/dist/components/{p-e7707c2b.js → p-fc09ad6e.js} RENAMED Viewed

@@ -28,8 +28,8 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         }
     }
     render() {
-        return (h(Host, { key: '13f70e0073c405d09ebab6567d0c0729be501764' }, h("div", { key: '67959ca0f9ed3f892d73a79c86183b2c0802c515', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: 'da287dee65a5bf2960167b0b87a603107190fac8', class: "ifx-notification__icon" }, h("ifx-icon", { key: '4e766f32e0ec6d059fc9784745e533b16e577a54', icon: this.icon })), h("div", { key: '8356a67bb2b878164a1269f51563c6796aaad919', class: "ifx-notification__body" }, h("div", { key: '713a6c1b3948058817eb3fc730f43155a169cdaa', class: "ifx-notification__slot" }, h("slot", { key: 'f33ffd81c74fe5def5a18fb1d56619f0cce9c252' })), this.linkText && this.linkHref &&
-            h("div", { key: '638730c05712d9d762f56c18390296da07b58081', class: "ifx-notification__link" }, h("ifx-link", { key: 'ad0dd0f6451ecce51f97f84f3737b173e162af6f', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: 'ba59da60d8661ac92a606c5e2c483e0efab7a0c3', icon: "arrow-right-16" })))))));
+        return (h(Host, { key: '48ae3443dc099417baaaafbaedfb7735eab8679f' }, h("div", { key: 'cec3b3b76f3baaae2b7b7e8a8cef32174ebfe79f', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: 'c0616bba0fb9a52eaeb56b34fceab9e7584001ce', class: "ifx-notification__icon" }, h("ifx-icon", { key: 'd390856f0339ffb1a86c17560f4d1b14acb95698', icon: this.icon })), h("div", { key: '744ffc85e2b629e0f1df727ec44f8dedceee9604', class: "ifx-notification__body" }, h("div", { key: 'a432cb13cf9fc867eaaa726c172e554b313e9a4a', class: "ifx-notification__slot" }, h("slot", { key: 'ca7d41c48c623deef0df3a303aa5e0dc41d558dd' })), this.linkText && this.linkHref &&
+            h("div", { key: '3f34bb836df2aa45118d0046bb0cf0b0d77ed7f4', class: "ifx-notification__link" }, h("ifx-link", { key: 'af5e714dfef66cdce1acfd912463fe25866f9b5c', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '9ad209bc71b30df19529ccc14d7c997a70bbeb4f', icon: "arrow-right-16" })))))));
     }
     static get style() { return IfxNotificationStyle0; }
 }, [1, "ifx-notification", {
@@ -65,4 +65,4 @@ function defineCustomElement() {
 export { Notification as N, defineCustomElement as d };
-//# sourceMappingURL=p-e7707c2b.js.map
+//# sourceMappingURL=p-fc09ad6e.js.map

package/dist/components/{p-e7707c2b.js.map → p-fc09ad6e.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~e7707c2b~~.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}
1	+ {"file":"p-fc09ad6e.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 CHANGED Viewed

@@ -173,7 +173,7 @@ const Template = class {
         }
     }
     render() {
-        return (h("div", { key: '1718c08bf77e39ea233584ffd8820f00a1d17f3c' }, this.isTemplatePage
+        return (h("div", { key: '669f84cad2fce5845e79f7556a64e9a566bd8918' }, 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 CHANGED Viewed

@@ -178,7 +178,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (h(Host, { key: '50fb2ca2aa8f4761d78a1f5512ee6993696731e7' }, h("div", { key: '0b38c17440f92272d55662b9c689c220206038af', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '4c801f8c7bb383c18ca87ed67428b97cf96232ec', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'f9d1f9c00a9f0ba18b4ca0a68bd8d3fe41f2838a' }, h("div", { key: '635616c2f57c75673b8dd37275d75d8a3fd769c6', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '9aaa22474835b8f84fef538f2488d7fd9f2dfc69', 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 CHANGED Viewed

@@ -508,7 +508,7 @@ const Pagination = class {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'b8dda1714435952c7adf00e9b480e06f0d0a4b00', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '448d3ebb3b41a20a345a61c2d335052097824deb', class: 'items__per-page-wrapper' }, h("div", { key: '5c33123d7d66094eeb631bd965c036c350bb2ca2', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '020d543b8159f37b2e69dacb5a56b6841f25f2eb', class: 'items__per-page-field' }, h("ifx-select", { key: 'a75df9c097738daca9b930843b600469f1946722', 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: '01b00c516332ad10de30dd92e059fec58e9357cf', class: 'items__total-wrapper' }, h("div", { key: '70e50c9b90608c2bf697c3e897190522e08757be', class: 'page__numbers-wrapper' }, h("div", { key: '549dd32dd6b84482cf2ae43be43c055a8970c10b', class: "pagination" }, h("ifx-icon-button", { key: 'b1d80538b4698c75579baedc9f88ec0694d9ccb5', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: 'cace7369c96e6b0bb9813c5ce6d8a92fd9b2a355' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '132ab46a2a3a37a7489cd1190bc0d255b70bdf83', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: '28020981686b2a32bf9b401bb33335254046b6af', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'f01128bd9ac5ae78e0e81f457031e853d5775283', class: 'items__per-page-wrapper' }, h("div", { key: '7a7a46f6377886af8dbaa48a50cbf45b0c31ec45', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0dbe7da930e8b694cc10e3ccd971721bd2099c74', class: 'items__per-page-field' }, h("ifx-select", { key: '594c244d8e3007c982cce28cdb2a140ff84fa98a', 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: '41e29a9570a38ad84639bfaccdbae35e63369e82', class: 'items__total-wrapper' }, h("div", { key: 'ea0de6169ec9bf2f52b188cb08ad9c30acbe40af', class: 'page__numbers-wrapper' }, h("div", { key: 'ef97f91d487cb04157ac259c38b586a14f7b298b', class: "pagination" }, h("ifx-icon-button", { key: 'c5f7049f4e0b7b2e1f11166b7e72ca165878a4dc', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '1825c56cd64c3e8688352ca1ecc031d60264adbc' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '7cc205cc4d5f5c8ee8d8f0917c5634670daba0fe', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -8,7 +8,7 @@ const Faq = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '11e1c3b24c2b609d92aaa8385c87d8e9bf0e86e5', class: 'container' }, h("ifx-accordion", { key: 'bedcf9c8f32b81ea27ee4b78d710e81648d54ff2' }, h("ifx-accordion-item", { key: '835aa2ce26635726c9d81bfe7dde6e1788396b03', 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: '94055bdd97f878689cbe4dc83eb997279190e6b3', 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: '37aa59d4c8994be76df7c306a8b888e2ed70188d', 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: 'bd09cfcb30cf3ae2c0bd36e5d0429616cfbba6ac', 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: '84912ca7474077e065c7b12e3427d79e52256be7', 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: '78016d6f4d656ee4ec78fab13e87a019e2ab0c10', class: 'container' }, h("ifx-accordion", { key: 'b61e69ee66a8efa42cff9905c00ac0b72e7572cb' }, h("ifx-accordion-item", { key: '07ed56f1848af52590aa7252aff7061da1238133', 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: '0125d6de01394e383781659288201b1f01ec6287', 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: '6276e2194088fea270dd0241379bdd5384dc4776', 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: 'bd06c5d5ef5022ff7b6776d7681a9fd2081b32a5', 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: 'add48d505711028c2be543f9c0a56737d6cea41a', 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 CHANGED Viewed

@@ -49,8 +49,8 @@ const FilterAccordion = class {
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (h("div", { key: '7754d7c36bb9eea79371f037410ca75afcb54664', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'ec826e4dee812a75e9c87bc62a1dcdcb7e38a58b', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '145fbd10d3c65cfcbec9ecca6c3de349819f79b6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '863846a7a948d511c1e034066b72eea93183095b', class: "text" }, h("span", { key: 'a17db14df54f36ee59208780312e0c57f5021702' }, this.filterGroupName), h("ifx-number-indicator", { key: '4b1ef57b8b17bdd69987174dad5c9d4582ae2337' }, this.count)), h("ifx-icon", { key: '6622d432718cf216b66070ed8c1f64c28c36a359', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'b7d50585c32cabafc9a492b04fc471bb9ac59aad', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '41416437fa435de25ddddf25782ec09543a30082', class: "filter-accordion-container" }, h("slot", { key: 'e9ad9abd5453da697f27196fd7795f1fad25adf2', name: "list" }))));
+        return (h("div", { key: '629ff7cd290839013e522e6051375a3c0c0d6adc', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'bbecee7853dd8b29ba2fdf996d733c1b8ee88122', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '24b75a1554874f9075496604dbdf53c6da4bf39c', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '0350a1f14bf769cb24f0380d126e83a8e28d56e6', class: "text" }, h("span", { key: 'ee8511c00fbc73b0ed799d91b569e7b273f79e93' }, this.filterGroupName), h("ifx-number-indicator", { key: 'e6e729cf9a4aa2232c4769f7c0aa81eedd83d6f0' }, this.count)), h("ifx-icon", { key: 'c11cb1d518cbc9862249d6826fa2e43259546a8f', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '2ce76a3a593d990467f69586e19ccbd13f8c0633', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: 'f03e2083a7b76145674896766df67c533f5e50d1', class: "filter-accordion-container" }, h("slot", { key: 'aaa6d9c51658d77c67426ab72d9923f2bb47da61', name: "list" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -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: 'b117a185a20cbc45e153b9752a887c3bb6d17429' }, h("div", { key: 'f8796d66e265e9b5875c8809d2a71938031d951a', class: "search-container" }, h("slot", { key: 'b6855372f8dce7052467a7473078d625244c3740', name: "filter-search" }), " "), h("div", { key: '938aee9e626ccfb80d4f3f75b30f3e9112323f28', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '484f7bcf983e77d6d47b2dfceb33d6dd036a47d4', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'd587fe0e1d05f5a7a70ae8e61022bbf35376faed', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '5ca035998b3246b0e0a5aad7612c63b063a5022f', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: 'e431941014bc2484b77548561545d55a2b1fe531' }, h("div", { key: 'ecba3ad88721cd21d85dbb21d5ce240f4a73882d', class: "search-container" }, h("slot", { key: '8fd8b15b99b2751ca46244eab417117cad8aadce', name: "filter-search" }), " "), h("div", { key: '9b05f4dc5ff393349db76fa9dd0980c42a0d29dd', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '8359fd986fc5501acf4f22b4c463f7fa44a4e50d', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '7d9665eeb20da87890ae5883d62bb805d26a4014', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '3b79eaf99d0386aa4342261c1349f795a32af827', icon: "filter-16" }), "More filters"))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -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: 'cfe7b2a12467e7c3495a24abb05d89accde5e860', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '89db35bb808e482336fcb4c717fec5a28bf9c6fb', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: 'be38824cd344272f3802b072e66951774163a127', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: '25e3682646f9df4b98f4dfa443094a0a67e057c9', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '2c100373f6d18a202fb8773a5043da8c5bf7aef8', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '79dfefc58eb7c9358c30b4efb228972259f54cd1', 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 CHANGED Viewed

@@ -125,7 +125,7 @@ const IfxFilterTypeGroup = class {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (h(Host, { key: 'edbac51db6b5ae00d8e7a9ba1a53962ebb84b87b' }, h("div", { key: '5592b17c7366491ca728386c533f2adfaa34cf4e', class: "filter-type-group" }, h("slot", { key: 'eb61d5f7b0456407b7a34ce9eb9bdbdeee453030', name: "filter-search" }), h("slot", { key: '0d7dea3702039baac775d7567179806aa7e12be8', name: "filter-accordion" }))));
+        return (h(Host, { key: '916b3a7829bad23ceedfd337babba88ac0edb439' }, h("div", { key: 'fd5c72ecc58cf511d172d6626637899b784d3595', class: "filter-type-group" }, h("slot", { key: '92a3764d6c22f1a04bc5c733cde51e19f372ad1c', name: "filter-search" }), h("slot", { key: '6531bf319095ffeda45fb01a1647ec67cd4d76fd', name: "filter-accordion" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -21,7 +21,7 @@ const ListEntry = class {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (h("div", { key: '09f64beb713acdba449f1f48573220b17d45ec54', 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: 'e70b6254a413c53beeb3d50f2309ef546b99747d', 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c77e25a0.js';
-const navbarItemCss = ".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 .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{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.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 navbarItemCss = ".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 .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 .number__indicator-wrapper{position:absolute;top:-16px;right:-12px}.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{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.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 {
@@ -154,6 +154,7 @@ const NavbarItem = class {
         this.checkIfItemHasChildren();
     }
     componentDidLoad() {
+        this.handleLabelWrapper();
         if (this.hasChildNavItems) {
             const navItems = this.getNavbarItems();
             this.relocateItemsToFirstlayer(navItems);
@@ -297,11 +298,23 @@ const NavbarItem = class {
             }
         }
     }
+    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');
+        }
+    }
     render() {
-        return (h("div", { key: '5b65be83f2cfb07f308a9b99205b15bbcfe1e08b', class: "container", onMouseLeave: e => this.handleNestedLayerMenu(e), onMouseEnter: e => this.handleNestedLayerMenu(e) }, h("div", { key: '20812f3741980e59222bb4d637d72be96a16b619', class: "sub__layer-back-button" }, h("div", { key: '66a8d7ca5525202927e86578c58e5008e568b920', class: "back__button-wrapper", onClick: () => this.returnToFirstLayer() }, h("ifx-icon", { key: '802c01c949e123218f5c8fb36fc9b4911d7ab924', icon: "arrow-left-16" }), h("span", { key: '9f1581bc59c8c56515b1a4e51a0b7144d99d789f' }, "Back"))), h("a", { key: '96f327e7a1eae82b1eba021594523e7996df5833', 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: 'a47c03718e64b435ff1dc6342aa8e88d68b083a0', class: "inner__content-wrapper" }, h("div", { key: 'f65c2c121f141e18ad94da961c13983b3bbdb0a1', class: `navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? "removeWrapper" : ""}` }, this.icon && h("ifx-icon", { key: '0e17c1d706ec06c2e8ddcd1a9b9f6fae4ce355ab', icon: this.icon })), this.itemPosition === 'left'
+        return (h("div", { key: 'a89f95c64a43581c160800e0237db86a1b1c8d69', class: "container", onMouseLeave: e => this.handleNestedLayerMenu(e), onMouseEnter: e => this.handleNestedLayerMenu(e) }, h("div", { key: 'a327528a2765e12fe329fb1d4e576890d923dd85', class: "sub__layer-back-button" }, h("div", { key: 'c09748e0aa238da020e91a58ec063c3a5d12f6e0', class: "back__button-wrapper", onClick: () => this.returnToFirstLayer() }, h("ifx-icon", { key: '8b397b1d833488b028170f3487a1338cf25445e1', icon: "arrow-left-16" }), h("span", { key: 'ec1f5440f2282ce9a5c8acbb3a44045a2a686ddb' }, "Back"))), h("a", { key: '9db42da83160a1964c230cdec7685372ff3ae680', 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: '617f035522128ef8417af0739d01c0a0fb67ef94', class: "inner__content-wrapper" }, h("div", { key: '2fabaedc6baa62a68810372746fe47c030c140a8', class: `navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? "removeWrapper" : ""}` }, this.icon && h("ifx-icon", { key: '37e05072ae4dd21f490a929d9f14c71eb2ca252e', icon: this.icon }), this.icon && !isNaN(this.numberIndicator) &&
+            h("div", { key: '8d1c06ca03970d3aaffec7eebf961760bef1fcdb', class: "number__indicator-wrapper" }, h("ifx-number-indicator", { key: 'e9409aa7e82bcb2f112d10ebfab54caa0535bedb' }, this.numberIndicator))), this.itemPosition === 'left'
             && this.hasChildNavItems
             && this.isMenuItem &&
-            h("div", { key: 'aefd4a4b2b9af089ecb5c6d726a763a036d1e98c', class: "menuItemLeftIconWrapper" }, h("ifx-icon", { key: '05dce48bb77ee8bb64a558285d0254067c38a61e', icon: "chevron-left-12" })), h("span", { key: 'be839503bff15e5989eb1a00039ea15f21af3472', class: "label__wrapper" }, h("slot", { key: 'dfd429829b5de74085d4fb57220a9a853378c707' }))), h("div", { key: '348f2bf8cab8fd31c157c492946663e0f7a5863f', class: `navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : "hide"}` }, h("ifx-icon", { key: '19b283e115d745655b65b2034ff4f16fe9852e9d', icon: "chevron-down-12" })), h("div", { key: '4a38f100fa37457394da5b983283d090dff3f0c8', class: `menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : "hide"}` }, h("ifx-icon", { key: '59c0ddcdf860b9fb61175dd6c2d6e3998ae266b3', icon: "chevron-right-12" }))), this.hasChildNavItems && !this.isSidebarMenuItem && h("ul", { key: '6c605f96e45dc758f4f35e564c5f8ee34480f07b', class: 'navbar-menu' }, " ", h("slot", { key: 'cfa160cbffee10a913b2aba13692b9404b3f7bff', name: "first__layer" }), " "), this.isSidebarMenuItem && h("ul", { key: 'db20f6aaca4363add49777a75c528f6a2290c1cc', class: 'sub__layer-menu' }, " ", h("slot", { key: '1e5d7b58c5b1ebeaf8e664338f4e23ab2b6dfbbc', name: "second__layer" }), " ")));
+            h("div", { key: '0a5ae64a038d89f7056131caf2b650b60e92770c', class: "menuItemLeftIconWrapper" }, h("ifx-icon", { key: '2920b8c1b4acbbf801503073cf57a3a6299de770', icon: "chevron-left-12" })), h("span", { key: 'b1e84d2a861df9e3cbc20e0821c46454492489e8', class: "label__wrapper" }, h("slot", { key: 'd77a186fc53284326b0e16d9210fb3c39883a713' }))), h("div", { key: 'b1dc34626f143698b02e81c14e4ff0e2fe7eca8f', class: `navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : "hide"}` }, h("ifx-icon", { key: 'd8ad966eb16274d64b77adbeb07b1598c2b6690d', icon: "chevron-down-12" })), h("div", { key: 'c7932aa5fbbcc5e592fc2a775e2d1f127ec8db57', class: `menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : "hide"}` }, h("ifx-icon", { key: 'e95b3cd635e139e5199452bdbd0efc60edb2de3f', icon: "chevron-right-12" }))), this.hasChildNavItems && !this.isSidebarMenuItem && h("ul", { key: '64f11f6f3c3b3cc9f0bba825731e56ff3b22a767', class: 'navbar-menu' }, " ", h("slot", { key: '734eb7a5a42ed7d42b38badd71f2da9535e1a160', name: "first__layer" }), " "), this.isSidebarMenuItem && h("ul", { key: '0e97394b86559a9512ed713711d0f26c9691e062', class: 'sub__layer-menu' }, " ", h("slot", { key: '3a667a9468a08821a8ebf46189526ec07909ed6a', name: "second__layer" }), " ")));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ifx-navbar-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-navbar-item.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,67IAA67I,CAAC;AACp9I,4BAAe,aAAa;;MCOf,UAAU;IANvB;;;QASU,cAAS,GAAY,IAAI,CAAC;QAC1B,SAAI,GAAW,EAAE,CAAA;QACjB,SAAI,GAAW,EAAE,CAAA;QACjB,WAAM,GAAW,OAAO,CAAC;QACzB,iBAAY,GAAY,IAAI,CAAC;QAC5B,iBAAY,GAAW,EAAE,CAAA;QACzB,eAAU,GAAY,KAAK,CAAC;QAC5B,qBAAgB,GAAY,KAAK,CAAC;QAClC,sBAAiB,GAAY,KAAK,CAAC;KAuX7C;IAlXC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,IAAG,QAAQ,EAAE;YACX,IAAG,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;gBACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;iBACtB;aACF;SACF;KACF;IAGD,MAAM,aAAa;QACjB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KAChC;IAGD,MAAM,aAAa;QACjB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;KAC5B;IAGD,MAAM,cAAc,CAAC,MAAM;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAA;QAClD,IAAG,QAAQ,EAAE;YACX,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;YAC/C,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAA;SAC3D;KACF;IAGD,MAAM,mCAAmC;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACvC,IAAG,YAAY,EAAE;YACf,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC,CAAA;YACnF,IAAG,oBAAoB,EAAE;gBACvB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;gBACvC,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;gBACvD,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAA;gBAC7D,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;gBACvD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAC,CAAC,CAAA;aACrE;SACF;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAA;QAClE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAE9B,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;YACjD,QAAQ,CAAC,CAAC,CAAC,CAAC,mCAAmC,EAAE,CAAA;SAClD;KACF;IAED,qBAAqB;QACnB,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAA;QACtF,OAAO,kBAAkB,CAAA;KAC1B;IAGD,MAAM,oBAAoB,CAAC,SAAS,EAAE,SAAS;QAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAC9C,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACvD,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAA;QAC7D,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAA;QACrD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAA;KACpE;IAED,gBAAgB;QACd,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;YACvD,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;YACvC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;YAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;YAE7C,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YACvD,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YACnD,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAA;YAC7D,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YAEjD,IAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE;gBAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAC,CAAC,CAAA;gBACpG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAA;aACvD;iBAAM;gBACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAC,CAAC,CAAA;aACrE;SACF;KACF;IAGD,MAAM,gBAAgB;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,UAAU,CAAC,CAAA;QACnD,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC/C,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACvD;KACF;IAGD,MAAM,iCAAiC;QACrC,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAE9C,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC1D,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QAChE,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAA;QAEjE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC,CAAA;QAE1D,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAA;QACnE,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAElD,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;YAChD,QAAQ,CAAC,CAAC,CAAC,CAAC,iCAAiC,EAAE,CAAA;YAC/C,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAA;YAC9B,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAA;SACjC;KACF;IAED,iBAAiB;QACf,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAA;QAC9F,OAAO,wBAAwB,CAAC;KACjC;IAED,yBAAyB;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAC1E,OAAO,SAAS,CAAC;KAClB;IAGD,MAAM,kBAAkB;QACtB,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC/C,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAE7C,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC1D,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QAChE,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QACpD,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACvD;QAED,IAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE;YAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,qBAAqB,EAAC,CAAC,CAAA;YACxG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,UAAU,CAAC,CAAA;SACpD;aAAM;YACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAC,CAAC,CAAA;SAC7D;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,EAAE,CAAA;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAA;QAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAA;KAC9B;IAED,gBAAgB;QACd,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACvC,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAA;SACzC;KACF;IAED,kBAAkB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,UAAU,EAAE,oBAAoB,CAAC,CAAA;QAC5F,IAAG,IAAI,CAAC,iBAAiB,IAAI,iBAAiB,EAAE;YAC9C,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YAC/C,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;SACpD;KACF;IAGD,MAAM,mBAAmB;QACvB,IAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC/C,IAAG,YAAY,KAAK,MAAM,EAAE;gBAC1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAA;aAC3B;iBAAM,IAAG,YAAY,KAAK,OAAO,EAAE;gBAClC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAA;aAC5B;SACF;KACF;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;QAC7B,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;SACxC;KACF;IAED,cAAc;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAA;QAC5D,OAAO,QAAQ,CAAC;KACjB;IAED,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QACjE,OAAO,OAAO,CAAC;KAChB;IAED,eAAe;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QACzE,OAAO,YAAY,CAAC;KACrB;IAED,yBAAyB,CAAC,QAAQ;QAC/B,QAAQ,CAAC,OAAO,CAAC,IAAI;YACpB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;SAC1C,CAAC,CAAA;KACH;IAED,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;SAC/B;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KACtC;IAED,mBAAmB;QACjB,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QAC5C,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB;eAC1D,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,oBAAoB,EAAE;YAC/D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO;SACR;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;SACzB;KACF;IAED,sBAAsB;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC3C,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SAC/B;KACF;IAGD,MAAM,yBAAyB;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,MAAM,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAE/C,IAAG,SAAS,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,YAAY,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAA;SAC3D;QAED,OAAO,IAAI,CAAC;KACb;IAED,WAAW;QACT,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;KACb;IAED,aAAa;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACrC,IAAG,QAAQ,EAAE;YACX,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YAChD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACjD;KACF;IAED,mBAAmB;QACjB,IAAI,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAC5B,OAAM,aAAa,EAAE;YACnB,IAAG,aAAa,CAAC,OAAO,KAAK,oBAAoB,IAAI,aAAa,CAAC,IAAI,KAAK,YAAY,EAAE;gBACxF,OAAO,MAAM,CAAA;aACd;YACD,aAAa,GAAG,aAAa,CAAC,aAAa,IAAI,aAAa,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC;SACjF;QACD,OAAO,OAAO,CAAA;KACf;IAED,cAAc;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAE7C,IAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,iBAAiB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE;YAC7F,IAAI,CAAC,gBAAgB,EAAE,CAAA;SACxB;QAED,IAAG,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,iBAAiB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAG;YACpH,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;YAEnC,IAAG,IAAI,CAAC,gBAAgB,EAAE;gBACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;gBACrC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;gBACjD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;aAClD;SACF;KACF;IAED,qBAAqB,CAAC,CAAC;QACrB,IAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YACtE,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;YACnC,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC/C,IAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE;gBACxC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;gBAC7C,IAAG,YAAY,KAAK,MAAM,EAAE;oBAC1B,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;iBAC9C;qBAAM,IAAG,YAAY,KAAK,OAAO,EAAE;oBAClC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;iBAC/C;aACF;YAED,IAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE;gBACxC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;gBAChD,IAAG,YAAY,KAAK,MAAM,EAAE;oBAC1B,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;iBACjD;qBAAM,IAAI,YAAY,KAAK,OAAO,EAAE;oBACnC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;iBAClD;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAG,YAAY,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,IACxH,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,IACxE,iEAAU,IAAI,EAAC,eAAe,GAAG,EACjC,sEAAiB,CACb,CACF,EACN,0DAAG,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE,KAAK,EAAK,gBAAgB,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EAAE,IAAI,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,UAAU,GAAG,EAAE,EAAE,IACxR,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAE,gEAAgE,CAAC,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,EAAE,EAAE,IAC5G,IAAI,CAAC,IAAI,IAAI,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAChD,EAEL,IAAI,CAAC,YAAY,KAAK,MAAM;eAC1B,IAAI,CAAC,gBAAgB;eACrB,IAAI,CAAC,UAAU;YAClB,4DAAK,KAAK,EAAC,yBAAyB,IAChC,iEAAU,IAAI,EAAC,iBAAiB,GAAG,CACjC,EAEN,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAQ,CACH,CACH,EAEN,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,MAAM,EAAE,IACpH,iEAAU,IAAI,EAAC,iBAAiB,GAAG,CAC/B,EAEN,4DAAK,KAAK,EAAE,4BAA4B,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,MAAM,EAAE,IACxL,iEAAU,IAAI,EAAC,kBAAkB,GAAG,CAChC,CACJ,EAEH,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,2DAAI,KAAK,EAAC,aAAa,SAAE,6DAAM,IAAI,EAAC,cAAc,GAAG,MAAM,EAC/G,IAAI,CAAC,iBAAiB,IAAI,2DAAI,KAAK,EAAC,iBAAiB,SAAE,6DAAM,IAAI,EAAC,eAAe,GAAG,MAAM,CAEvF,EACP;KACF;;;;;;;","names":[],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.navbar__item {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n font-family: var(--ifx-font-family);\n text-decoration: none;\n font-weight: 400;\n font-size: 16px;\n color: tokens.$ifxColorBaseBlack;\n\n &.hide { \n display: none;\n }\n\n &.isParent { \n gap: 8px;\n }\n\n & .navItemIconWrapper { \n transition: .3s;\n }\n\n &.open { \n & .navItemIconWrapper { \n transform: rotate(-180deg);\n transition: .3s;\n }\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n\n & .username__tooltip { \n display: block;\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & .initials__wrapper { \n cursor: pointer;\n background-color: tokens.$ifxColorOcean600;\n }\n }\n }\n\n &.remove {\n display: none;\n }\n\n &.removeLabel {\n & .label__wrapper {\n display: none;\n }\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .username__tooltip { \n display: none;\n position: absolute;\n top: 35px;\n right: 0;\n text-wrap: nowrap;\n padding: 1px 5px;\n font-size: 13px;\n font-family: \"Source Sans 3\";\n background-color: black;\n color: #fff;\n z-index: 99;\n }\n\n &:hover { \n & .username__tooltip { \n display: block;\n }\n }\n\n & .initials__wrapper { \n display: flex;\n width: 24px;\n height: 24px;\n justify-content: center;\n align-items: center;\n border-radius: 100%;\n background-color: tokens.$ifxColorOcean500;\n\n & .initials { \n color: #FFF;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n \n }\n }\n\n & img { \n width: 24px; \n height: 24px;\n border-radius: 100%;\n }\n\n &.removeWrapper {\n display: none;\n }\n\n &.hide {\n display: none;\n }\n }\n}\n\n.container { \n position: relative;\n\n & .sub__layer-back-button { \n display: none;\n &.show { \n display: flex;\n justify-content: flex-start;\n\n & .back__button-wrapper { \n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n color: tokens.$ifxColorOcean500;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n & span, & ifx-icon { \n &:hover { \n cursor: pointer;\n }\n }\n\n }\n }\n }\n\n &.hide { \n display: none;\n }\n\n & .inner__content-wrapper { \n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n &.no-gap { \n gap: 0px;\n }\n }\n}\n\n.navbar-menu {\n position: absolute;\n display: none;\n list-style-type: none;\n visibility: visible;\n flex-direction: column;\n width: 224px;\n min-width: 224px;\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 &.open:not(.itemInMobileMenu) {\n display: flex;\n }\n\n &.itemInMobileMenu { \n display: none;\n }\n\n &.right { \n left: 100%;\n top: -40%;\n }\n\n &.left { \n top: -40%;\n right: 100%;\n }\n\n &.rightSideItemMenu { \n left: initial;\n right: 0px;\n }\n}\n\n.navbar__item { \n &.layer__item-parent { \n color: tokens.$ifxColorBaseBlack;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: 32px; \n letter-spacing: -0.24px;\n cursor: initial;\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & ifx-icon { \n & svg { \n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n\n &.sidebarMenuItem { \n justify-content: space-between;\n padding: 0;\n }\n\n\n &.menuItem {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n gap: 8px;\n font-family: var(--ifx-font-family);\n \n &.hide {\n display: none;\n }\n \n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\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\n.sub__layer-menu { \n padding: 5px;\n display: none;\n\n &.remove__margin { \n margin: 0;\n padding: 0;\n }\n \n &.open { \n display: block;\n }\n}\n\n.navbar__item { \n &.hide { \n display: none;\n }\n}\n\n.menuItemRightIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n.navItemIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-navbar-item',\n styleUrl: 'navbar-item.scss',\n shadow: true\n})\n\nexport class NavbarItem {\n\n @Element() el;\n @Prop() showLabel: boolean = true;\n @Prop() icon: string = \"\"\n @Prop() href: string = \"\"\n @Prop() target: string = \"_self\";\n @Prop() hideOnMobile: boolean = true;\n @State() internalHref: string = \"\"\n @State() isMenuItem: boolean = false;\n @State() hasChildNavItems: boolean = false;\n @State() isSidebarMenuItem: boolean = false;\n @State() itemPosition: string;\n @Event() ifxNavItem: EventEmitter;\n \n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const itemMenu = this.getItemMenu()\n if(itemMenu) { \n if(itemMenu.classList.contains('open')) { \n if (!path.includes(this.el)) {\n this.closeItemMenu();\n }\n }\n }\n }\n\n @Method()\n async hideComponent() { \n this.el.style.display = 'none';\n }\n\n @Method()\n async showComponent() { \n this.el.style.display = '';\n }\n\n @Method()\n async toggleChildren(action) { \n const itemMenu = this.getItemMenu()\n const arrowIcon = this.getChevronDownIconWrapper()\n if(itemMenu) { \n this.handleClassList(arrowIcon, action, 'hide')\n this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n }\n }\n\n @Method()\n async moveChildComponentsIntoSubLayerMenu() { \n const subLayerMenu = this.getItemMenu()\n if(subLayerMenu) { \n const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n if(subLayerMenuIsOpened) { \n const navbarItem = this.getNavBarItem()\n const subLayerBackButton = this.getSubLayerBackButton()\n this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n this.handleClassList(subLayerBackButton, 'add', 'show')\n this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n }\n }\n\n const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n this.isSidebarMenuItem = true;\n\n for(let i = 0; i < navItems.length; i++) { \n navItems[i].setAttribute('slot', 'second__layer')\n navItems[i].moveChildComponentsIntoSubLayerMenu()\n }\n }\n\n getSubLayerBackButton() { \n const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n return sublayerBackButton\n }\n\n @Method()\n async toggleFirstLayerItem(actionOne, actionTwo) { \n const navbarItem = this.getNavBarItem()\n const secondLayerMenu = this.getSubLayerMenu()\n const subLayerBackButton = this.getSubLayerBackButton()\n this.handleClassList(subLayerBackButton, [actionOne], 'show')\n this.handleClassList(navbarItem, [actionTwo], 'hide')\n this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n }\n\n openSubLayerMenu() { \n if(this.hasChildNavItems) { \n const subLayerBackButton = this.getSubLayerBackButton()\n const rightArrowIcon = this.getRightArrowIcon()\n const navbarItem = this.getNavBarItem()\n const subLayerMenu = this.getSubLayerMenu()\n const slotName = this.el.getAttribute('slot')\n\n this.handleClassList(subLayerBackButton, 'add', 'show')\n this.handleClassList(rightArrowIcon, 'add', 'hide')\n this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n this.handleClassList(subLayerMenu, 'add', 'open')\n \n if(slotName.toLowerCase() === 'second__layer') {\n this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n this.handleClassList(navbarItem, 'remove', 'menuItem')\n } else { \n this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n }\n }\n }\n\n @Method()\n async addMenuItemClass() { \n const navbarItem = this.getNavBarItem()\n this.handleClassList(navbarItem, 'add', 'menuItem')\n const rightArrowIcon = this.getRightArrowIcon()\n if(this.hasChildNavItems) { \n this.handleClassList(rightArrowIcon, 'remove', 'hide')\n }\n }\n\n @Method()\n async moveChildComponentsBackIntoNavbar() { \n const subLayerBackButton = this.getSubLayerBackButton()\n const navbarItem = this.getNavBarItem()\n const secondLayerMenu = this.getSubLayerMenu()\n\n this.handleClassList(subLayerBackButton, 'remove', 'show')\n this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n this.isSidebarMenuItem = false;\n this.showComponent()\n this.handleClassList(navbarItem, 'remove', 'hide')\n\n for(let i = 0; i < navItems.length; i++) { \n navItems[i].setAttribute('slot', 'first__layer')\n navItems[i].moveChildComponentsBackIntoNavbar()\n navItems[i].addMenuItemClass()\n navItems[i].returnToFirstLayer()\n }\n }\n\n getRightArrowIcon() { \n const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n return menuItemRightIconWrapper;\n }\n\n getChevronDownIconWrapper() { \n const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n return arrowIcon;\n }\n\n @Method()\n async returnToFirstLayer() { \n const subLayerBackButton = this.getSubLayerBackButton()\n const navbarItem = this.getNavBarItem()\n const rightArrowIcon = this.getRightArrowIcon()\n const subLayerMenu = this.getSubLayerMenu()\n const slotName = this.el.getAttribute('slot')\n\n this.handleClassList(subLayerBackButton, 'remove', 'show')\n this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n this.handleClassList(subLayerMenu, 'remove', 'open')\n if(this.hasChildNavItems) { \n this.handleClassList(rightArrowIcon, 'remove', 'hide')\n }\n\n if(slotName.toLowerCase() === 'second__layer') {\n this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n this.handleClassList(navbarItem, 'add', 'menuItem')\n } else { \n this.ifxNavItem.emit({component: this.el, action: 'return'})\n }\n }\n\n componentWillLoad() {\n this.setHref()\n this.checkIfItemIsNested()\n this.checkIfItemHasChildren()\n }\n\n componentDidLoad() { \n if(this.hasChildNavItems) { \n const navItems = this.getNavbarItems();\n this.relocateItemsToFirstlayer(navItems)\n }\n }\n\n componentDidUpdate() { \n const navbarItem = this.getNavBarItem()\n const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n if(this.isSidebarMenuItem && isLayerItemParent) {\n const rightArrowIcon = this.getRightArrowIcon()\n this.handleClassList(rightArrowIcon, 'add', 'hide')\n }\n }\n \n @Method()\n async setMenuItemPosition() { \n if(this.isMenuItem && this.hasChildNavItems) { \n const menuPosition = this.getItemMenuPosition()\n if(menuPosition === 'left') { \n this.itemPosition = 'left'\n } else if(menuPosition === 'right') { \n this.itemPosition = 'right'\n }\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getNavbarItems() {\n const navItems = this.el.querySelectorAll('ifx-navbar-item')\n return navItems;\n }\n \n getNavBarItem() { \n const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n return navItem;\n }\n\n getSubLayerMenu() { \n const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n return subLayerMenu;\n }\n\n relocateItemsToFirstlayer(navItems) { \n navItems.forEach(item => {\n item.setAttribute('slot', 'first__layer')\n })\n }\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n checkIfItemIsNested() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n \|\| parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n this.isMenuItem = true;\n return;\n } else {\n this.isMenuItem = false;\n }\n }\n\n checkIfItemHasChildren() { \n const sidebarItems = this.getNavbarItems();\n if (sidebarItems.length !== 0) {\n this.hasChildNavItems = true;\n } else {\n this.hasChildNavItems = false;\n } \n }\n\n @Method()\n async setItemSideSpecifications() { \n const menuItem = this.el;\n const itemMenu = this.getItemMenu()\n const slotValue = menuItem.getAttribute('slot')\n \n if(slotValue.toLowerCase().trim() === \"right-item\") { \n this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n }\n\n return true;\n }\n\n getItemMenu() { \n const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n return menu;\n }\n\n closeItemMenu() { \n const itemMenu = this.getItemMenu()\n const menuItem = this.getNavBarItem()\n if(itemMenu) { \n this.handleClassList(itemMenu, 'remove', 'open')\n this.handleClassList(menuItem, 'remove', 'open')\n }\n }\n\n getItemMenuPosition() {\n let parentElement = this.el;\n while(parentElement) {\n if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' \|\| parentElement.slot === 'right-item') {\n return 'left'\n }\n parentElement = parentElement.parentElement \|\| parentElement.getRootNode().host;\n }\n return 'right'\n }\n \n toggleItemMenu() {\n const slotName = this.el.getAttribute('slot')\n\n if(slotName.toLowerCase() === 'mobile-menu-top' \|\| slotName.toLowerCase() === 'second__layer') { \n this.openSubLayerMenu()\n }\n\n if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) { \n const itemMenu = this.getItemMenu()\n \n if(this.hasChildNavItems) { \n const menuItem = this.getNavBarItem()\n this.handleClassList(itemMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n } \n }\n }\n\n handleNestedLayerMenu(e) { \n if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n const itemMenu = this.getItemMenu()\n const menuPosition = this.getItemMenuPosition()\n if(e.type.toUpperCase() === 'MOUSEENTER') { \n this.handleClassList(itemMenu, 'add', 'open')\n if(menuPosition === 'left') { \n this.handleClassList(itemMenu, 'add', 'left')\n } else if(menuPosition === 'right') { \n this.handleClassList(itemMenu, 'add', 'right')\n }\n }\n\n if(e.type.toUpperCase() === 'MOUSELEAVE') { \n this.handleClassList(itemMenu, 'remove', 'open')\n if(menuPosition === 'left') { \n this.handleClassList(itemMenu, 'remove', 'left')\n } else if (menuPosition === 'right') { \n this.handleClassList(itemMenu, 'remove', 'right')\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)} onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n <div class=\"sub__layer-back-button\">\n <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n <ifx-icon icon=\"arrow-left-16\" />\n <span>Back</span>\n </div>\n </div>\n <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class= {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n <div class=\"inner__content-wrapper\">\n <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n </div>\n\n {this.itemPosition === 'left' \n && this.hasChildNavItems \n && this.isMenuItem && \n <div class=\"menuItemLeftIconWrapper\">\n <ifx-icon icon=\"chevron-left-12\" />\n </div>}\n\n <span class=\"label__wrapper\">\n <slot />\n </span>\n </div>\n\n <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n <ifx-icon icon=\"chevron-down-12\" />\n </div>\n \n {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) \|\| (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n <ifx-icon icon=\"chevron-right-12\" />\n </div>}\n </a>\n \n {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n </div>\n )\n }\n}"],"version":3}
1	+ {"file":"ifx-navbar-item.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4kJAA4kJ,CAAC;AACnmJ,4BAAe,aAAa;;MCOf,UAAU;IANvB;;;QASU,cAAS,GAAY,IAAI,CAAC;QAC1B,SAAI,GAAW,EAAE,CAAA;QACjB,SAAI,GAAW,EAAE,CAAA;QACjB,WAAM,GAAW,OAAO,CAAC;QACzB,iBAAY,GAAY,IAAI,CAAC;QAC5B,iBAAY,GAAW,EAAE,CAAA;QACzB,eAAU,GAAY,KAAK,CAAC;QAC5B,qBAAgB,GAAY,KAAK,CAAC;QAClC,sBAAiB,GAAY,KAAK,CAAC;KAwY7C;IAlYC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,IAAG,QAAQ,EAAE;YACX,IAAG,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;gBACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;iBACtB;aACF;SACF;KACF;IAGD,MAAM,aAAa;QACjB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KAChC;IAGD,MAAM,aAAa;QACjB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;KAC5B;IAGD,MAAM,cAAc,CAAC,MAAM;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAA;QAClD,IAAG,QAAQ,EAAE;YACX,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;YAC/C,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAA;SAC3D;KACF;IAGD,MAAM,mCAAmC;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACvC,IAAG,YAAY,EAAE;YACf,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC,CAAA;YACnF,IAAG,oBAAoB,EAAE;gBACvB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;gBACvC,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;gBACvD,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAA;gBAC7D,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;gBACvD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAC,CAAC,CAAA;aACrE;SACF;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAA;QAClE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAE9B,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;YACjD,QAAQ,CAAC,CAAC,CAAC,CAAC,mCAAmC,EAAE,CAAA;SAClD;KACF;IAED,qBAAqB;QACnB,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAA;QACtF,OAAO,kBAAkB,CAAA;KAC1B;IAGD,MAAM,oBAAoB,CAAC,SAAS,EAAE,SAAS;QAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAC9C,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACvD,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAA;QAC7D,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAA;QACrD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAA;KACpE;IAED,gBAAgB;QACd,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;YACvD,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;YACvC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;YAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;YAE7C,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YACvD,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YACnD,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAA;YAC7D,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YAEjD,IAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE;gBAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAC,CAAC,CAAA;gBACpG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAA;aACvD;iBAAM;gBACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAC,CAAC,CAAA;aACrE;SACF;KACF;IAGD,MAAM,gBAAgB;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,UAAU,CAAC,CAAA;QACnD,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC/C,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACvD;KACF;IAGD,MAAM,iCAAiC;QACrC,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAE9C,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC1D,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QAChE,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAA;QAEjE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC,CAAA;QAE1D,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAA;QACnE,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAElD,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;YAChD,QAAQ,CAAC,CAAC,CAAC,CAAC,iCAAiC,EAAE,CAAA;YAC/C,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAA;YAC9B,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAA;SACjC;KACF;IAED,iBAAiB;QACf,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAA;QAC9F,OAAO,wBAAwB,CAAC;KACjC;IAED,yBAAyB;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAC1E,OAAO,SAAS,CAAC;KAClB;IAGD,MAAM,kBAAkB;QACtB,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC/C,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAE7C,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC1D,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QAChE,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QACpD,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACvD;QAED,IAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE;YAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,qBAAqB,EAAC,CAAC,CAAA;YACxG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,EAAE,UAAU,CAAC,CAAA;SACpD;aAAM;YACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAC,CAAC,CAAA;SAC7D;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,EAAE,CAAA;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAA;QAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAA;KAC9B;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACzB,IAAG,IAAI,CAAC,gBAAgB,EAAE;YACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACvC,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAA;SACzC;KACF;IAED,kBAAkB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,UAAU,EAAE,oBAAoB,CAAC,CAAA;QAC5F,IAAG,IAAI,CAAC,iBAAiB,IAAI,iBAAiB,EAAE;YAC9C,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAA;YAC/C,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;SACpD;KACF;IAGD,MAAM,mBAAmB;QACvB,IAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC/C,IAAG,YAAY,KAAK,MAAM,EAAE;gBAC1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAA;aAC3B;iBAAM,IAAG,YAAY,KAAK,OAAO,EAAE;gBAClC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAA;aAC5B;SACF;KACF;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;QAC7B,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;SACxC;KACF;IAED,cAAc;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAA;QAC5D,OAAO,QAAQ,CAAC;KACjB;IAED,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;QACjE,OAAO,OAAO,CAAC;KAChB;IAED,eAAe;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QACzE,OAAO,YAAY,CAAC;KACrB;IAED,yBAAyB,CAAC,QAAQ;QAC/B,QAAQ,CAAC,OAAO,CAAC,IAAI;YACpB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;SAC1C,CAAC,CAAA;KACH;IAED,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;SAC/B;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KACtC;IAED,mBAAmB;QACjB,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QAC5C,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB;eAC1D,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,oBAAoB,EAAE;YAC/D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO;SACR;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;SACzB;KACF;IAED,sBAAsB;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC3C,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SAC/B;KACF;IAGD,MAAM,yBAAyB;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,MAAM,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAE/C,IAAG,SAAS,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,YAAY,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAA;SAC3D;QAED,OAAO,IAAI,CAAC;KACb;IAED,WAAW;QACT,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;KACb;IAED,aAAa;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACrC,IAAG,QAAQ,EAAE;YACX,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YAChD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACjD;KACF;IAED,mBAAmB;QACjB,IAAI,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAC5B,OAAM,aAAa,EAAE;YACnB,IAAG,aAAa,CAAC,OAAO,KAAK,oBAAoB,IAAI,aAAa,CAAC,IAAI,KAAK,YAAY,EAAE;gBACxF,OAAO,MAAM,CAAA;aACd;YACD,aAAa,GAAG,aAAa,CAAC,aAAa,IAAI,aAAa,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC;SACjF;QACD,OAAO,OAAO,CAAA;KACf;IAED,cAAc;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAE7C,IAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,iBAAiB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE;YAC7F,IAAI,CAAC,gBAAgB,EAAE,CAAA;SACxB;QAED,IAAG,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,iBAAiB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,eAAe,EAAG;YACpH,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;YAEnC,IAAG,IAAI,CAAC,gBAAgB,EAAE;gBACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;gBACrC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;gBACjD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;aAClD;SACF;KACF;IAED,qBAAqB,CAAC,CAAC;QACrB,IAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YACtE,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;YACnC,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC/C,IAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE;gBACxC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;gBAC7C,IAAG,YAAY,KAAK,MAAM,EAAE;oBAC1B,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;iBAC9C;qBAAM,IAAG,YAAY,KAAK,OAAO,EAAE;oBAClC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;iBAC/C;aACF;YAED,IAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE;gBACxC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;gBAChD,IAAG,YAAY,KAAK,MAAM,EAAE;oBAC1B,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;iBACjD;qBAAM,IAAI,YAAY,KAAK,OAAO,EAAE;oBACnC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;iBAClD;aACF;SACF;KACF;IAED,kBAAkB;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACzE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACrC,MAAM,IAAI,GAAG,YAAY,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE;YAChC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAA;SACrC;aAAM,IAAG,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YACrE,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;SACxC;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAG,YAAY,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,IACxH,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,IACxE,iEAAU,IAAI,EAAC,eAAe,GAAG,EACjC,sEAAiB,CACb,CACF,EACN,0DAAG,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE,KAAK,EAAK,gBAAgB,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EAAE,IAAI,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,gBAAgB,GAAG,UAAU,GAAG,EAAE,EAAE,IACxR,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAE,gEAAgE,CAAC,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,EAAE,EAAE,IAC5G,IAAI,CAAC,IAAI,IAAI,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACnD,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;YAC1C,4DAAK,KAAK,EAAC,2BAA2B,IACpC,+EAAuB,IAAI,CAAC,eAAe,CAAwB,CAC/D,CACF,EAEL,IAAI,CAAC,YAAY,KAAK,MAAM;eAC1B,IAAI,CAAC,gBAAgB;eACrB,IAAI,CAAC,UAAU;YAClB,4DAAK,KAAK,EAAC,yBAAyB,IAChC,iEAAU,IAAI,EAAC,iBAAiB,GAAG,CACjC,EAEN,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAQ,CACH,CACH,EAEN,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,MAAM,EAAE,IACpH,iEAAU,IAAI,EAAC,iBAAiB,GAAG,CAC/B,EAEN,4DAAK,KAAK,EAAE,4BAA4B,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,MAAM,EAAE,IACxL,iEAAU,IAAI,EAAC,kBAAkB,GAAG,CAChC,CACJ,EAEH,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,2DAAI,KAAK,EAAC,aAAa,SAAE,6DAAM,IAAI,EAAC,cAAc,GAAG,MAAM,EAC/G,IAAI,CAAC,iBAAiB,IAAI,2DAAI,KAAK,EAAC,iBAAiB,SAAE,6DAAM,IAAI,EAAC,eAAe,GAAG,MAAM,CAEvF,EACP;KACF;;;;;;;","names":[],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.navbar__item {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n font-family: var(--ifx-font-family);\n text-decoration: none;\n font-weight: 400;\n font-size: 16px;\n color: tokens.$ifxColorBaseBlack;\n\n &.hide { \n display: none;\n }\n\n &.isParent { \n gap: 8px;\n }\n\n & .navItemIconWrapper { \n transition: .3s;\n }\n\n &.open { \n & .navItemIconWrapper { \n transform: rotate(-180deg);\n transition: .3s;\n }\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n\n & .username__tooltip { \n display: block;\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & .initials__wrapper { \n cursor: pointer;\n background-color: tokens.$ifxColorOcean600;\n }\n }\n }\n\n &.remove {\n display: none;\n }\n\n &.removeLabel {\n & .label__wrapper {\n display: none;\n }\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .number__indicator-wrapper { \n position: absolute;\n top: -16px;\n right: -12px;\n }\n\n & .username__tooltip { \n display: none;\n position: absolute;\n top: 35px;\n right: 0;\n text-wrap: nowrap;\n padding: 1px 5px;\n font-size: 13px;\n font-family: \"Source Sans 3\";\n background-color: black;\n color: #fff;\n z-index: 99;\n }\n\n &:hover { \n & .username__tooltip { \n display: block;\n }\n }\n\n & .initials__wrapper { \n display: flex;\n width: 24px;\n height: 24px;\n justify-content: center;\n align-items: center;\n border-radius: 100%;\n background-color: tokens.$ifxColorOcean500;\n\n & .initials { \n color: #FFF;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n \n }\n }\n\n & img { \n width: 24px; \n height: 24px;\n border-radius: 100%;\n }\n\n &.removeWrapper {\n display: none;\n }\n\n &.hide {\n display: none;\n }\n }\n}\n\n.container { \n position: relative;\n\n & .sub__layer-back-button { \n display: none;\n &.show { \n display: flex;\n justify-content: flex-start;\n\n & .back__button-wrapper { \n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n color: tokens.$ifxColorOcean500;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n & span, & ifx-icon { \n &:hover { \n cursor: pointer;\n }\n }\n\n }\n }\n }\n\n &.hide { \n display: none;\n }\n\n & .inner__content-wrapper { \n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n &.no-gap { \n gap: 0px;\n }\n }\n}\n\n.navbar-menu {\n position: absolute;\n display: none;\n list-style-type: none;\n visibility: visible;\n flex-direction: column;\n width: 224px;\n min-width: 224px;\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 &.open:not(.itemInMobileMenu) {\n display: flex;\n }\n\n &.itemInMobileMenu { \n display: none;\n }\n\n &.right { \n left: 100%;\n top: -40%;\n }\n\n &.left { \n top: -40%;\n right: 100%;\n }\n\n &.rightSideItemMenu { \n left: initial;\n right: 0px;\n }\n}\n\n.navbar__item { \n &.layer__item-parent { \n color: tokens.$ifxColorBaseBlack;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: 32px; \n letter-spacing: -0.24px;\n cursor: initial;\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & ifx-icon { \n & svg { \n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n\n &.sidebarMenuItem { \n justify-content: space-between;\n padding: 0;\n }\n\n\n &.menuItem {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n gap: 8px;\n font-family: var(--ifx-font-family);\n \n &.hide {\n display: none;\n }\n \n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\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\n.sub__layer-menu { \n padding: 5px;\n display: none;\n\n &.remove__margin { \n margin: 0;\n padding: 0;\n }\n \n &.open { \n display: block;\n }\n}\n\n.navbar__item { \n &.hide { \n display: none;\n }\n}\n\n.menuItemRightIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n.navItemIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-navbar-item',\n styleUrl: 'navbar-item.scss',\n shadow: true\n})\n\nexport class NavbarItem {\n\n @Element() el;\n @Prop() showLabel: boolean = true;\n @Prop() icon: string = \"\"\n @Prop() href: string = \"\"\n @Prop() target: string = \"_self\";\n @Prop() hideOnMobile: boolean = true;\n @State() internalHref: string = \"\"\n @State() isMenuItem: boolean = false;\n @State() hasChildNavItems: boolean = false;\n @State() isSidebarMenuItem: boolean = false;\n @State() itemPosition: string;\n @Event() ifxNavItem: EventEmitter;\n @Prop() numberIndicator: number;\n \n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const itemMenu = this.getItemMenu()\n if(itemMenu) { \n if(itemMenu.classList.contains('open')) { \n if (!path.includes(this.el)) {\n this.closeItemMenu();\n }\n }\n }\n }\n\n @Method()\n async hideComponent() { \n this.el.style.display = 'none';\n }\n\n @Method()\n async showComponent() { \n this.el.style.display = '';\n }\n\n @Method()\n async toggleChildren(action) { \n const itemMenu = this.getItemMenu()\n const arrowIcon = this.getChevronDownIconWrapper()\n if(itemMenu) { \n this.handleClassList(arrowIcon, action, 'hide')\n this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n }\n }\n\n @Method()\n async moveChildComponentsIntoSubLayerMenu() { \n const subLayerMenu = this.getItemMenu()\n if(subLayerMenu) { \n const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n if(subLayerMenuIsOpened) { \n const navbarItem = this.getNavBarItem()\n const subLayerBackButton = this.getSubLayerBackButton()\n this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n this.handleClassList(subLayerBackButton, 'add', 'show')\n this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n }\n }\n\n const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n this.isSidebarMenuItem = true;\n\n for(let i = 0; i < navItems.length; i++) { \n navItems[i].setAttribute('slot', 'second__layer')\n navItems[i].moveChildComponentsIntoSubLayerMenu()\n }\n }\n\n getSubLayerBackButton() { \n const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n return sublayerBackButton\n }\n\n @Method()\n async toggleFirstLayerItem(actionOne, actionTwo) { \n const navbarItem = this.getNavBarItem()\n const secondLayerMenu = this.getSubLayerMenu()\n const subLayerBackButton = this.getSubLayerBackButton()\n this.handleClassList(subLayerBackButton, [actionOne], 'show')\n this.handleClassList(navbarItem, [actionTwo], 'hide')\n this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n }\n\n openSubLayerMenu() { \n if(this.hasChildNavItems) { \n const subLayerBackButton = this.getSubLayerBackButton()\n const rightArrowIcon = this.getRightArrowIcon()\n const navbarItem = this.getNavBarItem()\n const subLayerMenu = this.getSubLayerMenu()\n const slotName = this.el.getAttribute('slot')\n\n this.handleClassList(subLayerBackButton, 'add', 'show')\n this.handleClassList(rightArrowIcon, 'add', 'hide')\n this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n this.handleClassList(subLayerMenu, 'add', 'open')\n \n if(slotName.toLowerCase() === 'second__layer') {\n this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n this.handleClassList(navbarItem, 'remove', 'menuItem')\n } else { \n this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n }\n }\n }\n\n @Method()\n async addMenuItemClass() { \n const navbarItem = this.getNavBarItem()\n this.handleClassList(navbarItem, 'add', 'menuItem')\n const rightArrowIcon = this.getRightArrowIcon()\n if(this.hasChildNavItems) { \n this.handleClassList(rightArrowIcon, 'remove', 'hide')\n }\n }\n\n @Method()\n async moveChildComponentsBackIntoNavbar() { \n const subLayerBackButton = this.getSubLayerBackButton()\n const navbarItem = this.getNavBarItem()\n const secondLayerMenu = this.getSubLayerMenu()\n\n this.handleClassList(subLayerBackButton, 'remove', 'show')\n this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n this.isSidebarMenuItem = false;\n this.showComponent()\n this.handleClassList(navbarItem, 'remove', 'hide')\n\n for(let i = 0; i < navItems.length; i++) { \n navItems[i].setAttribute('slot', 'first__layer')\n navItems[i].moveChildComponentsBackIntoNavbar()\n navItems[i].addMenuItemClass()\n navItems[i].returnToFirstLayer()\n }\n }\n\n getRightArrowIcon() { \n const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n return menuItemRightIconWrapper;\n }\n\n getChevronDownIconWrapper() { \n const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n return arrowIcon;\n }\n\n @Method()\n async returnToFirstLayer() { \n const subLayerBackButton = this.getSubLayerBackButton()\n const navbarItem = this.getNavBarItem()\n const rightArrowIcon = this.getRightArrowIcon()\n const subLayerMenu = this.getSubLayerMenu()\n const slotName = this.el.getAttribute('slot')\n\n this.handleClassList(subLayerBackButton, 'remove', 'show')\n this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n this.handleClassList(subLayerMenu, 'remove', 'open')\n if(this.hasChildNavItems) { \n this.handleClassList(rightArrowIcon, 'remove', 'hide')\n }\n\n if(slotName.toLowerCase() === 'second__layer') {\n this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n this.handleClassList(navbarItem, 'add', 'menuItem')\n } else { \n this.ifxNavItem.emit({component: this.el, action: 'return'})\n }\n }\n\n componentWillLoad() {\n this.setHref()\n this.checkIfItemIsNested()\n this.checkIfItemHasChildren()\n }\n\n componentDidLoad() { \n this.handleLabelWrapper()\n if(this.hasChildNavItems) { \n const navItems = this.getNavbarItems();\n this.relocateItemsToFirstlayer(navItems)\n }\n }\n\n componentDidUpdate() { \n const navbarItem = this.getNavBarItem()\n const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n if(this.isSidebarMenuItem && isLayerItemParent) {\n const rightArrowIcon = this.getRightArrowIcon()\n this.handleClassList(rightArrowIcon, 'add', 'hide')\n }\n }\n \n @Method()\n async setMenuItemPosition() { \n if(this.isMenuItem && this.hasChildNavItems) { \n const menuPosition = this.getItemMenuPosition()\n if(menuPosition === 'left') { \n this.itemPosition = 'left'\n } else if(menuPosition === 'right') { \n this.itemPosition = 'right'\n }\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getNavbarItems() {\n const navItems = this.el.querySelectorAll('ifx-navbar-item')\n return navItems;\n }\n \n getNavBarItem() { \n const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n return navItem;\n }\n\n getSubLayerMenu() { \n const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n return subLayerMenu;\n }\n\n relocateItemsToFirstlayer(navItems) { \n navItems.forEach(item => {\n item.setAttribute('slot', 'first__layer')\n })\n }\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n checkIfItemIsNested() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n \|\| parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n this.isMenuItem = true;\n return;\n } else {\n this.isMenuItem = false;\n }\n }\n\n checkIfItemHasChildren() { \n const sidebarItems = this.getNavbarItems();\n if (sidebarItems.length !== 0) {\n this.hasChildNavItems = true;\n } else {\n this.hasChildNavItems = false;\n } \n }\n\n @Method()\n async setItemSideSpecifications() { \n const menuItem = this.el;\n const itemMenu = this.getItemMenu()\n const slotValue = menuItem.getAttribute('slot')\n \n if(slotValue.toLowerCase().trim() === \"right-item\") { \n this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n }\n\n return true;\n }\n\n getItemMenu() { \n const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n return menu;\n }\n\n closeItemMenu() { \n const itemMenu = this.getItemMenu()\n const menuItem = this.getNavBarItem()\n if(itemMenu) { \n this.handleClassList(itemMenu, 'remove', 'open')\n this.handleClassList(menuItem, 'remove', 'open')\n }\n }\n\n getItemMenuPosition() {\n let parentElement = this.el;\n while(parentElement) {\n if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' \|\| parentElement.slot === 'right-item') {\n return 'left'\n }\n parentElement = parentElement.parentElement \|\| parentElement.getRootNode().host;\n }\n return 'right'\n }\n \n toggleItemMenu() {\n const slotName = this.el.getAttribute('slot')\n\n if(slotName.toLowerCase() === 'mobile-menu-top' \|\| slotName.toLowerCase() === 'second__layer') { \n this.openSubLayerMenu()\n }\n\n if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) { \n const itemMenu = this.getItemMenu()\n \n if(this.hasChildNavItems) { \n const menuItem = this.getNavBarItem()\n this.handleClassList(itemMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n } \n }\n }\n\n handleNestedLayerMenu(e) { \n if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n const itemMenu = this.getItemMenu()\n const menuPosition = this.getItemMenuPosition()\n if(e.type.toUpperCase() === 'MOUSEENTER') { \n this.handleClassList(itemMenu, 'add', 'open')\n if(menuPosition === 'left') { \n this.handleClassList(itemMenu, 'add', 'left')\n } else if(menuPosition === 'right') { \n this.handleClassList(itemMenu, 'add', 'right')\n }\n }\n\n if(e.type.toUpperCase() === 'MOUSELEAVE') { \n this.handleClassList(itemMenu, 'remove', 'open')\n if(menuPosition === 'left') { \n this.handleClassList(itemMenu, 'remove', 'left')\n } else if (menuPosition === 'right') { \n this.handleClassList(itemMenu, 'remove', 'right')\n }\n }\n }\n }\n\n handleLabelWrapper() { \n const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');\n const navItem = this.getNavBarItem();\n const slot = labelWrapper.querySelector('slot');\n if (!slot.assignedNodes().length) {\n navItem.classList.add('removeLabel')\n } else if(this.showLabel && navItem.classList.contains('removeLabel')) {\n navItem.classList.remove('removeLabel')\n }\n }\n\n render() {\n return (\n <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)} onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n <div class=\"sub__layer-back-button\">\n <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n <ifx-icon icon=\"arrow-left-16\" />\n <span>Back</span>\n </div>\n </div>\n <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class= {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n <div class=\"inner__content-wrapper\">\n <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n {this.icon && !isNaN(this.numberIndicator) && \n <div class=\"number__indicator-wrapper\">\n <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n </div>}\n </div>\n\n {this.itemPosition === 'left' \n && this.hasChildNavItems \n && this.isMenuItem && \n <div class=\"menuItemLeftIconWrapper\">\n <ifx-icon icon=\"chevron-left-12\" />\n </div>}\n\n <span class=\"label__wrapper\">\n <slot />\n </span>\n </div>\n\n <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n <ifx-icon icon=\"chevron-down-12\" />\n </div>\n \n {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) \|\| (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n <ifx-icon icon=\"chevron-right-12\" />\n </div>}\n </a>\n \n {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n </div>\n )\n }\n}"],"version":3}