@impartner/design-components 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/pagination/pagination.component.mjs +38 -28
- package/esm2020/lib/pagination/pagination.module.mjs +5 -4
- package/fesm2015/impartner-design-components.mjs +38 -29
- package/fesm2015/impartner-design-components.mjs.map +1 -1
- package/fesm2020/impartner-design-components.mjs +38 -29
- package/fesm2020/impartner-design-components.mjs.map +1 -1
- package/lib/pagination/pagination.component.d.ts +2 -0
- package/lib/pagination/pagination.module.d.ts +3 -2
- package/package.json +1 -1
|
@@ -7590,22 +7590,24 @@ class PaginationComponent {
|
|
|
7590
7590
|
return Math.ceil(this.total / this.perPage);
|
|
7591
7591
|
}
|
|
7592
7592
|
get firstPageResult() {
|
|
7593
|
-
|
|
7593
|
+
const page = this._getPageClamped();
|
|
7594
|
+
if (this.total < 1 || page < 1 || this.perPage < 1) {
|
|
7594
7595
|
return 0;
|
|
7595
7596
|
}
|
|
7596
|
-
if (
|
|
7597
|
+
if (page === 1) {
|
|
7597
7598
|
return 1;
|
|
7598
7599
|
}
|
|
7599
|
-
if (
|
|
7600
|
+
if (page > Math.ceil(this.total / this.perPage)) {
|
|
7600
7601
|
return this.total;
|
|
7601
7602
|
}
|
|
7602
|
-
return (
|
|
7603
|
+
return (page - 1) * this.perPage + 1;
|
|
7603
7604
|
}
|
|
7604
7605
|
get lastPageResult() {
|
|
7605
|
-
|
|
7606
|
+
const page = this._getPageClamped();
|
|
7607
|
+
if (this.total <= 0 || page < 1 || this.perPage < 1) {
|
|
7606
7608
|
return 0;
|
|
7607
7609
|
}
|
|
7608
|
-
if (
|
|
7610
|
+
if (page === 1) {
|
|
7609
7611
|
if (this.total < this.perPage) {
|
|
7610
7612
|
return this.total;
|
|
7611
7613
|
}
|
|
@@ -7613,26 +7615,38 @@ class PaginationComponent {
|
|
|
7613
7615
|
return this.perPage;
|
|
7614
7616
|
}
|
|
7615
7617
|
}
|
|
7616
|
-
if (this.total < this.perPage *
|
|
7618
|
+
if (this.total < this.perPage * page) {
|
|
7617
7619
|
return this.total;
|
|
7618
7620
|
}
|
|
7619
7621
|
else {
|
|
7620
|
-
return this.perPage *
|
|
7622
|
+
return this.perPage * page;
|
|
7621
7623
|
}
|
|
7622
7624
|
}
|
|
7625
|
+
_getPageClamped(page) {
|
|
7626
|
+
page = Number(page || this.page || 0);
|
|
7627
|
+
if (isNaN(page) || page < 1) {
|
|
7628
|
+
return 1;
|
|
7629
|
+
}
|
|
7630
|
+
if (page > this.totalPages) {
|
|
7631
|
+
return this.totalPages;
|
|
7632
|
+
}
|
|
7633
|
+
return page;
|
|
7634
|
+
}
|
|
7623
7635
|
goToPreviousPage() {
|
|
7624
|
-
|
|
7636
|
+
const page = this._getPageClamped();
|
|
7637
|
+
if (page <= 1) {
|
|
7625
7638
|
return;
|
|
7626
7639
|
}
|
|
7627
|
-
const previousPage =
|
|
7640
|
+
const previousPage = page - 1;
|
|
7628
7641
|
this.page = previousPage;
|
|
7629
7642
|
this.goToPage.emit(previousPage);
|
|
7630
7643
|
}
|
|
7631
7644
|
goToNextPage() {
|
|
7632
|
-
|
|
7645
|
+
const page = this._getPageClamped();
|
|
7646
|
+
if (page >= this.totalPages) {
|
|
7633
7647
|
return;
|
|
7634
7648
|
}
|
|
7635
|
-
const nextPage =
|
|
7649
|
+
const nextPage = page + 1;
|
|
7636
7650
|
this.page = nextPage;
|
|
7637
7651
|
this.goToPage.emit(nextPage);
|
|
7638
7652
|
}
|
|
@@ -7640,25 +7654,20 @@ class PaginationComponent {
|
|
|
7640
7654
|
this.goToExactPage(target?.value);
|
|
7641
7655
|
}
|
|
7642
7656
|
goToExactPage(page) {
|
|
7643
|
-
|
|
7644
|
-
|
|
7645
|
-
|
|
7646
|
-
|
|
7647
|
-
|
|
7648
|
-
|
|
7649
|
-
|
|
7650
|
-
if (allowedPageNumber > this.totalPages) {
|
|
7651
|
-
allowedPageNumber = this.totalPages;
|
|
7652
|
-
}
|
|
7653
|
-
this.page = allowedPageNumber;
|
|
7654
|
-
this.goToPage.emit(allowedPageNumber);
|
|
7657
|
+
this.page = this._getPageClamped(page);
|
|
7658
|
+
this.goToPage.emit(this.page);
|
|
7659
|
+
}
|
|
7660
|
+
preventDefaultAndBlur(event) {
|
|
7661
|
+
// prevents PRM form submit
|
|
7662
|
+
event.preventDefault();
|
|
7663
|
+
event.target.blur();
|
|
7655
7664
|
}
|
|
7656
7665
|
}
|
|
7657
7666
|
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7658
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary" }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n
|
|
7667
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary" }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n [(ngModel)]=\"page\"\n maxlength=\"4\"\n (blur)=\"goToExactPageFromEvent($event)\"\n (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n <span class=\"total-pages\"> / {{ totalPages }} </span>\n </div>\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"Next\"\n (click)=\"goToNextPage()\"\n [disabled]=\"page >= totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"pagination-first-last-btns\"\n aria-label=\"Last Page\"\n (click)=\"goToExactPage(totalPages)\"\n [disabled]=\"page === totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n <i class=\"fas fa-chevron-right last\"></i>\n <!-- {{ totalPages }} -->\n </button>\n </div>\n </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }] });
|
|
7659
7668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
7660
7669
|
type: Component,
|
|
7661
|
-
args: [{ selector: 'impdc-pagination, div[impdc-pagination]', template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n
|
|
7670
|
+
args: [{ selector: 'impdc-pagination, div[impdc-pagination]', template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n [(ngModel)]=\"page\"\n maxlength=\"4\"\n (blur)=\"goToExactPageFromEvent($event)\"\n (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n <span class=\"total-pages\"> / {{ totalPages }} </span>\n </div>\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"Next\"\n (click)=\"goToNextPage()\"\n [disabled]=\"page >= totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"pagination-first-last-btns\"\n aria-label=\"Last Page\"\n (click)=\"goToExactPage(totalPages)\"\n [disabled]=\"page === totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n <i class=\"fas fa-chevron-right last\"></i>\n <!-- {{ totalPages }} -->\n </button>\n </div>\n </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"] }]
|
|
7662
7671
|
}], propDecorators: { page: [{
|
|
7663
7672
|
type: Input
|
|
7664
7673
|
}], perPage: [{
|
|
@@ -7675,12 +7684,12 @@ class PaginationModule {
|
|
|
7675
7684
|
constructor() { }
|
|
7676
7685
|
}
|
|
7677
7686
|
PaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
7678
|
-
PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule, ButtonModule, ImpdcFormsModule], exports: [ButtonModule, ImpdcFormsModule, PaginationComponent] });
|
|
7679
|
-
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
|
|
7687
|
+
PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule], exports: [ButtonModule, ImpdcFormsModule, PaginationComponent] });
|
|
7688
|
+
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
|
|
7680
7689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, decorators: [{
|
|
7681
7690
|
type: NgModule,
|
|
7682
7691
|
args: [{
|
|
7683
|
-
imports: [CommonModule, ButtonModule, ImpdcFormsModule],
|
|
7692
|
+
imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule],
|
|
7684
7693
|
declarations: [PaginationComponent],
|
|
7685
7694
|
exports: [ButtonModule, ImpdcFormsModule, PaginationComponent]
|
|
7686
7695
|
}]
|