@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,253 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const checkboxCss = () => `:host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:var(--ifx-font-family);vertical-align:bottom}.checkbox__container .checkbox__input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0 0 0 0)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#ffffff;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#cd002f}.checkbox__container .checkbox__wrapper.readOnly{border-color:#bfbbbb}.checkbox__container .checkbox__wrapper:not(.disabled):not(.readOnly):hover{background-color:#eeeded;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#bfbbbb;border-color:#bfbbbb;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0a8276;border-radius:1px;border-color:rgba(0, 0, 0, 0);flex:none;order:0;flex-grow:0;color:#ffffff}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#cd002f}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).readOnly{background-color:#3c3a39}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#bfbbbb;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):not(.disabled):not(.readOnly):hover{background-color:#08665c;border:none;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:10.5px;height:0.75px;background-color:#1d1d1d;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .checkbox__wrapper.indeterminate.readOnly{background-color:#3c3a39;border-color:#3c3a39}.checkbox__container .checkbox__wrapper.indeterminate.readOnly:before{background-color:#ffffff}.checkbox__container .checkbox__wrapper.indeterminate.disabled{background-color:#ffffff;border-color:#bfbbbb}.checkbox__container .checkbox__input:focus-visible+.checkbox__wrapper{border:1px solid #575352;outline:2px solid #0a8276;outline-offset:2px}.checkbox__container .checkbox__input:focus-visible+.checkbox__wrapper.checked:not(.indeterminate){border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1d1d1d;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#bfbbbb}.checkbox__container .label.error{color:#1d1d1d}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}`;
+
+const Checkbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxChange = createEvent(this, "ifxChange", 7);
+        this.ifxError = createEvent(this, "ifxError", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    inputElement;
+    get el() { return getElement(this); }
+    /**
+     * Indicates whether the checkbox is disabled. When true, the checkbox cannot be interacted with and will have a disabled appearance.
+     */
+    disabled = false;
+    /**
+     * Indicates whether the checkbox is in a read-only state. When true, the checkbox will have a read-only appearance.
+     */
+    readOnly = false;
+    /**
+ * The name attribute of the input element.
+ */
+    name;
+    /**
+     * The state of the checkbox. When true, the checkbox is checked; when false, it is unchecked.
+     */
+    checked = false;
+    /**
+     * Indicates whether the checkbox is in an indeterminate state. When true, the checkbox will have an indeterminate appearance, which is typically used to indicate a "partially selected" state in a group of checkboxes.
+     */
+    indeterminate = false;
+    /**
+     * Indicates whether the checkbox is in an error state. When true, the checkbox will have an error appearance.
+     */
+    error = false;
+    /**
+     * The size of the checkbox. Can be "m" for medium (default) or "s" for small. This prop controls the overall dimensions of the checkbox and its label.
+     */
+    size = "m";
+    /**
+     * The value associated with the checkbox.
+     * This value is typically submitted with a form when the checkbox is checked.
+     * If not specified, it defaults to "on" when the checkbox is checked.
+     */
+    value;
+    internalIndeterminate;
+    internals;
+    // Store the initial checked state for form reset
+    initialChecked;
+    /**
+     * Event emitted when the checkbox state changes.
+     * Emits the new checked state as a boolean value.
+     */
+    ifxChange;
+    /**
+     * Event emitted when the error state changes.
+     * Emits the new error state as a boolean value.
+     */
+    ifxError;
+    /**
+     * Method to get the current checked state of the checkbox.
+     * @returns A promise that resolves to a boolean indicating whether the checkbox is checked.
+     */
+    async isChecked() {
+        return this.checked;
+    }
+    /**
+     * Method to set the checked state of the checkbox.
+     * @param newVal A boolean value to set the checked state of the checkbox.
+     * @returns A promise that resolves when the checked state has been updated.
+     */
+    async setChecked(newVal) {
+        this.checked = newVal;
+    }
+    /**
+     * @deprecated Use `setChecked` instead.
+     */
+    async toggleCheckedState(newVal) {
+        this.checked = newVal;
+    }
+    /**
+     * Toggles the checked state.
+     * @returns Resolves when the toggle is complete.
+     */
+    async toggle() {
+        this.handleCheckbox();
+        return Promise.resolve(this.checked);
+    }
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.checked = newValue;
+            this.inputElement.checked = this.checked; // update the checkbox's checked property
+        }
+    }
+    errorChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.ifxError.emit(newValue);
+        }
+    }
+    indeterminateChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.internalIndeterminate = newValue;
+            this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
+            // Update form value when indeterminate state changes
+            if (newValue) {
+                // Indeterminate state should not submit a value
+                this.internals.setFormValue(null);
+            }
+            else if (this.checked) {
+                // If becoming determinate and checked, set the form value
+                const formValue = this.value !== undefined ? this.value : "on";
+                this.internals.setFormValue(formValue);
+            }
+        }
+    }
+    componentWillLoad() {
+        this.checked = this.checked;
+        this.internalIndeterminate = this.indeterminate;
+        // Store initial checked state for form reset
+        this.initialChecked = this.checked;
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-checkbox", await framework);
+        }
+        // Set initial form value if checkbox is checked and not indeterminate
+        if (this.checked && !this.internalIndeterminate) {
+            const formValue = this.value !== undefined ? this.value : "on";
+            this.internals.setFormValue(formValue);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    componentDidRender() {
+        this.inputElement.indeterminate = this.internalIndeterminate;
+    }
+    /**
+     * Callback for form association.
+     * Called whenever the form is reset.
+     * Resets the checkbox to its initial state.
+     */
+    formResetCallback() {
+        // Reset to initial checked state
+        this.checked = this.initialChecked;
+        if (this.inputElement) {
+            this.inputElement.checked = this.initialChecked;
+        }
+        // Update form value based on initial state
+        if (this.initialChecked) {
+            const formValue = this.value !== undefined ? this.value : "on";
+            this.internals.setFormValue(formValue);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    handleCheckbox(fromInput = false) {
+        if (this.readOnly || (this.disabled && !this.error)) {
+            if (fromInput) {
+                this.inputElement.checked = this.checked;
+            }
+            return;
+        }
+        if (fromInput) {
+            if (this.inputElement.indeterminate) {
+                this.inputElement.indeterminate = false;
+                this.internalIndeterminate = false;
+            }
+            this.checked = this.inputElement.checked;
+        }
+        else if (!this.inputElement.indeterminate) {
+            this.checked = !this.checked;
+            this.inputElement.checked = this.checked;
+        }
+        if (this.checked && !this.internalIndeterminate) {
+            if (this.value !== undefined) {
+                this.internals.setFormValue(this.value);
+            }
+            else {
+                this.internals.setFormValue("on");
+            }
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+        this.ifxChange.emit(this.checked);
+    }
+    setInputElement(el) {
+        this.inputElement = el;
+    }
+    render() {
+        const slot = this.el.innerHTML;
+        let hasSlot = false;
+        if (slot) {
+            hasSlot = true;
+        }
+        return (h("div", { key: '5d0b165002d30e0bc960bcfad6c70c7e558b65df', class: "checkbox__container" }, h("input", { key: '55292c11c7fce3fc06401931b232bab24fc45da2', type: "checkbox", name: this.name, class: "checkbox__input", ref: (el) => this.setInputElement(el), checked: this.checked, onChange: () => this.handleCheckbox(true), id: "checkbox", value: `${this.value}`, disabled: this.disabled && !this.readOnly && !this.error, readonly: this.readOnly }), h("label", { key: 'decb826017b1c77a024ff4100e7bee5f6269aae1', htmlFor: "checkbox", class: `checkbox__wrapper 
+						${this.getCheckedClassName()}
+						${this.size === "m" ? "checkbox-m" : ""}
+						${this.indeterminate ? "indeterminate" : ""}
+						${this.readOnly ? "readOnly" : ""}
+                        ${this.error && !this.readOnly ? "error" : ""}
+                        ${this.checked && !this.readOnly ? "checked" : ""}
+                        ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}
+						` }, this.checked && !this.internalIndeterminate && (h("ifx-icon", { key: 'dd35641c17dac394a27b0f393de17607770b4244', icon: "check-16" }))), hasSlot && (h("label", { key: '13d31ca7d3e92635298d3134330ef0e142457c46', id: "label", htmlFor: "checkbox", class: `
+							label ${this.size === "m" ? "label-m" : ""}
+                            ${this.readOnly ? "readOnly" : ""}
+                            ${this.error && !this.readOnly ? "error" : ""}
+                            ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}` }, h("slot", { key: '4026e2c03dac508e347c69291f25463fcbef47ab' })))));
+    }
+    getCheckedClassName() {
+        if (this.error) {
+            if (this.checked) {
+                return "checked error";
+            }
+            else {
+                return "error";
+            }
+        }
+        else if (this.checked) {
+            return "checked";
+        }
+        else
+            return "";
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "valueChanged": 0
+            }],
+        "error": [{
+                "errorChanged": 0
+            }],
+        "indeterminate": [{
+                "indeterminateChanged": 0
+            }]
+    }; }
+};
+Checkbox.style = checkboxCss();
+
+export { Checkbox as ifx_checkbox };

