@some-angular-utils/paginator 0.0.1 → 0.0.6

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.
Files changed (5) hide show
  1. package/README.md +59 -63
  2. package/fesm2022/some-angular-utils-paginator.mjs +119 -12
  3. package/fesm2022/some-angular-utils-paginator.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/some-angular-utils-paginator.d.ts +9 -1
package/README.md CHANGED
@@ -1,63 +1,59 @@
1
- # Paginator
2
-
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.0.
4
-
5
- ## Code scaffolding
6
-
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
8
-
9
- ```bash
10
- ng generate component component-name
11
- ```
12
-
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
14
-
15
- ```bash
16
- ng generate --help
17
- ```
18
-
19
- ## Building
20
-
21
- To build the library, run:
22
-
23
- ```bash
24
- ng build paginator
25
- ```
26
-
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
28
-
29
- ### Publishing the Library
30
-
31
- Once the project is built, you can publish your library by following these steps:
32
-
33
- 1. Navigate to the `dist` directory:
34
- ```bash
35
- cd dist/paginator
36
- ```
37
-
38
- 2. Run the `npm publish` command to publish your library to the npm registry:
39
- ```bash
40
- npm publish
41
- ```
42
-
43
- ## Running unit tests
44
-
45
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
46
-
47
- ```bash
48
- ng test
49
- ```
50
-
51
- ## Running end-to-end tests
52
-
53
- For end-to-end (e2e) testing, run:
54
-
55
- ```bash
56
- ng e2e
57
- ```
58
-
59
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
60
-
61
- ## Additional Resources
62
-
63
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
1
+ # Paginator
2
+
3
+ This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.4.
4
+
5
+ ## Development server
6
+
7
+ To start a local development server, run:
8
+
9
+ ```bash
10
+ ng serve
11
+ ```
12
+
13
+ Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14
+
15
+ ## Code scaffolding
16
+
17
+ Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18
+
19
+ ```bash
20
+ ng generate component component-name
21
+ ```
22
+
23
+ For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24
+
25
+ ```bash
26
+ ng generate --help
27
+ ```
28
+
29
+ ## Building
30
+
31
+ To build the project run:
32
+
33
+ ```bash
34
+ ng build
35
+ ```
36
+
37
+ This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38
+
39
+ ## Running unit tests
40
+
41
+ To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
42
+
43
+ ```bash
44
+ ng test
45
+ ```
46
+
47
+ ## Running end-to-end tests
48
+
49
+ For end-to-end (e2e) testing, run:
50
+
51
+ ```bash
52
+ ng e2e
53
+ ```
54
+
55
+ Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56
+
57
+ ## Additional Resources
58
+
59
+ For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
package/fesm2022/some-angular-utils-paginator.mjs CHANGED
@@ -1,22 +1,129 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component } from '@angular/core';
2
+ import { Component, EventEmitter, Output, Input } from '@angular/core';
3
+
4
+ class ChevronDoubleLeftIconComponent {
5
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronDoubleLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ChevronDoubleLeftIconComponent, isStandalone: true, selector: "sau-chevron-double-left-icon", ngImport: i0, template: `
7
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
8
+ <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"/>
9
+ </svg>
10
+ `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
11
+ }
12
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronDoubleLeftIconComponent, decorators: [{
13
+ type: Component,
14
+ args: [{ selector: 'sau-chevron-double-left-icon', standalone: true, template: `
15
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
16
+ <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"/>
17
+ </svg>
18
+ `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
19
+ }] });
20
+
21
+ class ChevronDoubleRightIconComponent {
22
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronDoubleRightIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
23
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ChevronDoubleRightIconComponent, isStandalone: true, selector: "sau-chevron-double-right-icon", ngImport: i0, template: `
24
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
25
+ <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"/>
26
+ </svg>
27
+ `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
28
+ }
29
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronDoubleRightIconComponent, decorators: [{
30
+ type: Component,
31
+ args: [{ selector: 'sau-chevron-double-right-icon', standalone: true, template: `
32
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
33
+ <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"/>
34
+ </svg>
35
+ `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
36
+ }] });
37
+
38
+ class ChevronLeftIconComponent {
39
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
40
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ChevronLeftIconComponent, isStandalone: true, selector: "sau-chevron-left-icon", ngImport: i0, template: `
41
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
42
+ <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
43
+ </svg>
44
+ `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
45
+ }
46
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronLeftIconComponent, decorators: [{
47
+ type: Component,
48
+ args: [{ selector: 'sau-chevron-left-icon', standalone: true, template: `
49
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
50
+ <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
51
+ </svg>
52
+ `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
53
+ }] });
54
+
55
+ class ChevronRightIconComponent {
56
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronRightIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
57
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ChevronRightIconComponent, isStandalone: true, selector: "sau-chevron-right-icon", ngImport: i0, template: `
58
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
59
+ <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
60
+ </svg>
61
+ `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
62
+ }
63
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChevronRightIconComponent, decorators: [{
64
+ type: Component,
65
+ args: [{ selector: 'sau-chevron-right-icon', standalone: true, template: `
66
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
67
+ <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
68
+ </svg>
69
+ `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
70
+ }] });
3
71
 
