You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
21 KiB
338 lines
21 KiB
import * as i0 from '@angular/core';
|
|
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
|
|
import * as i3 from '@angular/common';
|
|
import { CommonModule } from '@angular/common';
|
|
import * as i5 from '@angular/forms';
|
|
import { FormsModule } from '@angular/forms';
|
|
import * as i1 from 'primeng/dropdown';
|
|
import { DropdownModule } from 'primeng/dropdown';
|
|
import * as i4 from 'primeng/ripple';
|
|
import { RippleModule } from 'primeng/ripple';
|
|
import * as i6 from 'primeng/api';
|
|
import { SharedModule } from 'primeng/api';
|
|
import * as i2 from 'primeng/inputnumber';
|
|
import { InputNumberModule } from 'primeng/inputnumber';
|
|
|
|
class Paginator {
|
|
constructor(cd) {
|
|
this.cd = cd;
|
|
this.pageLinkSize = 5;
|
|
this.onPageChange = new EventEmitter();
|
|
this.alwaysShow = true;
|
|
this.dropdownScrollHeight = '200px';
|
|
this.currentPageReportTemplate = '{currentPage} of {totalPages}';
|
|
this.showFirstLastIcon = true;
|
|
this.totalRecords = 0;
|
|
this.rows = 0;
|
|
this.showPageLinks = true;
|
|
this._first = 0;
|
|
this._page = 0;
|
|
}
|
|
ngOnInit() {
|
|
this.updatePaginatorState();
|
|
}
|
|
ngOnChanges(simpleChange) {
|
|
if (simpleChange.totalRecords) {
|
|
this.updatePageLinks();
|
|
this.updatePaginatorState();
|
|
this.updateFirst();
|
|
this.updateRowsPerPageOptions();
|
|
}
|
|
if (simpleChange.first) {
|
|
this._first = simpleChange.first.currentValue;
|
|
this.updatePageLinks();
|
|
this.updatePaginatorState();
|
|
}
|
|
if (simpleChange.rows) {
|
|
this.updatePageLinks();
|
|
this.updatePaginatorState();
|
|
}
|
|
if (simpleChange.rowsPerPageOptions) {
|
|
this.updateRowsPerPageOptions();
|
|
}
|
|
}
|
|
get first() {
|
|
return this._first;
|
|
}
|
|
set first(val) {
|
|
this._first = val;
|
|
}
|
|
updateRowsPerPageOptions() {
|
|
if (this.rowsPerPageOptions) {
|
|
this.rowsPerPageItems = [];
|
|
for (let opt of this.rowsPerPageOptions) {
|
|
if (typeof opt == 'object' && opt['showAll']) {
|
|
this.rowsPerPageItems.unshift({ label: opt['showAll'], value: this.totalRecords });
|
|
}
|
|
else {
|
|
this.rowsPerPageItems.push({ label: String(opt), value: opt });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
isFirstPage() {
|
|
return this.getPage() === 0;
|
|
}
|
|
isLastPage() {
|
|
return this.getPage() === this.getPageCount() - 1;
|
|
}
|
|
getPageCount() {
|
|
return Math.ceil(this.totalRecords / this.rows);
|
|
}
|
|
calculatePageLinkBoundaries() {
|
|
let numberOfPages = this.getPageCount(), visiblePages = Math.min(this.pageLinkSize, numberOfPages);
|
|
//calculate range, keep current in middle if necessary
|
|
let start = Math.max(0, Math.ceil(this.getPage() - ((visiblePages) / 2))), end = Math.min(numberOfPages - 1, start + visiblePages - 1);
|
|
//check when approaching to last page
|
|
var delta = this.pageLinkSize - (end - start + 1);
|
|
start = Math.max(0, start - delta);
|
|
return [start, end];
|
|
}
|
|
updatePageLinks() {
|
|
this.pageLinks = [];
|
|
let boundaries = this.calculatePageLinkBoundaries(), start = boundaries[0], end = boundaries[1];
|
|
for (let i = start; i <= end; i++) {
|
|
this.pageLinks.push(i + 1);
|
|
}
|
|
if (this.showJumpToPageDropdown) {
|
|
this.pageItems = [];
|
|
for (let i = 0; i < this.getPageCount(); i++) {
|
|
this.pageItems.push({ label: String(i + 1), value: i });
|
|
}
|
|
}
|
|
}
|
|
changePage(p) {
|
|
var pc = this.getPageCount();
|
|
if (p >= 0 && p < pc) {
|
|
this._first = this.rows * p;
|
|
var state = {
|
|
page: p,
|
|
first: this.first,
|
|
rows: this.rows,
|
|
pageCount: pc
|
|
};
|
|
this.updatePageLinks();
|
|
this.onPageChange.emit(state);
|
|
this.updatePaginatorState();
|
|
}
|
|
}
|
|
updateFirst() {
|
|
const page = this.getPage();
|
|
if (page > 0 && this.totalRecords && (this.first >= this.totalRecords)) {
|
|
Promise.resolve(null).then(() => this.changePage(page - 1));
|
|
}
|
|
}
|
|
getPage() {
|
|
return Math.floor(this.first / this.rows);
|
|
}
|
|
changePageToFirst(event) {
|
|
if (!this.isFirstPage()) {
|
|
this.changePage(0);
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
changePageToPrev(event) {
|
|
this.changePage(this.getPage() - 1);
|
|
event.preventDefault();
|
|
}
|
|
changePageToNext(event) {
|
|
this.changePage(this.getPage() + 1);
|
|
event.preventDefault();
|
|
}
|
|
changePageToLast(event) {
|
|
if (!this.isLastPage()) {
|
|
this.changePage(this.getPageCount() - 1);
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
onPageLinkClick(event, page) {
|
|
this.changePage(page);
|
|
event.preventDefault();
|
|
}
|
|
onRppChange(event) {
|
|
this.changePage(this.getPage());
|
|
}
|
|
onPageDropdownChange(event) {
|
|
this.changePage(event.value);
|
|
}
|
|
updatePaginatorState() {
|
|
this.paginatorState = {
|
|
page: this.getPage(),
|
|
pageCount: this.getPageCount(),
|
|
rows: this.rows,
|
|
first: this.first,
|
|
totalRecords: this.totalRecords
|
|
};
|
|
}
|
|
empty() {
|
|
return this.getPageCount() === 0;
|
|
}
|
|
currentPage() {
|
|
return this.getPageCount() > 0 ? this.getPage() + 1 : 0;
|
|
}
|
|
get currentPageReport() {
|
|
return this.currentPageReportTemplate
|
|
.replace("{currentPage}", String(this.currentPage()))
|
|
.replace("{totalPages}", String(this.getPageCount()))
|
|
.replace("{first}", String((this.totalRecords > 0) ? this._first + 1 : 0))
|
|
.replace("{last}", String(Math.min(this._first + this.rows, this.totalRecords)))
|
|
.replace("{rows}", String(this.rows))
|
|
.replace("{totalRecords}", String(this.totalRecords));
|
|
}
|
|
}
|
|
Paginator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Paginator, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
Paginator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: Paginator, selector: "p-paginator", inputs: { pageLinkSize: "pageLinkSize", style: "style", styleClass: "styleClass", alwaysShow: "alwaysShow", templateLeft: "templateLeft", templateRight: "templateRight", dropdownAppendTo: "dropdownAppendTo", dropdownScrollHeight: "dropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showFirstLastIcon: "showFirstLastIcon", totalRecords: "totalRecords", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", showJumpToPageDropdown: "showJumpToPageDropdown", showJumpToPageInput: "showJumpToPageInput", showPageLinks: "showPageLinks", dropdownItemTemplate: "dropdownItemTemplate", first: "first" }, outputs: { onPageChange: "onPageChange" }, host: { classAttribute: "p-element" }, usesOnChanges: true, ngImport: i0, template: `
|
|
<div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-paginator p-component'" *ngIf="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
|
|
<div class="p-paginator-left-content" *ngIf="templateLeft">
|
|
<ng-container *ngTemplateOutlet="templateLeft; context: {$implicit: paginatorState}"></ng-container>
|
|
</div>
|
|
<span class="p-paginator-current" *ngIf="showCurrentPageReport">{{currentPageReport}}</span>
|
|
<button *ngIf="showFirstLastIcon" type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToFirst($event)" pRipple
|
|
class="p-paginator-first p-paginator-element p-link" [ngClass]="{'p-disabled':isFirstPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-double-left"></span>
|
|
</button>
|
|
<button type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple
|
|
class="p-paginator-prev p-paginator-element p-link" [ngClass]="{'p-disabled':isFirstPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-left"></span>
|
|
</button>
|
|
<span class="p-paginator-pages" *ngIf="showPageLinks">
|
|
<button type="button" *ngFor="let pageLink of pageLinks" class="p-paginator-page p-paginator-element p-link" [ngClass]="{'p-highlight': (pageLink-1 == getPage())}"
|
|
(click)="onPageLinkClick($event, pageLink - 1)" pRipple>{{pageLink}}</button>
|
|
</span>
|
|
<p-dropdown [options]="pageItems" [ngModel]="getPage()" *ngIf="showJumpToPageDropdown" [disabled]="empty()" styleClass="p-paginator-page-options"
|
|
(onChange)="onPageDropdownChange($event)" [appendTo]="dropdownAppendTo" [scrollHeight]="dropdownScrollHeight">
|
|
<ng-template pTemplate="selectedItem">{{currentPageReport}}</ng-template>
|
|
</p-dropdown>
|
|
<button type="button" [disabled]="isLastPage() || empty()" (click)="changePageToNext($event)" pRipple
|
|
class="p-paginator-next p-paginator-element p-link" [ngClass]="{'p-disabled':isLastPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-right"></span>
|
|
</button>
|
|
<button *ngIf="showFirstLastIcon" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToLast($event)" pRipple
|
|
class="p-paginator-last p-paginator-element p-link" [ngClass]="{'p-disabled':isLastPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-double-right"></span>
|
|
</button>
|
|
<p-inputNumber *ngIf="showJumpToPageInput" [ngModel]="currentPage()" class="p-paginator-page-input" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputNumber>
|
|
<p-dropdown [options]="rowsPerPageItems" [(ngModel)]="rows" *ngIf="rowsPerPageOptions" styleClass="p-paginator-rpp-options" [disabled]="empty()"
|
|
(onChange)="onRppChange($event)" [appendTo]="dropdownAppendTo" [scrollHeight]="dropdownScrollHeight">
|
|
<ng-container *ngIf="dropdownItemTemplate">
|
|
<ng-template let-item pTemplate="item">
|
|
<ng-container *ngTemplateOutlet="dropdownItemTemplate; context: {$implicit: item}">
|
|
</ng-container>
|
|
</ng-template>
|
|
</ng-container>
|
|
</p-dropdown>
|
|
<div class="p-paginator-right-content" *ngIf="templateRight">
|
|
<ng-container *ngTemplateOutlet="templateRight; context: {$implicit: paginatorState}"></ng-container>
|
|
</div>
|
|
</div>
|
|
`, isInline: true, styles: [".p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.p-paginator-left-content{margin-right:auto}.p-paginator-right-content{margin-left:auto}.p-paginator-page,.p-paginator-next,.p-paginator-last,.p-paginator-first,.p-paginator-prev,.p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}.p-paginator-element:focus{z-index:1;position:relative}\n"], components: [{ type: i1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear"] }, { type: i2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.Ripple, selector: "[pRipple]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Paginator, decorators: [{
|
|
type: Component,
|
|
args: [{ selector: 'p-paginator', template: `
|
|
<div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-paginator p-component'" *ngIf="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
|
|
<div class="p-paginator-left-content" *ngIf="templateLeft">
|
|
<ng-container *ngTemplateOutlet="templateLeft; context: {$implicit: paginatorState}"></ng-container>
|
|
</div>
|
|
<span class="p-paginator-current" *ngIf="showCurrentPageReport">{{currentPageReport}}</span>
|
|
<button *ngIf="showFirstLastIcon" type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToFirst($event)" pRipple
|
|
class="p-paginator-first p-paginator-element p-link" [ngClass]="{'p-disabled':isFirstPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-double-left"></span>
|
|
</button>
|
|
<button type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple
|
|
class="p-paginator-prev p-paginator-element p-link" [ngClass]="{'p-disabled':isFirstPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-left"></span>
|
|
</button>
|
|
<span class="p-paginator-pages" *ngIf="showPageLinks">
|
|
<button type="button" *ngFor="let pageLink of pageLinks" class="p-paginator-page p-paginator-element p-link" [ngClass]="{'p-highlight': (pageLink-1 == getPage())}"
|
|
(click)="onPageLinkClick($event, pageLink - 1)" pRipple>{{pageLink}}</button>
|
|
</span>
|
|
<p-dropdown [options]="pageItems" [ngModel]="getPage()" *ngIf="showJumpToPageDropdown" [disabled]="empty()" styleClass="p-paginator-page-options"
|
|
(onChange)="onPageDropdownChange($event)" [appendTo]="dropdownAppendTo" [scrollHeight]="dropdownScrollHeight">
|
|
<ng-template pTemplate="selectedItem">{{currentPageReport}}</ng-template>
|
|
</p-dropdown>
|
|
<button type="button" [disabled]="isLastPage() || empty()" (click)="changePageToNext($event)" pRipple
|
|
class="p-paginator-next p-paginator-element p-link" [ngClass]="{'p-disabled':isLastPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-right"></span>
|
|
</button>
|
|
<button *ngIf="showFirstLastIcon" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToLast($event)" pRipple
|
|
class="p-paginator-last p-paginator-element p-link" [ngClass]="{'p-disabled':isLastPage() || empty()}">
|
|
<span class="p-paginator-icon pi pi-angle-double-right"></span>
|
|
</button>
|
|
<p-inputNumber *ngIf="showJumpToPageInput" [ngModel]="currentPage()" class="p-paginator-page-input" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputNumber>
|
|
<p-dropdown [options]="rowsPerPageItems" [(ngModel)]="rows" *ngIf="rowsPerPageOptions" styleClass="p-paginator-rpp-options" [disabled]="empty()"
|
|
(onChange)="onRppChange($event)" [appendTo]="dropdownAppendTo" [scrollHeight]="dropdownScrollHeight">
|
|
<ng-container *ngIf="dropdownItemTemplate">
|
|
<ng-template let-item pTemplate="item">
|
|
<ng-container *ngTemplateOutlet="dropdownItemTemplate; context: {$implicit: item}">
|
|
</ng-container>
|
|
</ng-template>
|
|
</ng-container>
|
|
</p-dropdown>
|
|
<div class="p-paginator-right-content" *ngIf="templateRight">
|
|
<ng-container *ngTemplateOutlet="templateRight; context: {$implicit: paginatorState}"></ng-container>
|
|
</div>
|
|
</div>
|
|
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
'class': 'p-element'
|
|
}, styles: [".p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.p-paginator-left-content{margin-right:auto}.p-paginator-right-content{margin-left:auto}.p-paginator-page,.p-paginator-next,.p-paginator-last,.p-paginator-first,.p-paginator-prev,.p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}.p-paginator-element:focus{z-index:1;position:relative}\n"] }]
|
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pageLinkSize: [{
|
|
type: Input
|
|
}], onPageChange: [{
|
|
type: Output
|
|
}], style: [{
|
|
type: Input
|
|
}], styleClass: [{
|
|
type: Input
|
|
}], alwaysShow: [{
|
|
type: Input
|
|
}], templateLeft: [{
|
|
type: Input
|
|
}], templateRight: [{
|
|
type: Input
|
|
}], dropdownAppendTo: [{
|
|
type: Input
|
|
}], dropdownScrollHeight: [{
|
|
type: Input
|
|
}], currentPageReportTemplate: [{
|
|
type: Input
|
|
}], showCurrentPageReport: [{
|
|
type: Input
|
|
}], showFirstLastIcon: [{
|
|
type: Input
|
|
}], totalRecords: [{
|
|
type: Input
|
|
}], rows: [{
|
|
type: Input
|
|
}], rowsPerPageOptions: [{
|
|
type: Input
|
|
}], showJumpToPageDropdown: [{
|
|
type: Input
|
|
}], showJumpToPageInput: [{
|
|
type: Input
|
|
}], showPageLinks: [{
|
|
type: Input
|
|
}], dropdownItemTemplate: [{
|
|
type: Input
|
|
}], first: [{
|
|
type: Input
|
|
}] } });
|
|
class PaginatorModule {
|
|
}
|
|
PaginatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
PaginatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PaginatorModule, declarations: [Paginator], imports: [CommonModule, DropdownModule, InputNumberModule, FormsModule, SharedModule, RippleModule], exports: [Paginator, DropdownModule, InputNumberModule, FormsModule, SharedModule] });
|
|
PaginatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PaginatorModule, imports: [[CommonModule, DropdownModule, InputNumberModule, FormsModule, SharedModule, RippleModule], DropdownModule, InputNumberModule, FormsModule, SharedModule] });
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PaginatorModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [CommonModule, DropdownModule, InputNumberModule, FormsModule, SharedModule, RippleModule],
|
|
exports: [Paginator, DropdownModule, InputNumberModule, FormsModule, SharedModule],
|
|
declarations: [Paginator]
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { Paginator, PaginatorModule };
|
|
//# sourceMappingURL=primeng-paginator.mjs.map
|