import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { ASSETS } from '../../../constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
export class PaginationComponentUI {
    constructor() {
        this.ASSETS = ASSETS;
        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);
    }
    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) {
        // if(this.currentPage === value){return ;}
        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) {
        //if(this.currentPage === page){return;}
        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: PaginationComponentUI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginationComponentUI, selector: "app-pagination", inputs: { activeAlphabet: "activeAlphabet", pageCount: "pageCount", start: "start", end: "end", total: "total", currentPage: "currentPage" }, outputs: { selectedPage: "selectedPage", selectedAlphabet: "selectedAlphabet" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"wk-pagination-sec-ds vx-d-flex vx-align-center\"\n  [class.right-align]=\"false\"\n>\n  <div class=\"left vx-label-txt vx-fw-400 vx-tt-uppercase vx-lh-6\">\n    Showing {{ start }} - {{ end }} of {{ total }} records\n    <div class=\"pagination-box\" *ngIf=\"false\">\n      <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\n        <li class=\"vx-d-flex\">\n          <button\n            class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400 vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n            [class.active]=\"true\"\n          >\n            All\n          </button>\n        </li>\n        <li class=\"vx-d-flex\">\n          <button\n            class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400 vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n            [class.active]=\"false\"\n          >\n            A\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"right vx-d-flex vx-align-center\">\n    <div class=\"pagination-box\">\n      <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\n        <li class=\"vx-d-flex vx-mr-1\">\n          <button\n            class=\"vx-m-0\"\n            [disabled]=\"currentPage === 1\"\n            [class.disabled]=\"currentPage === 1\"\n            (click)=\"increaseOrDecrease(-1)\"\n          >\n            <i class=\"icons\">&#xe96b;</i>\n          </button>\n        </li>\n\n        <li class=\"vx-d-flex\" *ngFor=\"let page of pageArray; let i = index\">\n          <button\n            class=\"vx-label-txt vx-fw-400 vx-pl-1 vx-pr-1 vx-d-inline-flex vx-align-center vx-justify-center vx-m-0 vx-ml-1\"\n            [disabled]=\"page === currentPage\"\n            (click)=\"goToPageArrayGenerate(page, true)\"\n            [class.active]=\"page === currentPage\"\n          >\n            {{ page }}\n          </button>\n        </li>\n\n        <li class=\"vx-d-flex vx-ml-2\">\n          <button\n            class=\"vx-m-0\"\n            (click)=\"increaseOrDecrease(1)\"\n            [class.disabled]=\"currentPage === pageCount\"\n          >\n            <i class=\"icons\">&#xe970;</i>\n          </button>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"goto-page vx-d-flex vx-align-center vx-ml-2\">\n      <div\n        class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\"\n      >\n        GO TO\n      </div>\n      <div class=\"goto-page-input\">\n        <input\n          [class.invalid]=\"\n            (isInvalidInput && !enterPageNumber) || pageCount < enterPageNumber\n          \"\n          type=\"number\"\n          placeholder=\"Page No.\"\n          [(ngModel)]=\"enterPageNumber\"\n          type=\"number\"\n          placeholder=\"Page No.\"\n          (keyup)=\"onEnterPress($event)\"\n          onkeydown=\"if(event.key==='.'){event.preventDefault();}\"\n          oninput=\"event.target.value = event.target.value.replace(/[^0-9]*/g,'');\"\n          type=\"text\"\n          type=\"number\"\n          placeholder=\"Page No.\"\n        />\n        <button (click)=\"onEnterPress({ key: 'enter' })\">\n          <img [src]=\"ASSETS.enter_icon\" alt=\"\" />\n        </button>\n      </div>\n      <div\n        class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\"\n      >\n        OF {{ pageCount }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";.wk-pagination-sec-ds{border-radius:2px 2px 0 0;justify-content:space-between;padding:8px 0}.wk-pagination-sec-ds.right-align{justify-content:flex-end}.wk-pagination-sec-ds .left{font-size:12px;width:auto}.wk-pagination-sec-ds .left .pagination-box ul li{font-size:11px;list-style:none}.wk-pagination-sec-ds .left .pagination-box ul li:first-of-type{margin-right:4px}.wk-pagination-sec-ds .left .pagination-box ul li+li{margin-left:16px}.wk-pagination-sec-ds .left .pagination-box ul li button{border:1px solid #BCBCBC;background:#fff;border-radius:2px;font-size:11px;height:20px;min-width:20px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .left .pagination-box ul li button.active,.wk-pagination-sec-ds .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1e5dd3;color:#fff}.wk-pagination-sec-ds .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important}.wk-pagination-sec-ds .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.wk-pagination-sec-ds .right{width:auto}.wk-pagination-sec-ds .right .pagination-box ul li{list-style:none}.wk-pagination-sec-ds .right .pagination-box ul li:first-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li:last-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li button{border:1px solid #BCBCBC;background:#fff;border-radius:2px;font-size:11px;height:24px;min-width:24px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .right .pagination-box ul li button.active,.wk-pagination-sec-ds .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.wk-pagination-sec-ds .right .pagination-box ul li button i{font-size:10px}.wk-pagination-sec-ds .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #BCBCBC}.wk-pagination-sec-ds .right .pagination-box ul li button.disable{pointer-events:none}.wk-pagination-sec-ds .right .goto-page{background:#fff;border:1px solid #BCBCBC;border-radius:2px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-text{border-right:1px solid #BCBCBC;font-size:11px;height:23px;line-height:23px}.wk-pagination-sec-ds .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #BCBCBC}.wk-pagination-sec-ds .right .goto-page .goto-page-input{position:relative}.wk-pagination-sec-ds .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}.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input:focus{outline:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41;position:relative;top:-1px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-input button{background:transparent;border:none;position:absolute;right:3px;top:4px;cursor:pointer;padding:0;height:18px;width:19px;line-height:22px;display:flex;align-items:center;justify-content:center}.wk-pagination-sec-ds .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"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponentUI, decorators: [{
            type: Component,
            args: [{ selector: 'app-pagination', template: "<div\n  class=\"wk-pagination-sec-ds vx-d-flex vx-align-center\"\n  [class.right-align]=\"false\"\n>\n  <div class=\"left vx-label-txt vx-fw-400 vx-tt-uppercase vx-lh-6\">\n    Showing {{ start }} - {{ end }} of {{ total }} records\n    <div class=\"pagination-box\" *ngIf=\"false\">\n      <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\n        <li class=\"vx-d-flex\">\n          <button\n            class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400 vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n            [class.active]=\"true\"\n          >\n            All\n          </button>\n        </li>\n        <li class=\"vx-d-flex\">\n          <button\n            class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400 vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n            [class.active]=\"false\"\n          >\n            A\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"right vx-d-flex vx-align-center\">\n    <div class=\"pagination-box\">\n      <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\n        <li class=\"vx-d-flex vx-mr-1\">\n          <button\n            class=\"vx-m-0\"\n            [disabled]=\"currentPage === 1\"\n            [class.disabled]=\"currentPage === 1\"\n            (click)=\"increaseOrDecrease(-1)\"\n          >\n            <i class=\"icons\">&#xe96b;</i>\n          </button>\n        </li>\n\n        <li class=\"vx-d-flex\" *ngFor=\"let page of pageArray; let i = index\">\n          <button\n            class=\"vx-label-txt vx-fw-400 vx-pl-1 vx-pr-1 vx-d-inline-flex vx-align-center vx-justify-center vx-m-0 vx-ml-1\"\n            [disabled]=\"page === currentPage\"\n            (click)=\"goToPageArrayGenerate(page, true)\"\n            [class.active]=\"page === currentPage\"\n          >\n            {{ page }}\n          </button>\n        </li>\n\n        <li class=\"vx-d-flex vx-ml-2\">\n          <button\n            class=\"vx-m-0\"\n            (click)=\"increaseOrDecrease(1)\"\n            [class.disabled]=\"currentPage === pageCount\"\n          >\n            <i class=\"icons\">&#xe970;</i>\n          </button>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"goto-page vx-d-flex vx-align-center vx-ml-2\">\n      <div\n        class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\"\n      >\n        GO TO\n      </div>\n      <div class=\"goto-page-input\">\n        <input\n          [class.invalid]=\"\n            (isInvalidInput && !enterPageNumber) || pageCount < enterPageNumber\n          \"\n          type=\"number\"\n          placeholder=\"Page No.\"\n          [(ngModel)]=\"enterPageNumber\"\n          type=\"number\"\n          placeholder=\"Page No.\"\n          (keyup)=\"onEnterPress($event)\"\n          onkeydown=\"if(event.key==='.'){event.preventDefault();}\"\n          oninput=\"event.target.value = event.target.value.replace(/[^0-9]*/g,'');\"\n          type=\"text\"\n          type=\"number\"\n          placeholder=\"Page No.\"\n        />\n        <button (click)=\"onEnterPress({ key: 'enter' })\">\n          <img [src]=\"ASSETS.enter_icon\" alt=\"\" />\n        </button>\n      </div>\n      <div\n        class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\"\n      >\n        OF {{ pageCount }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";.wk-pagination-sec-ds{border-radius:2px 2px 0 0;justify-content:space-between;padding:8px 0}.wk-pagination-sec-ds.right-align{justify-content:flex-end}.wk-pagination-sec-ds .left{font-size:12px;width:auto}.wk-pagination-sec-ds .left .pagination-box ul li{font-size:11px;list-style:none}.wk-pagination-sec-ds .left .pagination-box ul li:first-of-type{margin-right:4px}.wk-pagination-sec-ds .left .pagination-box ul li+li{margin-left:16px}.wk-pagination-sec-ds .left .pagination-box ul li button{border:1px solid #BCBCBC;background:#fff;border-radius:2px;font-size:11px;height:20px;min-width:20px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .left .pagination-box ul li button.active,.wk-pagination-sec-ds .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1e5dd3;color:#fff}.wk-pagination-sec-ds .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important}.wk-pagination-sec-ds .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.wk-pagination-sec-ds .right{width:auto}.wk-pagination-sec-ds .right .pagination-box ul li{list-style:none}.wk-pagination-sec-ds .right .pagination-box ul li:first-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li:last-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li button{border:1px solid #BCBCBC;background:#fff;border-radius:2px;font-size:11px;height:24px;min-width:24px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .right .pagination-box ul li button.active,.wk-pagination-sec-ds .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.wk-pagination-sec-ds .right .pagination-box ul li button i{font-size:10px}.wk-pagination-sec-ds .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #BCBCBC}.wk-pagination-sec-ds .right .pagination-box ul li button.disable{pointer-events:none}.wk-pagination-sec-ds .right .goto-page{background:#fff;border:1px solid #BCBCBC;border-radius:2px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-text{border-right:1px solid #BCBCBC;font-size:11px;height:23px;line-height:23px}.wk-pagination-sec-ds .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #BCBCBC}.wk-pagination-sec-ds .right .goto-page .goto-page-input{position:relative}.wk-pagination-sec-ds .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}.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input:focus{outline:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41;position:relative;top:-1px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-input button{background:transparent;border:none;position:absolute;right:3px;top:4px;cursor:pointer;padding:0;height:18px;width:19px;line-height:22px;display:flex;align-items:center;justify-content:center}.wk-pagination-sec-ds .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
            }], currentPage: [{
                type: Input
            }], selectedPage: [{
                type: Output
            }], selectedAlphabet: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 