import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../directives/evo-let/evo-let.directive";
var PaginatorLayout;
(function (PaginatorLayout) {
    PaginatorLayout["SHORT"] = "SHORT";
    PaginatorLayout["BEGINNING"] = "BEGINNING";
    PaginatorLayout["MIDDLE"] = "MIDDLE";
    PaginatorLayout["END"] = "END";
})(PaginatorLayout || (PaginatorLayout = {}));
const SHORT_STATE_PAGES_LIMIT = 5;
const CORNER_STATE_PAGE_MAX_OFFSET = 3;
const DEFAULT_PAGE_SIZE = 10;
export class EvoPaginatorComponent {
    constructor() {
        this.pageClick = new EventEmitter();
        this.currentPage = 1; // starts with 1
        this.pagesTotal = 1;
        this.CORNER_STATE_PAGE_MAX_OFFSET = CORNER_STATE_PAGE_MAX_OFFSET;
        this.PaginatorLayout = PaginatorLayout;
        this.pageSize = DEFAULT_PAGE_SIZE;
        this.itemsTotal = 0;
    }
    set setCurrentPage(value) {
        this.currentPage = parseInt(value, 10) || 1;
    }
    set setItemsTotal(itemsTotal) {
        this.itemsTotal = itemsTotal > 0 ? itemsTotal : 0;
        this.pagesTotal = Math.ceil(this.itemsTotal / this.pageSize) || 1;
    }
    set setPageSize(pageSize) {
        this.pageSize = pageSize > 0 ? pageSize : 10;
        this.pagesTotal = Math.ceil(this.itemsTotal / this.pageSize) || 1;
    }
    get currentLayout() {
        if (this.pagesTotal <= SHORT_STATE_PAGES_LIMIT) {
            return PaginatorLayout.SHORT;
        }
        // first CORNER_STATE_PAGE_MAX_OFFSET pages
        // ex: CORNER_STATE_PAGE_MAX_OFFSET = 3, currentPage = 1 | 2 | 3
        if (this.currentPage <= CORNER_STATE_PAGE_MAX_OFFSET) {
            return PaginatorLayout.BEGINNING;
        }
        // last CORNER_STATE_PAGE_MAX_OFFSET pages
        // ex: CORNER_STATE_PAGE_MAX_OFFSET = 3, pagesTotal = 100, currentPage = 98 | 99 | 100
        if (this.pagesTotal - this.currentPage < CORNER_STATE_PAGE_MAX_OFFSET) {
            return PaginatorLayout.END;
        }
        return PaginatorLayout.MIDDLE;
    }
    onPageClick(page) {
        if (page === this.currentPage) {
            return;
        }
        const payload = {
            currentPage: page,
            previousPage: this.currentPage,
            pageSize: this.pageSize,
            pagesTotal: this.pagesTotal,
        };
        this.currentPage = page;
        this.pageClick.emit(payload);
    }
    isSelectedPage(page) {
        return parseInt(page, 10) === this.currentPage;
    }
}
EvoPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
EvoPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoPaginatorComponent, selector: "evo-paginator", inputs: { setCurrentPage: ["currentPage", "setCurrentPage"], setItemsTotal: ["itemsTotal", "setItemsTotal"], setPageSize: ["pageSize", "setPageSize"] }, outputs: { pageClick: "pageClick" }, ngImport: i0, template: "<div class=\"paginator\">\n    <ng-container [ngSwitch]=\"currentLayout\">\n        <ng-container *ngSwitchCase=\"PaginatorLayout.SHORT\" [ngTemplateOutlet]=\"shortTpl\"></ng-container>\n        <ng-container *ngSwitchCase=\"PaginatorLayout.BEGINNING\" [ngTemplateOutlet]=\"beginningTpl\"></ng-container>\n        <ng-container *ngSwitchCase=\"PaginatorLayout.MIDDLE\" [ngTemplateOutlet]=\"middleTpl\"></ng-container>\n        <ng-container *ngSwitchCase=\"PaginatorLayout.END\" [ngTemplateOutlet]=\"endTpl\"></ng-container>\n    </ng-container>\n</div>\n\n<!-- SIMPLE LAYOUT, just pages in line -->\n<!-- ex: (1) 2 3 4 5 -->\n<ng-template #shortTpl>\n    <ng-container *ngFor=\"let page of [].constructor(pagesTotal); let i = index\">\n        <button\n            *evoLet=\"i + 1 as page\"\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n</ng-template>\n\n<!-- BEGINNING LAYOUT, when selected some of first pages -->\n<!-- ex: 1 (2) 3 4 ... 99 -->\n<ng-template #beginningTpl>\n    <ng-container *ngFor=\"let page of [].constructor(CORNER_STATE_PAGE_MAX_OFFSET + 1); let i = index\">\n        <button\n            *evoLet=\"i + 1 as page\"\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n\n    <div class=\"paginator__separator\">...</div>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(pagesTotal)\">{{ pagesTotal }}</button>\n</ng-template>\n\n<!-- MIDDLE LAYOUT, when selected page is not in the begging nor at the end -->\n<!-- ex: 1 ... 35 (36) 37 ... 99 -->\n<ng-template #middleTpl>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(1)\">1</button>\n    <div class=\"paginator__separator\">...</div>\n\n    <ng-container *ngFor=\"let page of [currentPage - 1, currentPage, currentPage + 1]\">\n        <button\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n\n    <div class=\"paginator__separator\">...</div>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(pagesTotal)\">{{ pagesTotal }}</button>\n</ng-template>\n\n<!-- END LAYOUT, when selected some of last pages -->\n<!-- ex: 1 ... 96 (97) 98 99 -->\n<ng-template #endTpl>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(1)\">1</button>\n    <div class=\"paginator__separator\">...</div>\n\n    <ng-container *ngFor=\"let page of [].constructor(CORNER_STATE_PAGE_MAX_OFFSET + 1); let i = index\">\n        <button\n            *evoLet=\"pagesTotal - CORNER_STATE_PAGE_MAX_OFFSET + i as page\"\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;width:100%;-webkit-user-select:none;user-select:none;justify-content:center}.paginator{display:flex;align-items:baseline;justify-content:center;gap:2px;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:22px;font-weight:400}.paginator__btn{flex:0 0 auto;min-width:32px;height:32px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:16px;background-color:transparent;color:#727272;transition:background-color .3s,color .3s}.paginator__btn:hover{background-color:#001d260a;color:#212121}.paginator__btn_selected{background-color:#e1ecef;color:#212121;pointer-events:none}.paginator__separator{flex:0 0 auto;color:#c6c6c6;pointer-events:none}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.EvoLetDirective, selector: "[evoLet]", inputs: ["evoLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoPaginatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"paginator\">\n    <ng-container [ngSwitch]=\"currentLayout\">\n        <ng-container *ngSwitchCase=\"PaginatorLayout.SHORT\" [ngTemplateOutlet]=\"shortTpl\"></ng-container>\n        <ng-container *ngSwitchCase=\"PaginatorLayout.BEGINNING\" [ngTemplateOutlet]=\"beginningTpl\"></ng-container>\n        <ng-container *ngSwitchCase=\"PaginatorLayout.MIDDLE\" [ngTemplateOutlet]=\"middleTpl\"></ng-container>\n        <ng-container *ngSwitchCase=\"PaginatorLayout.END\" [ngTemplateOutlet]=\"endTpl\"></ng-container>\n    </ng-container>\n</div>\n\n<!-- SIMPLE LAYOUT, just pages in line -->\n<!-- ex: (1) 2 3 4 5 -->\n<ng-template #shortTpl>\n    <ng-container *ngFor=\"let page of [].constructor(pagesTotal); let i = index\">\n        <button\n            *evoLet=\"i + 1 as page\"\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n</ng-template>\n\n<!-- BEGINNING LAYOUT, when selected some of first pages -->\n<!-- ex: 1 (2) 3 4 ... 99 -->\n<ng-template #beginningTpl>\n    <ng-container *ngFor=\"let page of [].constructor(CORNER_STATE_PAGE_MAX_OFFSET + 1); let i = index\">\n        <button\n            *evoLet=\"i + 1 as page\"\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n\n    <div class=\"paginator__separator\">...</div>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(pagesTotal)\">{{ pagesTotal }}</button>\n</ng-template>\n\n<!-- MIDDLE LAYOUT, when selected page is not in the begging nor at the end -->\n<!-- ex: 1 ... 35 (36) 37 ... 99 -->\n<ng-template #middleTpl>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(1)\">1</button>\n    <div class=\"paginator__separator\">...</div>\n\n    <ng-container *ngFor=\"let page of [currentPage - 1, currentPage, currentPage + 1]\">\n        <button\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n\n    <div class=\"paginator__separator\">...</div>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(pagesTotal)\">{{ pagesTotal }}</button>\n</ng-template>\n\n<!-- END LAYOUT, when selected some of last pages -->\n<!-- ex: 1 ... 96 (97) 98 99 -->\n<ng-template #endTpl>\n    <button class=\"paginator__btn\" (click)=\"onPageClick(1)\">1</button>\n    <div class=\"paginator__separator\">...</div>\n\n    <ng-container *ngFor=\"let page of [].constructor(CORNER_STATE_PAGE_MAX_OFFSET + 1); let i = index\">\n        <button\n            *evoLet=\"pagesTotal - CORNER_STATE_PAGE_MAX_OFFSET + i as page\"\n            class=\"paginator__btn\"\n            [class.paginator__btn_selected]=\"isSelectedPage(page)\"\n            (click)=\"onPageClick(page)\"\n        >\n            {{ page }}\n        </button>\n    </ng-container>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;width:100%;-webkit-user-select:none;user-select:none;justify-content:center}.paginator{display:flex;align-items:baseline;justify-content:center;gap:2px;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:22px;font-weight:400}.paginator__btn{flex:0 0 auto;min-width:32px;height:32px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:16px;background-color:transparent;color:#727272;transition:background-color .3s,color .3s}.paginator__btn:hover{background-color:#001d260a;color:#212121}.paginator__btn_selected{background-color:#e1ecef;color:#212121;pointer-events:none}.paginator__separator{flex:0 0 auto;color:#c6c6c6;pointer-events:none}\n"] }]
        }], propDecorators: { setCurrentPage: [{
                type: Input,
                args: ['currentPage']
            }], setItemsTotal: [{
                type: Input,
                args: ['itemsTotal']
            }], setPageSize: [{
                type: Input,
                args: ['pageSize']
            }], pageClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 