@some-angular-utils/paginator 0.0.6 → 0.0.8

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.
@@ -70,44 +70,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
70
70
  }] });
71
71
 
72
72
  class SAUPaginatorModule {
73
- total = [];
74
- page = 1;
75
- getItems = new EventEmitter();
76
- // Getter para obtener las páginas visibles (3 antes y 3 después de la página actual)
73
+ totalPages = 0;
74
+ currentPage = 1;
75
+ pageChange = new EventEmitter();
77
76
  get visiblePages() {
78
- const totalPages = this.total.length;
79
- if (totalPages <= 7) {
80
- // Si hay 7 páginas o menos, mostrar todas
81
- return this.total;
77
+ const total = Math.ceil(this.totalPages);
78
+ if (total <= 0)
79
+ return [];
80
+ if (total <= 7) {
81
+ return Array.from({ length: total }, (_, i) => i + 1);
82
82
  }
83
- const currentPage = this.page;
84
- const start = Math.max(1, currentPage - 3);
85
- const end = Math.min(totalPages, currentPage + 3);
83
+ const start = Math.max(1, this.currentPage - 3);
84
+ const end = Math.min(total, this.currentPage + 3);
86
85
  const pages = [];
87
86
  for (let i = start; i <= end; i++) {
88
87
  pages.push(i);
89
88
  }
90
89
  return pages;
91
90
  }
92
- changePage(page) {
93
- this.page = page;
94
- this.getItems.emit();
91
+ changePage(newPage) {
92
+ if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {
93
+ this.pageChange.emit(newPage);
94
+ }
95
95
  }
96
- // Método para ir a la primera página
97
96
  goToFirstPage() {
98
- if (this.page !== 1) {
99
- this.changePage(1);
100
- }
97
+ this.changePage(1);
101
98
  }
102
- // Método para ir a la última página
103
99
  goToLastPage() {
104
- const lastPage = this.total.length;
105
- if (this.page !== lastPage && lastPage > 0) {
106
- this.changePage(lastPage);
107
- }
100
+ this.changePage(this.totalPages);
108
101
  }
109
102
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SAUPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.Component });
110
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SAUPaginatorModule, isStandalone: true, selector: "sau-paginator", inputs: { total: "total", page: "page" }, outputs: { getItems: "getItems" }, ngImport: i0, template: "<div class=\"sau-table-pagination\">\n\n <!-- N\u00FAmeros de p\u00E1gina -->\n <div class=\"sau-table-pagination-number-buttons\">\n @for (item of visiblePages; track $index) {\n <button (click)=\"changePage(item)\"\n [class]=\"'sau-table-pagination-number-button ' + (item == page ? 'sau-table-pagination-number-button-active' : 'sau-table-pagination-number-button-inactive')\"\n type=\"button\">\n {{item}}\n </button>\n }\n </div>\n\n <!-- Botones de navegaci\u00F3n izquierda -->\n <div class=\"sau-table-pagination-nav-left\">\n <!-- Bot\u00F3n ir al inicio -->\n <button type=\"button\" (click)=\"goToFirstPage()\"\n [class]=\"'sau-table-pagination-nav-button-wide ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Ir al inicio\">\n <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n </button>\n\n <!-- Bot\u00F3n p\u00E1gina anterior -->\n <button type=\"button\" (click)=\"changePage(page-1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"P\u00E1gina anterior\">\n <sau-chevron-left-icon></sau-chevron-left-icon>\n </button>\n </div>\n\n <!-- Botones de navegaci\u00F3n derecha -->\n <div class=\"sau-table-pagination-nav-right\">\n <!-- Bot\u00F3n p\u00E1gina siguiente -->\n <button type=\"button\" (click)=\"changePage(page+1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"P\u00E1gina siguiente\">\n <sau-chevron-right-icon></sau-chevron-right-icon>\n </button>\n\n <!-- Bot\u00F3n ir al final -->\n <button type=\"button\" (click)=\"goToLastPage()\"\n [class]=\"'sau-table-pagination-nav-button-wide ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Ir al final\">\n <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n </button>\n </div>\n</div>", styles: [".sau-table-pagination{--sau-color-primary: rgb(147, 51, 234);--sau-color-secondary: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);position:sticky;left:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:1.5rem;background:var(--sau-color-background)}@media(min-width:768px){.sau-table-pagination{justify-content:space-between}}.sau-table-pagination .sau-table-pagination-number-buttons{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-number-buttons{order:2;width:max-content}}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button{cursor:pointer;width:2.5rem;height:2.5rem;font-weight:500;font-size:.875rem;transition:all .2s;border:none}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-active{background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive{color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-left{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-left{order:1}}.sau-table-pagination .sau-table-pagination-nav-right{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-right{order:3}}.sau-table-pagination .sau-table-pagination-nav-button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table-pagination .sau-table-pagination-nav-button-wide{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s;font-size:.875rem;font-weight:500}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ChevronDoubleLeftIconComponent, selector: "sau-chevron-double-left-icon" }, { kind: "component", type: ChevronDoubleRightIconComponent, selector: "sau-chevron-double-right-icon" }, { kind: "component", type: ChevronLeftIconComponent, selector: "sau-chevron-left-icon" }, { kind: "component", type: ChevronRightIconComponent, selector: "sau-chevron-right-icon" }] });
103
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SAUPaginatorModule, isStandalone: true, selector: "sau-paginator", inputs: { totalPages: "totalPages", currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"sau-table-pagination\">\n\n aaa\n <div class=\"sau-table-pagination-nav-left\">\n <button type=\"button\" (click)=\"goToFirstPage()\" class=\"sau-table-pagination-nav-button-wide\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === 1\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== 1\">\n <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n </button>\n\n <button type=\"button\" (click)=\"changePage(currentPage - 1)\" class=\"sau-table-pagination-nav-button\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === 1\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== 1\">\n <sau-chevron-left-icon></sau-chevron-left-icon>\n </button>\n </div>\n\n <div class=\"sau-table-pagination-number-buttons\">\n total {{totalPages}} currentPage {{currentPage}}\n @for (item of visiblePages; track item) {\n <button (click)=\"changePage(item)\" type=\"button\" class=\"sau-table-pagination-number-button\"\n [class.sau-table-pagination-number-button-active]=\"item === currentPage\"\n [class.sau-table-pagination-number-button-inactive]=\"item !== currentPage\">\n {{ item }}\n </button>\n }\n </div>\n\n <div class=\"sau-table-pagination-nav-right\">\n <button type=\"button\" (click)=\"changePage(currentPage + 1)\" class=\"sau-table-pagination-nav-button\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === totalPages\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== totalPages\">\n <sau-chevron-right-icon></sau-chevron-right-icon>\n </button>\n\n <button type=\"button\" (click)=\"goToLastPage()\" class=\"sau-table-pagination-nav-button-wide\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === totalPages\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== totalPages\">\n <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n </button>\n </div>\n</div>", styles: [".sau-table-pagination{--sau-color-primary: rgb(147, 51, 234);--sau-color-secondary: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);position:sticky;left:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:1.5rem;background:var(--sau-color-background)}@media(min-width:768px){.sau-table-pagination{justify-content:space-between}}.sau-table-pagination .sau-table-pagination-number-buttons{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-number-buttons{order:2;width:max-content}}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button{cursor:pointer;width:2.5rem;height:2.5rem;font-weight:500;font-size:.875rem;transition:all .2s;border:none}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-active{background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive{color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-left{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-left{order:1}}.sau-table-pagination .sau-table-pagination-nav-right{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-right{order:3}}.sau-table-pagination .sau-table-pagination-nav-button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table-pagination .sau-table-pagination-nav-button-wide{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s;font-size:.875rem;font-weight:500}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ChevronDoubleLeftIconComponent, selector: "sau-chevron-double-left-icon" }, { kind: "component", type: ChevronDoubleRightIconComponent, selector: "sau-chevron-double-right-icon" }, { kind: "component", type: ChevronLeftIconComponent, selector: "sau-chevron-left-icon" }, { kind: "component", type: ChevronRightIconComponent, selector: "sau-chevron-right-icon" }] });
111
104
  }
112
105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SAUPaginatorModule, decorators: [{
113
106
  type: Component,
@@ -116,12 +109,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
116
109
  ChevronDoubleRightIconComponent,
117
110
  ChevronLeftIconComponent,
118
111
  ChevronRightIconComponent,
119
- ], template: "<div class=\"sau-table-pagination\">\n\n <!-- N\u00FAmeros de p\u00E1gina -->\n <div class=\"sau-table-pagination-number-buttons\">\n @for (item of visiblePages; track $index) {\n <button (click)=\"changePage(item)\"\n [class]=\"'sau-table-pagination-number-button ' + (item == page ? 'sau-table-pagination-number-button-active' : 'sau-table-pagination-number-button-inactive')\"\n type=\"button\">\n {{item}}\n </button>\n }\n </div>\n\n <!-- Botones de navegaci\u00F3n izquierda -->\n <div class=\"sau-table-pagination-nav-left\">\n <!-- Bot\u00F3n ir al inicio -->\n <button type=\"button\" (click)=\"goToFirstPage()\"\n [class]=\"'sau-table-pagination-nav-button-wide ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Ir al inicio\">\n <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n </button>\n\n <!-- Bot\u00F3n p\u00E1gina anterior -->\n <button type=\"button\" (click)=\"changePage(page-1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"P\u00E1gina anterior\">\n <sau-chevron-left-icon></sau-chevron-left-icon>\n </button>\n </div>\n\n <!-- Botones de navegaci\u00F3n derecha -->\n <div class=\"sau-table-pagination-nav-right\">\n <!-- Bot\u00F3n p\u00E1gina siguiente -->\n <button type=\"button\" (click)=\"changePage(page+1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"P\u00E1gina siguiente\">\n <sau-chevron-right-icon></sau-chevron-right-icon>\n </button>\n\n <!-- Bot\u00F3n ir al final -->\n <button type=\"button\" (click)=\"goToLastPage()\"\n [class]=\"'sau-table-pagination-nav-button-wide ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Ir al final\">\n <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n </button>\n </div>\n</div>", styles: [".sau-table-pagination{--sau-color-primary: rgb(147, 51, 234);--sau-color-secondary: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);position:sticky;left:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:1.5rem;background:var(--sau-color-background)}@media(min-width:768px){.sau-table-pagination{justify-content:space-between}}.sau-table-pagination .sau-table-pagination-number-buttons{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-number-buttons{order:2;width:max-content}}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button{cursor:pointer;width:2.5rem;height:2.5rem;font-weight:500;font-size:.875rem;transition:all .2s;border:none}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-active{background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive{color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-left{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-left{order:1}}.sau-table-pagination .sau-table-pagination-nav-right{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-right{order:3}}.sau-table-pagination .sau-table-pagination-nav-button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table-pagination .sau-table-pagination-nav-button-wide{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s;font-size:.875rem;font-weight:500}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}\n"] }]
120
- }], propDecorators: { total: [{
112
+ ], template: "<div class=\"sau-table-pagination\">\n\n aaa\n <div class=\"sau-table-pagination-nav-left\">\n <button type=\"button\" (click)=\"goToFirstPage()\" class=\"sau-table-pagination-nav-button-wide\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === 1\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== 1\">\n <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n </button>\n\n <button type=\"button\" (click)=\"changePage(currentPage - 1)\" class=\"sau-table-pagination-nav-button\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === 1\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== 1\">\n <sau-chevron-left-icon></sau-chevron-left-icon>\n </button>\n </div>\n\n <div class=\"sau-table-pagination-number-buttons\">\n total {{totalPages}} currentPage {{currentPage}}\n @for (item of visiblePages; track item) {\n <button (click)=\"changePage(item)\" type=\"button\" class=\"sau-table-pagination-number-button\"\n [class.sau-table-pagination-number-button-active]=\"item === currentPage\"\n [class.sau-table-pagination-number-button-inactive]=\"item !== currentPage\">\n {{ item }}\n </button>\n }\n </div>\n\n <div class=\"sau-table-pagination-nav-right\">\n <button type=\"button\" (click)=\"changePage(currentPage + 1)\" class=\"sau-table-pagination-nav-button\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === totalPages\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== totalPages\">\n <sau-chevron-right-icon></sau-chevron-right-icon>\n </button>\n\n <button type=\"button\" (click)=\"goToLastPage()\" class=\"sau-table-pagination-nav-button-wide\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === totalPages\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== totalPages\">\n <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n </button>\n </div>\n</div>", styles: [".sau-table-pagination{--sau-color-primary: rgb(147, 51, 234);--sau-color-secondary: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);position:sticky;left:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:1.5rem;background:var(--sau-color-background)}@media(min-width:768px){.sau-table-pagination{justify-content:space-between}}.sau-table-pagination .sau-table-pagination-number-buttons{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-number-buttons{order:2;width:max-content}}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button{cursor:pointer;width:2.5rem;height:2.5rem;font-weight:500;font-size:.875rem;transition:all .2s;border:none}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-active{background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive{color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary)}.sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-left{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-left{order:1}}.sau-table-pagination .sau-table-pagination-nav-right{display:flex;align-items:center;gap:.5rem}@media(min-width:768px){.sau-table-pagination .sau-table-pagination-nav-right{order:3}}.sau-table-pagination .sau-table-pagination-nav-button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table-pagination .sau-table-pagination-nav-button-wide{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;height:2.5rem;color:var(--sau-color-primary);background:var(--sau-color-background);border:1px solid var(--sau-color-primary);transition:all .2s;font-size:.875rem;font-weight:500}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}\n"] }]
113
+ }], propDecorators: { totalPages: [{
121
114
  type: Input
122
- }], page: [{
115
+ }], currentPage: [{
123
116
  type: Input
124
- }], getItems: [{
117
+ }], pageChange: [{
125
118
  type: Output
126
119
  }] } });
