ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
139 lines (132 loc) • 13.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class PaginationItemComponent {
}
PaginationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PaginationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PaginationItemComponent, selector: "o-pagination-item", inputs: { isActive: "isActive", isDisabled: "isDisabled", isNoEvent: "isNoEvent" }, ngImport: i0, template: "<li class=\"page-item\" [class.active]=\"isActive\" [class.no-events]=\"isNoEvent\" [class.disabled]=\"isDisabled\">\r\n <ng-container *ngIf=\"isNoEvent; else showLink\">\r\n <span class=\"page-link\">...</span>\r\n </ng-container>\r\n <ng-template #showLink>\r\n <a class=\"page-link\" href=\"#\">\r\n <ng-content></ng-content>\r\n </a>\r\n </ng-template>\r\n</li>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationItemComponent, decorators: [{
type: Component,
args: [{ selector: 'o-pagination-item', template: "<li class=\"page-item\" [class.active]=\"isActive\" [class.no-events]=\"isNoEvent\" [class.disabled]=\"isDisabled\">\r\n <ng-container *ngIf=\"isNoEvent; else showLink\">\r\n <span class=\"page-link\">...</span>\r\n </ng-container>\r\n <ng-template #showLink>\r\n <a class=\"page-link\" href=\"#\">\r\n <ng-content></ng-content>\r\n </a>\r\n </ng-template>\r\n</li>\r\n" }]
}], propDecorators: { isActive: [{
type: Input
}], isDisabled: [{
type: Input
}], isNoEvent: [{
type: Input
}] } });
class PaginationNumberComponent {
}
PaginationNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PaginationNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PaginationNumberComponent, selector: "o-pagination-number", inputs: { index: "index", current: "current" }, ngImport: i0, template: "<o-pagination-item [isActive]=\"index === current\">\r\n {{ index + 1 }}\r\n</o-pagination-item>\r\n", styles: [""], dependencies: [{ kind: "component", type: PaginationItemComponent, selector: "o-pagination-item", inputs: ["isActive", "isDisabled", "isNoEvent"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationNumberComponent, decorators: [{
type: Component,
args: [{ selector: 'o-pagination-number', template: "<o-pagination-item [isActive]=\"index === current\">\r\n {{ index + 1 }}\r\n</o-pagination-item>\r\n" }]
}], propDecorators: { index: [{
type: Input
}], current: [{
type: Input
}] } });
class OPaginationComponent {
constructor() {
this.currentPage = 1;
this.isDiscriptiveType = false;
this.customClasses = '';
this.currentPageChange = new EventEmitter();
this.pagesArr = [];
this.isShowTopTrimmer = false;
this.isShowBottomTrimmer = false;
this.pagesToShow = [];
this.isBlockEvent = false;
}
get getIsFirstPage() {
return this.currentPage === 0;
}
get getIsLastPage() {
return this.currentPage === this.pagesArr.length - 1;
}
ngOnInit() {
this.pagesArr = Array.from(Array(this.totalPages).keys());
this.pagesToShow = this.pagesArr;
this.lastIndex = this.pagesArr.length - 1;
this.isShowTopTrimmer = true;
this.selectedPage(this.currentPage - 1);
}
selectedPage(page) {
if (this.currentPage === page)
return;
this.currentPage = page;
if (!this.isBlockEvent) {
this.currentPageChange.emit(page + 1);
}
if (this.pagesArr.length > 2) {
if (this.currentPage < 4) {
this.lastIndex = this.pagesArr.length - 1;
this.pagesToShow = [0, 1, 2, 3, 4];
this.isShowTopTrimmer = true;
this.isShowBottomTrimmer = false;
}
else if (this.currentPage > this.lastIndex - 4) {
this.pagesToShow = this.pagesArr.slice(-5);
this.isShowTopTrimmer = false;
this.isShowBottomTrimmer = true;
}
else {
this.pagesToShow = this.pagesArr.slice(this.currentPage - 1, this.currentPage + 2);
this.isShowBottomTrimmer = true;
this.isShowTopTrimmer = true;
}
}
}
onPrev() {
this.isBlockEvent = true;
this.currentPageChange.emit(this.currentPage);
if (this.currentPage > 0)
this.selectedPage(this.currentPage - 1);
this.isBlockEvent = false;
}
onNext() {
this.isBlockEvent = true;
if (this.currentPage < this.pagesArr.length - 1)
this.selectedPage(this.currentPage + 1);
this.currentPageChange.emit(this.currentPage + 1);
this.isBlockEvent = false;
}
}
OPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OPaginationComponent, selector: "o-pagination", inputs: { totalPages: "totalPages", ariaLabel: "ariaLabel", currentPage: "currentPage", isDiscriptiveType: "isDiscriptiveType", customClasses: "customClasses" }, outputs: { currentPageChange: "currentPageChange" }, ngImport: i0, template: "<ng-container *ngIf=\"!isDiscriptiveType; else descriptive\">\r\n <nav [attr.aria-label]=\"ariaLabel\" [ngClass]=\"customClasses\">\r\n <ul class=\"pagination\">\r\n <o-pagination-item [class.hidden]=\"getIsFirstPage\" (click)=\"onPrev()\">\r\n <span class=\"page-previous-icon\" [attr.aria-hidden]=\"true\"></span>\r\n <span class=\"page-previous-text\">Anterior</span>\r\n </o-pagination-item>\r\n\r\n <ng-container *ngIf=\"isShowBottomTrimmer\">\r\n <o-pagination-number [index]=\"0\" [current]=\"currentPage\" (click)=\"selectedPage(0)\"> </o-pagination-number>\r\n <o-pagination-item [isDisabled]=\"true\" [isNoEvent]=\"true\"></o-pagination-item>\r\n </ng-container>\r\n\r\n <o-pagination-number *ngFor=\"let i of pagesToShow\" [index]=\"i\" [current]=\"currentPage\" (click)=\"selectedPage(i)\">\r\n </o-pagination-number>\r\n\r\n <ng-container *ngIf=\"isShowTopTrimmer\">\r\n <o-pagination-item [isDisabled]=\"true\" [isNoEvent]=\"true\"></o-pagination-item>\r\n <o-pagination-number [index]=\"lastIndex\" [current]=\"currentPage\" (click)=\"selectedPage(lastIndex)\">\r\n </o-pagination-number>\r\n </ng-container>\r\n\r\n <o-pagination-item [class.hidden]=\"getIsLastPage\" (click)=\"onNext()\">\r\n <span class=\"page-next-text\">Siguiente</span>\r\n <span class=\"page-next-icon\" [attr.aria-hidden]=\"true\"></span>\r\n </o-pagination-item>\r\n </ul>\r\n </nav>\r\n</ng-container>\r\n\r\n<ng-template #descriptive>\r\n <div class=\"pagination\" [ngClass]=\"customClasses\">\r\n <div class=\"page-navigation\">\r\n <div class=\"page-item\" [class.hidden]=\"getIsFirstPage\" (click)=\"onPrev()\">\r\n <a class=\"btn page-link\" href=\"#\">\r\n <span class=\"page-previous-icon\" [attr.aria-hidden]=\"true\"></span>\r\n <span class=\"page-next-text\">Anterior</span>\r\n </a>\r\n </div>\r\n <div class=\"page-item\" [class.hidden]=\"getIsLastPage\" (click)=\"onNext()\">\r\n <a class=\"btn page-link\" href=\"#\">\r\n <span class=\"page-next-text\">Siguiente</span>\r\n <span class=\"page-next-icon\" [attr.aria-hidden]=\"true\"></span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".hidden{opacity:0}\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: "component", type: PaginationNumberComponent, selector: "o-pagination-number", inputs: ["index", "current"] }, { kind: "component", type: PaginationItemComponent, selector: "o-pagination-item", inputs: ["isActive", "isDisabled", "isNoEvent"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OPaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'o-pagination', template: "<ng-container *ngIf=\"!isDiscriptiveType; else descriptive\">\r\n <nav [attr.aria-label]=\"ariaLabel\" [ngClass]=\"customClasses\">\r\n <ul class=\"pagination\">\r\n <o-pagination-item [class.hidden]=\"getIsFirstPage\" (click)=\"onPrev()\">\r\n <span class=\"page-previous-icon\" [attr.aria-hidden]=\"true\"></span>\r\n <span class=\"page-previous-text\">Anterior</span>\r\n </o-pagination-item>\r\n\r\n <ng-container *ngIf=\"isShowBottomTrimmer\">\r\n <o-pagination-number [index]=\"0\" [current]=\"currentPage\" (click)=\"selectedPage(0)\"> </o-pagination-number>\r\n <o-pagination-item [isDisabled]=\"true\" [isNoEvent]=\"true\"></o-pagination-item>\r\n </ng-container>\r\n\r\n <o-pagination-number *ngFor=\"let i of pagesToShow\" [index]=\"i\" [current]=\"currentPage\" (click)=\"selectedPage(i)\">\r\n </o-pagination-number>\r\n\r\n <ng-container *ngIf=\"isShowTopTrimmer\">\r\n <o-pagination-item [isDisabled]=\"true\" [isNoEvent]=\"true\"></o-pagination-item>\r\n <o-pagination-number [index]=\"lastIndex\" [current]=\"currentPage\" (click)=\"selectedPage(lastIndex)\">\r\n </o-pagination-number>\r\n </ng-container>\r\n\r\n <o-pagination-item [class.hidden]=\"getIsLastPage\" (click)=\"onNext()\">\r\n <span class=\"page-next-text\">Siguiente</span>\r\n <span class=\"page-next-icon\" [attr.aria-hidden]=\"true\"></span>\r\n </o-pagination-item>\r\n </ul>\r\n </nav>\r\n</ng-container>\r\n\r\n<ng-template #descriptive>\r\n <div class=\"pagination\" [ngClass]=\"customClasses\">\r\n <div class=\"page-navigation\">\r\n <div class=\"page-item\" [class.hidden]=\"getIsFirstPage\" (click)=\"onPrev()\">\r\n <a class=\"btn page-link\" href=\"#\">\r\n <span class=\"page-previous-icon\" [attr.aria-hidden]=\"true\"></span>\r\n <span class=\"page-next-text\">Anterior</span>\r\n </a>\r\n </div>\r\n <div class=\"page-item\" [class.hidden]=\"getIsLastPage\" (click)=\"onNext()\">\r\n <a class=\"btn page-link\" href=\"#\">\r\n <span class=\"page-next-text\">Siguiente</span>\r\n <span class=\"page-next-icon\" [attr.aria-hidden]=\"true\"></span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".hidden{opacity:0}\n"] }]
}], propDecorators: { totalPages: [{
type: Input
}], ariaLabel: [{
type: Input
}], currentPage: [{
type: Input
}], isDiscriptiveType: [{
type: Input
}], customClasses: [{
type: Input
}], currentPageChange: [{
type: Output
}] } });
class OPaginationModule {
}
OPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OPaginationModule, declarations: [OPaginationComponent, PaginationNumberComponent, PaginationItemComponent], imports: [CommonModule], exports: [OPaginationComponent] });
OPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OPaginationModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OPaginationModule, decorators: [{
type: NgModule,
args: [{
declarations: [OPaginationComponent, PaginationNumberComponent, PaginationItemComponent],
imports: [CommonModule],
exports: [OPaginationComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OPaginationComponent, OPaginationModule, PaginationItemComponent, PaginationNumberComponent };
//# sourceMappingURL=ngx-obelisco-example-pagination.mjs.map