@progressio_resources/gravity-design-system 3.6.17 → 3.6.18
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/esm2022/lib/components/gravity-pagination/gravity-pagination.component.mjs +113 -0
- package/esm2022/lib/gravity-design-system.module.mjs +6 -1
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/progressio_resources-gravity-design-system.mjs +114 -1
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-pagination/gravity-pagination.component.d.ts +24 -0
- package/lib/gravity-design-system.module.d.ts +12 -11
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -7765,6 +7765,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7765
7765
|
args: ['menuBody', { static: false }]
|
|
7766
7766
|
}] } });
|
|
7767
7767
|
|
|
7768
|
+
class GravityPaginationComponent {
|
|
7769
|
+
constructor() {
|
|
7770
|
+
this.currentLang = 'en';
|
|
7771
|
+
this.currentPage = 1;
|
|
7772
|
+
this.type = 'full';
|
|
7773
|
+
this.showPageCount = true;
|
|
7774
|
+
this.showArrowDots = true;
|
|
7775
|
+
this.pageChanged = new EventEmitter();
|
|
7776
|
+
this.totalPages = 0;
|
|
7777
|
+
this.pages = [];
|
|
7778
|
+
}
|
|
7779
|
+
ngOnChanges(changes) {
|
|
7780
|
+
this.updatePages();
|
|
7781
|
+
}
|
|
7782
|
+
updatePages() {
|
|
7783
|
+
this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
|
|
7784
|
+
const pages = [];
|
|
7785
|
+
const first = 1;
|
|
7786
|
+
const last = this.totalPages;
|
|
7787
|
+
// UNDER 5 PAGES
|
|
7788
|
+
if (this.totalPages <= 5) {
|
|
7789
|
+
this.pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
|
|
7790
|
+
return;
|
|
7791
|
+
}
|
|
7792
|
+
// DOTS CASE
|
|
7793
|
+
if (this.type === 'dots') {
|
|
7794
|
+
this.pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
|
|
7795
|
+
return;
|
|
7796
|
+
}
|
|
7797
|
+
// INITIAL SECTION (pages 1–3)
|
|
7798
|
+
if (this.currentPage <= 3) {
|
|
7799
|
+
pages.push(1);
|
|
7800
|
+
if (this.totalPages >= 2)
|
|
7801
|
+
pages.push(2);
|
|
7802
|
+
if (this.totalPages >= 3)
|
|
7803
|
+
pages.push(3);
|
|
7804
|
+
if (this.totalPages >= 4)
|
|
7805
|
+
pages.push(4);
|
|
7806
|
+
if (this.totalPages > 5) {
|
|
7807
|
+
pages.push('...');
|
|
7808
|
+
pages.push(last);
|
|
7809
|
+
}
|
|
7810
|
+
else {
|
|
7811
|
+
for (let i = 5; i <= last; i++)
|
|
7812
|
+
pages.push(i);
|
|
7813
|
+
}
|
|
7814
|
+
this.pages = pages;
|
|
7815
|
+
return;
|
|
7816
|
+
}
|
|
7817
|
+
// FINAL SECTION (last 3 pages)
|
|
7818
|
+
if (this.currentPage >= last - 2) {
|
|
7819
|
+
pages.push(first);
|
|
7820
|
+
pages.push('...');
|
|
7821
|
+
const start = last - 3; // example: 10 → 7
|
|
7822
|
+
for (let p = start; p <= last; p++) {
|
|
7823
|
+
if (p > 1)
|
|
7824
|
+
pages.push(p);
|
|
7825
|
+
}
|
|
7826
|
+
this.pages = pages;
|
|
7827
|
+
return;
|
|
7828
|
+
}
|
|
7829
|
+
// MIDDLE PART (neither at the beginning nor at the end)
|
|
7830
|
+
pages.push(first);
|
|
7831
|
+
pages.push('...');
|
|
7832
|
+
const prev = this.currentPage - 1;
|
|
7833
|
+
const next = this.currentPage + 1;
|
|
7834
|
+
pages.push(prev);
|
|
7835
|
+
pages.push(this.currentPage);
|
|
7836
|
+
pages.push(next);
|
|
7837
|
+
pages.push('...');
|
|
7838
|
+
pages.push(last);
|
|
7839
|
+
this.pages = pages;
|
|
7840
|
+
}
|
|
7841
|
+
changePage(page) {
|
|
7842
|
+
if (page < 1 || page > this.totalPages || page === this.currentPage || String(page) == '...')
|
|
7843
|
+
return;
|
|
7844
|
+
this.currentPage = page;
|
|
7845
|
+
this.updatePages();
|
|
7846
|
+
this.pageChanged.emit({
|
|
7847
|
+
page: this.currentPage,
|
|
7848
|
+
itemsPerPage: this.itemsPerPage
|
|
7849
|
+
});
|
|
7850
|
+
}
|
|
7851
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityPaginationComponent, selector: "gravity-pagination", inputs: { currentLang: "currentLang", cypressTag: "cypressTag", totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", type: "type", showPageCount: "showPageCount", showArrowDots: "showArrowDots" }, outputs: { pageChanged: "pageChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-pagination-container\" [attr.data-cy]=\"cypressTag ? 'pagination_' + cypressTag : null\">\n <!-- First -->\n <div class=\"paginator-button-container\" (click)=\"changePage(1)\" [attr.data-cy]=\"'pagination_firstButton'\"\n *ngIf=\"type != 'dots' && currentPage != 1 && totalPages > 5 || type == 'page-count'\">\n <gravity-icon [iconName]=\"'chevron-double-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'First' : 'Primero' }}</p>\n </div>\n\n <!-- Back -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === 1\" [attr.data-cy]=\"'pagination_backButton'\"\n (click)=\"changePage(currentPage - 1)\" *ngIf=\"showArrowDots\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Back' : 'Atr\u00E1s' }}</p>\n </div>\n\n <!-- Numbers and Ellipsis -->\n <ng-container *ngIf=\"type == 'full' || type == 'compact'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"paginator-button-container\"\n [class.no-click]=\"p.toString() == '...'\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'Button'\">\n <p class=\"hr-body sm-regular\">{{ p }}</p>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Page count -->\n <div class=\"paginator-button-container no-click\" *ngIf=\"type === 'page-count' && showPageCount\">\n <p class=\"hr-body sm-regular\">{{ currentPage + (currentLang == 'en' ? ' of ' : ' de ') + totalPages }}</p>\n </div>\n\n <!-- Dots -->\n <div class=\"dots-container\" *ngIf=\"type === 'dots'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"dot\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'DotsButton'\"></div>\n </ng-container>\n </div>\n\n <!-- Next -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === totalPages\"\n [attr.data-cy]=\"'pagination_nextButton'\"\n (click)=\"changePage(currentPage + 1)\" *ngIf=\"showArrowDots\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Next' : 'Siguiente' }}</p>\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n\n <!-- Last -->\n <div class=\"paginator-button-container\" (click)=\"changePage(totalPages)\" [attr.data-cy]=\"'pagination_lastButton'\"\n *ngIf=\"type != 'dots' && currentPage !== totalPages && totalPages > 5 || type == 'page-count'\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Last' : '\u00DAltimo' }}</p>\n <gravity-icon [iconName]=\"'chevron-double-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n</div>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-pagination-container{display:flex;align-items:center}.gravity-pagination-container .paginator-button-container{--paginator-button-text-color: var(--on-bg-button-pressed-tertiary);display:flex;height:32px;padding:10px 12px;justify-content:center;align-items:center;gap:var(--gravity-spacing-xxs);cursor:pointer;border-radius:.3125rem;background-color:var(--paginator-button-background-color)}.gravity-pagination-container .paginator-button-container p{color:var(--paginator-button-text-color)}.gravity-pagination-container .paginator-button-container:not(.disabled):not(.pressed):not(.no-click):hover,.gravity-pagination-container .paginator-button-container.hover{--paginator-button-background-color: var(--bg-button-active-tertiary);--paginator-button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-pagination-container .paginator-button-container:not(.disabled).pressed{--paginator-button-background-color: var(--bg-button-pressed-primary);--paginator-button-text-color: var(--on-bg-button-pressed-primary)}.gravity-pagination-container .paginator-button-container.disabled{--paginator-button-text-color: var(--on-bg-disabled);cursor:default!important}.gravity-pagination-container .paginator-button-container.no-click{cursor:default!important}.dots-container{display:flex;padding:8px;align-items:center;gap:8px}.dots-container .dot{width:8px;height:8px;border-radius:99px;background-color:var(--on-bg-button-pressed-secondary);opacity:.3;cursor:pointer;transition:opacity .5s,background-color .5s,width .5s;transition-delay:.5s,.5s,0s}.dots-container .dot.pressed{opacity:1;background-color:var(--cta-primary);width:24px;transition-delay:0s}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
7853
|
+
}
|
|
7854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPaginationComponent, decorators: [{
|
|
7855
|
+
type: Component,
|
|
7856
|
+
args: [{ selector: 'gravity-pagination', template: "<div class=\"gravity-pagination-container\" [attr.data-cy]=\"cypressTag ? 'pagination_' + cypressTag : null\">\n <!-- First -->\n <div class=\"paginator-button-container\" (click)=\"changePage(1)\" [attr.data-cy]=\"'pagination_firstButton'\"\n *ngIf=\"type != 'dots' && currentPage != 1 && totalPages > 5 || type == 'page-count'\">\n <gravity-icon [iconName]=\"'chevron-double-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'First' : 'Primero' }}</p>\n </div>\n\n <!-- Back -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === 1\" [attr.data-cy]=\"'pagination_backButton'\"\n (click)=\"changePage(currentPage - 1)\" *ngIf=\"showArrowDots\">\n <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Back' : 'Atr\u00E1s' }}</p>\n </div>\n\n <!-- Numbers and Ellipsis -->\n <ng-container *ngIf=\"type == 'full' || type == 'compact'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"paginator-button-container\"\n [class.no-click]=\"p.toString() == '...'\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'Button'\">\n <p class=\"hr-body sm-regular\">{{ p }}</p>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Page count -->\n <div class=\"paginator-button-container no-click\" *ngIf=\"type === 'page-count' && showPageCount\">\n <p class=\"hr-body sm-regular\">{{ currentPage + (currentLang == 'en' ? ' of ' : ' de ') + totalPages }}</p>\n </div>\n\n <!-- Dots -->\n <div class=\"dots-container\" *ngIf=\"type === 'dots'\">\n <ng-container *ngFor=\"let p of pages\">\n <div class=\"dot\"\n [class.pressed]=\"currentPage === p\"\n (click)=\"changePage(p)\" [attr.data-cy]=\"'pagination_page' +p+ 'DotsButton'\"></div>\n </ng-container>\n </div>\n\n <!-- Next -->\n <div class=\"paginator-button-container\" [class.disabled]=\"currentPage === totalPages\"\n [attr.data-cy]=\"'pagination_nextButton'\"\n (click)=\"changePage(currentPage + 1)\" *ngIf=\"showArrowDots\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Next' : 'Siguiente' }}</p>\n <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n\n <!-- Last -->\n <div class=\"paginator-button-container\" (click)=\"changePage(totalPages)\" [attr.data-cy]=\"'pagination_lastButton'\"\n *ngIf=\"type != 'dots' && currentPage !== totalPages && totalPages > 5 || type == 'page-count'\">\n <p class=\"hr-body sm-regular\" *ngIf=\"type == 'full'\">{{ currentLang == 'en' ? 'Last' : '\u00DAltimo' }}</p>\n <gravity-icon [iconName]=\"'chevron-double-right'\" [iconSize]=\"'sm-12'\"\n [style.--icon-color]=\"'var(--paginator-button-text-color)'\"></gravity-icon>\n </div>\n</div>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-pagination-container{display:flex;align-items:center}.gravity-pagination-container .paginator-button-container{--paginator-button-text-color: var(--on-bg-button-pressed-tertiary);display:flex;height:32px;padding:10px 12px;justify-content:center;align-items:center;gap:var(--gravity-spacing-xxs);cursor:pointer;border-radius:.3125rem;background-color:var(--paginator-button-background-color)}.gravity-pagination-container .paginator-button-container p{color:var(--paginator-button-text-color)}.gravity-pagination-container .paginator-button-container:not(.disabled):not(.pressed):not(.no-click):hover,.gravity-pagination-container .paginator-button-container.hover{--paginator-button-background-color: var(--bg-button-active-tertiary);--paginator-button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-pagination-container .paginator-button-container:not(.disabled).pressed{--paginator-button-background-color: var(--bg-button-pressed-primary);--paginator-button-text-color: var(--on-bg-button-pressed-primary)}.gravity-pagination-container .paginator-button-container.disabled{--paginator-button-text-color: var(--on-bg-disabled);cursor:default!important}.gravity-pagination-container .paginator-button-container.no-click{cursor:default!important}.dots-container{display:flex;padding:8px;align-items:center;gap:8px}.dots-container .dot{width:8px;height:8px;border-radius:99px;background-color:var(--on-bg-button-pressed-secondary);opacity:.3;cursor:pointer;transition:opacity .5s,background-color .5s,width .5s;transition-delay:.5s,.5s,0s}.dots-container .dot.pressed{opacity:1;background-color:var(--cta-primary);width:24px;transition-delay:0s}\n"] }]
|
|
7857
|
+
}], propDecorators: { currentLang: [{
|
|
7858
|
+
type: Input
|
|
7859
|
+
}], cypressTag: [{
|
|
7860
|
+
type: Input
|
|
7861
|
+
}], totalItems: [{
|
|
7862
|
+
type: Input
|
|
7863
|
+
}], itemsPerPage: [{
|
|
7864
|
+
type: Input
|
|
7865
|
+
}], currentPage: [{
|
|
7866
|
+
type: Input
|
|
7867
|
+
}], type: [{
|
|
7868
|
+
type: Input
|
|
7869
|
+
}], showPageCount: [{
|
|
7870
|
+
type: Input
|
|
7871
|
+
}], showArrowDots: [{
|
|
7872
|
+
type: Input
|
|
7873
|
+
}], pageChanged: [{
|
|
7874
|
+
type: Output
|
|
7875
|
+
}] } });
|
|
7876
|
+
|
|
7768
7877
|
class GravityDesignSystemModule {
|
|
7769
7878
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7770
7879
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
|
|
@@ -7831,6 +7940,7 @@ class GravityDesignSystemModule {
|
|
|
7831
7940
|
GravitySegmentedButtonComponent,
|
|
7832
7941
|
GravityCurrencyDisplayV2Component,
|
|
7833
7942
|
GravityHeaderComponent,
|
|
7943
|
+
GravityPaginationComponent,
|
|
7834
7944
|
GravityPushNotificationsComponent,
|
|
7835
7945
|
GravityMenuComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, BsDatepickerModule,
|
|
7836
7946
|
CommonModule,
|
|
@@ -7880,6 +7990,7 @@ class GravityDesignSystemModule {
|
|
|
7880
7990
|
GravityDatePickerComponent,
|
|
7881
7991
|
GravitySegmentedButtonComponent,
|
|
7882
7992
|
GravityHeaderComponent,
|
|
7993
|
+
GravityPaginationComponent,
|
|
7883
7994
|
GravityPushNotificationsComponent,
|
|
7884
7995
|
GravityMenuComponent] }); }
|
|
7885
7996
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
|
|
@@ -7964,6 +8075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7964
8075
|
GravitySegmentedButtonComponent,
|
|
7965
8076
|
GravityCurrencyDisplayV2Component,
|
|
7966
8077
|
GravityHeaderComponent,
|
|
8078
|
+
GravityPaginationComponent,
|
|
7967
8079
|
GravityPushNotificationsComponent,
|
|
7968
8080
|
GravityMenuComponent,
|
|
7969
8081
|
],
|
|
@@ -8025,6 +8137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8025
8137
|
GravityDatePickerComponent,
|
|
8026
8138
|
GravitySegmentedButtonComponent,
|
|
8027
8139
|
GravityHeaderComponent,
|
|
8140
|
+
GravityPaginationComponent,
|
|
8028
8141
|
GravityPushNotificationsComponent,
|
|
8029
8142
|
GravityMenuComponent,
|
|
8030
8143
|
]
|
|
@@ -8081,5 +8194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8081
8194
|
* Generated bundle index. Do not edit.
|
|
8082
8195
|
*/
|
|
8083
8196
|
|
|
8084
|
-
export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityBackdropComponent, GravityButtonComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCheckboxComponent, GravityChipGroupComponent, GravityCurrencyComponent, GravityCurrencyDisplayV2Component, GravityDataViewsV2Component, GravityDatePickerComponent, GravityDesignSystemModule, GravityDetailContainerComponent, GravityDialogComponent, GravityDialogManagerService, GravityDropdownLabelComponent, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityGenericAvatarComponent, GravityGenericAvatarSecondaryComponent, GravityHeaderComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityMenuComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNavigationCardComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityPushNotificationsComponent, GravityRadioButtonComponent, GravitySegmentedButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTablesV2Component, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
|
|
8197
|
+
export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityBackdropComponent, GravityButtonComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCheckboxComponent, GravityChipGroupComponent, GravityCurrencyComponent, GravityCurrencyDisplayV2Component, GravityDataViewsV2Component, GravityDatePickerComponent, GravityDesignSystemModule, GravityDetailContainerComponent, GravityDialogComponent, GravityDialogManagerService, GravityDropdownLabelComponent, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityGenericAvatarComponent, GravityGenericAvatarSecondaryComponent, GravityHeaderComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityMenuComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNavigationCardComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityPaginationComponent, GravityPushNotificationsComponent, GravityRadioButtonComponent, GravitySegmentedButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTablesV2Component, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
|
|
8085
8198
|
//# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map
|