import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class Pagination {
    constructor() {
        this.activeAlphabet = '';
        this.pageArray = [];
        this.currentPage = 1;
        this.isInvalidInput = false;
        this.selectedPage = new EventEmitter();
        this.selectedAlphabet = new EventEmitter();
        this.alphabetsArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
    }
    ngOnInit() { }
    alphabetChange(alphabet) {
        this.activeAlphabet = alphabet;
        this.selectedAlphabet.emit(alphabet);
        this.goToPageArrayGenerate(1, false);
    }
    ngOnChanges(event) {
        this.pageArray = [];
        if (this.pageCount > 0) {
            if (this.pageCount < 5) {
                for (let i = 1; i <= this.pageCount; i++) {
                    this.pageArray.push(i);
                }
                return;
            }
            this.goToPageArrayGenerate(this.currentPage, false);
        }
    }
    increaseOrDecrease(value) {
        this.currentPage += value;
        if (this.currentPage > 3 && this.currentPage <= this.pageCount && this.pageArray[this.pageArray.length - 1] < this.pageCount) {
            if (value > 0) {
                this.pageArray.shift();
                this.pageArray.push(this.pageArray[this.pageArray.length - 1] + 1);
            }
        }
        if (this.currentPage > 2 && value < 0 && this.pageArray[0] > 1 && this.currentPage < this.pageCount - 2) {
            this.pageArray.pop();
            this.pageArray.unshift(this.pageArray[0] - 1);
        }
        this.selectedPage.emit(this.currentPage);
    }
    onEnterPress(event) {
        if (event.key.toLowerCase() === 'enter') {
            if (!this.enterPageNumber || this.enterPageNumber > this.pageCount || this.enterPageNumber < 1) {
                this.isInvalidInput = true;
                return;
            }
            else {
                this.isInvalidInput = false;
                this.goToPageArrayGenerate(this.enterPageNumber, true);
            }
        }
    }
    goToPageArrayGenerate(page, shouldEmit) {
        this.isInvalidInput = false;
        this.currentPage = page;
        this.pageArray = [];
        if (this.currentPage > 3 && this.currentPage < this.pageCount - 2) {
            for (let i = this.currentPage - 2; i < this.currentPage + 3; i++) {
                this.pageArray.push(i);
            }
        }
        else if (this.currentPage <= 3) {
            if (this.pageCount > 4) {
                this.pageArray = [1, 2, 3, 4, 5];
            }
            else {
                for (let i = 1; i <= this.pageCount; i++) {
                    this.pageArray.push(i);
                }
            }
        }
        else if (this.currentPage > this.pageCount - 3) {
            for (let i = this.pageCount - 4; i < this.pageCount + 1; i++) {
                this.pageArray.push(i);
            }
        }
        else {
            for (let i = this.currentPage - 2; i < this.currentPage + 2; i++) {
                this.pageArray.push(i);
            }
        }
        if (shouldEmit) {
            this.selectedPage.emit(this.currentPage);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: Pagination, selector: "pagination", inputs: { activeAlphabet: "activeAlphabet", pageCount: "pageCount", start: "start", end: "end", total: "total", noFilter: "noFilter", currentPage: "currentPage" }, outputs: { selectedPage: "selectedPage", selectedAlphabet: "selectedAlphabet" }, usesOnChanges: true, ngImport: i0, template: "<!-- <p>workflow-pagination works!</p> -->\n<div class=\"pagination-sec\" [class.right-align]=\"noFilter\">\n    <div class=\"left\" *ngIf=\"!noFilter\">\n        <div class=\"pagination-box\">\n            <ul>\n                <li><button (click)=\"alphabetChange('')\" [class.active]=\"!activeAlphabet\">All</button></li>\n                <li *ngFor=\"let data of alphabetsArray\" (click)=\"alphabetChange(data)\">\n                    <button [class.active]=\"activeAlphabet === data\" >{{data}}</button>\n                </li>\n            </ul>\n        </div>\n    </div>\n\n    <div *ngIf=\"pageCount > 1\" class=\"right\">\n        <div class=\"pagination-box\">\n            <ul>\n                <li>\n                    <button [disabled]=\"currentPage === 1\" [class.disabled]=\"currentPage === 1\" (click)=\"increaseOrDecrease(-1)\">\n                        <\n                    </button>\n                </li>\n\n                <li *ngFor=\"let page of pageArray; let i = index\">\n                    <button [disabled]=\"page === currentPage\" (click)=\"goToPageArrayGenerate(page,true)\" [class.active]=\"page === currentPage\">\n                        {{page}}\n                    </button>\n                </li>\n\n                <li>\n                    <button (click)=\"increaseOrDecrease(1)\" [disabled]=\"currentPage === pageCount\" [class.disabled]=\"currentPage === pageCount\">\n                        >\n                    </button>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-sec{display:flex;justify-content:space-between;padding:8px 0;align-items:center}.pagination-sec.right-align{justify-content:flex-end}.pagination-sec .left{width:auto;line-height:28px;font-size:12px;text-transform:uppercase;color:#161b2f;font-weight:400}.pagination-sec .left .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-sec .left .pagination-box ul li{list-style:none;display:flex}.pagination-sec .left .pagination-box ul li+li{margin-left:3px}.pagination-sec .left .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:18px;min-width:18px;padding:0 2px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;text-transform:uppercase;font-size:11px;line-height:18px;margin:0 0 0 1px}.pagination-sec .left .pagination-box ul li button.active,.pagination-sec .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1e5dd3;color:#fff}.pagination-sec .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #bcbcbc}.pagination-sec .left .pagination-box ul li button.disable{pointer-events:none}.pagination-sec .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.pagination-sec .right{width:auto;display:flex;align-items:center}.pagination-sec .right .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-sec .right .pagination-box ul li{list-style:none;display:flex}.pagination-sec .right .pagination-box ul li:first-child{margin-right:4px;height:24px}@media screen and (max-width: 1456px){.pagination-sec .right .pagination-box ul li:first-child{height:20px}}.pagination-sec .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.pagination-sec .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.pagination-sec .right .pagination-box ul li:last-child{margin-left:6px!important;height:24px}@media screen and (max-width: 1456px){.pagination-sec .right .pagination-box ul li:last-child{height:20px}}.pagination-sec .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.pagination-sec .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.pagination-sec .right .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;line-height:21px;margin-left:3px}@media screen and (max-width: 1456px){.pagination-sec .right .pagination-box ul li button{min-width:20px;height:20px;padding:0 4px;font-size:10px;line-height:18px}}.pagination-sec .right .pagination-box ul li button.active,.pagination-sec .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.pagination-sec .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #bcbcbc}.pagination-sec .right .pagination-box ul li button.disable{pointer-events:none}.pagination-sec .right .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.pagination-sec .right .goto-page{display:flex;align-items:center;background:#fff;border:1px solid #bcbcbc;border-radius:2px;height:25px;margin-left:10px}.pagination-sec .right .goto-page .goto-page-text{color:#161b2f;font-size:11px;text-transform:uppercase;display:block;padding:0 8px;border-right:1px solid #bcbcbc;height:23px;line-height:23px}.pagination-sec .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #bcbcbc}.pagination-sec .right .goto-page .goto-page-input{position:relative}.pagination-sec .right .goto-page .goto-page-input input{-moz-appearance:textfield;background:transparent;border:none;color:#161b2f;font-size:11px;text-transform:uppercase;padding:0 25px 0 5px;width:95px;height:23px;position:relative;top:-1px}.pagination-sec .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.pagination-sec .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.pagination-sec .right .goto-page .goto-page-input input:focus{outline:none}.pagination-sec .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41}.pagination-sec .right .goto-page .goto-page-input button{background:#f1f1f1;border:none;position:absolute;right:3px;top:4px;cursor:pointer;padding:0;height:18px;width:19px;line-height:22px}.pagination-sec .right .goto-page .goto-page-input button img{width:12px;height:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Pagination, decorators: [{
            type: Component,
            args: [{ selector: 'pagination', template: "<!-- <p>workflow-pagination works!</p> -->\n<div class=\"pagination-sec\" [class.right-align]=\"noFilter\">\n    <div class=\"left\" *ngIf=\"!noFilter\">\n        <div class=\"pagination-box\">\n            <ul>\n                <li><button (click)=\"alphabetChange('')\" [class.active]=\"!activeAlphabet\">All</button></li>\n                <li *ngFor=\"let data of alphabetsArray\" (click)=\"alphabetChange(data)\">\n                    <button [class.active]=\"activeAlphabet === data\" >{{data}}</button>\n                </li>\n            </ul>\n        </div>\n    </div>\n\n    <div *ngIf=\"pageCount > 1\" class=\"right\">\n        <div class=\"pagination-box\">\n            <ul>\n                <li>\n                    <button [disabled]=\"currentPage === 1\" [class.disabled]=\"currentPage === 1\" (click)=\"increaseOrDecrease(-1)\">\n                        <\n                    </button>\n                </li>\n\n                <li *ngFor=\"let page of pageArray; let i = index\">\n                    <button [disabled]=\"page === currentPage\" (click)=\"goToPageArrayGenerate(page,true)\" [class.active]=\"page === currentPage\">\n                        {{page}}\n                    </button>\n                </li>\n\n                <li>\n                    <button (click)=\"increaseOrDecrease(1)\" [disabled]=\"currentPage === pageCount\" [class.disabled]=\"currentPage === pageCount\">\n                        >\n                    </button>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.pagination-sec{display:flex;justify-content:space-between;padding:8px 0;align-items:center}.pagination-sec.right-align{justify-content:flex-end}.pagination-sec .left{width:auto;line-height:28px;font-size:12px;text-transform:uppercase;color:#161b2f;font-weight:400}.pagination-sec .left .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-sec .left .pagination-box ul li{list-style:none;display:flex}.pagination-sec .left .pagination-box ul li+li{margin-left:3px}.pagination-sec .left .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:18px;min-width:18px;padding:0 2px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;text-transform:uppercase;font-size:11px;line-height:18px;margin:0 0 0 1px}.pagination-sec .left .pagination-box ul li button.active,.pagination-sec .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1e5dd3;color:#fff}.pagination-sec .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #bcbcbc}.pagination-sec .left .pagination-box ul li button.disable{pointer-events:none}.pagination-sec .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.pagination-sec .right{width:auto;display:flex;align-items:center}.pagination-sec .right .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-sec .right .pagination-box ul li{list-style:none;display:flex}.pagination-sec .right .pagination-box ul li:first-child{margin-right:4px;height:24px}@media screen and (max-width: 1456px){.pagination-sec .right .pagination-box ul li:first-child{height:20px}}.pagination-sec .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.pagination-sec .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.pagination-sec .right .pagination-box ul li:last-child{margin-left:6px!important;height:24px}@media screen and (max-width: 1456px){.pagination-sec .right .pagination-box ul li:last-child{height:20px}}.pagination-sec .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.pagination-sec .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.pagination-sec .right .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;line-height:21px;margin-left:3px}@media screen and (max-width: 1456px){.pagination-sec .right .pagination-box ul li button{min-width:20px;height:20px;padding:0 4px;font-size:10px;line-height:18px}}.pagination-sec .right .pagination-box ul li button.active,.pagination-sec .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.pagination-sec .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #bcbcbc}.pagination-sec .right .pagination-box ul li button.disable{pointer-events:none}.pagination-sec .right .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.pagination-sec .right .goto-page{display:flex;align-items:center;background:#fff;border:1px solid #bcbcbc;border-radius:2px;height:25px;margin-left:10px}.pagination-sec .right .goto-page .goto-page-text{color:#161b2f;font-size:11px;text-transform:uppercase;display:block;padding:0 8px;border-right:1px solid #bcbcbc;height:23px;line-height:23px}.pagination-sec .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #bcbcbc}.pagination-sec .right .goto-page .goto-page-input{position:relative}.pagination-sec .right .goto-page .goto-page-input input{-moz-appearance:textfield;background:transparent;border:none;color:#161b2f;font-size:11px;text-transform:uppercase;padding:0 25px 0 5px;width:95px;height:23px;position:relative;top:-1px}.pagination-sec .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.pagination-sec .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.pagination-sec .right .goto-page .goto-page-input input:focus{outline:none}.pagination-sec .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41}.pagination-sec .right .goto-page .goto-page-input button{background:#f1f1f1;border:none;position:absolute;right:3px;top:4px;cursor:pointer;padding:0;height:18px;width:19px;line-height:22px}.pagination-sec .right .goto-page .goto-page-input button img{width:12px;height:12px}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { activeAlphabet: [{
                type: Input
            }], pageCount: [{
                type: Input
            }], start: [{
                type: Input
            }], end: [{
                type: Input
            }], total: [{
                type: Input
            }], noFilter: [{
                type: Input
            }], currentPage: [{
                type: Input
            }], selectedPage: [{
                type: Output
            }], selectedAlphabet: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 