import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
import { d as defineCustomElement$3 } from './p-Bm-eGlq5.js';
import { d as defineCustomElement$2 } from './p-C8gN_PDS.js';
import { d as defineCustomElement$1 } from './p-GP5uSTr1.js';

const paginationCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}: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 = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxPageChange = createEvent(this, "ifxPageChange", 7);
        this.ifxItemsPerPageChange = createEvent(this, "ifxItemsPerPageChange", 7);
        this.currentPage = 1;
        this.showItemsPerPage = true;
        this.internalPage = 1;
        this.internalItemsPerPage = 10;
        this.numberOfPages = [];
        this.total = 1;
        this.filteredItemsPerPage = [];
        this.visiblePages = [];
        this.CLASS_DISABLED = "disabled";
        this.CLASS_ACTIVE = "active";
        this.handlePageClick = (e) => {
            const li = e.currentTarget;
            const page = parseInt(li.dataset.page);
            if (!isNaN(page))
                this.changePage(page);
        };
        this.handleResize = () => {
            // Debounce resize events to prevent excessive calls
            clearTimeout(this.resizeTimeout);
            this.resizeTimeout = setTimeout(() => {
                this.updateVisiblePages();
            }, 100);
        };
    }
    watchTotalHandler() {
        this.calculateNumberOfPages();
        this.updateVisiblePages();
    }
    currentPageWatcher(newVal) {
        this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));
        this.calculateNumberOfPages();
        this.updateVisiblePages();
    }
    setItemsPerPage(e) {
        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();
    }
    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 (< 375px)
        const isMobile = window.innerWidth < 375;
        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() {
        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 => (Object.assign(Object.assign({}, item), { label: item.label || item.value })));
    }
    componentWillLoad() {
        this.filterOptionsArray();
        const selectedOption = this.filteredItemsPerPage.find(option => option.selected);
        if (selectedOption) {
            this.internalItemsPerPage = Number(selectedOption.value);
        }
        else if (this.filteredItemsPerPage.length > 0) {
            this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].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();
    }
    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: '9a4b41bb714202dcc144f626b9a2096480852ad6', class: "container" }, this.showItemsPerPage && (h("div", { key: '9e829381e98967180e89bf8f8988c67bbb998814', class: "items__per-page-wrapper" }, h("div", { key: 'be5d328337c18096cd1363f3c7c0c060693fe525', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '37f663194a695059779305e0723321c26f55d191', class: "items__per-page-field" }, h("ifx-select", { key: '916cc188fd2f7d86243db5955f091e188defbacc', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" })))), h("div", { key: 'f6531ac8c0710f53ff375e8ee4fa19bb47be5cef', class: "items__total-wrapper" }, h("div", { key: '4edaf3f1bc17c3423c2b39473a0f5ddc959278d6', class: "pagination" }, h("ifx-icon-button", { key: '7341fced786739f5970cfc9940381b2b2901de63', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: 'b7af29f3b08ee99b3c880c7af51b4d491630e55c' }, 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: '5bdcefa2773fb49f8d7c4190a48fe5a98f6e0442', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1), variant: "secondary" })))));
    }
    get el() { return this; }
    static get watchers() { return {
        "total": ["watchTotalHandler"],
        "currentPage": ["currentPageWatcher"]
    }; }
    static get style() { return paginationCss; }
}, [257, "ifx-pagination", {
        "currentPage": [2, "current-page"],
        "showItemsPerPage": [4, "show-items-per-page"],
        "total": [2],
        "itemsPerPage": [1, "items-per-page"],
        "internalPage": [32],
        "internalItemsPerPage": [32],
        "numberOfPages": [32],
        "filteredItemsPerPage": [32],
        "visiblePages": [32]
    }, [[0, "ifxSelect", "setItemsPerPage"]], {
        "total": ["watchTotalHandler"],
        "currentPage": ["currentPageWatcher"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-pagination", "ifx-icon", "ifx-icon-button", "ifx-select"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-pagination":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Pagination);
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ifx-icon-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "ifx-select":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Pagination as P, defineCustomElement as d };
//# sourceMappingURL=p-C53lC4vo.js.map

//# sourceMappingURL=p-C53lC4vo.js.map