package/dist/esm/ifx-chip-item_2.entry.js

@@ -0,0 +1,389 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const chipItemCss = () => `.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;font-family:var(--ifx-font-family);transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#eeeded}.chip-item:active{background-color:#bfbbbb}.chip-item:focus{outline:2px solid #0a8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family)}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3";font-family:var(--ifx-font-family)}.chip-item.chip-item--selected{color:#0a8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}`;
+
+const ChipItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxChipItemSelect = createEvent(this, "ifxChipItemSelect", 5);
+    }
+    get chipItem() { return getElement(this); }
+    /** Emitted on chip select/deselect. */
+    ifxChipItemSelect;
+    /** Identifier value for this chip. */
+    value = undefined;
+    /** Bahaviour and appearance configuration. */
+    chipState = {
+        emitIfxChipItemSelect: true,
+        variant: "multi",
+        size: "large",
+    };
+    /** Wether the chip is selected (reflected). */
+    selected = false;
+    updateItemSelection(event) {
+        if (this.chipState.variant === "single") {
+            const target = event.target;
+            /* Also making sure chip items are from the same group (parent) while unselecting. */
+            if (this.chipItem !== target &&
+                this.chipItem.parentElement === target.parentElement) {
+                this.selected = false;
+            }
+        }
+    }
+    validateSelected(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            /* Do not emit if ChipState does not allow. */
+            if (this.chipState.emitIfxChipItemSelect) {
+                this.emitIfxChipItemSelectEvent();
+            }
+            else {
+                this.chipState.emitIfxChipItemSelect = true;
+            }
+        }
+    }
+    getItemLabel() {
+        return this.chipItem.innerText;
+    }
+    toggleItemSelection() {
+        this.selected = !this.selected;
+    }
+    emitIfxChipItemSelectEvent(emitIfxChange = true) {
+        this.ifxChipItemSelect.emit({
+            emitIfxChange: emitIfxChange,
+            key: this.chipState.key,
+            label: this.getItemLabel(),
+            selected: this.selected,
+            value: this.value,
+        });
+    }
+    handleItemClick() {
+        this.toggleItemSelection();
+    }
+    handleItemKeyDown(event) {
+        if (event.code === "Enter" || event.code === "Space") {
+            this.toggleItemSelection();
+        }
+    }
+    handleSelectedState() {
+        if (this.selected) {
+            this.emitIfxChipItemSelectEvent(false);
+        }
+    }
+    componentWillLoad() {
+        /* Propogating the selected state to the Chip (Parent) component if it is set. */
+        this.handleSelectedState();
+    }
+    render() {
+        return (h("div", { key: '58f9240dc74d44b5b53c47915fb5f7b66a2a514b', class: `chip-item chip-item--${this.chipState.size} 
+                    chip-item--${(this.selected && this.chipState.variant) === "single" ? "selected" : ""}`, tabIndex: 0, onClick: () => {
+                this.handleItemClick();
+            }, onKeyDown: (e) => {
+                this.handleItemKeyDown(e);
+            }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === "multi" && (h("ifx-checkbox", { key: '993b3d6ffff940bf482020b2d558771ac0c1b8f5', checked: this.selected, tabIndex: -1, size: "s" })), h("div", { key: '6972fef8a803a7e04f4ee54a935ac7b0578b02ae', class: "chip-item__label" }, " ", h("slot", { key: 'b05253136ff31f42eed49e140fccbbfc2cc4a7d8' }), " "), h("div", { key: '94f604d6c7cae96f03e9f926f28f102c5d976b9c', class: "chip-item__selected-indicator" }, h("ifx-icon", { key: '20dd0cf509381847d0aedec7c0f10eb16f09ce3f', icon: "check-16" }, " "))));
+    }
+    static get watchers() { return {
+        "selected": [{
+                "validateSelected": 0
+            }]
+    }; }
+};
+ChipItem.style = chipItemCss();
+
+const paginationCss = () => `:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family);flex-wrap:wrap}.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}.page__button{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) page__button{background-color:#EEEDED}li:active:not(.active) .page__button{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active .page__button{color:#fff}li:hover{cursor:pointer}li .page__button{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 (max-width: 768px){.container{gap:16px;justify-content:left}.container .items__total-wrapper .pagination ol{gap:12px}}@media (max-width: 374px){.pagination .ellipsis+.active{margin-left:8px}.pagination .active+.ellipsis{margin-left:8px}}`;
+
+const Pagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxPageChange = createEvent(this, "ifxPageChange", 7);
+        this.ifxItemsPerPageChange = createEvent(this, "ifxItemsPerPageChange", 7);
+    }
+    get el() { return getElement(this); }
+    /** Emitted when the current page changes */
+    ifxPageChange;
+    /** Emitted when the items-per-page value changes */
+    ifxItemsPerPageChange;
+    /** The current page number passed from the outside */
+    currentPage = 1;
+    /** Wether to display the items-per-page selector */
+    showItemsPerPage = true;
+    showAllItems = false;
+    internalPage = 1;
+    internalItemsPerPage = 10;
+    numberOfPages = [];
+    /** Total number of items to paginate */
+    total = 1;
+    /** Items-per-page options */
+    itemsPerPage;
+    filteredItemsPerPage = [];
+    visiblePages = [];
+    itemsPerPageLabel = "Results per Page";
+    CLASS_DISABLED = "disabled";
+    CLASS_ACTIVE = "active";
+    prevInternalPage;
+    watchTotalHandler() {
+        if (this.showAllItems) {
+            this.internalItemsPerPage = this.total;
+        }
+        this.calculateNumberOfPages();
+        this.updateVisiblePages();
+    }
+    currentPageWatcher(newVal) {
+        this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));
+        this.calculateNumberOfPages();
+        this.updateVisiblePages();
+    }
+    setItemsPerPage(e) {
+        const value = e.detail?.value || e.detail?.label;
+        if (value === "all") {
+            if (this.showAllItems)
+                return;
+            this.showAllItems = true;
+            this.internalItemsPerPage = this.total;
+            this.internalPage = 1;
+            this.calculateNumberOfPages();
+            this.updateVisiblePages();
+            this.handleEventEmission();
+            return;
+        }
+        this.showAllItems = false;
+        const newItemsPerPage = parseInt(value) || 10;
+        if (newItemsPerPage === this.internalItemsPerPage) {
+            return;
+        }
+        this.internalItemsPerPage = newItemsPerPage;
+        this.internalPage = 1;
+        this.calculateNumberOfPages();
+        this.updateVisiblePages();
+        this.handleEventEmission();
+    }
+    emitItemsPerPage(e) {
+        this.ifxItemsPerPageChange.emit(e.detail.label);
+    }
+    async componentDidLoad() {
+        if (this.showItemsPerPage) {
+            const select = this.el.shadowRoot.querySelector("#itemsPerPageSelect");
+            if (select) {
+                select.addEventListener("ifxSelect", (e) => this.emitItemsPerPage(e));
+            }
+        }
+        // Add resize listener to update pagination on screen size changes
+        window.addEventListener("resize", this.handleResize);
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-pagination", await framework);
+        }
+        this.initPagination();
+    }
+    disconnectedCallback() {
+        if (this.showItemsPerPage) {
+            const select = this.el.shadowRoot.querySelector("#itemsPerPageSelect");
+            if (select) {
+                select.removeEventListener("ifxSelect", (e) => this.emitItemsPerPage(e));
+            }
+        }
+        // Remove resize listener
+        window.removeEventListener("resize", this.handleResize);
+        // Clear any pending resize timeout
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+    }
+    updateVisiblePages() {
+        // Check if screen is mobile (< 400px)
+        const isMobile = window.innerWidth < 400;
+        const totalPages = this.numberOfPages.length;
+        const current = this.internalPage;
+        let pages = [];
+        if (isMobile) {
+            // Mobile logic: maximum 5 elements
+            if (totalPages <= 5) {
+                pages = [...this.numberOfPages];
+            }
+            else {
+                // Always show first page
+                pages.push(1);
+                if (current <= 2) {
+                    // Show: 1 2 3 … 10 (for pages 1 and 2)
+                    pages.push(2, 3, "...", totalPages);
+                }
+                else if (current >= totalPages - 1) {
+                    // Show: 1 … 23 24 25 (for last 2 pages only)
+                    pages.push("...", totalPages - 2, totalPages - 1, totalPages);
+                }
+                else {
+                    // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)
+                    pages.push("...", current, "...", totalPages);
+                }
+            }
+        }
+        else {
+            // Desktop logic: maximum 7 elements
+            const buffer = 2;
+            if (totalPages <= 7) {
+                pages = [...this.numberOfPages];
+            }
+            else {
+                // Always show first page
+                pages.push(1);
+                // Determine the range around current page
+                let start = Math.max(2, current - buffer);
+                let end = Math.min(totalPages - 1, current + buffer);
+                // Adjust range to ensure we show enough pages
+                // If we're close to the beginning, extend the end
+                if (current <= 4) {
+                    start = 2;
+                    end = Math.min(totalPages - 1, 5);
+                }
+                // If we're close to the end, extend the start
+                else if (current >= totalPages - 3) {
+                    start = Math.max(2, totalPages - 4);
+                    end = totalPages - 1;
+                }
+                // For middle pages, show current +/- 1
+                else {
+                    start = current - 1;
+                    end = current + 1;
+                }
+                // Add ellipsis before the range if there's a gap
+                if (start > 2) {
+                    pages.push("...");
+                }
+                // Add the range of pages
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+                // Add ellipsis after the range if there's a gap
+                if (end < totalPages - 1) {
+                    pages.push("...");
+                }
+                // Always show last page
+                pages.push(totalPages);
+            }
+        }
+        this.visiblePages = pages;
+    }
+    calculateNumberOfPages() {
+        if (this.showAllItems) {
+            this.numberOfPages = [1];
+            this.internalPage = 1;
+            return;
+        }
+        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() {
+        const items = typeof this.itemsPerPage === "string"
+            ? JSON.parse(this.itemsPerPage)
+            : this.itemsPerPage;
+        this.filteredItemsPerPage = items.map((item) => ({
+            ...item,
+            label: item.label || item.value,
+        }));
+    }
+    componentWillLoad() {
+        this.filterOptionsArray();
+        const selectedOption = this.filteredItemsPerPage.find((option) => option.selected);
+        if (selectedOption) {
+            const value = selectedOption.value || selectedOption.label;
+            if (value === "all") {
+                this.showAllItems = true;
+                this.internalItemsPerPage = this.total;
+            }
+            else {
+                this.internalItemsPerPage = Number(selectedOption.value);
+            }
+        }
+        else if (this.filteredItemsPerPage.length > 0) {
+            const firstItem = this.filteredItemsPerPage[0];
+            const value = firstItem.value || firstItem.label;
+            if (value === "all") {
+                this.showAllItems = true;
+                this.internalItemsPerPage = this.total;
+            }
+            else {
+                this.internalItemsPerPage = Number(firstItem.value);
+            }
+        }
+        this.calculateNumberOfPages();
+        this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));
+        this.updateVisiblePages();
+    }
+    componentWillUpdate() {
+        if (this.prevInternalPage !== this.internalPage) {
+            this.updateVisiblePages();
+            this.prevInternalPage = this.internalPage;
+        }
+    }
+    componentDidUpdate() {
+        this.initPagination();
+    }
+    handleEventEmission() {
+        this.ifxPageChange.emit({
+            currentPage: this.internalPage,
+            totalPages: this.numberOfPages.length,
+            itemsPerPage: this.internalItemsPerPage,
+        });
+    }
+    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);
+            }
+            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);
+        });
+        updateButtons();
+    }
+    handlePageClick = (e) => {
+        const li = e.currentTarget;
+        const page = parseInt(li.dataset.page);
+        if (!isNaN(page))
+            this.changePage(page);
+    };
+    handleResize = () => {
+        // Debounce resize events to prevent excessive calls
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+            this.updateVisiblePages();
+        }, 100);
+    };
+    resizeTimeout;
+    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: '2348d5d2d9f103015cfd2a164cd1d2c9c0f245eb', class: "container" }, this.showItemsPerPage && (h("div", { key: '73ce710cfb072362a00a357590a9648234602b6c', class: "items__per-page-wrapper" }, h("div", { key: '5c60affe0f8606194b24727a74de3268e2f22c68', class: "items__per-page-label" }, this.itemsPerPageLabel), h("div", { key: '4ac77e2a82f78c5d82951734f0bb7a8fdac26e77', class: "items__per-page-field" }, h("ifx-select", { key: '8ad74f128d60bb8148164703e77cdd9f36015192', id: "itemsPerPageSelect", placeholder: false, showSearch: false, showClearButton: false, size: "s", "placeholder-value": "Select" }, this.filteredItemsPerPage.map((option) => (h("ifx-select-option", { value: option.value, selected: option.selected }, option.label))))))), h("div", { key: 'cfb5e15010ced798935f52b663f5878747e19abc', class: "items__total-wrapper" }, h("div", { key: '92e522df117f331f911273aa34a2c5e3d1041361', class: "pagination" }, h("ifx-icon-button", { key: '9ebbdb63c56cbdcd7a80f8d08c052e540b470ded', class: "prev", icon: "arrow-left-16", "aria-label": "Previous Page", onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: '2c31886f571f8cda66098631ff6b0595a9847290' }, this.visiblePages.map((page, i) => typeof page === "number" ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("span", { class: "page__button", role: "button", tabindex: "0", "aria-current": page === this.internalPage ? "page" : undefined, "aria-label": `Page ${page}`, onClick: () => this.changePage(page), onKeyDown: (e) => (e.key === "Enter" || e.key === " ") &&
+                this.changePage(page) }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", { "aria-hidden": "true" }, "..."))))), h("ifx-icon-button", { key: '0972b959777ff5b96e99fe609adf2684fb660612', class: "next", icon: "arrow-right-16", "aria-label": "Next Page", onClick: () => this.changePage(this.internalPage + 1), variant: "secondary" })))));
+    }
+    static get watchers() { return {
+        "total": [{
+                "watchTotalHandler": 0
+            }],
+        "currentPage": [{
+                "currentPageWatcher": 0
+            }]
+    }; }
+};
+Pagination.style = paginationCss();
+
+export { ChipItem as ifx_chip_item, Pagination as ifx_pagination };