@infineon/infineon-design-system-stencil 33.2.1--canary.1845.de39875295817275c37ebbbe9222be953c888b33.0 → 33.2.1--canary.1847.4fcda07df2b1c77b0b3888a0d5860cfb8b9783b8.0

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 .checkbox-group-container {
@@ -9,7 +9,7 @@
 
 .checkbox-group {
   display: flex;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
   gap: 8px;
 }
 .checkbox-group.horizontal {

package/dist/collection/components/chip/chip-item/chip-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 .chip-item {

package/dist/collection/components/chip/chip.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {

package/dist/collection/components/content-switcher/content-switcher-item.css

@@ -5,7 +5,7 @@
   border-radius: 9999px;
   border: 3px solid transparent;
   padding: 7px 20px;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;

package/dist/collection/components/dropdown/dropdown-header/dropdown-header.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 .dropdown-header {
@@ -9,11 +9,11 @@
   gap: 8px;
   align-self: stretch;
   border-bottom: 1px solid #EEEDED;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .dropdown-header span {
   color: #575352;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
   font-size: 14px;
   font-style: normal;
   font-weight: 400;

package/dist/collection/components/dropdown/dropdown-item/dropdown-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 .dropdown-item {
@@ -9,7 +9,7 @@
   align-items: center;
   padding: 8px 16px;
   gap: 8px;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .dropdown-item.hide {
   display: none;

package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.css

@@ -15,7 +15,7 @@
   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);
+  font-family: "Source Sans 3";
 }
 .dropdown-menu.small {
   max-height: 266px;

package/dist/collection/components/footer/footer-column.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 .col {
@@ -8,7 +8,7 @@
   gap: 12px;
   padding-right: 8px;
   color: #1D1D1D;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .col ::slotted([slot=title]) {
   box-sizing: border-box;

package/dist/collection/components/footer/footer.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {
@@ -14,7 +14,7 @@
   justify-content: center;
   align-items: center;
   background-color: #FFFFFF;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .footer__container .footer__wrapper {
   display: flex;

package/dist/collection/components/icon-button/icon-button.css

@@ -16,7 +16,7 @@
   border-radius: 1px;
   line-height: 1.5rem;
   outline: none;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
   text-decoration: none;
   user-select: none;
   border: 1px solid rgba(0, 0, 0, 0);

package/dist/collection/components/link/link.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {
@@ -15,7 +15,7 @@
   color: #0A8276;
   gap: 8px;
   line-height: 1.6;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .link:hover {
   cursor: pointer;

package/dist/collection/components/modal/modal.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {
@@ -17,7 +17,7 @@
   height: 100%;
   z-index: 1060;
   overflow-y: auto;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 
 .modal-container.open {

package/dist/collection/components/navigation/navbar/navbar-item.css

@@ -11,7 +11,7 @@
   flex: none;
   order: 0;
   flex-grow: 0;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
   text-decoration: none;
   font-weight: 400;
   font-size: 16px;
@@ -184,7 +184,7 @@
   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);
+  font-family: "Source Sans 3";
 }
 .navbar-menu.open:not(.itemInMobileMenu) {
   display: flex;
@@ -230,7 +230,7 @@
   justify-content: space-between;
   padding: 8px 16px;
   gap: 8px;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .navbar__item.menuItem.hide {
   display: none;

package/dist/collection/components/navigation/navbar/navbar.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {
@@ -8,7 +8,7 @@
 }
 
 .navbar__wrapper {
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
   height: 63px;
   position: sticky;
   z-index: 1030;
@@ -222,7 +222,7 @@
   padding: 8px 40px;
   gap: 16px;
   background-color: #FFFFFF;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .navbar__container.expanded {
   justify-content: initial;

package/dist/collection/components/navigation/sidebar/sidebar-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {
@@ -54,7 +54,7 @@
   text-decoration: none;
   color: #1D1D1D;
   cursor: pointer;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .sidebar__nav-item.extra-padding__bottom {
   padding: 8px 0px 16px 0px;

package/dist/collection/components/navigation/sidebar/sidebar-title.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {

package/dist/collection/components/navigation/sidebar/sidebar.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {
@@ -17,7 +17,7 @@
   border-right: 1px solid #EEEDED;
   width: 264px;
   height: 100%;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .sidebar__container .sidebar__top-container {
   display: flex;

package/dist/collection/components/notification/notification.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 .ifx-notification__wrapper {
@@ -8,7 +8,7 @@
   align-items: center;
   padding: 8px 16px;
   background-color: #FFFFFF;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
   color: #1D1D1D;
   border: 1px solid #EEEDED;
 }

package/dist/collection/components/number-indicator/number-indicator.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  font-family: "Source Sans 3", sans-serif;
 }
 
 :host {
@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   gap: 32px;
-  font-family: var(--ifx-font-family);
+  font-family: "Source Sans 3";
 }
 .container .items__per-page-wrapper {
   display: flex;

package/dist/collection/components/pagination/pagination.js

@@ -1,156 +1,127 @@
 import { h } from "@stencil/core";
 export class Pagination {
     constructor() {
-        this.currentPage = 0;
+        this.currentPage = 1;
         this.internalPage = 1;
         this.internalItemsPerPage = 10;
         this.numberOfPages = [];
         this.total = 1;
+        this.filteredItemsPerPage = [];
+        this.visiblePages = [];
         this.CLASS_DISABLED = "disabled";
         this.CLASS_ACTIVE = "active";
-        this.CLASS_SIBLING_ACTIVE = "active-sibling";
-        this.DATA_KEY = "pagination";
+        this.handlePageClick = (e) => {
+            const li = e.currentTarget;
+            const page = parseInt(li.dataset.page);
+            if (!isNaN(page))
+                this.changePage(page);
+        };
     }
     setItemsPerPage(e) {
-        if (e.detail) {
-            this.internalItemsPerPage = parseInt(e.detail.label);
-        }
-        else {
-            this.internalItemsPerPage = 10;
+        var _a, _b;
+        const selectedValue = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.label);
+        const newItemsPerPage = parseInt(selectedValue) || 10;
+        if (newItemsPerPage === this.internalItemsPerPage) {
+            return;
         }
+        this.internalItemsPerPage = newItemsPerPage;
+        this.internalPage = 1;
+        this.calculateNumberOfPages();
+        this.updateVisiblePages();
+        this.handleEventEmission();
     }
     componentDidLoad() {
-        this.calculateVisiblePageIndices();
-        var paginationElement = this.el.shadowRoot.querySelector(".pagination");
-        let leftArrow = paginationElement.querySelector('.prev');
-        this.navigateSinglePage(leftArrow, true);
-    }
-    calculateNumberOfPages() {
-        if (isNaN(this.currentPage)) {
-            this.currentPage = 1;
+        this.initPagination();
+    }
+    updateVisiblePages() {
+        const buffer = 2;
+        const totalPages = this.numberOfPages.length;
+        const current = this.internalPage;
+        let pages = [];
+        if (totalPages <= 5) {
+            pages = [...this.numberOfPages];
         }
-        const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;
-        const itemsPerPage = this.internalItemsPerPage;
-        const totalPageNumber = Math.ceil(total / itemsPerPage);
-        if (this.currentPage <= 0) {
-            this.internalPage = 1;
-        }
-        else if (this.currentPage > totalPageNumber) {
-            this.internalPage = totalPageNumber;
+        else {
+            pages.push(1);
+            if (current > buffer + 1)
+                pages.push('...');
+            let start = Math.max(2, current - buffer);
+            let end = Math.min(totalPages - 1, current + buffer);
+            if (current <= buffer + 1)
+                end = buffer * 2 + 1;
+            if (current >= totalPages - buffer)
+                start = totalPages - buffer * 2;
+            for (let i = start; i <= end; i++)
+                pages.push(i);
+            if (current < totalPages - buffer)
+                pages.push('...');
+            pages.push(totalPages);
         }
-        else
-            this.internalPage = this.currentPage;
-        this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);
+        this.visiblePages = [...new Set(pages)];
+    }
+    calculateNumberOfPages() {
+        const totalPages = Math.ceil(this.total / this.internalItemsPerPage);
+        this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);
+        this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));
     }
     filterOptionsArray() {
-        let obj = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);
-        for (let i = 0; i < obj.length; i++) {
-            let item = obj[i];
-            if (!item.label) {
-                item.label = item.value;
-            }
-        }
-        this.filteredItemsPerPage = obj;
+        const items = typeof this.itemsPerPage === 'string' ?
+            JSON.parse(this.itemsPerPage) : this.itemsPerPage;
+        this.filteredItemsPerPage = items.map(item => (Object.assign(Object.assign({}, item), { label: item.label || item.value })));
     }
     componentWillLoad() {
         this.calculateNumberOfPages();
         this.filterOptionsArray();
-    }
-    componentDidUpdate() {
-        var paginationElement = this.el.shadowRoot.querySelector(".pagination");
-        var listItems = paginationElement.querySelectorAll("li");
-        this.addEventListenersToPageItems(listItems, paginationElement);
-        if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {
-            paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];
-        }
-        else
-            paginationElement.dataset[this.DATA_KEY] = 0;
-        this.changePage(paginationElement, false);
+        this.updateVisiblePages();
     }
     componentWillUpdate() {
-        this.calculateNumberOfPages();
+        if (this.prevInternalPage !== this.internalPage) {
+            this.updateVisiblePages();
+            this.prevInternalPage = this.internalPage;
+        }
     }
-    handleEventEmission(currActive) {
-        let currentPage = currActive + 1;
-        let totalPages = this.numberOfPages.length;
-        let prevPage = currActive === 0 ? null : currActive;
-        let nextPage = currActive + 2 > totalPages ? null : currActive + 2;
-        let itemsPerPage = this.internalItemsPerPage;
-        this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage });
+    componentDidUpdate() {
+        this.initPagination();
     }
-    addEventListenersToPageItems(listItems, paginationContainer) {
-        listItems.forEach((item) => {
-            item.addEventListener("click", (e) => {
-                var parent = paginationContainer;
-                let listItems = parent.querySelectorAll("li");
-                parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget);
-                this.changePage(parent, false);
-            });
+    handleEventEmission() {
+        this.ifxPageChange.emit({
+            currentPage: this.internalPage,
+            totalPages: this.numberOfPages.length,
+            itemsPerPage: this.internalItemsPerPage
         });
     }
-    initPagination(paginationContainer) {
-        var listItems = paginationContainer.querySelectorAll("li");
-        paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(".active"));
-        paginationContainer.querySelector(".prev").addEventListener("click", (e) => this.navigateSinglePage(e, false));
-        paginationContainer.querySelector(".next").addEventListener("click", (e) => this.navigateSinglePage(e, false));
-        this.addEventListenersToPageItems(listItems, paginationContainer);
-    }
-    navigateSinglePage(e, initialValue) {
-        let el = e;
-        if (typeof e.target === 'object') {
-            el = e.target;
-        }
-        if (!el.classList.contains(this.CLASS_DISABLED)) {
-            var parent = el.closest(".pagination");
-            var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);
-            currActive += 1 * (el.classList.contains("prev") ? -1 : 1);
-            if (currActive === -1) {
-                currActive = 0;
+    initPagination() {
+        const pagination = this.el.shadowRoot.querySelector('.pagination');
+        if (!pagination)
+            return;
+        const updateButtons = () => {
+            const prev = pagination.querySelector('.prev');
+            const next = pagination.querySelector('.next');
+            if (prev) {
+                prev.disabled = this.internalPage === 1;
+                prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);
             }
-            parent.dataset[this.DATA_KEY] = currActive;
-            this.changePage(parent, initialValue);
-        }
-    }
-    changePage(pagination, initialValue) {
-        const paginationContainer = pagination;
-        var listItems = paginationContainer.querySelectorAll("li");
-        var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);
-        listItems.forEach((item) => {
-            item.classList.remove(this.CLASS_ACTIVE);
-            item.classList.remove(this.CLASS_SIBLING_ACTIVE);
+            if (next) {
+                next.disabled = this.internalPage === this.numberOfPages.length;
+                next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);
+            }
+        };
+        pagination.querySelectorAll('li').forEach(li => {
+            li.removeEventListener('click', this.handlePageClick);
+            li.addEventListener('click', this.handlePageClick);
         });
-        if (initialValue && this.internalPage > 1) {
-            currActive = Math.floor(this.internalPage - 1);
-            paginationContainer.dataset[this.DATA_KEY] = currActive;
-        }
-        if (!initialValue) {
-            this.handleEventEmission(currActive);
-        }
-        listItems[currActive].classList.add(this.CLASS_ACTIVE);
-        if (currActive === 0) {
-            paginationContainer.querySelector(".prev").classList.add(this.CLASS_DISABLED);
-            paginationContainer.querySelector(".prev").disabled = true;
-        }
-        else {
-            listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);
-            paginationContainer.querySelector(".prev").classList.remove(this.CLASS_DISABLED);
-            paginationContainer.querySelector(".prev").disabled = false;
-        }
-        if (currActive === (listItems.length - 1)) {
-            paginationContainer.querySelector(".next").classList.add(this.CLASS_DISABLED);
-            paginationContainer.querySelector(".next").disabled = true;
-        }
-        else {
-            paginationContainer.querySelector(".next").classList.remove(this.CLASS_DISABLED);
-            paginationContainer.querySelector(".next").disabled = false;
-        }
+        updateButtons();
     }
-    calculateVisiblePageIndices() {
-        var paginationElement = this.el.shadowRoot.querySelector(".pagination");
-        this.initPagination(paginationElement);
+    changePage(newPage) {
+        newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));
+        if (newPage === this.internalPage)
+            return;
+        this.internalPage = newPage;
+        this.handleEventEmission();
+        this.initPagination();
     }
     render() {
-        return (h("div", { key: 'f1138aa4fe5acc089d56c7f595329181e8a75f8a', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'd70e63597a78ca308bd663e56e105025f6b5faf5', class: 'items__per-page-wrapper' }, h("div", { key: '3d2291d9a6b4d0cb5179d491d74b02f2804b8be1', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '73420fa125baaa1c18508a953bb6016ac6e756e0', class: 'items__per-page-field' }, h("ifx-select", { key: '550a6190051078ddf7b48f1d280030bf22d6b01e', 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: 'dbc2c59ab6781258fc899eab4fbadfae521c4185', class: 'items__total-wrapper' }, h("div", { key: '20d09e2064e12df1c9fa778f07aaca83728b122d', class: 'page__numbers-wrapper' }, h("div", { key: 'ee73197d60fb4d77359b3eab832f65bbce62087b', class: "pagination" }, h("ifx-icon-button", { key: '1ebde487240beb4c222d4339437606c229a1ac8d', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '3df26dc2566054c4ecc4a2a289abcefed8f6eb50' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '5616d93c57dd3fb7a5daedca272e8ed7c56acd1f', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'bcdab8abc24c10ba0ad9cd3c71f627b88dec16fd', class: "container" }, h("div", { key: '6e91f29112ed3f16b6a4a7dd3772f1be98267c4e', class: "items__per-page-wrapper" }, h("div", { key: 'c55a1a8d5d213e58410e282401ff7ea1cb065719', class: "items__per-page-label" }, "Results per Page"), h("div", { key: 'aafdfb3482ca7da258fe12be652eb2fa9aee5109', class: "items__per-page-field" }, h("ifx-select", { key: 'be4307725653181189af1139aff3f3f2a483df44', value: undefined, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: 'f3284f94c4cbed69550a284e62ed6f16ef389c8d', class: "items__total-wrapper" }, h("div", { key: '3ccf3cfdbca1cc61a52bea3faef96dcbfc809ed2', class: "pagination" }, h("ifx-icon-button", { key: 'cf5103d84f5be56090c997410a519742178a4b55', class: "prev", icon: "arrow-left-24", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: 'c41f035125cd56afdf010a831cc6a66b51ba2783' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '66384f5210239315c0b773f478187e75eb704c1e', class: "next", icon: "arrow-right-24", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -184,7 +155,7 @@ export class Pagination {
                 "setter": false,
                 "attribute": "current-page",
                 "reflect": false,
-                "defaultValue": "0"
+                "defaultValue": "1"
             },
             "total": {
                 "type": "number",
@@ -232,7 +203,8 @@ export class Pagination {
             "internalPage": {},
             "internalItemsPerPage": {},
             "numberOfPages": {},
-            "filteredItemsPerPage": {}
+            "filteredItemsPerPage": {},
+            "visiblePages": {}
         };
     }
     static get events() {