import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
export class NxtPagination {
    event = new EventEmitter;
    // page size Options
    pageSizeOptions = [5, 10, 15, 20, 50];
    /** The total number of records */
    collectionSize = 0;
    /** The number of records to display */
    pageSize = 10;
    /** Current page */
    currentPage = 1;
    /** The number of buttons to show either side of the current page */
    maxSize = 2;
    /** Display the First/Last buttons */
    firstLastButtons = false;
    /** Display the Next/Previous buttons */
    nextPreviousButtons = true;
    /** Display small pagination buttons */
    small = false;
    totalPages = [];
    constructor() { }
    ngOnInit() {
        this.pageSize = this.pageSize ?? 10; // Ensure a default value
        this.currentPage = this.currentPage === 0 ? 1 : this.currentPage;
        if (this.collectionSize) {
            this.totalPages = new Array(Math.ceil(this.collectionSize / Number(this.pageSize)));
        }
    }
    ngOnChanges(changes) {
        this.pageSize = this.pageSize ?? 10; // Ensure a default value
        this.currentPage = this.currentPage === 0 ? 1 : this.currentPage ?? 1;
        if (this.collectionSize) {
            this.totalPages = new Array(Math.ceil(this.collectionSize / Number(this.pageSize)));
        }
    }
    get startIndex() {
        return (this.currentPage - 1) * Number(this.pageSize);
    }
    get endIndex() {
        return Math.min(Number(this.startIndex) + Number(this.pageSize), this.collectionSize);
    }
    /** Set page number */
    selectPageNumber(pageNumber) {
        this.currentPage = pageNumber;
        this.emit();
    }
    /** Set next page number */
    next() {
        const nextPage = this.currentPage + 1;
        nextPage <= this.totalPages.length && this.selectPageNumber(nextPage);
    }
    /** Set previous page number */
    previous() {
        const previousPage = this.currentPage - 1;
        previousPage >= 1 && this.selectPageNumber(previousPage);
    }
    onPageSizeChange(newSize) {
        this.pageSize = newSize; // Update the pageSize
        this.totalPages = new Array(Math.ceil(this.collectionSize / this.pageSize));
        // Ensure the current page is within bounds
        // if (this.currentPage > this.totalPages.length) {
        //   this.currentPage = this.totalPages.length;
        // }
        this.currentPage = 1;
        this.emit(); // Emit an event if necessary
    }
    emit() {
        this.event.emit({ "length": this.collectionSize, "pageSize": this.pageSize, "pageIndex": this.currentPage });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtPagination, isStandalone: true, selector: "nxt-pagination", inputs: { pageSizeOptions: "pageSizeOptions", collectionSize: "collectionSize", pageSize: "pageSize", currentPage: "currentPage", maxSize: "maxSize", firstLastButtons: "firstLastButtons", nextPreviousButtons: "nextPreviousButtons", small: "small" }, outputs: { event: "event" }, usesOnChanges: true, ngImport: i0, template: "<!-- SKS24JAN25 -->\n<div class=\"flex content-space-between main-cont\">\n    <div class=\"info\">\n     <div *ngIf=\"endIndex\">\n      Showing data {{ startIndex + 1 }} to {{ endIndex }} of {{ collectionSize }} entries\n    </div>\n   </div>\n    <div>\n     <ul [class]=\"small ? 'pagination pagination-sm' : 'pagination'\" style=\"align-items: center; padding-top: 18px;\">\n        <!-- select button -->\n       <div style=\"font-size: 14px; font-weight: 400; padding-right: 10px; align-items: center;\" for=\"perPage\">Result per page</div>\n       <div class=\"dropdown-wrapper\">\n         <select id=\"perPage\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\">\n           <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\n         </select>\n         <svg class=\"dropdown-arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n           <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\" fill=\"#626262\"/>\n          </svg>   \n       </div>     \n       <!-- first button -->\n       <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\" >\n         <button class=\"page-link\" (click)=\"selectPageNumber(1)\">\u00AB\u00AB</button>\n       </li>\n       <!-- last button -->\n       <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\">\n         <button class=\"page-link\" (click)=\"selectPageNumber(totalPages.length)\">\u00BB\u00BB</button>\n       </li>\n       <!-- previous button -->\n       <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\" >\n         <button class=\"page-link\" (click)=\"previous()\">\u00AB</button>\n       </li>\n       <!-- page numbers -->\n       <ng-container *ngFor=\"let p of totalPages; index as i\">\n         <li *ngIf=\"i + 1 >= currentPage - maxSize && i + 1 <= currentPage + maxSize\" [class]=\"currentPage === i + 1 ? 'page-item active' : 'page-item'\">\n           <button class=\"page-link\" (click)=\"selectPageNumber(i + 1)\">\n             {{ i + 1 }}\n           </button>\n         </li>\n       </ng-container>\n       <!-- next button -->\n       <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\">\n         <button class=\"page-link\" (click)=\"next()\">\u00BB</button>\n       </li>\n     </ul>\n    </div>\n </div>\n   ", styles: [".info{color:#b5b7c0;font-size:14px;font-weight:500}button{background:#f5f5f5;border:1px solid #E9E9E9;padding:2px 10px;cursor:pointer;transition:.3s}button:hover{border:1px solid #E9E9E9;background:#fff;color:#404b52!important}button:disabled{opacity:.5;color:#73797d;cursor:not-allowed}button.active{background:#5088ff;color:#fff;border-color:#5088ff}select{margin-right:10px}select.value{font-size:2px;margin-right:10px}.main-cont{align-items:center}#perPage{font-size:14px;color:#313131;background-color:#fff;border:1px solid #E9E9E9;border-radius:4px;padding-top:2px;padding-left:7px;padding-bottom:2px;font-weight:400;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative}#perPage:hover{background-color:#f5f5f5;color:#404b52!important}.dropdown-wrapper{position:relative;display:inline-block;width:60px;margin-right:10px}.dropdown-wrapper select{width:88%;padding:7px;font-size:16px;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none}.dropdown-wrapper .dropdown-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:#333}li{color:#404b52!important;font-family:inter,sans-serif!important;font-size:12px!important;padding:6px!important}::ng-deep .pagination{--bs-pagination-font-size: none !important}::ng-deep .page-item:not(:first-child) .page-link{border-radius:4px!important}.page-link{color:#404b52!important}::ng-deep .page-link.active,.active>.page-link{color:#fff!important}::ng-deep .page-link.active:hover,.active>.page-link:hover{color:#000!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "18.2.13", ngImport: i0, type: NxtPagination, decorators: [{
            type: Component,
            args: [{ selector: 'nxt-pagination', standalone: true, imports: [CommonModule, FormsModule], template: "<!-- SKS24JAN25 -->\n<div class=\"flex content-space-between main-cont\">\n    <div class=\"info\">\n     <div *ngIf=\"endIndex\">\n      Showing data {{ startIndex + 1 }} to {{ endIndex }} of {{ collectionSize }} entries\n    </div>\n   </div>\n    <div>\n     <ul [class]=\"small ? 'pagination pagination-sm' : 'pagination'\" style=\"align-items: center; padding-top: 18px;\">\n        <!-- select button -->\n       <div style=\"font-size: 14px; font-weight: 400; padding-right: 10px; align-items: center;\" for=\"perPage\">Result per page</div>\n       <div class=\"dropdown-wrapper\">\n         <select id=\"perPage\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\">\n           <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\n         </select>\n         <svg class=\"dropdown-arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n           <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\" fill=\"#626262\"/>\n          </svg>   \n       </div>     \n       <!-- first button -->\n       <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\" >\n         <button class=\"page-link\" (click)=\"selectPageNumber(1)\">\u00AB\u00AB</button>\n       </li>\n       <!-- last button -->\n       <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\">\n         <button class=\"page-link\" (click)=\"selectPageNumber(totalPages.length)\">\u00BB\u00BB</button>\n       </li>\n       <!-- previous button -->\n       <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\" >\n         <button class=\"page-link\" (click)=\"previous()\">\u00AB</button>\n       </li>\n       <!-- page numbers -->\n       <ng-container *ngFor=\"let p of totalPages; index as i\">\n         <li *ngIf=\"i + 1 >= currentPage - maxSize && i + 1 <= currentPage + maxSize\" [class]=\"currentPage === i + 1 ? 'page-item active' : 'page-item'\">\n           <button class=\"page-link\" (click)=\"selectPageNumber(i + 1)\">\n             {{ i + 1 }}\n           </button>\n         </li>\n       </ng-container>\n       <!-- next button -->\n       <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\">\n         <button class=\"page-link\" (click)=\"next()\">\u00BB</button>\n       </li>\n     </ul>\n    </div>\n </div>\n   ", styles: [".info{color:#b5b7c0;font-size:14px;font-weight:500}button{background:#f5f5f5;border:1px solid #E9E9E9;padding:2px 10px;cursor:pointer;transition:.3s}button:hover{border:1px solid #E9E9E9;background:#fff;color:#404b52!important}button:disabled{opacity:.5;color:#73797d;cursor:not-allowed}button.active{background:#5088ff;color:#fff;border-color:#5088ff}select{margin-right:10px}select.value{font-size:2px;margin-right:10px}.main-cont{align-items:center}#perPage{font-size:14px;color:#313131;background-color:#fff;border:1px solid #E9E9E9;border-radius:4px;padding-top:2px;padding-left:7px;padding-bottom:2px;font-weight:400;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative}#perPage:hover{background-color:#f5f5f5;color:#404b52!important}.dropdown-wrapper{position:relative;display:inline-block;width:60px;margin-right:10px}.dropdown-wrapper select{width:88%;padding:7px;font-size:16px;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none}.dropdown-wrapper .dropdown-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:#333}li{color:#404b52!important;font-family:inter,sans-serif!important;font-size:12px!important;padding:6px!important}::ng-deep .pagination{--bs-pagination-font-size: none !important}::ng-deep .page-item:not(:first-child) .page-link{border-radius:4px!important}.page-link{color:#404b52!important}::ng-deep .page-link.active,.active>.page-link{color:#fff!important}::ng-deep .page-link.active:hover,.active>.page-link:hover{color:#000!important}\n"] }]
        }], ctorParameters: () => [], propDecorators: { event: [{
                type: Output
            }], pageSizeOptions: [{
                type: Input
            }], collectionSize: [{
                type: Input
            }], pageSize: [{
                type: Input
            }], currentPage: [{
                type: Input
            }], maxSize: [{
                type: Input
            }], firstLastButtons: [{
                type: Input
            }], nextPreviousButtons: [{
                type: Input
            }], small: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 