ngx-ui-builder
Version:
Angular - Render component ui with configurations
155 lines (149 loc) • 16.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import { BehaviorSubject, Subject, takeUntil, filter, map } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
class NubPaginationComponent {
set configs(configs) {
this.localConfigs = { ...this.localConfigs, ...configs };
}
;
constructor() {
this.DOTS = '...';
this.localConfigs = {
pageSizes: [5, 10, 20, 50, 100],
pageSize: 10,
page: 1,
siblingCount: 2,
showRefreshButton: false,
showPageSizesConfig: false,
};
this.pagination$ = new BehaviorSubject(this.localConfigs);
this.pageArray$ = new BehaviorSubject([]);
this._componentDestroy = new Subject();
}
ngOnInit() {
this.pagination$.next(this.localConfigs);
this.refresh();
this.pagination$.pipe(takeUntil(this._componentDestroy)).subscribe((pagination => {
Object.assign(this.localConfigs, pagination);
}));
}
ngOnDestroy() {
this._componentDestroy.next();
this._componentDestroy.complete();
}
buildPageArray() {
return this.pagination$.pipe(takeUntil(this._componentDestroy), filter(pagination => !!pagination), map(pagination => {
const totalPageCount = Math.round((pagination?.totalItems ?? 0) / (pagination?.pageSize ?? 10));
// siblingCount + firstPage + lastPage + currentPage + 2*DOTS
const totalPageNumbers = (pagination?.siblingCount ?? 1) + 5;
// [1..totalPageCount]
if (totalPageNumbers >= totalPageCount) {
return this.range(1, totalPageCount);
}
const leftSiblingIndex = Math.max((pagination?.page ?? 1) - (pagination?.siblingCount ?? 1), 1);
const rightSiblingIndex = Math.min((pagination?.page ?? 1) + (pagination?.siblingCount ?? 1), totalPageCount);
const shouldShowLeftDots = leftSiblingIndex > 2;
const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
const firstPageIndex = 1;
const lastPageIndex = totalPageCount;
if (!shouldShowLeftDots && shouldShowRightDots) {
const leftItemCount = 3 + 2 * (pagination?.siblingCount ?? 1);
const leftRange = this.range(1, leftItemCount);
return [...leftRange, this.DOTS, totalPageCount];
}
if (shouldShowLeftDots && !shouldShowRightDots) {
const rightItemCount = 3 + 2 * (pagination?.siblingCount ?? 1);
const rightRange = this.range(totalPageCount - rightItemCount + 1, totalPageCount);
return [firstPageIndex, this.DOTS, ...rightRange];
}
if (shouldShowLeftDots && shouldShowRightDots) {
const middleRange = this.range(leftSiblingIndex, rightSiblingIndex);
return [firstPageIndex, this.DOTS, ...middleRange, this.DOTS, lastPageIndex];
}
return new Array(totalPageCount);
}));
}
async setPageSize() {
await this.refresh();
const pagination = this.buildOptions();
if (this.localConfigs.afterChangePageSize) {
this.localConfigs.afterChangePageSize(pagination);
}
else {
this.goToPage(0);
}
}
goToPage(pageIndex) {
const pagination = this.buildOptions(pageIndex);
this.pagination$.next({
...pagination,
});
if (this.localConfigs.afterChangePage) {
this.localConfigs.afterChangePage(pagination);
}
this.refresh();
}
refresh() {
this.buildPageArray().subscribe(data => {
this.pageArray$.next(data);
});
}
onRefresh() {
this.refresh();
}
buildOptions(pageIndex = 0) {
return {
pageSizes: this.localConfigs.pageSizes,
pageSize: this.localConfigs.pageSize,
page: pageIndex + 1,
siblingCount: this.localConfigs.siblingCount,
totalItems: this.localConfigs.totalItems,
};
}
range(start, end) {
const length = end - start + 1;
return Array.from({ length }, (_, idx) => idx + start);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: NubPaginationComponent, selector: "nub-pagination", inputs: { configs: "configs" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\n <button class=\"btn-refresh\" (click)=\"onRefresh()\">Refresh</button>\n\n <!-- Pagination Section -->\n <div class=\"settings\">\n <label>\n {{localConfigs.labelSettingsItemsPerPage || 'Items per page'}}:\n <select [(ngModel)]=\"localConfigs.pageSize\" (change)=\"setPageSize()\">\n <option *ngFor=\"let page of (pagination$ | async)!.pageSizes\">\n <span>{{ page }}</span>\n </option>\n </select>\n </label>\n </div>\n\n <div class=\"pagination\" *ngIf=\"pagination$ | async\">\n <ng-container *ngTemplateOutlet=\"firstTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"previousTemplate\"></ng-container>\n <ng-container *ngFor=\"let page of pageArray$ | async; let i = index\">\n <ng-container *ngIf=\"page === DOTS\">\n <ng-container *ngTemplateOutlet=\"dotTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"page !== DOTS\">\n <ng-container *ngTemplateOutlet=\"pageNumberTemplate; context: {$implicit: page}\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"nextTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"lastTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #firstTemplate>\n <div (click)=\"goToPage(0)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\" viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #lastTemplate>\n <div (click)=\"goToPage(localConfigs.totalItems! / localConfigs.pageSize!)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #previousTemplate>\n <div (click)=\"goToPage(localConfigs.page! > 1 ? localConfigs.page! - 2 : 0)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #nextTemplate>\n <div (click)=\"goToPage(localConfigs.page!)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #pageNumberTemplate let-page>\n <div\n class=\"page-number\"\n [ngClass]=\"{ 'active': (pagination$ | async)?.page === page }\"\n (click)=\"goToPage(page - 1)\"\n >\n <span>{{page}}</span>\n </div>\n</ng-template>\n\n<ng-template #dotTemplate>\n <div class=\"page-dot\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"14\" viewBox=\"0 0 18 14\">\n <text id=\"_.\" data-name=\"\u2026.\" transform=\"translate(9 11)\" fill=\"#6badb9\" font-size=\"1em\" font-family=\"Helvetica\">\n <tspan x=\"-8.945\" y=\"0\">\u2026.</tspan>\n </text>\n </svg>\n </div>\n</ng-template>\n", styles: [":host{max-width:100vw;width:100%}.btn-refresh{margin-right:5px}.page-icon{aspect-ratio:1 / 1;width:24px;cursor:pointer}.active{font-weight:700}.pagination-container{display:flex}.pagination{display:flex;align-items:center}.pagination .page-number{aspect-ratio:1 / 1;flex:0 0 24px;border:1px solid gray;text-align:center;line-height:1.7em}.pagination .page-number:not(.active){cursor:pointer}.pagination .page-dot{line-height:1.7em}\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"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubPaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'nub-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pagination-container\">\n\n <button class=\"btn-refresh\" (click)=\"onRefresh()\">Refresh</button>\n\n <!-- Pagination Section -->\n <div class=\"settings\">\n <label>\n {{localConfigs.labelSettingsItemsPerPage || 'Items per page'}}:\n <select [(ngModel)]=\"localConfigs.pageSize\" (change)=\"setPageSize()\">\n <option *ngFor=\"let page of (pagination$ | async)!.pageSizes\">\n <span>{{ page }}</span>\n </option>\n </select>\n </label>\n </div>\n\n <div class=\"pagination\" *ngIf=\"pagination$ | async\">\n <ng-container *ngTemplateOutlet=\"firstTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"previousTemplate\"></ng-container>\n <ng-container *ngFor=\"let page of pageArray$ | async; let i = index\">\n <ng-container *ngIf=\"page === DOTS\">\n <ng-container *ngTemplateOutlet=\"dotTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"page !== DOTS\">\n <ng-container *ngTemplateOutlet=\"pageNumberTemplate; context: {$implicit: page}\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"nextTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"lastTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #firstTemplate>\n <div (click)=\"goToPage(0)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\" viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #lastTemplate>\n <div (click)=\"goToPage(localConfigs.totalItems! / localConfigs.pageSize!)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #previousTemplate>\n <div (click)=\"goToPage(localConfigs.page! > 1 ? localConfigs.page! - 2 : 0)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #nextTemplate>\n <div (click)=\"goToPage(localConfigs.page!)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"page-icon\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"/>\n </svg>\n </div>\n</ng-template>\n\n<ng-template #pageNumberTemplate let-page>\n <div\n class=\"page-number\"\n [ngClass]=\"{ 'active': (pagination$ | async)?.page === page }\"\n (click)=\"goToPage(page - 1)\"\n >\n <span>{{page}}</span>\n </div>\n</ng-template>\n\n<ng-template #dotTemplate>\n <div class=\"page-dot\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"14\" viewBox=\"0 0 18 14\">\n <text id=\"_.\" data-name=\"\u2026.\" transform=\"translate(9 11)\" fill=\"#6badb9\" font-size=\"1em\" font-family=\"Helvetica\">\n <tspan x=\"-8.945\" y=\"0\">\u2026.</tspan>\n </text>\n </svg>\n </div>\n</ng-template>\n", styles: [":host{max-width:100vw;width:100%}.btn-refresh{margin-right:5px}.page-icon{aspect-ratio:1 / 1;width:24px;cursor:pointer}.active{font-weight:700}.pagination-container{display:flex}.pagination{display:flex;align-items:center}.pagination .page-number{aspect-ratio:1 / 1;flex:0 0 24px;border:1px solid gray;text-align:center;line-height:1.7em}.pagination .page-number:not(.active){cursor:pointer}.pagination .page-dot{line-height:1.7em}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { configs: [{
type: Input
}] } });
class NubPaginationModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: NubPaginationModule, declarations: [NubPaginationComponent], imports: [CommonModule,
FormsModule], exports: [NubPaginationComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubPaginationModule, imports: [CommonModule,
FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubPaginationModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NubPaginationComponent
],
imports: [
CommonModule,
FormsModule,
],
exports: [
NubPaginationComponent
]
}]
}] });
/*
* Public API Surface of pagination
*/
/**
* Generated bundle index. Do not edit.
*/
export { NubPaginationComponent, NubPaginationModule };
//# sourceMappingURL=ngx-ui-builder-pagination.mjs.map