@crediblefinance/credible-ui
Version:
Credible's standard UI library
80 lines • 12.7 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CfPaginatorComponent {
page = 1;
count = 0;
limit = 10;
theme = 'dark';
displayLimit = 2;
changed = new EventEmitter();
before = [];
after = [];
lastPage = 0;
constructor() { }
ngOnInit() {
this.generatePagination();
}
ngOnChanges(changes) {
if (changes?.count?.currentValue) {
this.count = changes?.count?.currentValue;
this.generatePagination();
}
if (changes?.page?.currentValue === 1)
this.generatePagination();
}
generatePagination() {
let d = this.count / this.limit;
if (this.count % this.limit > 0)
d += 1;
const arr = new Array(parseInt(d.toString()));
this.lastPage = arr.length;
this.generateBefore();
this.generateAfter();
}
changedHandler(page) {
// zero based index
this.changed.emit(page - 1);
this.page = page;
this.generateBefore();
this.generateAfter();
}
generateBefore() {
const before = [];
for (let i = this.displayLimit; i >= 1; i--) {
const page = this.page - i;
if (page > 0)
before.push(page);
}
this.before = before;
}
generateAfter() {
const after = [];
const maxLimit = Math.ceil(this.count / this.limit);
for (let i = 1; i <= this.displayLimit; i++) {
const page = this.page + i;
if (page <= maxLimit)
after.push(page);
}
this.after = after;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfPaginatorComponent, selector: "cf-paginator", inputs: { page: "page", count: "count", limit: "limit", theme: "theme", displayLimit: "displayLimit" }, outputs: { changed: "changed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cf-paginator\" [ngClass]=\"theme\">\n <div class=\"pages\">\n <div class=\"page\" *ngIf=\"page > 1\" (click)=\"changedHandler(1)\" [ngClass]=\"theme\">\n First\n </div>\n\n <div class=\"page\" *ngFor=\"let item of before\" (click)=\"changedHandler(item)\" [ngClass]=\"theme\">\n {{ item }}\n </div>\n\n <div class=\"current page\">{{ page }}</div>\n\n <div class=\"page\" *ngFor=\"let item of after\" (click)=\"changedHandler(item)\" [ngClass]=\"theme\">\n {{ item }}\n </div>\n\n <div class=\"page\" *ngIf=\"page !== lastPage\" (click)=\"changedHandler(lastPage)\" [ngClass]=\"theme\">\n Last\n </div>\n </div>\n</div>", styles: [".cf-paginator{width:max-content;margin:1rem auto}.cf-paginator .pages{display:flex}.cf-paginator .page{font-size:.8rem;margin-left:.3rem;margin-right:.3rem;line-height:1rem}.cf-paginator .page:not(.current):hover{cursor:pointer}.cf-paginator .current{font-size:1.2rem}.cf-paginator.dark .page{color:gray}.cf-paginator.dark .current{color:#fff!important}.cf-paginator.light .page{color:#000}.cf-paginator.light .current{color:#000!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "17.0.9", ngImport: i0, type: CfPaginatorComponent, decorators: [{
type: Component,
args: [{ selector: 'cf-paginator', template: "<div class=\"cf-paginator\" [ngClass]=\"theme\">\n <div class=\"pages\">\n <div class=\"page\" *ngIf=\"page > 1\" (click)=\"changedHandler(1)\" [ngClass]=\"theme\">\n First\n </div>\n\n <div class=\"page\" *ngFor=\"let item of before\" (click)=\"changedHandler(item)\" [ngClass]=\"theme\">\n {{ item }}\n </div>\n\n <div class=\"current page\">{{ page }}</div>\n\n <div class=\"page\" *ngFor=\"let item of after\" (click)=\"changedHandler(item)\" [ngClass]=\"theme\">\n {{ item }}\n </div>\n\n <div class=\"page\" *ngIf=\"page !== lastPage\" (click)=\"changedHandler(lastPage)\" [ngClass]=\"theme\">\n Last\n </div>\n </div>\n</div>", styles: [".cf-paginator{width:max-content;margin:1rem auto}.cf-paginator .pages{display:flex}.cf-paginator .page{font-size:.8rem;margin-left:.3rem;margin-right:.3rem;line-height:1rem}.cf-paginator .page:not(.current):hover{cursor:pointer}.cf-paginator .current{font-size:1.2rem}.cf-paginator.dark .page{color:gray}.cf-paginator.dark .current{color:#fff!important}.cf-paginator.light .page{color:#000}.cf-paginator.light .current{color:#000!important}\n"] }]
}], ctorParameters: () => [], propDecorators: { page: [{
type: Input
}], count: [{
type: Input
}], limit: [{
type: Input
}], theme: [{
type: Input
}], displayLimit: [{
type: Input
}], changed: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtcGFnaW5hdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NyZWRpYmxlLXVpL3NyYy9saWIvY2YtcGFnaW5hdG9yL2NmLXBhZ2luYXRvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLXBhZ2luYXRvci9jZi1wYWdpbmF0b3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQzVELE1BQU0sZUFBZSxDQUFDOzs7QUFPdkIsTUFBTSxPQUFPLG9CQUFvQjtJQUNwQixJQUFJLEdBQVcsQ0FBQyxDQUFDO0lBQ2pCLEtBQUssR0FBVyxDQUFDLENBQUM7SUFDbEIsS0FBSyxHQUFXLEVBQUUsQ0FBQztJQUNuQixLQUFLLEdBQVcsTUFBTSxDQUFDO0lBQ3ZCLFlBQVksR0FBVyxDQUFDLENBQUM7SUFFeEIsT0FBTyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFFdkMsTUFBTSxHQUFrQixFQUFFLENBQUM7SUFDM0IsS0FBSyxHQUFrQixFQUFFLENBQUM7SUFFMUIsUUFBUSxHQUFXLENBQUMsQ0FBQztJQUNyQixnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO1FBQ0osSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUM5QixJQUFJLE9BQU8sRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFO1lBQzlCLElBQUksQ0FBQyxLQUFLLEdBQUcsT0FBTyxFQUFFLEtBQUssRUFBRSxZQUFZLENBQUM7WUFDMUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7U0FDN0I7UUFFRCxJQUFJLE9BQU8sRUFBRSxJQUFJLEVBQUUsWUFBWSxLQUFLLENBQUM7WUFDakMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDbEMsQ0FBQztJQUVELGtCQUFrQjtRQUNkLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUVoQyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDO1lBQzNCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFWCxNQUFNLEdBQUcsR0FBRyxJQUFJLEtBQUssQ0FBUyxRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUV0RCxJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxNQUFNLENBQUM7UUFFM0IsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQsY0FBYyxDQUFDLElBQVk7UUFDdkIsbUJBQW1CO1FBQ25CLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQztRQUU1QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUVqQixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdEIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxjQUFjO1FBQ1YsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1FBRWxCLEtBQUssSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ3pDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDO1lBRTNCLElBQUksSUFBSSxHQUFHLENBQUM7Z0JBQ1IsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN6QjtRQUVELElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxhQUFhO1FBQ1QsTUFBTSxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFcEQsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDekMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7WUFFM0IsSUFBSSxJQUFJLElBQUksUUFBUTtnQkFDaEIsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN4QjtRQUVELElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7dUdBOUVRLG9CQUFvQjsyRkFBcEIsb0JBQW9CLGtOQ1RqQywydUJBb0JNOzsyRkRYTyxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0ksY0FBYzt3REFLZixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXNcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnY2YtcGFnaW5hdG9yJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vY2YtcGFnaW5hdG9yLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9jZi1wYWdpbmF0b3IuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDZlBhZ2luYXRvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcbiAgICBASW5wdXQoKSBwYWdlOiBudW1iZXIgPSAxO1xuICAgIEBJbnB1dCgpIGNvdW50OiBudW1iZXIgPSAwO1xuICAgIEBJbnB1dCgpIGxpbWl0OiBudW1iZXIgPSAxMDtcbiAgICBASW5wdXQoKSB0aGVtZTogc3RyaW5nID0gJ2RhcmsnO1xuICAgIEBJbnB1dCgpIGRpc3BsYXlMaW1pdDogbnVtYmVyID0gMjtcblxuICAgIEBPdXRwdXQoKSBjaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgYmVmb3JlOiBBcnJheTxudW1iZXI+ID0gW107XG4gICAgYWZ0ZXI6IEFycmF5PG51bWJlcj4gPSBbXTtcblxuICAgIGxhc3RQYWdlOiBudW1iZXIgPSAwO1xuICAgIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5nZW5lcmF0ZVBhZ2luYXRpb24oKTtcbiAgICB9XG5cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGlmIChjaGFuZ2VzPy5jb3VudD8uY3VycmVudFZhbHVlKSB7XG4gICAgICAgICAgICB0aGlzLmNvdW50ID0gY2hhbmdlcz8uY291bnQ/LmN1cnJlbnRWYWx1ZTtcbiAgICAgICAgICAgIHRoaXMuZ2VuZXJhdGVQYWdpbmF0aW9uKCk7XG4gICAgICAgIH1cblxuICAgICAgICBpZiAoY2hhbmdlcz8ucGFnZT8uY3VycmVudFZhbHVlID09PSAxKVxuICAgICAgICAgICAgdGhpcy5nZW5lcmF0ZVBhZ2luYXRpb24oKTtcbiAgICB9XG5cbiAgICBnZW5lcmF0ZVBhZ2luYXRpb24oKSB7XG4gICAgICAgIGxldCBkID0gdGhpcy5jb3VudCAvIHRoaXMubGltaXQ7XG5cbiAgICAgICAgaWYgKHRoaXMuY291bnQgJSB0aGlzLmxpbWl0ID4gMClcbiAgICAgICAgICAgIGQgKz0gMTtcblxuICAgICAgICBjb25zdCBhcnIgPSBuZXcgQXJyYXk8bnVtYmVyPihwYXJzZUludChkLnRvU3RyaW5nKCkpKTtcblxuICAgICAgICB0aGlzLmxhc3RQYWdlID0gYXJyLmxlbmd0aDtcblxuICAgICAgICB0aGlzLmdlbmVyYXRlQmVmb3JlKCk7XG4gICAgICAgIHRoaXMuZ2VuZXJhdGVBZnRlcigpO1xuICAgIH1cblxuICAgIGNoYW5nZWRIYW5kbGVyKHBhZ2U6IG51bWJlcikge1xuICAgICAgICAvLyB6ZXJvIGJhc2VkIGluZGV4XG4gICAgICAgIHRoaXMuY2hhbmdlZC5lbWl0KHBhZ2UgLSAxKTtcblxuICAgICAgICB0aGlzLnBhZ2UgPSBwYWdlO1xuXG4gICAgICAgIHRoaXMuZ2VuZXJhdGVCZWZvcmUoKTtcbiAgICAgICAgdGhpcy5nZW5lcmF0ZUFmdGVyKCk7XG4gICAgfVxuXG4gICAgZ2VuZXJhdGVCZWZvcmUoKSB7XG4gICAgICAgIGNvbnN0IGJlZm9yZSA9IFtdO1xuXG4gICAgICAgIGZvciAobGV0IGkgPSB0aGlzLmRpc3BsYXlMaW1pdDsgaSA+PSAxOyBpLS0pIHtcbiAgICAgICAgICAgIGNvbnN0IHBhZ2UgPSB0aGlzLnBhZ2UgLSBpO1xuXG4gICAgICAgICAgICBpZiAocGFnZSA+IDApXG4gICAgICAgICAgICAgICAgYmVmb3JlLnB1c2gocGFnZSk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmJlZm9yZSA9IGJlZm9yZTtcbiAgICB9XG5cbiAgICBnZW5lcmF0ZUFmdGVyKCkge1xuICAgICAgICBjb25zdCBhZnRlciA9IFtdO1xuICAgICAgICBjb25zdCBtYXhMaW1pdCA9IE1hdGguY2VpbCh0aGlzLmNvdW50IC8gdGhpcy5saW1pdCk7XG5cbiAgICAgICAgZm9yIChsZXQgaSA9IDE7IGkgPD0gdGhpcy5kaXNwbGF5TGltaXQ7IGkrKykge1xuICAgICAgICAgICAgY29uc3QgcGFnZSA9IHRoaXMucGFnZSArIGk7XG5cbiAgICAgICAgICAgIGlmIChwYWdlIDw9IG1heExpbWl0KVxuICAgICAgICAgICAgICAgIGFmdGVyLnB1c2gocGFnZSk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmFmdGVyID0gYWZ0ZXI7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNmLXBhZ2luYXRvclwiIFtuZ0NsYXNzXT1cInRoZW1lXCI+XG4gICAgPGRpdiBjbGFzcz1cInBhZ2VzXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYWdlXCIgKm5nSWY9XCJwYWdlID4gMVwiIChjbGljayk9XCJjaGFuZ2VkSGFuZGxlcigxKVwiIFtuZ0NsYXNzXT1cInRoZW1lXCI+XG4gICAgICAgICAgICBGaXJzdFxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwicGFnZVwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGJlZm9yZVwiIChjbGljayk9XCJjaGFuZ2VkSGFuZGxlcihpdGVtKVwiIFtuZ0NsYXNzXT1cInRoZW1lXCI+XG4gICAgICAgICAgICB7eyBpdGVtIH19XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjdXJyZW50IHBhZ2VcIj57eyBwYWdlIH19PC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2VcIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBhZnRlclwiIChjbGljayk9XCJjaGFuZ2VkSGFuZGxlcihpdGVtKVwiIFtuZ0NsYXNzXT1cInRoZW1lXCI+XG4gICAgICAgICAgICB7eyBpdGVtIH19XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYWdlXCIgKm5nSWY9XCJwYWdlICE9PSBsYXN0UGFnZVwiIChjbGljayk9XCJjaGFuZ2VkSGFuZGxlcihsYXN0UGFnZSlcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgICAgICAgICAgTGFzdFxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==