@crediblefinance/credible-ui
Version:
Credible's standard UI library
78 lines • 12.6 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';
changed = new EventEmitter();
before = [];
after = [];
displayLimit = 2;
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" }, 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
}], changed: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtcGFnaW5hdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NyZWRpYmxlLXVpL3NyYy9saWIvY2YtcGFnaW5hdG9yL2NmLXBhZ2luYXRvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLXBhZ2luYXRvci9jZi1wYWdpbmF0b3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQzVELE1BQU0sZUFBZSxDQUFDOzs7QUFPdkIsTUFBTSxPQUFPLG9CQUFvQjtJQUNwQixJQUFJLEdBQVcsQ0FBQyxDQUFDO0lBQ2pCLEtBQUssR0FBVyxDQUFDLENBQUM7SUFDbEIsS0FBSyxHQUFXLEVBQUUsQ0FBQztJQUNuQixLQUFLLEdBQVcsTUFBTSxDQUFDO0lBRXRCLE9BQU8sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBRXZDLE1BQU0sR0FBa0IsRUFBRSxDQUFDO0lBQzNCLEtBQUssR0FBa0IsRUFBRSxDQUFDO0lBQzFCLFlBQVksR0FBVyxDQUFDLENBQUM7SUFFekIsUUFBUSxHQUFXLENBQUMsQ0FBQztJQUNyQixnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO1FBQ0osSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUM5QixJQUFJLE9BQU8sRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFO1lBQzlCLElBQUksQ0FBQyxLQUFLLEdBQUcsT0FBTyxFQUFFLEtBQUssRUFBRSxZQUFZLENBQUM7WUFDMUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7U0FDN0I7UUFFRCxJQUFJLE9BQU8sRUFBRSxJQUFJLEVBQUUsWUFBWSxLQUFLLENBQUM7WUFDakMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDbEMsQ0FBQztJQUVELGtCQUFrQjtRQUNkLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUVoQyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDO1lBQzNCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFWCxNQUFNLEdBQUcsR0FBRyxJQUFJLEtBQUssQ0FBUyxRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUV0RCxJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxNQUFNLENBQUM7UUFFM0IsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQsY0FBYyxDQUFDLElBQVk7UUFDdkIsbUJBQW1CO1FBQ25CLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQztRQUU1QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUVqQixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdEIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxjQUFjO1FBQ1YsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1FBRWxCLEtBQUssSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ3pDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDO1lBRTNCLElBQUksSUFBSSxHQUFHLENBQUM7Z0JBQ1IsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN6QjtRQUVELElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxhQUFhO1FBQ1QsTUFBTSxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFcEQsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDekMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7WUFFM0IsSUFBSSxJQUFJLElBQUksUUFBUTtnQkFDaEIsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN4QjtRQUVELElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7dUdBOUVRLG9CQUFvQjsyRkFBcEIsb0JBQW9CLG9MQ1RqQywydUJBb0JNOzsyRkRYTyxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0ksY0FBYzt3REFLZixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBRUksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2NmLXBhZ2luYXRvcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NmLXBhZ2luYXRvci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vY2YtcGFnaW5hdG9yLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2ZQYWdpbmF0b3JDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gICAgQElucHV0KCkgcGFnZTogbnVtYmVyID0gMTtcbiAgICBASW5wdXQoKSBjb3VudDogbnVtYmVyID0gMDtcbiAgICBASW5wdXQoKSBsaW1pdDogbnVtYmVyID0gMTA7XG4gICAgQElucHV0KCkgdGhlbWU6IHN0cmluZyA9ICdkYXJrJztcblxuICAgIEBPdXRwdXQoKSBjaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgYmVmb3JlOiBBcnJheTxudW1iZXI+ID0gW107XG4gICAgYWZ0ZXI6IEFycmF5PG51bWJlcj4gPSBbXTtcbiAgICBkaXNwbGF5TGltaXQ6IG51bWJlciA9IDI7XG5cbiAgICBsYXN0UGFnZTogbnVtYmVyID0gMDtcbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZ2VuZXJhdGVQYWdpbmF0aW9uKCk7XG4gICAgfVxuXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgICAgICBpZiAoY2hhbmdlcz8uY291bnQ/LmN1cnJlbnRWYWx1ZSkge1xuICAgICAgICAgICAgdGhpcy5jb3VudCA9IGNoYW5nZXM/LmNvdW50Py5jdXJyZW50VmFsdWU7XG4gICAgICAgICAgICB0aGlzLmdlbmVyYXRlUGFnaW5hdGlvbigpO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKGNoYW5nZXM/LnBhZ2U/LmN1cnJlbnRWYWx1ZSA9PT0gMSlcbiAgICAgICAgICAgIHRoaXMuZ2VuZXJhdGVQYWdpbmF0aW9uKCk7XG4gICAgfVxuXG4gICAgZ2VuZXJhdGVQYWdpbmF0aW9uKCkge1xuICAgICAgICBsZXQgZCA9IHRoaXMuY291bnQgLyB0aGlzLmxpbWl0O1xuXG4gICAgICAgIGlmICh0aGlzLmNvdW50ICUgdGhpcy5saW1pdCA+IDApXG4gICAgICAgICAgICBkICs9IDE7XG5cbiAgICAgICAgY29uc3QgYXJyID0gbmV3IEFycmF5PG51bWJlcj4ocGFyc2VJbnQoZC50b1N0cmluZygpKSk7XG5cbiAgICAgICAgdGhpcy5sYXN0UGFnZSA9IGFyci5sZW5ndGg7XG5cbiAgICAgICAgdGhpcy5nZW5lcmF0ZUJlZm9yZSgpO1xuICAgICAgICB0aGlzLmdlbmVyYXRlQWZ0ZXIoKTtcbiAgICB9XG5cbiAgICBjaGFuZ2VkSGFuZGxlcihwYWdlOiBudW1iZXIpIHtcbiAgICAgICAgLy8gemVybyBiYXNlZCBpbmRleFxuICAgICAgICB0aGlzLmNoYW5nZWQuZW1pdChwYWdlIC0gMSk7XG5cbiAgICAgICAgdGhpcy5wYWdlID0gcGFnZTtcblxuICAgICAgICB0aGlzLmdlbmVyYXRlQmVmb3JlKCk7XG4gICAgICAgIHRoaXMuZ2VuZXJhdGVBZnRlcigpO1xuICAgIH1cblxuICAgIGdlbmVyYXRlQmVmb3JlKCkge1xuICAgICAgICBjb25zdCBiZWZvcmUgPSBbXTtcblxuICAgICAgICBmb3IgKGxldCBpID0gdGhpcy5kaXNwbGF5TGltaXQ7IGkgPj0gMTsgaS0tKSB7XG4gICAgICAgICAgICBjb25zdCBwYWdlID0gdGhpcy5wYWdlIC0gaTtcblxuICAgICAgICAgICAgaWYgKHBhZ2UgPiAwKVxuICAgICAgICAgICAgICAgIGJlZm9yZS5wdXNoKHBhZ2UpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5iZWZvcmUgPSBiZWZvcmU7XG4gICAgfVxuXG4gICAgZ2VuZXJhdGVBZnRlcigpIHtcbiAgICAgICAgY29uc3QgYWZ0ZXIgPSBbXTtcbiAgICAgICAgY29uc3QgbWF4TGltaXQgPSBNYXRoLmNlaWwodGhpcy5jb3VudCAvIHRoaXMubGltaXQpO1xuXG4gICAgICAgIGZvciAobGV0IGkgPSAxOyBpIDw9IHRoaXMuZGlzcGxheUxpbWl0OyBpKyspIHtcbiAgICAgICAgICAgIGNvbnN0IHBhZ2UgPSB0aGlzLnBhZ2UgKyBpO1xuXG4gICAgICAgICAgICBpZiAocGFnZSA8PSBtYXhMaW1pdClcbiAgICAgICAgICAgICAgICBhZnRlci5wdXNoKHBhZ2UpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5hZnRlciA9IGFmdGVyO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjZi1wYWdpbmF0b3JcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJwYWdlc1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicGFnZVwiICpuZ0lmPVwicGFnZSA+IDFcIiAoY2xpY2spPVwiY2hhbmdlZEhhbmRsZXIoMSlcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgICAgICAgICAgRmlyc3RcbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2VcIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBiZWZvcmVcIiAoY2xpY2spPVwiY2hhbmdlZEhhbmRsZXIoaXRlbSlcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgICAgICAgICAge3sgaXRlbSB9fVxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3VycmVudCBwYWdlXCI+e3sgcGFnZSB9fTwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYWdlXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgYWZ0ZXJcIiAoY2xpY2spPVwiY2hhbmdlZEhhbmRsZXIoaXRlbSlcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgICAgICAgICAge3sgaXRlbSB9fVxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwicGFnZVwiICpuZ0lmPVwicGFnZSAhPT0gbGFzdFBhZ2VcIiAoY2xpY2spPVwiY2hhbmdlZEhhbmRsZXIobGFzdFBhZ2UpXCIgW25nQ2xhc3NdPVwidGhlbWVcIj5cbiAgICAgICAgICAgIExhc3RcbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=