import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D16h8pzh.js';
import { integerSequence } from '@verdocs/js-sdk';

const verdocsPaginationCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}";

const ChevronDoubleLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>`;
const ChevronDoubleRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>`;
const VISIBLE_PAGES = 5;
const PageButton = ({ page, selected, onClick }) => {
    let label;
    if (page === 'first') {
        label = ChevronDoubleLeft;
    }
    else if (page === 'last') {
        label = ChevronDoubleRight;
    }
    else {
        label = String(page + 1);
    }
    return h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
};
const VerdocsQuickFilter = /*@__PURE__*/ proxyCustomElement(class VerdocsQuickFilter extends H {
    constructor() {
        super();
        this.__registerHost();
        this.selectPage = createEvent(this, "selectPage");
        /**
         * The currently selected page.
         */
        this.selectedPage = 0;
        /**
         * The total number of items.
         */
        this.itemCount = 1;
        /**
         * The number of displayed per page.
         */
        this.perPage = 10;
    }
    handleSelectPage(page) {
        var _a;
        this.selectedPage = page;
        (_a = this.selectPage) === null || _a === void 0 ? void 0 : _a.emit({ selectedPage: page });
    }
    render() {
        const firstPage = Math.max(0, this.selectedPage - 2);
        const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
        const pagesToDisplay = integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
        return (h(Host, { key: 'be5c85f6d219c3589c3ef508e2305cbebea4f320' }, this.selectedPage > 0 && h(PageButton, { key: 'de0c9f90c0af7b77f6d9112c7e2d43978511d0d7', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && h("div", { key: 'f89043de5ca509613e85e3dc00abc8bd3450be6d', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && h("div", { key: '2ddedd7acfab567d550e77bc9471f35114d427de', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && h(PageButton, { key: '64be509651e68b79bc0f1084eb2e0204d769dfef', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
    }
    get el() { return this; }
    static get style() { return verdocsPaginationCss; }
}, [256, "verdocs-pagination", {
        "selectedPage": [1538, "selected-page"],
        "itemCount": [2, "item-count"],
        "perPage": [2, "per-page"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-pagination"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-pagination":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsQuickFilter);
            }
            break;
    } });
}

export { VerdocsQuickFilter as V, defineCustomElement as d };
//# sourceMappingURL=p-CqjH6KjT.js.map

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