127
120
 
@@ -1 +1 @@
1
- {"version":3,"file":"some-angular-utils-paginator.mjs","sources":["../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-double-left-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-double-right-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-left-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-right-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/paginator.ts","../../../../projects/some-angular-utils/paginator/src/lib/paginator.html","../../../../projects/some-angular-utils/paginator/src/public-api.ts","../../../../projects/some-angular-utils/paginator/src/some-angular-utils-paginator.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-double-left-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDoubleLeftIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-double-right-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDoubleRightIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-left-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronLeftIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-right-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronRightIconComponent {}","import { Component, EventEmitter, Input, Output } from '@angular/core';\n\nimport { ChevronDoubleLeftIconComponent } from './icons/chevron-double-left-icon';\nimport { ChevronDoubleRightIconComponent } from './icons/chevron-double-right-icon';\nimport { ChevronLeftIconComponent } from './icons/chevron-left-icon';\nimport { ChevronRightIconComponent } from './icons/chevron-right-icon';\n\n@Component({\n selector: 'sau-paginator',\n templateUrl: './paginator.html',\n styleUrls: ['./paginator.scss'],\n imports: [\n ChevronDoubleLeftIconComponent,\n ChevronDoubleRightIconComponent,\n ChevronLeftIconComponent,\n ChevronRightIconComponent,\n ],\n})\nexport class SAUPaginatorModule {\n\n @Input() total: number[] = []\n @Input() page: number = 1\n @Output() getItems = new EventEmitter();\n\n\n // Getter para obtener las páginas visibles (3 antes y 3 después de la página actual)\n get visiblePages(): number[] {\n const totalPages = this.total.length;\n if (totalPages <= 7) {\n // Si hay 7 páginas o menos, mostrar todas\n return this.total;\n }\n\n const currentPage = this.page;\n const start = Math.max(1, currentPage - 3);\n const end = Math.min(totalPages, currentPage + 3);\n\n const pages: number[] = [];\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n\n return pages;\n }\n\n changePage(page: number) {\n this.page = page\n this.getItems.emit();\n }\n\n // Método para ir a la primera página\n goToFirstPage() {\n if (this.page !== 1) {\n this.changePage(1);\n }\n }\n\n // Método para ir a la última página\n goToLastPage() {\n const lastPage = this.total.length;\n if (this.page !== lastPage && lastPage > 0) {\n this.changePage(lastPage);\n }\n }\n\n}\n","<div class=\"sau-table-pagination\">\n\n <!-- Números de página -->\n <div class=\"sau-table-pagination-number-buttons\">\n @for (item of visiblePages; track $index) {\n <button (click)=\"changePage(item)\"\n [class]=\"'sau-table-pagination-number-button ' + (item == page ? 'sau-table-pagination-number-button-active' : 'sau-table-pagination-number-button-inactive')\"\n type=\"button\">\n {{item}}\n </button>\n }\n </div>\n\n <!-- Botones de navegación izquierda -->\n <div class=\"sau-table-pagination-nav-left\">\n <!-- Botón ir al inicio -->\n <button type=\"button\" (click)=\"goToFirstPage()\"\n [class]=\"'sau-table-pagination-nav-button-wide ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Ir al inicio\">\n <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n </button>\n\n <!-- Botón página anterior -->\n <button type=\"button\" (click)=\"changePage(page-1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Página anterior\">\n <sau-chevron-left-icon></sau-chevron-left-icon>\n </button>\n </div>\n\n <!-- Botones de navegación derecha -->\n <div class=\"sau-table-pagination-nav-right\">\n <!-- Botón página siguiente -->\n <button type=\"button\" (click)=\"changePage(page+1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Página siguiente\">\n <sau-chevron-right-icon></sau-chevron-right-icon>\n </button>\n\n <!-- Botón ir al final -->\n <button type=\"button\" (click)=\"goToLastPage()\"\n [class]=\"'sau-table-pagination-nav-button-wide ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Ir al final\">\n <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n </button>\n </div>\n</div>","/*\n * Public API Surface of paginator\n */\n\nexport * from './lib/paginator';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"some-angular-utils-paginator.mjs","sources":["../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-double-left-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-double-right-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-left-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/icons/chevron-right-icon.ts","../../../../projects/some-angular-utils/paginator/src/lib/paginator.ts","../../../../projects/some-angular-utils/paginator/src/lib/paginator.html","../../../../projects/some-angular-utils/paginator/src/public-api.ts","../../../../projects/some-angular-utils/paginator/src/some-angular-utils-paginator.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-double-left-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDoubleLeftIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-double-right-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDoubleRightIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-left-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronLeftIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-right-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronRightIconComponent {}","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { ChevronDoubleLeftIconComponent } from './icons/chevron-double-left-icon';\nimport { ChevronDoubleRightIconComponent } from './icons/chevron-double-right-icon';\nimport { ChevronLeftIconComponent } from './icons/chevron-left-icon';\nimport { ChevronRightIconComponent } from './icons/chevron-right-icon';\n\n@Component({\n selector: 'sau-paginator',\n templateUrl: './paginator.html',\n styleUrls: ['./paginator.scss'],\n imports: [\n ChevronDoubleLeftIconComponent,\n ChevronDoubleRightIconComponent,\n ChevronLeftIconComponent,\n ChevronRightIconComponent,\n ],\n})\nexport class SAUPaginatorModule {\n\n @Input() totalPages: number = 0;\n @Input() currentPage: number = 1;\n @Output() pageChange = new EventEmitter<number>();\n\n get visiblePages(): number[] {\n const total = Math.ceil(this.totalPages);\n if (total <= 0) return [];\n\n if (total <= 7) {\n return Array.from({ length: total }, (_, i) => i + 1);\n }\n\n const start = Math.max(1, this.currentPage - 3);\n const end = Math.min(total, this.currentPage + 3);\n\n const pages: number[] = [];\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n return pages;\n }\n\n changePage(newPage: number) {\n if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {\n this.pageChange.emit(newPage);\n }\n }\n\n goToFirstPage() {\n this.changePage(1);\n }\n\n goToLastPage() {\n this.changePage(this.totalPages);\n }\n\n}","<div class=\"sau-table-pagination\">\n\n aaa\n <div class=\"sau-table-pagination-nav-left\">\n <button type=\"button\" (click)=\"goToFirstPage()\" class=\"sau-table-pagination-nav-button-wide\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === 1\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== 1\">\n <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n </button>\n\n <button type=\"button\" (click)=\"changePage(currentPage - 1)\" class=\"sau-table-pagination-nav-button\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === 1\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== 1\">\n <sau-chevron-left-icon></sau-chevron-left-icon>\n </button>\n </div>\n\n <div class=\"sau-table-pagination-number-buttons\">\n total {{totalPages}} currentPage {{currentPage}}\n @for (item of visiblePages; track item) {\n <button (click)=\"changePage(item)\" type=\"button\" class=\"sau-table-pagination-number-button\"\n [class.sau-table-pagination-number-button-active]=\"item === currentPage\"\n [class.sau-table-pagination-number-button-inactive]=\"item !== currentPage\">\n {{ item }}\n </button>\n }\n </div>\n\n <div class=\"sau-table-pagination-nav-right\">\n <button type=\"button\" (click)=\"changePage(currentPage + 1)\" class=\"sau-table-pagination-nav-button\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === totalPages\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== totalPages\">\n <sau-chevron-right-icon></sau-chevron-right-icon>\n </button>\n\n <button type=\"button\" (click)=\"goToLastPage()\" class=\"sau-table-pagination-nav-button-wide\"\n [class.sau-table-pagination-nav-button-disabled]=\"currentPage === totalPages\"\n [class.sau-table-pagination-nav-button-enabled]=\"currentPage !== totalPages\">\n <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n </button>\n </div>\n</div>","/*\n * Public API Surface of paginator\n */\n\nexport * from './lib/paginator';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@some-angular-utils/paginator",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^21.0.0",
6
6
  "@angular/core": "^21.0.0"
@@ -2,15 +2,15 @@ import * as i0 from '@angular/core';
2
2
  import { EventEmitter } from '@angular/core';
3
3
 
4
4
  declare class SAUPaginatorModule {
5
- total: number[];
6
- page: number;
7
- getItems: EventEmitter<any>;
5
+ totalPages: number;
6
+ currentPage: number;
7
+ pageChange: EventEmitter<number>;
8
8
  get visiblePages(): number[];
9
- changePage(page: number): void;
9
+ changePage(newPage: number): void;
10
10
  goToFirstPage(): void;
11
11
  goToLastPage(): void;
12
12
  static ɵfac: i0.ɵɵFactoryDeclaration<SAUPaginatorModule, never>;
13
- static ɵcmp: i0.ɵɵComponentDeclaration<SAUPaginatorModule, "sau-paginator", never, { "total": { "alias": "total"; "required": false; }; "page": { "alias": "page"; "required": false; }; }, { "getItems": "getItems"; }, never, never, true, never>;
13
+ static ɵcmp: i0.ɵɵComponentDeclaration<SAUPaginatorModule, "sau-paginator", never, { "totalPages": { "alias": "totalPages"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
14
14
  }
15
15
 
16
16
  export { SAUPaginatorModule };