4
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)
77
+ 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;
82
+ }
83
+ const currentPage = this.page;
84
+ const start = Math.max(1, currentPage - 3);
85
+ const end = Math.min(totalPages, currentPage + 3);
86
+ const pages = [];
87
+ for (let i = start; i <= end; i++) {
88
+ pages.push(i);
89
+ }
90
+ return pages;
91
+ }
92
+ changePage(page) {
93
+ this.page = page;
94
+ this.getItems.emit();
95
+ }
96
+ // Método para ir a la primera página
97
+ goToFirstPage() {
98
+ if (this.page !== 1) {
99
+ this.changePage(1);
100
+ }
101
+ }
102
+ // Método para ir a la última página
103
+ goToLastPage() {
104
+ const lastPage = this.total.length;
105
+ if (this.page !== lastPage && lastPage > 0) {
106
+ this.changePage(lastPage);
107
+ }
108
+ }
5
109
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SAUPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.Component });
6
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SAUPaginatorModule, isStandalone: true, selector: "sau-paginator", ngImport: i0, template: `
7
- <p>
8
- paginator works!
9
- </p>
10
- `, isInline: true, styles: [""] });
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" }] });
11
111
  }
12
112
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SAUPaginatorModule, decorators: [{
13
113
  type: Component,
14
- args: [{ selector: 'sau-paginator', imports: [], template: `
15
- <p>
16
- paginator works!
17
- </p>
18
- ` }]
19
- }] });
114
+ args: [{ selector: 'sau-paginator', imports: [
115
+ ChevronDoubleLeftIconComponent,
116
+ ChevronDoubleRightIconComponent,
117
+ ChevronLeftIconComponent,
118
+ 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: [{
121
+ type: Input
122
+ }], page: [{
123
+ type: Input
124
+ }], getItems: [{
125
+ type: Output
126
+ }] } });
20
127
 
21
128
  /*
22
129
  * Public API Surface of paginator
package/fesm2022/some-angular-utils-paginator.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"some-angular-utils-paginator.mjs","sources":["../../../../projects/some-angular-utils/paginator/src/lib/paginator.ts","../../../../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';\r\n\r\n@Component({\r\n selector: 'sau-paginator',\r\n imports: [],\r\n template: `\r\n <p>\r\n paginator works!\r\n </p>\r\n `,\r\n styles: ``,\r\n})\r\nexport class SAUPaginatorModule {\r\n\r\n}\r\n","/*\r\n * Public API Surface of paginator\r\n */\r\n\r\nexport * from './lib/paginator';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAYa,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAPnB,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;+BACE,eAAe,EAAA,OAAA,EAChB,EAAE,EAAA,QAAA,EACD,CAAA;;;;AAIT,EAAA,CAAA,EAAA;;;ACTH;;AAEG;;ACFH;;AAEG;;;;"}
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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@some-angular-utils/paginator",
3
- "version": "0.0.1",
3
+ "version": "0.0.6",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^21.0.0",
6
6
  "@angular/core": "^21.0.0"
package/types/some-angular-utils-paginator.d.ts CHANGED
@@ -1,8 +1,16 @@
1
1
  import * as i0 from '@angular/core';
2
+ import { EventEmitter } from '@angular/core';
2
3
 
3
4
  declare class SAUPaginatorModule {
5
+ total: number[];
6
+ page: number;
7
+ getItems: EventEmitter<any>;
8
+ get visiblePages(): number[];
9
+ changePage(page: number): void;
10
+ goToFirstPage(): void;
11
+ goToLastPage(): void;
4
12
  static ɵfac: i0.ɵɵFactoryDeclaration<SAUPaginatorModule, never>;
5
- static ɵcmp: i0.ɵɵComponentDeclaration<SAUPaginatorModule, "sau-paginator", never, {}, {}, never, never, true, 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>;
6
14
  }
7
15
 
8
16
  export { SAUPaginatorModule };