@some-angular-utils/table 0.1.0 → 0.1.2
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/README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
# @some-angular-utils/table
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://github.com/some-angular-utils/table)
|
|
5
4
|
|
|
6
|
-
](https://www.npmjs.com/package/@some-angular-utils/table)
|
|
6
|
+
[](https://www.npmjs.com/package/@some-angular-utils/table)
|
|
7
|
+
|
|
8
|
+
[](https://www.npmjs.com/package/@some-angular-utils/table)
|
|
9
|
+
[](https://www.npmjs.com/package/@some-angular-utils/table)
|
|
8
10
|
|
|
9
11
|
## IMPORT
|
|
10
12
|
```ts
|
|
@@ -161,7 +161,7 @@ class TableModule {
|
|
|
161
161
|
this.deleteEvent.emit(id);
|
|
162
162
|
}
|
|
163
163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableModule, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TableModule, isStandalone: true, selector: "sau-table", inputs: { url: "url", contentList: "contentList", contentTotal: "contentTotal", pageParamName: "pageParamName", limitParamName: "limitParamName", sizeInitialPage: "sizeInitialPage", sizeBetweenPages: "sizeBetweenPages", headers: "headers", items: "items", limit: "limit" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "@if (loading) {\n<div>\n Loading\n</div>\n}\n\n<div class=\"overflow-auto rounded-2xl bg-white/90 backdrop-blur-lg shadow-xl border border-white/50\">\n\n <!----------------------------------- Table mobile ----------------------------------->\n <div class=\"md:hidden\">\n <!-- Mobile header -->\n <div class=\"bg-gradient-to-r from-purple-600 to-pink-600 text-white px-4 py-2 rounded-t-2xl\">\n <h3 class=\"text-base font-semibold leading-tight\">Lista de elementos</h3>\n <div class=\"w-8 h-0.5 bg-white/30 rounded-full mt-1\"></div>\n </div>\n\n <table class=\"w-full text-sm text-left rtl:text-right text-neutral-700\">\n <tbody>\n @for (item of items; track $index) {\n <tr class=\"border-b border-purple-100/50 last:border-b-0\">\n <td>\n <table class=\"w-full\">\n <tbody>\n @for (header of headers; track $index) {\n <tr [class]=\"$index%2==0?'bg-purple-50/30':''\">\n\n <th scope=\"col\"\n class=\"p-2 font-medium bg-gradient-to-r from-purple-600 to-pink-600 text-white max-w-min\">\n {{header.name}}\n </th>\n <td class=\"p-2 w-full text-neutral-800\">\n\n @if(header.type == 'table' && !isArray(header.key)){\n\n <!-- CSS-only toggle button -->\n <input type=\"checkbox\" [id]=\"'toggle-table-' + $index\" class=\"hidden peer\">\n <label [for]=\"'toggle-table-' + $index\"\n class=\"inline-flex items-center gap-2 px-3 py-2 bg-purple-100 text-purple-600 rounded-lg hover:bg-purple-200 transition-all duration-200 cursor-pointer select-none\">\n <!-- <fa-icon [icon]=\"['fas', 'chevron-down']\"\n class=\"text-xs transition-transform duration-200 peer-checked:rotate-180\"></fa-icon> -->\n <span class=\"text-sm font-medium\">\n <span class=\"peer-checked:hidden\">Mostrar</span>\n <span class=\"hidden peer-checked:inline\">Ocultar</span>\n </span>\n </label>\n\n <!-- Content that toggles -->\n <div\n class=\"mt-3 h-0 overflow-hidden opacity-0 peer-checked:h-auto peer-checked:opacity-100 peer-checked:overflow-visible transition-all duration-300 ease-in-out\">\n <sau-table [headers]=\"header.headers\"\n [items]=\"getValue(item, header.key)\"></sau-table>\n </div>\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n\n }\n\n </td>\n\n </tr>\n }\n\n @if(this.url){\n <tr\n class=\"border-b-8 border-transparent bg-gradient-to-r from-purple-600 to-purple-400 p-4\">\n <td colspan=\"2\">\n <div class=\"flex justify-center gap-4 p-4\">\n @if(editEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-all duration-200 border border-purple-200 hover:border-purple-300\"\n (click)=\"clickEditButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n Editar\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-all duration-200 border border-rose-200 hover:border-rose-300\"\n (click)=\"clickDeleteButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n Eliminar\n </button>\n }\n </div>\n </td>\n </tr>\n }\n\n </tbody>\n </table>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!--------------------------------- Table mobile end --------------------------------->\n\n <!----------------------------------- Table desktop ----------------------------------->\n <table class=\"w-full text-sm text-center rtl:text-right text-neutral-700 hidden md:table\">\n <thead class=\"text-xs font-semibold uppercase bg-gradient-to-r from-purple-600 to-pink-600 text-white\">\n <tr>\n @for (header of headers; track $index) {\n <th scope=\"col\" class=\"p-2\">\n {{header.name}}\n </th>\n }\n\n @if(this.url){\n <th scope=\"col\" class=\"p-2\">\n Opciones\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track $index) {\n <tr\n [class]=\"'min-w-max hover:bg-purple-50/50 transition-colors duration-200 border-b border-purple-100/30 last:border-b-0 ' + ($index%2==0?'bg-purple-50/20':'')\">\n\n @for (header of headers; track $index) {\n <td class=\"p-2\">\n\n @if(header.type == 'table'){\n\n @if(!isArray(header.key)){\n <sau-table [headers]=\"header.headers\" [items]=\"getValue(item, header.key)\"></sau-table>\n }\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n }\n\n </td>\n }\n\n @if(this.url){\n <td class=\"px-6 py-4\">\n <div class=\"flex items-center gap-2\">\n @if(editEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center justify-center w-8 h-8 text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-all duration-200 border border-purple-200 hover:border-purple-300\"\n (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center justify-center w-8 h-8 text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-all duration-200 border border-rose-200 hover:border-rose-300\"\n (click)=\"clickDeleteButton(item.id)\" title=\"Eliminar\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n </div>\n </td>\n }\n\n </tr>\n }\n </tbody>\n </table>\n <!--------------------------------- table desktop end --------------------------------->\n\n @if (items.length == 0) {\n <div class=\"flex flex-col items-center justify-center h-48 text-center\">\n <div class=\"w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4\">\n <!-- <fa-icon [icon]=\"['fas', 'inbox']\" class=\"text-purple-400 text-2xl\"></fa-icon> -->\n </div>\n <p class=\"text-neutral-500 font-medium\">No hay elementos</p>\n <p class=\"text-neutral-400 text-sm\">Los elementos aparecer\u00E1n aqu\u00ED cuando est\u00E9n disponibles</p>\n </div>\n\n } @else if(total.length > 1) {\n\n <!----------------------------------- Pagination ----------------------------------->\n <div\n class=\"sticky left-0 flex flex-wrap gap-2 items-center justify-center md:justify-between p-6 bg-gradient-to-r from-purple-50/50 to-pink-50/50 border-t border-purple-200/50\">\n\n <!-- N\u00FAmeros de p\u00E1gina -->\n <div class=\"md:order-2 w-full md:w-max flex items-center justify-center gap-2\">\n @for (item of visiblePages; track $index) {\n <button (click)=\"changePage(item)\"\n [class]=\"'cursor-pointer w-10 h-10 rounded-lg font-medium text-sm transition-all duration-200 ' + (item == page ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg' : 'text-purple-600 hover:bg-purple-50 border border-purple-200 hover:border-purple-300')\"\n type=\"button\">\n {{item}}\n </button>\n }\n </div>\n\n <!-- Botones de navegaci\u00F3n izquierda -->\n <div class=\"md:order-1 flex items-center gap-2\">\n <!-- Bot\u00F3n ir al inicio -->\n <button type=\"button\" (click)=\"goToFirstPage()\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center px-3 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 text-sm font-medium ' + (page == 1?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Ir al inicio\">\n \u2039\u2039\n </button>\n\n <!-- Bot\u00F3n p\u00E1gina anterior -->\n <button type=\"button\" (click)=\"changePage(page-1)\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center w-10 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 ' + (page == 1?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"P\u00E1gina anterior\">\n \u2039\n </button>\n </div>\n\n <!-- Botones de navegaci\u00F3n derecha -->\n <div class=\"md:order-3 flex items-center gap-2\">\n <!-- Bot\u00F3n p\u00E1gina siguiente -->\n <button type=\"button\" (click)=\"changePage(page+1)\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center w-10 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 ' + (page == total[total.length-1]?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"P\u00E1gina siguiente\">\n \u203A\n </button>\n\n <!-- Bot\u00F3n ir al final -->\n <button type=\"button\" (click)=\"goToLastPage()\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center px-3 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 text-sm font-medium ' + (page == total[total.length-1]?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Ir al final\">\n \u203A\u203A\n </button>\n </div>\n </div>\n <!--------------------------------- pagination end --------------------------------->\n }\n\n</div>\n\n<!----------------------------------- Data template ----------------------------------->\n<ng-template #DataTemplate let-item=\"item\" let-header=\"header\">\n\n <section class=\"flex items-center gap-2\">\n\n @if(header.name == 'NOMBRE' && item.role == 'ROLE_ADMIN') {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-orange-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-orange-600', 'text-xs']\" [icon]=\"['fas', 'crown']\"></fa-icon> -->\n </div>\n }\n\n <span>\n @if (header.innerHtml) {\n <span [innerHTML]=\"getValue(item, header.key)\"></span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.key}\"></ng-container>\n }\n\n @if(header.subKey){\n <span class=\"block text-neutral-600 text-xs min-w-max\">\n (\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.subKey}\"></ng-container>\n )\n </span>\n }\n </span>\n\n </section>\n\n</ng-template>\n<!--------------------------------- Data template end --------------------------------->\n\n<!----------------------------------- Data Type template ----------------------------------->\n<ng-template #DataTypeTemplate let-item=\"item\" let-header=\"header\" let-value=\"value\">\n\n <section class=\"inline-block min-w-max\">\n @switch (header.type) {\n\n @case ('boolean') {\n @if(getValue(item, value)){\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-emerald-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-emerald-600', 'text-xs']\" [icon]=\"['fas', 'check']\"></fa-icon> -->\n </div>\n } @else {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-rose-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @case ('currency'){\n <!-- {{formatEuro(getValue(item, value))}} -->\n }\n\n @case ('dateTime') {\n <span class=\"text-neutral-600 text-sm\">\n {{getValue(item, value) | date: 'dd/MM/yyyy HH:mm'}}\n </span>\n }\n\n @case ('color'){\n <span class=\"inline-block w-8 h-4 rounded-full border border-neutral-200 shadow-sm\"\n [style.background-color]=\"getValue(item, value)\"></span>\n }\n\n @case ('link'){\n @let link = getLink(header.url, item, value);\n\n @if(link.isExternal){\n <a [href]=\"link.url\" class=\"text-purple-600 hover:underline\">\n {{header.linkName}}\n </a>\n }@else{\n <a [routerLink]=\"link.url\" class=\"text-purple-600 hover:underline\" target=\"_blank\">\n {{header.linkName}}\n </a>\n }\n\n }\n\n @case ('image'){\n @let link = getLink(header.url, item, value);\n\n <img [src]=\"link.url\" [alt]=\"getValue(item, value)\" loading=\"lazy\" class=\"w-10 h-10 object-cover\">\n }\n\n @case ('login'){\n @if(item.active){\n <span class=\"inline-flex items-center gap-1\">\n\n @if(item.email_verified_at){\n <div [title]=\"item.email\" class=\"inline-flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-blue-600', 'text-xs']\" [icon]=\"['fas', 'envelope']\"></fa-icon> -->\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\"\n class=\"inline-flex items-center justify-center w-6 h-6 bg-red-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-red-600', 'text-xs']\" [icon]=\"['fab', 'google']\"></fa-icon> -->\n </div>\n }\n\n </span>\n } @else {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-rose-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @default {\n {{getValue(item, value)}}\n }\n }\n </section>\n\n</ng-template>\n<!--------------------------------- Data Type template end --------------------------------->", dependencies: [{ kind: "component", type: TableModule, selector: "sau-table", inputs: ["url", "contentList", "contentTotal", "pageParamName", "limitParamName", "sizeInitialPage", "sizeBetweenPages", "headers", "items", "limit"], outputs: ["editEvent", "deleteEvent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TableModule, isStandalone: true, selector: "sau-table", inputs: { url: "url", contentList: "contentList", contentTotal: "contentTotal", pageParamName: "pageParamName", limitParamName: "limitParamName", sizeInitialPage: "sizeInitialPage", sizeBetweenPages: "sizeBetweenPages", headers: "headers", items: "items", limit: "limit" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "@if (loading) {\n<div>\n Loading\n</div>\n}\n\n<div class=\"sau-table\">\n\n <!----------------------------------- Table mobile ----------------------------------->\n <div class=\"sau-table-mobile\">\n <!-- Mobile header -->\n <div class=\"sau-table-mobile-header\">\n <h3 class=\"sau-table-mobile-title\">Lista de elementos</h3>\n <div class=\"sau-table-mobile-divider\"></div>\n </div>\n\n <table class=\"sau-table-mobile-table\">\n <tbody>\n @for (item of items; track $index) {\n <tr class=\"sau-table-mobile-row\">\n <td>\n <table class=\"sau-table-width-full\">\n <tbody>\n @for (header of headers; track $index) {\n <tr [class]=\"$index%2==0?'sau-table-mobile-row-even':''\">\n\n <th scope=\"col\" class=\"sau-table-mobile-header-cell\">\n {{header.name}}\n </th>\n <td class=\"sau-table-mobile-data-cell\">\n\n @if(header.type == 'table' && !isArray(header.key)){\n\n <!-- CSS-only toggle button -->\n <input type=\"checkbox\" [id]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-input\">\n <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n <!-- <fa-icon [icon]=\"['fas', 'chevron-down']\"\n class=\"text-xs transition-transform duration-200 peer-checked:rotate-180\"></fa-icon> -->\n <span class=\"sau-table-toggle-text\">\n <span class=\"sau-table-toggle-show\">Mostrar</span>\n <span class=\"sau-table-toggle-hide\">Ocultar</span>\n </span>\n </label>\n\n <!-- Content that toggles -->\n <div class=\"sau-table-toggle-content\">\n <sau-table [headers]=\"header.headers\"\n [items]=\"getValue(item, header.key)\"></sau-table>\n </div>\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n\n }\n\n </td>\n\n </tr>\n }\n\n @if(this.url){\n <tr class=\"sau-table-mobile-actions-row\">\n <td colspan=\"2\">\n <div class=\"sau-table-mobile-actions-container\">\n @if(editEvent.observers.length > 0){\n <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n Editar\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button class=\"sau-table-delete-button\" (click)=\"clickDeleteButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n Eliminar\n </button>\n }\n </div>\n </td>\n </tr>\n }\n\n </tbody>\n </table>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!--------------------------------- Table mobile end --------------------------------->\n\n <!----------------------------------- Table desktop ----------------------------------->\n <table class=\"sau-table-desktop\">\n <thead class=\"sau-table-desktop-header\">\n <tr>\n @for (header of headers; track $index) {\n <th scope=\"col\" class=\"sau-table-desktop-header-cell\">\n {{header.name}}\n </th>\n }\n\n @if(this.url){\n <th scope=\"col\" class=\"sau-table-desktop-header-cell\">\n Opciones\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track $index) {\n <tr [class]=\"'sau-table-desktop-row ' + ($index%2==0?'sau-table-desktop-row-even':'')\">\n\n @for (header of headers; track $index) {\n <td class=\"sau-table-desktop-cell\">\n\n @if(header.type == 'table'){\n\n @if(!isArray(header.key)){\n <sau-table [headers]=\"header.headers\" [items]=\"getValue(item, header.key)\"></sau-table>\n }\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n }\n\n </td>\n }\n\n @if(this.url){\n <td class=\"sau-table-desktop-actions-cell\">\n <div class=\"sau-table-desktop-actions-container\">\n @if(editEvent.observers.length > 0){\n <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\" title=\"Eliminar\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n </div>\n </td>\n }\n\n </tr>\n }\n </tbody>\n </table>\n <!--------------------------------- table desktop end --------------------------------->\n\n @if (items.length == 0) {\n <div class=\"sau-table-empty\">\n <div class=\"sau-table-empty-icon\">\n <!-- <fa-icon [icon]=\"['fas', 'inbox']\" class=\"text-purple-400 text-2xl\"></fa-icon> -->\n </div>\n <p class=\"sau-table-empty-title\">No hay elementos</p>\n <p class=\"sau-table-empty-subtitle\">Los elementos aparecer\u00E1n aqu\u00ED cuando est\u00E9n disponibles</p>\n </div>\n\n } @else if(total.length > 1) {\n\n <!----------------------------------- Pagination ----------------------------------->\n <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 \u2039\u2039\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 \u2039\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 \u203A\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 \u203A\u203A\n </button>\n </div>\n </div>\n <!--------------------------------- pagination end --------------------------------->\n }\n\n</div>\n\n<!----------------------------------- Data template ----------------------------------->\n<ng-template #DataTemplate let-item=\"item\" let-header=\"header\">\n\n <section class=\"sau-table-data-section\">\n\n @if(header.name == 'NOMBRE' && item.role == 'ROLE_ADMIN') {\n <div class=\"sau-table-admin-crown\">\n <!-- <fa-icon [ngClass]=\"['text-orange-600', 'text-xs']\" [icon]=\"['fas', 'crown']\"></fa-icon> -->\n </div>\n }\n\n <span>\n @if (header.innerHtml) {\n <span [innerHTML]=\"getValue(item, header.key)\"></span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.key}\"></ng-container>\n }\n\n @if(header.subKey){\n <span class=\"sau-table-subkey\">\n (\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.subKey}\"></ng-container>\n )\n </span>\n }\n </span>\n\n </section>\n\n</ng-template>\n<!--------------------------------- Data template end --------------------------------->\n\n<!----------------------------------- Data Type template ----------------------------------->\n<ng-template #DataTypeTemplate let-item=\"item\" let-header=\"header\" let-value=\"value\">\n\n <section class=\"sau-table-data-type-section\">\n @switch (header.type) {\n\n @case ('boolean') {\n @if(getValue(item, value)){\n <div class=\"sau-table-boolean-true\">\n <!-- <fa-icon [ngClass]=\"['text-emerald-600', 'text-xs']\" [icon]=\"['fas', 'check']\"></fa-icon> -->\n </div>\n } @else {\n <div class=\"sau-table-boolean-false\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @case ('currency'){\n <!-- {{formatEuro(getValue(item, value))}} -->\n }\n\n @case ('dateTime') {\n <span class=\"sau-table-datetime\">\n {{getValue(item, value) | date: 'dd/MM/yyyy HH:mm'}}\n </span>\n }\n\n @case ('color'){\n <span class=\"sau-table-color-indicator\" [style.background-color]=\"getValue(item, value)\"></span>\n }\n\n @case ('link'){\n @let link = getLink(header.url, item, value);\n\n @if(link.isExternal){\n <a [href]=\"link.url\" class=\"sau-table-link\">\n {{header.linkName}}\n </a>\n }@else{\n <a [routerLink]=\"link.url\" class=\"sau-table-link\" target=\"_blank\">\n {{header.linkName}}\n </a>\n }\n\n }\n\n @case ('image'){\n @let link = getLink(header.url, item, value);\n\n <img [src]=\"link.url\" [alt]=\"getValue(item, value)\" loading=\"lazy\" class=\"sau-table-image\">\n }\n\n @case ('login'){\n @if(item.active){\n <span class=\"sau-table-login-container\">\n\n @if(item.email_verified_at){\n <div [title]=\"item.email\" class=\"sau-table-login-email-verified\">\n <!-- <fa-icon [ngClass]=\"['text-blue-600', 'text-xs']\" [icon]=\"['fas', 'envelope']\"></fa-icon> -->\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n <!-- <fa-icon [ngClass]=\"['text-red-600', 'text-xs']\" [icon]=\"['fab', 'google']\"></fa-icon> -->\n </div>\n }\n\n </span>\n } @else {\n <div class=\"sau-table-login-inactive\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @default {\n {{getValue(item, value)}}\n }\n }\n </section>\n\n</ng-template>\n<!--------------------------------- Data Type template end --------------------------------->", styles: [":root{--sau-color-primary: rgb(147, 51, 234);--sau-color-secondary: rgb(219, 39, 119);--sau-color-primary-light: rgb(168, 85, 247);--sau-color-secondary-light: rgb(236, 72, 153);--sau-color-purple-50: rgb(250, 245, 255);--sau-color-purple-100: rgb(243, 232, 255);--sau-color-purple-200: rgb(233, 213, 255);--sau-color-purple-300: rgb(196, 181, 253);--sau-color-purple-600: var(--sau-color-primary);--sau-color-pink-50: rgb(253, 242, 248);--sau-color-pink-600: var(--sau-color-secondary);--sau-color-white: rgb(255, 255, 255);--sau-color-neutral-400: rgb(156, 163, 175);--sau-color-neutral-500: rgb(107, 114, 128);--sau-color-neutral-600: rgb(75, 85, 99);--sau-color-neutral-700: rgb(64, 64, 64);--sau-color-neutral-800: rgb(38, 38, 38);--sau-color-gray-200: rgb(229, 231, 235);--sau-color-success-100: rgb(209, 250, 229);--sau-color-error-100: rgb(254, 226, 226);--sau-color-error-600: rgb(244, 63, 94);--sau-color-error-700: rgb(239, 68, 68);--sau-color-error-200: rgb(251, 113, 133);--sau-color-error-50: rgb(255, 241, 242);--sau-color-info-100: rgb(219, 234, 254);--sau-color-warning-100: rgb(254, 243, 199);--sau-color-white-90: rgba(255, 255, 255, .9);--sau-color-white-50: rgba(255, 255, 255, .5);--sau-color-white-30: rgba(255, 255, 255, .3);--sau-color-purple-50-50: rgba(250, 245, 255, .5);--sau-color-purple-50-30: rgba(250, 245, 255, .3);--sau-color-purple-50-20: rgba(250, 245, 255, .2);--sau-color-purple-100-50: rgba(196, 181, 253, .5);--sau-color-purple-300-30: rgba(196, 181, 253, .3);--sau-color-pink-50-50: rgba(253, 242, 248, .5);--sau-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--sau-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--sau-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05)}.sau-table{overflow:auto;border-radius:1rem;background:var(--sau-color-white-90);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--sau-shadow-xl);border:1px solid var(--sau-color-white-50)}.sau-table .sau-table-width-full{width:100%}@media (min-width: 768px){.sau-table .sau-table-mobile{display:none}}.sau-table .sau-table-mobile .sau-table-mobile-header{background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-white);padding:.5rem 1rem;border-top-left-radius:1rem;border-top-right-radius:1rem}.sau-table .sau-table-mobile .sau-table-mobile-header .sau-table-mobile-title{font-size:1rem;font-weight:600;line-height:1.25}.sau-table .sau-table-mobile .sau-table-mobile-header .sau-table-mobile-divider{width:2rem;height:.125rem;background:var(--sau-color-white-30);border-radius:9999px;margin-top:.25rem}.sau-table .sau-table-mobile .sau-table-mobile-table{width:100%;font-size:.875rem;text-align:left;color:var(--sau-color-neutral-700)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row{border-bottom:1px solid var(--sau-color-purple-100-50)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row:last-child{border-bottom:none}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row.sau-table-mobile-row-even{background:var(--sau-color-purple-50-30)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row .sau-table-mobile-header-cell{padding:.5rem;font-weight:500;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-white);max-width:min-content}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row .sau-table-mobile-data-cell{padding:.5rem;width:100%;color:var(--sau-color-neutral-800)}.sau-table .sau-table-mobile .sau-table-toggle-input{display:none}.sau-table .sau-table-mobile .sau-table-toggle-input:checked~.sau-table-toggle-content{height:auto!important;opacity:1!important;overflow:visible!important}.sau-table .sau-table-mobile .sau-table-toggle-input:checked+.sau-table-toggle-label .sau-table-toggle-show{display:none}.sau-table .sau-table-mobile .sau-table-toggle-input:checked+.sau-table-toggle-label .sau-table-toggle-hide{display:inline}.sau-table .sau-table-mobile .sau-table-toggle-label{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--sau-color-purple-100);color:var(--sau-color-primary);border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}.sau-table .sau-table-mobile .sau-table-toggle-label:hover{background:var(--sau-color-purple-200)}.sau-table .sau-table-mobile .sau-table-toggle-label .sau-table-toggle-text{font-size:.875rem;font-weight:500}.sau-table .sau-table-mobile .sau-table-toggle-label .sau-table-toggle-text .sau-table-toggle-show{display:inline}.sau-table .sau-table-mobile .sau-table-toggle-label .sau-table-toggle-text .sau-table-toggle-hide{display:none}.sau-table .sau-table-mobile .sau-table-toggle-content{margin-top:.75rem;height:0;overflow:hidden;opacity:0;transition:all .3s ease-in-out}.sau-table .sau-table-mobile .sau-table-mobile-actions-row{border-bottom:8px solid transparent;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-primary-light));padding:1rem}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container{display:flex;justify-content:center;gap:1rem;padding:1rem}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-edit-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--sau-color-primary);background:var(--sau-color-purple-50);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-edit-button:hover{background:var(--sau-color-purple-100);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-delete-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--sau-color-error-600);background:var(--sau-color-error-50);border:1px solid var(--sau-color-error-200);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-delete-button:hover{background:var(--sau-color-error-100);border-color:var(--sau-color-error-700)}.sau-table .sau-table-desktop{width:100%;font-size:.875rem;text-align:center;color:var(--sau-color-neutral-700);display:none}@media (min-width: 768px){.sau-table .sau-table-desktop{display:table}}.sau-table .sau-table-desktop .sau-table-desktop-header{font-size:.75rem;font-weight:600;text-transform:uppercase;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-white)}.sau-table .sau-table-desktop .sau-table-desktop-header .sau-table-desktop-header-cell{padding:.5rem}.sau-table .sau-table-desktop .sau-table-desktop-row{min-width:max-content;transition:background-color .2s;border-bottom:1px solid var(--sau-color-purple-300-30)}.sau-table .sau-table-desktop .sau-table-desktop-row:last-child{border-bottom:none}.sau-table .sau-table-desktop .sau-table-desktop-row:hover{background:var(--sau-color-purple-50-50)}.sau-table .sau-table-desktop .sau-table-desktop-row.sau-table-desktop-row-even{background:var(--sau-color-purple-50-20)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-cell{padding:.5rem}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell{padding:1.5rem 1rem}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container{display:flex;align-items:center;gap:.5rem}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-edit-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--sau-color-primary);background:var(--sau-color-purple-50);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-edit-button:hover{background:var(--sau-color-purple-100);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-delete-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--sau-color-error-600);background:var(--sau-color-error-50);border:1px solid var(--sau-color-error-200);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-delete-button:hover{background:var(--sau-color-error-100);border-color:var(--sau-color-error-700)}.sau-table .sau-table-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:12rem;text-align:center}.sau-table .sau-table-empty .sau-table-empty-icon{width:4rem;height:4rem;background:var(--sau-color-purple-100);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.sau-table .sau-table-empty .sau-table-empty-title{color:var(--sau-color-neutral-500);font-weight:500}.sau-table .sau-table-empty .sau-table-empty-subtitle{color:var(--sau-color-neutral-400);font-size:.875rem}.sau-table .sau-table-pagination{position:sticky;left:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(to right,var(--sau-color-purple-50-50),var(--sau-color-pink-50-50));border-top:1px solid var(--sau-color-purple-100-50)}@media (min-width: 768px){.sau-table .sau-table-pagination{justify-content:space-between}}.sau-table .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 .sau-table-pagination .sau-table-pagination-number-buttons{order:2;width:max-content}}.sau-table .sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button{cursor:pointer;width:2.5rem;height:2.5rem;border-radius:.5rem;font-weight:500;font-size:.875rem;transition:all .2s;border:none}.sau-table .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-light),var(--sau-color-secondary-light));color:var(--sau-color-white);box-shadow:var(--sau-shadow-lg)}.sau-table .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-white);border:1px solid var(--sau-color-purple-300)}.sau-table .sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive:hover{background:var(--sau-color-purple-50);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-pagination .sau-table-pagination-nav-left{display:flex;align-items:center;gap:.5rem}@media (min-width: 768px){.sau-table .sau-table-pagination .sau-table-pagination-nav-left{order:1}}.sau-table .sau-table-pagination .sau-table-pagination-nav-right{display:flex;align-items:center;gap:.5rem}@media (min-width: 768px){.sau-table .sau-table-pagination .sau-table-pagination-nav-right{order:3}}.sau-table .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-white);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s}.sau-table .sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-purple-50);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table .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-white);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s;font-size:.875rem;font-weight:500}.sau-table .sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-purple-50);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table-data-section{display:flex;align-items:center;gap:.5rem}.sau-table-data-section .sau-table-admin-crown{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-warning-100);border-radius:50%}.sau-table-data-section .sau-table-subkey{display:block;color:var(--sau-color-neutral-600);font-size:.75rem;min-width:max-content}.sau-table-data-type-section{display:inline-block;min-width:max-content}.sau-table-data-type-section .sau-table-boolean-true{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-success-100);border-radius:50%}.sau-table-data-type-section .sau-table-boolean-false{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-error-100);border-radius:50%}.sau-table-data-type-section .sau-table-datetime{color:var(--sau-color-neutral-600);font-size:.875rem}.sau-table-data-type-section .sau-table-color-indicator{display:inline-block;width:2rem;height:1rem;border-radius:9999px;border:1px solid var(--sau-color-gray-200);box-shadow:var(--sau-shadow-sm)}.sau-table-data-type-section .sau-table-link{color:var(--sau-color-primary);text-decoration:none}.sau-table-data-type-section .sau-table-link:hover{text-decoration:underline}.sau-table-data-type-section .sau-table-image{width:2.5rem;height:2.5rem;object-fit:cover}.sau-table-data-type-section .sau-table-login-container{display:inline-flex;align-items:center;gap:.25rem}.sau-table-data-type-section .sau-table-login-container .sau-table-login-email-verified{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-info-100);border-radius:50%}.sau-table-data-type-section .sau-table-login-container .sau-table-login-google,.sau-table-data-type-section .sau-table-login-inactive{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-error-100);border-radius:50%}\n"], dependencies: [{ kind: "component", type: TableModule, selector: "sau-table", inputs: ["url", "contentList", "contentTotal", "pageParamName", "limitParamName", "sizeInitialPage", "sizeBetweenPages", "headers", "items", "limit"], outputs: ["editEvent", "deleteEvent"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
165
165
|
}
|
|
166
166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableModule, decorators: [{
|
|
167
167
|
type: Component,
|
|
@@ -169,7 +169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
169
169
|
RouterModule,
|
|
170
170
|
DatePipe,
|
|
171
171
|
CommonModule,
|
|
172
|
-
], template: "@if (loading) {\n<div>\n Loading\n</div>\n}\n\n<div class=\"overflow-auto rounded-2xl bg-white/90 backdrop-blur-lg shadow-xl border border-white/50\">\n\n <!----------------------------------- Table mobile ----------------------------------->\n <div class=\"md:hidden\">\n <!-- Mobile header -->\n <div class=\"bg-gradient-to-r from-purple-600 to-pink-600 text-white px-4 py-2 rounded-t-2xl\">\n <h3 class=\"text-base font-semibold leading-tight\">Lista de elementos</h3>\n <div class=\"w-8 h-0.5 bg-white/30 rounded-full mt-1\"></div>\n </div>\n\n <table class=\"w-full text-sm text-left rtl:text-right text-neutral-700\">\n <tbody>\n @for (item of items; track $index) {\n <tr class=\"border-b border-purple-100/50 last:border-b-0\">\n <td>\n <table class=\"w-full\">\n <tbody>\n @for (header of headers; track $index) {\n <tr [class]=\"$index%2==0?'bg-purple-50/30':''\">\n\n <th scope=\"col\"\n class=\"p-2 font-medium bg-gradient-to-r from-purple-600 to-pink-600 text-white max-w-min\">\n {{header.name}}\n </th>\n <td class=\"p-2 w-full text-neutral-800\">\n\n @if(header.type == 'table' && !isArray(header.key)){\n\n <!-- CSS-only toggle button -->\n <input type=\"checkbox\" [id]=\"'toggle-table-' + $index\" class=\"hidden peer\">\n <label [for]=\"'toggle-table-' + $index\"\n class=\"inline-flex items-center gap-2 px-3 py-2 bg-purple-100 text-purple-600 rounded-lg hover:bg-purple-200 transition-all duration-200 cursor-pointer select-none\">\n <!-- <fa-icon [icon]=\"['fas', 'chevron-down']\"\n class=\"text-xs transition-transform duration-200 peer-checked:rotate-180\"></fa-icon> -->\n <span class=\"text-sm font-medium\">\n <span class=\"peer-checked:hidden\">Mostrar</span>\n <span class=\"hidden peer-checked:inline\">Ocultar</span>\n </span>\n </label>\n\n <!-- Content that toggles -->\n <div\n class=\"mt-3 h-0 overflow-hidden opacity-0 peer-checked:h-auto peer-checked:opacity-100 peer-checked:overflow-visible transition-all duration-300 ease-in-out\">\n <sau-table [headers]=\"header.headers\"\n [items]=\"getValue(item, header.key)\"></sau-table>\n </div>\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n\n }\n\n </td>\n\n </tr>\n }\n\n @if(this.url){\n <tr\n class=\"border-b-8 border-transparent bg-gradient-to-r from-purple-600 to-purple-400 p-4\">\n <td colspan=\"2\">\n <div class=\"flex justify-center gap-4 p-4\">\n @if(editEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-all duration-200 border border-purple-200 hover:border-purple-300\"\n (click)=\"clickEditButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n Editar\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-all duration-200 border border-rose-200 hover:border-rose-300\"\n (click)=\"clickDeleteButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n Eliminar\n </button>\n }\n </div>\n </td>\n </tr>\n }\n\n </tbody>\n </table>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!--------------------------------- Table mobile end --------------------------------->\n\n <!----------------------------------- Table desktop ----------------------------------->\n <table class=\"w-full text-sm text-center rtl:text-right text-neutral-700 hidden md:table\">\n <thead class=\"text-xs font-semibold uppercase bg-gradient-to-r from-purple-600 to-pink-600 text-white\">\n <tr>\n @for (header of headers; track $index) {\n <th scope=\"col\" class=\"p-2\">\n {{header.name}}\n </th>\n }\n\n @if(this.url){\n <th scope=\"col\" class=\"p-2\">\n Opciones\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track $index) {\n <tr\n [class]=\"'min-w-max hover:bg-purple-50/50 transition-colors duration-200 border-b border-purple-100/30 last:border-b-0 ' + ($index%2==0?'bg-purple-50/20':'')\">\n\n @for (header of headers; track $index) {\n <td class=\"p-2\">\n\n @if(header.type == 'table'){\n\n @if(!isArray(header.key)){\n <sau-table [headers]=\"header.headers\" [items]=\"getValue(item, header.key)\"></sau-table>\n }\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n }\n\n </td>\n }\n\n @if(this.url){\n <td class=\"px-6 py-4\">\n <div class=\"flex items-center gap-2\">\n @if(editEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center justify-center w-8 h-8 text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-all duration-200 border border-purple-200 hover:border-purple-300\"\n (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center justify-center w-8 h-8 text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-all duration-200 border border-rose-200 hover:border-rose-300\"\n (click)=\"clickDeleteButton(item.id)\" title=\"Eliminar\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n </div>\n </td>\n }\n\n </tr>\n }\n </tbody>\n </table>\n <!--------------------------------- table desktop end --------------------------------->\n\n @if (items.length == 0) {\n <div class=\"flex flex-col items-center justify-center h-48 text-center\">\n <div class=\"w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4\">\n <!-- <fa-icon [icon]=\"['fas', 'inbox']\" class=\"text-purple-400 text-2xl\"></fa-icon> -->\n </div>\n <p class=\"text-neutral-500 font-medium\">No hay elementos</p>\n <p class=\"text-neutral-400 text-sm\">Los elementos aparecer\u00E1n aqu\u00ED cuando est\u00E9n disponibles</p>\n </div>\n\n } @else if(total.length > 1) {\n\n <!----------------------------------- Pagination ----------------------------------->\n <div\n class=\"sticky left-0 flex flex-wrap gap-2 items-center justify-center md:justify-between p-6 bg-gradient-to-r from-purple-50/50 to-pink-50/50 border-t border-purple-200/50\">\n\n <!-- N\u00FAmeros de p\u00E1gina -->\n <div class=\"md:order-2 w-full md:w-max flex items-center justify-center gap-2\">\n @for (item of visiblePages; track $index) {\n <button (click)=\"changePage(item)\"\n [class]=\"'cursor-pointer w-10 h-10 rounded-lg font-medium text-sm transition-all duration-200 ' + (item == page ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg' : 'text-purple-600 hover:bg-purple-50 border border-purple-200 hover:border-purple-300')\"\n type=\"button\">\n {{item}}\n </button>\n }\n </div>\n\n <!-- Botones de navegaci\u00F3n izquierda -->\n <div class=\"md:order-1 flex items-center gap-2\">\n <!-- Bot\u00F3n ir al inicio -->\n <button type=\"button\" (click)=\"goToFirstPage()\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center px-3 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 text-sm font-medium ' + (page == 1?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Ir al inicio\">\n \u2039\u2039\n </button>\n\n <!-- Bot\u00F3n p\u00E1gina anterior -->\n <button type=\"button\" (click)=\"changePage(page-1)\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center w-10 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 ' + (page == 1?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"P\u00E1gina anterior\">\n \u2039\n </button>\n </div>\n\n <!-- Botones de navegaci\u00F3n derecha -->\n <div class=\"md:order-3 flex items-center gap-2\">\n <!-- Bot\u00F3n p\u00E1gina siguiente -->\n <button type=\"button\" (click)=\"changePage(page+1)\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center w-10 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 ' + (page == total[total.length-1]?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"P\u00E1gina siguiente\">\n \u203A\n </button>\n\n <!-- Bot\u00F3n ir al final -->\n <button type=\"button\" (click)=\"goToLastPage()\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center px-3 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 text-sm font-medium ' + (page == total[total.length-1]?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Ir al final\">\n \u203A\u203A\n </button>\n </div>\n </div>\n <!--------------------------------- pagination end --------------------------------->\n }\n\n</div>\n\n<!----------------------------------- Data template ----------------------------------->\n<ng-template #DataTemplate let-item=\"item\" let-header=\"header\">\n\n <section class=\"flex items-center gap-2\">\n\n @if(header.name == 'NOMBRE' && item.role == 'ROLE_ADMIN') {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-orange-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-orange-600', 'text-xs']\" [icon]=\"['fas', 'crown']\"></fa-icon> -->\n </div>\n }\n\n <span>\n @if (header.innerHtml) {\n <span [innerHTML]=\"getValue(item, header.key)\"></span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.key}\"></ng-container>\n }\n\n @if(header.subKey){\n <span class=\"block text-neutral-600 text-xs min-w-max\">\n (\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.subKey}\"></ng-container>\n )\n </span>\n }\n </span>\n\n </section>\n\n</ng-template>\n<!--------------------------------- Data template end --------------------------------->\n\n<!----------------------------------- Data Type template ----------------------------------->\n<ng-template #DataTypeTemplate let-item=\"item\" let-header=\"header\" let-value=\"value\">\n\n <section class=\"inline-block min-w-max\">\n @switch (header.type) {\n\n @case ('boolean') {\n @if(getValue(item, value)){\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-emerald-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-emerald-600', 'text-xs']\" [icon]=\"['fas', 'check']\"></fa-icon> -->\n </div>\n } @else {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-rose-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @case ('currency'){\n <!-- {{formatEuro(getValue(item, value))}} -->\n }\n\n @case ('dateTime') {\n <span class=\"text-neutral-600 text-sm\">\n {{getValue(item, value) | date: 'dd/MM/yyyy HH:mm'}}\n </span>\n }\n\n @case ('color'){\n <span class=\"inline-block w-8 h-4 rounded-full border border-neutral-200 shadow-sm\"\n [style.background-color]=\"getValue(item, value)\"></span>\n }\n\n @case ('link'){\n @let link = getLink(header.url, item, value);\n\n @if(link.isExternal){\n <a [href]=\"link.url\" class=\"text-purple-600 hover:underline\">\n {{header.linkName}}\n </a>\n }@else{\n <a [routerLink]=\"link.url\" class=\"text-purple-600 hover:underline\" target=\"_blank\">\n {{header.linkName}}\n </a>\n }\n\n }\n\n @case ('image'){\n @let link = getLink(header.url, item, value);\n\n <img [src]=\"link.url\" [alt]=\"getValue(item, value)\" loading=\"lazy\" class=\"w-10 h-10 object-cover\">\n }\n\n @case ('login'){\n @if(item.active){\n <span class=\"inline-flex items-center gap-1\">\n\n @if(item.email_verified_at){\n <div [title]=\"item.email\" class=\"inline-flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-blue-600', 'text-xs']\" [icon]=\"['fas', 'envelope']\"></fa-icon> -->\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\"\n class=\"inline-flex items-center justify-center w-6 h-6 bg-red-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-red-600', 'text-xs']\" [icon]=\"['fab', 'google']\"></fa-icon> -->\n </div>\n }\n\n </span>\n } @else {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-rose-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @default {\n {{getValue(item, value)}}\n }\n }\n </section>\n\n</ng-template>\n<!--------------------------------- Data Type template end --------------------------------->" }]
|
|
172
|
+
], template: "@if (loading) {\n<div>\n Loading\n</div>\n}\n\n<div class=\"sau-table\">\n\n <!----------------------------------- Table mobile ----------------------------------->\n <div class=\"sau-table-mobile\">\n <!-- Mobile header -->\n <div class=\"sau-table-mobile-header\">\n <h3 class=\"sau-table-mobile-title\">Lista de elementos</h3>\n <div class=\"sau-table-mobile-divider\"></div>\n </div>\n\n <table class=\"sau-table-mobile-table\">\n <tbody>\n @for (item of items; track $index) {\n <tr class=\"sau-table-mobile-row\">\n <td>\n <table class=\"sau-table-width-full\">\n <tbody>\n @for (header of headers; track $index) {\n <tr [class]=\"$index%2==0?'sau-table-mobile-row-even':''\">\n\n <th scope=\"col\" class=\"sau-table-mobile-header-cell\">\n {{header.name}}\n </th>\n <td class=\"sau-table-mobile-data-cell\">\n\n @if(header.type == 'table' && !isArray(header.key)){\n\n <!-- CSS-only toggle button -->\n <input type=\"checkbox\" [id]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-input\">\n <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n <!-- <fa-icon [icon]=\"['fas', 'chevron-down']\"\n class=\"text-xs transition-transform duration-200 peer-checked:rotate-180\"></fa-icon> -->\n <span class=\"sau-table-toggle-text\">\n <span class=\"sau-table-toggle-show\">Mostrar</span>\n <span class=\"sau-table-toggle-hide\">Ocultar</span>\n </span>\n </label>\n\n <!-- Content that toggles -->\n <div class=\"sau-table-toggle-content\">\n <sau-table [headers]=\"header.headers\"\n [items]=\"getValue(item, header.key)\"></sau-table>\n </div>\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n\n }\n\n </td>\n\n </tr>\n }\n\n @if(this.url){\n <tr class=\"sau-table-mobile-actions-row\">\n <td colspan=\"2\">\n <div class=\"sau-table-mobile-actions-container\">\n @if(editEvent.observers.length > 0){\n <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n Editar\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button class=\"sau-table-delete-button\" (click)=\"clickDeleteButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n Eliminar\n </button>\n }\n </div>\n </td>\n </tr>\n }\n\n </tbody>\n </table>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!--------------------------------- Table mobile end --------------------------------->\n\n <!----------------------------------- Table desktop ----------------------------------->\n <table class=\"sau-table-desktop\">\n <thead class=\"sau-table-desktop-header\">\n <tr>\n @for (header of headers; track $index) {\n <th scope=\"col\" class=\"sau-table-desktop-header-cell\">\n {{header.name}}\n </th>\n }\n\n @if(this.url){\n <th scope=\"col\" class=\"sau-table-desktop-header-cell\">\n Opciones\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track $index) {\n <tr [class]=\"'sau-table-desktop-row ' + ($index%2==0?'sau-table-desktop-row-even':'')\">\n\n @for (header of headers; track $index) {\n <td class=\"sau-table-desktop-cell\">\n\n @if(header.type == 'table'){\n\n @if(!isArray(header.key)){\n <sau-table [headers]=\"header.headers\" [items]=\"getValue(item, header.key)\"></sau-table>\n }\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n }\n\n </td>\n }\n\n @if(this.url){\n <td class=\"sau-table-desktop-actions-cell\">\n <div class=\"sau-table-desktop-actions-container\">\n @if(editEvent.observers.length > 0){\n <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\" title=\"Eliminar\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n </div>\n </td>\n }\n\n </tr>\n }\n </tbody>\n </table>\n <!--------------------------------- table desktop end --------------------------------->\n\n @if (items.length == 0) {\n <div class=\"sau-table-empty\">\n <div class=\"sau-table-empty-icon\">\n <!-- <fa-icon [icon]=\"['fas', 'inbox']\" class=\"text-purple-400 text-2xl\"></fa-icon> -->\n </div>\n <p class=\"sau-table-empty-title\">No hay elementos</p>\n <p class=\"sau-table-empty-subtitle\">Los elementos aparecer\u00E1n aqu\u00ED cuando est\u00E9n disponibles</p>\n </div>\n\n } @else if(total.length > 1) {\n\n <!----------------------------------- Pagination ----------------------------------->\n <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 \u2039\u2039\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 \u2039\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 \u203A\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 \u203A\u203A\n </button>\n </div>\n </div>\n <!--------------------------------- pagination end --------------------------------->\n }\n\n</div>\n\n<!----------------------------------- Data template ----------------------------------->\n<ng-template #DataTemplate let-item=\"item\" let-header=\"header\">\n\n <section class=\"sau-table-data-section\">\n\n @if(header.name == 'NOMBRE' && item.role == 'ROLE_ADMIN') {\n <div class=\"sau-table-admin-crown\">\n <!-- <fa-icon [ngClass]=\"['text-orange-600', 'text-xs']\" [icon]=\"['fas', 'crown']\"></fa-icon> -->\n </div>\n }\n\n <span>\n @if (header.innerHtml) {\n <span [innerHTML]=\"getValue(item, header.key)\"></span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.key}\"></ng-container>\n }\n\n @if(header.subKey){\n <span class=\"sau-table-subkey\">\n (\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.subKey}\"></ng-container>\n )\n </span>\n }\n </span>\n\n </section>\n\n</ng-template>\n<!--------------------------------- Data template end --------------------------------->\n\n<!----------------------------------- Data Type template ----------------------------------->\n<ng-template #DataTypeTemplate let-item=\"item\" let-header=\"header\" let-value=\"value\">\n\n <section class=\"sau-table-data-type-section\">\n @switch (header.type) {\n\n @case ('boolean') {\n @if(getValue(item, value)){\n <div class=\"sau-table-boolean-true\">\n <!-- <fa-icon [ngClass]=\"['text-emerald-600', 'text-xs']\" [icon]=\"['fas', 'check']\"></fa-icon> -->\n </div>\n } @else {\n <div class=\"sau-table-boolean-false\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @case ('currency'){\n <!-- {{formatEuro(getValue(item, value))}} -->\n }\n\n @case ('dateTime') {\n <span class=\"sau-table-datetime\">\n {{getValue(item, value) | date: 'dd/MM/yyyy HH:mm'}}\n </span>\n }\n\n @case ('color'){\n <span class=\"sau-table-color-indicator\" [style.background-color]=\"getValue(item, value)\"></span>\n }\n\n @case ('link'){\n @let link = getLink(header.url, item, value);\n\n @if(link.isExternal){\n <a [href]=\"link.url\" class=\"sau-table-link\">\n {{header.linkName}}\n </a>\n }@else{\n <a [routerLink]=\"link.url\" class=\"sau-table-link\" target=\"_blank\">\n {{header.linkName}}\n </a>\n }\n\n }\n\n @case ('image'){\n @let link = getLink(header.url, item, value);\n\n <img [src]=\"link.url\" [alt]=\"getValue(item, value)\" loading=\"lazy\" class=\"sau-table-image\">\n }\n\n @case ('login'){\n @if(item.active){\n <span class=\"sau-table-login-container\">\n\n @if(item.email_verified_at){\n <div [title]=\"item.email\" class=\"sau-table-login-email-verified\">\n <!-- <fa-icon [ngClass]=\"['text-blue-600', 'text-xs']\" [icon]=\"['fas', 'envelope']\"></fa-icon> -->\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n <!-- <fa-icon [ngClass]=\"['text-red-600', 'text-xs']\" [icon]=\"['fab', 'google']\"></fa-icon> -->\n </div>\n }\n\n </span>\n } @else {\n <div class=\"sau-table-login-inactive\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @default {\n {{getValue(item, value)}}\n }\n }\n </section>\n\n</ng-template>\n<!--------------------------------- Data Type template end --------------------------------->", styles: [":root{--sau-color-primary: rgb(147, 51, 234);--sau-color-secondary: rgb(219, 39, 119);--sau-color-primary-light: rgb(168, 85, 247);--sau-color-secondary-light: rgb(236, 72, 153);--sau-color-purple-50: rgb(250, 245, 255);--sau-color-purple-100: rgb(243, 232, 255);--sau-color-purple-200: rgb(233, 213, 255);--sau-color-purple-300: rgb(196, 181, 253);--sau-color-purple-600: var(--sau-color-primary);--sau-color-pink-50: rgb(253, 242, 248);--sau-color-pink-600: var(--sau-color-secondary);--sau-color-white: rgb(255, 255, 255);--sau-color-neutral-400: rgb(156, 163, 175);--sau-color-neutral-500: rgb(107, 114, 128);--sau-color-neutral-600: rgb(75, 85, 99);--sau-color-neutral-700: rgb(64, 64, 64);--sau-color-neutral-800: rgb(38, 38, 38);--sau-color-gray-200: rgb(229, 231, 235);--sau-color-success-100: rgb(209, 250, 229);--sau-color-error-100: rgb(254, 226, 226);--sau-color-error-600: rgb(244, 63, 94);--sau-color-error-700: rgb(239, 68, 68);--sau-color-error-200: rgb(251, 113, 133);--sau-color-error-50: rgb(255, 241, 242);--sau-color-info-100: rgb(219, 234, 254);--sau-color-warning-100: rgb(254, 243, 199);--sau-color-white-90: rgba(255, 255, 255, .9);--sau-color-white-50: rgba(255, 255, 255, .5);--sau-color-white-30: rgba(255, 255, 255, .3);--sau-color-purple-50-50: rgba(250, 245, 255, .5);--sau-color-purple-50-30: rgba(250, 245, 255, .3);--sau-color-purple-50-20: rgba(250, 245, 255, .2);--sau-color-purple-100-50: rgba(196, 181, 253, .5);--sau-color-purple-300-30: rgba(196, 181, 253, .3);--sau-color-pink-50-50: rgba(253, 242, 248, .5);--sau-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--sau-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--sau-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05)}.sau-table{overflow:auto;border-radius:1rem;background:var(--sau-color-white-90);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--sau-shadow-xl);border:1px solid var(--sau-color-white-50)}.sau-table .sau-table-width-full{width:100%}@media (min-width: 768px){.sau-table .sau-table-mobile{display:none}}.sau-table .sau-table-mobile .sau-table-mobile-header{background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-white);padding:.5rem 1rem;border-top-left-radius:1rem;border-top-right-radius:1rem}.sau-table .sau-table-mobile .sau-table-mobile-header .sau-table-mobile-title{font-size:1rem;font-weight:600;line-height:1.25}.sau-table .sau-table-mobile .sau-table-mobile-header .sau-table-mobile-divider{width:2rem;height:.125rem;background:var(--sau-color-white-30);border-radius:9999px;margin-top:.25rem}.sau-table .sau-table-mobile .sau-table-mobile-table{width:100%;font-size:.875rem;text-align:left;color:var(--sau-color-neutral-700)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row{border-bottom:1px solid var(--sau-color-purple-100-50)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row:last-child{border-bottom:none}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row.sau-table-mobile-row-even{background:var(--sau-color-purple-50-30)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row .sau-table-mobile-header-cell{padding:.5rem;font-weight:500;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-white);max-width:min-content}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row .sau-table-mobile-data-cell{padding:.5rem;width:100%;color:var(--sau-color-neutral-800)}.sau-table .sau-table-mobile .sau-table-toggle-input{display:none}.sau-table .sau-table-mobile .sau-table-toggle-input:checked~.sau-table-toggle-content{height:auto!important;opacity:1!important;overflow:visible!important}.sau-table .sau-table-mobile .sau-table-toggle-input:checked+.sau-table-toggle-label .sau-table-toggle-show{display:none}.sau-table .sau-table-mobile .sau-table-toggle-input:checked+.sau-table-toggle-label .sau-table-toggle-hide{display:inline}.sau-table .sau-table-mobile .sau-table-toggle-label{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--sau-color-purple-100);color:var(--sau-color-primary);border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}.sau-table .sau-table-mobile .sau-table-toggle-label:hover{background:var(--sau-color-purple-200)}.sau-table .sau-table-mobile .sau-table-toggle-label .sau-table-toggle-text{font-size:.875rem;font-weight:500}.sau-table .sau-table-mobile .sau-table-toggle-label .sau-table-toggle-text .sau-table-toggle-show{display:inline}.sau-table .sau-table-mobile .sau-table-toggle-label .sau-table-toggle-text .sau-table-toggle-hide{display:none}.sau-table .sau-table-mobile .sau-table-toggle-content{margin-top:.75rem;height:0;overflow:hidden;opacity:0;transition:all .3s ease-in-out}.sau-table .sau-table-mobile .sau-table-mobile-actions-row{border-bottom:8px solid transparent;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-primary-light));padding:1rem}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container{display:flex;justify-content:center;gap:1rem;padding:1rem}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-edit-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--sau-color-primary);background:var(--sau-color-purple-50);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-edit-button:hover{background:var(--sau-color-purple-100);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-delete-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--sau-color-error-600);background:var(--sau-color-error-50);border:1px solid var(--sau-color-error-200);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-mobile .sau-table-mobile-actions-row .sau-table-mobile-actions-container .sau-table-delete-button:hover{background:var(--sau-color-error-100);border-color:var(--sau-color-error-700)}.sau-table .sau-table-desktop{width:100%;font-size:.875rem;text-align:center;color:var(--sau-color-neutral-700);display:none}@media (min-width: 768px){.sau-table .sau-table-desktop{display:table}}.sau-table .sau-table-desktop .sau-table-desktop-header{font-size:.75rem;font-weight:600;text-transform:uppercase;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));color:var(--sau-color-white)}.sau-table .sau-table-desktop .sau-table-desktop-header .sau-table-desktop-header-cell{padding:.5rem}.sau-table .sau-table-desktop .sau-table-desktop-row{min-width:max-content;transition:background-color .2s;border-bottom:1px solid var(--sau-color-purple-300-30)}.sau-table .sau-table-desktop .sau-table-desktop-row:last-child{border-bottom:none}.sau-table .sau-table-desktop .sau-table-desktop-row:hover{background:var(--sau-color-purple-50-50)}.sau-table .sau-table-desktop .sau-table-desktop-row.sau-table-desktop-row-even{background:var(--sau-color-purple-50-20)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-cell{padding:.5rem}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell{padding:1.5rem 1rem}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container{display:flex;align-items:center;gap:.5rem}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-edit-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--sau-color-primary);background:var(--sau-color-purple-50);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-edit-button:hover{background:var(--sau-color-purple-100);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-delete-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--sau-color-error-600);background:var(--sau-color-error-50);border:1px solid var(--sau-color-error-200);border-radius:.5rem;transition:all .2s;cursor:pointer}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell .sau-table-desktop-actions-container .sau-table-desktop-delete-button:hover{background:var(--sau-color-error-100);border-color:var(--sau-color-error-700)}.sau-table .sau-table-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:12rem;text-align:center}.sau-table .sau-table-empty .sau-table-empty-icon{width:4rem;height:4rem;background:var(--sau-color-purple-100);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.sau-table .sau-table-empty .sau-table-empty-title{color:var(--sau-color-neutral-500);font-weight:500}.sau-table .sau-table-empty .sau-table-empty-subtitle{color:var(--sau-color-neutral-400);font-size:.875rem}.sau-table .sau-table-pagination{position:sticky;left:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(to right,var(--sau-color-purple-50-50),var(--sau-color-pink-50-50));border-top:1px solid var(--sau-color-purple-100-50)}@media (min-width: 768px){.sau-table .sau-table-pagination{justify-content:space-between}}.sau-table .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 .sau-table-pagination .sau-table-pagination-number-buttons{order:2;width:max-content}}.sau-table .sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button{cursor:pointer;width:2.5rem;height:2.5rem;border-radius:.5rem;font-weight:500;font-size:.875rem;transition:all .2s;border:none}.sau-table .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-light),var(--sau-color-secondary-light));color:var(--sau-color-white);box-shadow:var(--sau-shadow-lg)}.sau-table .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-white);border:1px solid var(--sau-color-purple-300)}.sau-table .sau-table-pagination .sau-table-pagination-number-buttons .sau-table-pagination-number-button.sau-table-pagination-number-button-inactive:hover{background:var(--sau-color-purple-50);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-pagination .sau-table-pagination-nav-left{display:flex;align-items:center;gap:.5rem}@media (min-width: 768px){.sau-table .sau-table-pagination .sau-table-pagination-nav-left{order:1}}.sau-table .sau-table-pagination .sau-table-pagination-nav-right{display:flex;align-items:center;gap:.5rem}@media (min-width: 768px){.sau-table .sau-table-pagination .sau-table-pagination-nav-right{order:3}}.sau-table .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-white);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s}.sau-table .sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-purple-50);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table .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-white);border:1px solid var(--sau-color-purple-300);border-radius:.5rem;transition:all .2s;font-size:.875rem;font-weight:500}.sau-table .sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-purple-50);border-color:var(--sau-color-primary-light)}.sau-table .sau-table-pagination .sau-table-pagination-nav-button-wide.sau-table-pagination-nav-button-disabled{opacity:.5;pointer-events:none}.sau-table-data-section{display:flex;align-items:center;gap:.5rem}.sau-table-data-section .sau-table-admin-crown{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-warning-100);border-radius:50%}.sau-table-data-section .sau-table-subkey{display:block;color:var(--sau-color-neutral-600);font-size:.75rem;min-width:max-content}.sau-table-data-type-section{display:inline-block;min-width:max-content}.sau-table-data-type-section .sau-table-boolean-true{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-success-100);border-radius:50%}.sau-table-data-type-section .sau-table-boolean-false{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-error-100);border-radius:50%}.sau-table-data-type-section .sau-table-datetime{color:var(--sau-color-neutral-600);font-size:.875rem}.sau-table-data-type-section .sau-table-color-indicator{display:inline-block;width:2rem;height:1rem;border-radius:9999px;border:1px solid var(--sau-color-gray-200);box-shadow:var(--sau-shadow-sm)}.sau-table-data-type-section .sau-table-link{color:var(--sau-color-primary);text-decoration:none}.sau-table-data-type-section .sau-table-link:hover{text-decoration:underline}.sau-table-data-type-section .sau-table-image{width:2.5rem;height:2.5rem;object-fit:cover}.sau-table-data-type-section .sau-table-login-container{display:inline-flex;align-items:center;gap:.25rem}.sau-table-data-type-section .sau-table-login-container .sau-table-login-email-verified{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-info-100);border-radius:50%}.sau-table-data-type-section .sau-table-login-container .sau-table-login-google,.sau-table-data-type-section .sau-table-login-inactive{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;background:var(--sau-color-error-100);border-radius:50%}\n"] }]
|
|
173
173
|
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { url: [{
|
|
174
174
|
type: Input
|
|
175
175
|
}], contentList: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"some-angular-utils-table.mjs","sources":["../../../../projects/some-angular-utils/table/src/lib/table.ts","../../../../projects/some-angular-utils/table/src/lib/table.html","../../../../projects/some-angular-utils/table/src/public-api.ts","../../../../projects/some-angular-utils/table/src/some-angular-utils-table.ts"],"sourcesContent":["import { CommonModule, DatePipe } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n selector: 'sau-table',\n templateUrl: './table.html',\n imports: [\n RouterModule,\n DatePipe,\n CommonModule,\n ]\n})\nexport class TableModule {\n @Input() url?: string;\n @Input() contentList?: string;\n @Input() contentTotal?: string;\n @Input() pageParamName = 'page';\n @Input() limitParamName = 'limit'\n @Input() sizeInitialPage = 0\n @Input() sizeBetweenPages = 1\n @Input() headers?: { name: string, key: string | string[], subKey?: string, type?: string, innerHtml?: boolean, headers?: any }[];\n @Output() editEvent = new EventEmitter();\n @Output() deleteEvent = new EventEmitter();\n\n loading = false\n\n @Input() items: any = [];\n\n total: number[] = []\n\n page = 1\n\n @Input() limit = 10\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 constructor(\n private http: HttpClient,\n private cdr: ChangeDetectorRef\n ) { }\n\n ngOnInit() {\n if (this.url) {\n this.getItems();\n }\n }\n\n // Método para obtener la página interna (0-based si sizeInitialPage es 0, 1-based si es 1)\n private getInternalPage(): number {\n if (this.sizeInitialPage === 0) {\n return (this.page - 1) * this.sizeBetweenPages;\n }\n return this.page * this.sizeBetweenPages;\n }\n\n getItems() {\n this.loading = true;\n this.cdr.detectChanges(); // Forzar detección antes de la petición\n\n const internalPage = this.getInternalPage();\n const filters = `?${this.pageParamName}=${internalPage}&${this.limitParamName}=${this.limit}`;\n\n this.http.get(this.url + filters).subscribe({\n next: (data: any) => {\n\n if (this.contentList && data[this.contentList]) {\n this.items = [...data[this.contentList]]; // Crear nueva referencia del array\n } else {\n this.items = [...data]; // Crear nueva referencia del array\n }\n\n if (this.contentTotal) {\n this.total = []\n for (let i = 0; i < data[this.contentTotal] / this.limit; i++) {\n this.total.push(i + 1)\n }\n }\n\n this.loading = false;\n this.cdr.detectChanges(); // Forzar detección después de actualizar datos\n },\n error: (error: any) => {\n console.error('ERROR obtener productos. ' + error);\n this.loading = false;\n this.cdr.detectChanges();\n }\n });\n }\n\n // Método simple para refrescar la tabla\n refresh() {\n if (this.url) {\n this.items = []; // Limpiar array primero\n this.cdr.detectChanges(); // Forzar actualización\n this.getItems();\n }\n }\n\n getLink(pattern: string = '{key}', item: any, value: string | string[]): { url: string, isExternal: boolean } {\n const keyValue = this.getValue(item, value);\n const url = pattern.replace('{key}', keyValue);\n const isExternal = url.startsWith('http://') || url.startsWith('https://')\n\n return {\n url,\n isExternal\n }\n }\n\n getValue(item: any, key: string | string[]) {\n\n let arrayKey = [];\n\n if (!Array.isArray(key)) {\n arrayKey.push(key);\n } else {\n arrayKey = key.slice();\n }\n\n let result = ''\n\n while (arrayKey.length > 0) {\n\n let keys = arrayKey[0].split('.');\n let value = item;\n\n if (keys[0].includes('[]')) {\n let arrayKey = keys[0].replace('[]', '');\n\n value = value[arrayKey].map((element: any) => this.getValue(element, keys.slice(1).join('.'))).join(', ');\n\n } else {\n let finalValue = item[String(key)]\n\n let isArray = Array.isArray(finalValue)\n let isBoolean = typeof finalValue === 'boolean'\n\n if (isArray || isBoolean) {\n return finalValue\n }\n\n for (let i = 0; value && i < keys.length; i++) {\n value = value[keys[i]];\n }\n }\n\n arrayKey.shift();\n\n result += (value ?? '') + (arrayKey.length > 0 ? ' ' : '');\n\n }\n\n return result;\n }\n\n isArray(array: any): boolean {\n return Array.isArray(array)\n }\n\n changePage(page: number) {\n this.page = page\n this.getItems()\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 clickEditButton(id?: number) {\n this.editEvent.emit(id)\n }\n\n clickDeleteButton(id?: number) {\n this.deleteEvent.emit(id);\n }\n\n}\n","@if (loading) {\n<div>\n Loading\n</div>\n}\n\n<div class=\"overflow-auto rounded-2xl bg-white/90 backdrop-blur-lg shadow-xl border border-white/50\">\n\n <!----------------------------------- Table mobile ----------------------------------->\n <div class=\"md:hidden\">\n <!-- Mobile header -->\n <div class=\"bg-gradient-to-r from-purple-600 to-pink-600 text-white px-4 py-2 rounded-t-2xl\">\n <h3 class=\"text-base font-semibold leading-tight\">Lista de elementos</h3>\n <div class=\"w-8 h-0.5 bg-white/30 rounded-full mt-1\"></div>\n </div>\n\n <table class=\"w-full text-sm text-left rtl:text-right text-neutral-700\">\n <tbody>\n @for (item of items; track $index) {\n <tr class=\"border-b border-purple-100/50 last:border-b-0\">\n <td>\n <table class=\"w-full\">\n <tbody>\n @for (header of headers; track $index) {\n <tr [class]=\"$index%2==0?'bg-purple-50/30':''\">\n\n <th scope=\"col\"\n class=\"p-2 font-medium bg-gradient-to-r from-purple-600 to-pink-600 text-white max-w-min\">\n {{header.name}}\n </th>\n <td class=\"p-2 w-full text-neutral-800\">\n\n @if(header.type == 'table' && !isArray(header.key)){\n\n <!-- CSS-only toggle button -->\n <input type=\"checkbox\" [id]=\"'toggle-table-' + $index\" class=\"hidden peer\">\n <label [for]=\"'toggle-table-' + $index\"\n class=\"inline-flex items-center gap-2 px-3 py-2 bg-purple-100 text-purple-600 rounded-lg hover:bg-purple-200 transition-all duration-200 cursor-pointer select-none\">\n <!-- <fa-icon [icon]=\"['fas', 'chevron-down']\"\n class=\"text-xs transition-transform duration-200 peer-checked:rotate-180\"></fa-icon> -->\n <span class=\"text-sm font-medium\">\n <span class=\"peer-checked:hidden\">Mostrar</span>\n <span class=\"hidden peer-checked:inline\">Ocultar</span>\n </span>\n </label>\n\n <!-- Content that toggles -->\n <div\n class=\"mt-3 h-0 overflow-hidden opacity-0 peer-checked:h-auto peer-checked:opacity-100 peer-checked:overflow-visible transition-all duration-300 ease-in-out\">\n <sau-table [headers]=\"header.headers\"\n [items]=\"getValue(item, header.key)\"></sau-table>\n </div>\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n\n }\n\n </td>\n\n </tr>\n }\n\n @if(this.url){\n <tr\n class=\"border-b-8 border-transparent bg-gradient-to-r from-purple-600 to-purple-400 p-4\">\n <td colspan=\"2\">\n <div class=\"flex justify-center gap-4 p-4\">\n @if(editEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-all duration-200 border border-purple-200 hover:border-purple-300\"\n (click)=\"clickEditButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n Editar\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-all duration-200 border border-rose-200 hover:border-rose-300\"\n (click)=\"clickDeleteButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n Eliminar\n </button>\n }\n </div>\n </td>\n </tr>\n }\n\n </tbody>\n </table>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!--------------------------------- Table mobile end --------------------------------->\n\n <!----------------------------------- Table desktop ----------------------------------->\n <table class=\"w-full text-sm text-center rtl:text-right text-neutral-700 hidden md:table\">\n <thead class=\"text-xs font-semibold uppercase bg-gradient-to-r from-purple-600 to-pink-600 text-white\">\n <tr>\n @for (header of headers; track $index) {\n <th scope=\"col\" class=\"p-2\">\n {{header.name}}\n </th>\n }\n\n @if(this.url){\n <th scope=\"col\" class=\"p-2\">\n Opciones\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track $index) {\n <tr\n [class]=\"'min-w-max hover:bg-purple-50/50 transition-colors duration-200 border-b border-purple-100/30 last:border-b-0 ' + ($index%2==0?'bg-purple-50/20':'')\">\n\n @for (header of headers; track $index) {\n <td class=\"p-2\">\n\n @if(header.type == 'table'){\n\n @if(!isArray(header.key)){\n <sau-table [headers]=\"header.headers\" [items]=\"getValue(item, header.key)\"></sau-table>\n }\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n }\n\n </td>\n }\n\n @if(this.url){\n <td class=\"px-6 py-4\">\n <div class=\"flex items-center gap-2\">\n @if(editEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center justify-center w-8 h-8 text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-all duration-200 border border-purple-200 hover:border-purple-300\"\n (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button\n class=\"inline-flex items-center justify-center w-8 h-8 text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-all duration-200 border border-rose-200 hover:border-rose-300\"\n (click)=\"clickDeleteButton(item.id)\" title=\"Eliminar\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n </div>\n </td>\n }\n\n </tr>\n }\n </tbody>\n </table>\n <!--------------------------------- table desktop end --------------------------------->\n\n @if (items.length == 0) {\n <div class=\"flex flex-col items-center justify-center h-48 text-center\">\n <div class=\"w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4\">\n <!-- <fa-icon [icon]=\"['fas', 'inbox']\" class=\"text-purple-400 text-2xl\"></fa-icon> -->\n </div>\n <p class=\"text-neutral-500 font-medium\">No hay elementos</p>\n <p class=\"text-neutral-400 text-sm\">Los elementos aparecerán aquí cuando estén disponibles</p>\n </div>\n\n } @else if(total.length > 1) {\n\n <!----------------------------------- Pagination ----------------------------------->\n <div\n class=\"sticky left-0 flex flex-wrap gap-2 items-center justify-center md:justify-between p-6 bg-gradient-to-r from-purple-50/50 to-pink-50/50 border-t border-purple-200/50\">\n\n <!-- Números de página -->\n <div class=\"md:order-2 w-full md:w-max flex items-center justify-center gap-2\">\n @for (item of visiblePages; track $index) {\n <button (click)=\"changePage(item)\"\n [class]=\"'cursor-pointer w-10 h-10 rounded-lg font-medium text-sm transition-all duration-200 ' + (item == page ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg' : 'text-purple-600 hover:bg-purple-50 border border-purple-200 hover:border-purple-300')\"\n type=\"button\">\n {{item}}\n </button>\n }\n </div>\n\n <!-- Botones de navegación izquierda -->\n <div class=\"md:order-1 flex items-center gap-2\">\n <!-- Botón ir al inicio -->\n <button type=\"button\" (click)=\"goToFirstPage()\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center px-3 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 text-sm font-medium ' + (page == 1?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Ir al inicio\">\n ‹‹\n </button>\n\n <!-- Botón página anterior -->\n <button type=\"button\" (click)=\"changePage(page-1)\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center w-10 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 ' + (page == 1?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Página anterior\">\n ‹\n </button>\n </div>\n\n <!-- Botones de navegación derecha -->\n <div class=\"md:order-3 flex items-center gap-2\">\n <!-- Botón página siguiente -->\n <button type=\"button\" (click)=\"changePage(page+1)\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center w-10 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 ' + (page == total[total.length-1]?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Página siguiente\">\n ›\n </button>\n\n <!-- Botón ir al final -->\n <button type=\"button\" (click)=\"goToLastPage()\"\n [class]=\"'cursor-pointer inline-flex items-center justify-center px-3 h-10 text-purple-600 bg-white border border-purple-200 rounded-lg hover:bg-purple-50 transition-all duration-200 text-sm font-medium ' + (page == total[total.length-1]?'opacity-50 pointer-events-none':'hover:border-purple-300')\"\n title=\"Ir al final\">\n ››\n </button>\n </div>\n </div>\n <!--------------------------------- pagination end --------------------------------->\n }\n\n</div>\n\n<!----------------------------------- Data template ----------------------------------->\n<ng-template #DataTemplate let-item=\"item\" let-header=\"header\">\n\n <section class=\"flex items-center gap-2\">\n\n @if(header.name == 'NOMBRE' && item.role == 'ROLE_ADMIN') {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-orange-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-orange-600', 'text-xs']\" [icon]=\"['fas', 'crown']\"></fa-icon> -->\n </div>\n }\n\n <span>\n @if (header.innerHtml) {\n <span [innerHTML]=\"getValue(item, header.key)\"></span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.key}\"></ng-container>\n }\n\n @if(header.subKey){\n <span class=\"block text-neutral-600 text-xs min-w-max\">\n (\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.subKey}\"></ng-container>\n )\n </span>\n }\n </span>\n\n </section>\n\n</ng-template>\n<!--------------------------------- Data template end --------------------------------->\n\n<!----------------------------------- Data Type template ----------------------------------->\n<ng-template #DataTypeTemplate let-item=\"item\" let-header=\"header\" let-value=\"value\">\n\n <section class=\"inline-block min-w-max\">\n @switch (header.type) {\n\n @case ('boolean') {\n @if(getValue(item, value)){\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-emerald-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-emerald-600', 'text-xs']\" [icon]=\"['fas', 'check']\"></fa-icon> -->\n </div>\n } @else {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-rose-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @case ('currency'){\n <!-- {{formatEuro(getValue(item, value))}} -->\n }\n\n @case ('dateTime') {\n <span class=\"text-neutral-600 text-sm\">\n {{getValue(item, value) | date: 'dd/MM/yyyy HH:mm'}}\n </span>\n }\n\n @case ('color'){\n <span class=\"inline-block w-8 h-4 rounded-full border border-neutral-200 shadow-sm\"\n [style.background-color]=\"getValue(item, value)\"></span>\n }\n\n @case ('link'){\n @let link = getLink(header.url, item, value);\n\n @if(link.isExternal){\n <a [href]=\"link.url\" class=\"text-purple-600 hover:underline\">\n {{header.linkName}}\n </a>\n }@else{\n <a [routerLink]=\"link.url\" class=\"text-purple-600 hover:underline\" target=\"_blank\">\n {{header.linkName}}\n </a>\n }\n\n }\n\n @case ('image'){\n @let link = getLink(header.url, item, value);\n\n <img [src]=\"link.url\" [alt]=\"getValue(item, value)\" loading=\"lazy\" class=\"w-10 h-10 object-cover\">\n }\n\n @case ('login'){\n @if(item.active){\n <span class=\"inline-flex items-center gap-1\">\n\n @if(item.email_verified_at){\n <div [title]=\"item.email\" class=\"inline-flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-blue-600', 'text-xs']\" [icon]=\"['fas', 'envelope']\"></fa-icon> -->\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\"\n class=\"inline-flex items-center justify-center w-6 h-6 bg-red-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-red-600', 'text-xs']\" [icon]=\"['fab', 'google']\"></fa-icon> -->\n </div>\n }\n\n </span>\n } @else {\n <div class=\"inline-flex items-center justify-center w-6 h-6 bg-rose-100 rounded-full\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @default {\n {{getValue(item, value)}}\n }\n }\n </section>\n\n</ng-template>\n<!--------------------------------- Data Type template end --------------------------------->","/*\n * Public API Surface of table\n */\n\nexport * from './lib/table';\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-table.mjs","sources":["../../../../projects/some-angular-utils/table/src/lib/table.ts","../../../../projects/some-angular-utils/table/src/lib/table.html","../../../../projects/some-angular-utils/table/src/public-api.ts","../../../../projects/some-angular-utils/table/src/some-angular-utils-table.ts"],"sourcesContent":["import { CommonModule, DatePipe } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n selector: 'sau-table',\n templateUrl: './table.html',\n styleUrl: './table.scss',\n imports: [\n RouterModule,\n DatePipe,\n CommonModule,\n ]\n})\nexport class TableModule {\n @Input() url?: string;\n @Input() contentList?: string;\n @Input() contentTotal?: string;\n @Input() pageParamName = 'page';\n @Input() limitParamName = 'limit'\n @Input() sizeInitialPage = 0\n @Input() sizeBetweenPages = 1\n @Input() headers?: { name: string, key: string | string[], subKey?: string, type?: string, innerHtml?: boolean, headers?: any }[];\n @Output() editEvent = new EventEmitter();\n @Output() deleteEvent = new EventEmitter();\n\n loading = false\n\n @Input() items: any = [];\n\n total: number[] = []\n\n page = 1\n\n @Input() limit = 10\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 constructor(\n private http: HttpClient,\n private cdr: ChangeDetectorRef\n ) { }\n\n ngOnInit() {\n if (this.url) {\n this.getItems();\n }\n }\n\n // Método para obtener la página interna (0-based si sizeInitialPage es 0, 1-based si es 1)\n private getInternalPage(): number {\n if (this.sizeInitialPage === 0) {\n return (this.page - 1) * this.sizeBetweenPages;\n }\n return this.page * this.sizeBetweenPages;\n }\n\n getItems() {\n this.loading = true;\n this.cdr.detectChanges(); // Forzar detección antes de la petición\n\n const internalPage = this.getInternalPage();\n const filters = `?${this.pageParamName}=${internalPage}&${this.limitParamName}=${this.limit}`;\n\n this.http.get(this.url + filters).subscribe({\n next: (data: any) => {\n\n if (this.contentList && data[this.contentList]) {\n this.items = [...data[this.contentList]]; // Crear nueva referencia del array\n } else {\n this.items = [...data]; // Crear nueva referencia del array\n }\n\n if (this.contentTotal) {\n this.total = []\n for (let i = 0; i < data[this.contentTotal] / this.limit; i++) {\n this.total.push(i + 1)\n }\n }\n\n this.loading = false;\n this.cdr.detectChanges(); // Forzar detección después de actualizar datos\n },\n error: (error: any) => {\n console.error('ERROR obtener productos. ' + error);\n this.loading = false;\n this.cdr.detectChanges();\n }\n });\n }\n\n // Método simple para refrescar la tabla\n refresh() {\n if (this.url) {\n this.items = []; // Limpiar array primero\n this.cdr.detectChanges(); // Forzar actualización\n this.getItems();\n }\n }\n\n getLink(pattern: string = '{key}', item: any, value: string | string[]): { url: string, isExternal: boolean } {\n const keyValue = this.getValue(item, value);\n const url = pattern.replace('{key}', keyValue);\n const isExternal = url.startsWith('http://') || url.startsWith('https://')\n\n return {\n url,\n isExternal\n }\n }\n\n getValue(item: any, key: string | string[]) {\n\n let arrayKey = [];\n\n if (!Array.isArray(key)) {\n arrayKey.push(key);\n } else {\n arrayKey = key.slice();\n }\n\n let result = ''\n\n while (arrayKey.length > 0) {\n\n let keys = arrayKey[0].split('.');\n let value = item;\n\n if (keys[0].includes('[]')) {\n let arrayKey = keys[0].replace('[]', '');\n\n value = value[arrayKey].map((element: any) => this.getValue(element, keys.slice(1).join('.'))).join(', ');\n\n } else {\n let finalValue = item[String(key)]\n\n let isArray = Array.isArray(finalValue)\n let isBoolean = typeof finalValue === 'boolean'\n\n if (isArray || isBoolean) {\n return finalValue\n }\n\n for (let i = 0; value && i < keys.length; i++) {\n value = value[keys[i]];\n }\n }\n\n arrayKey.shift();\n\n result += (value ?? '') + (arrayKey.length > 0 ? ' ' : '');\n\n }\n\n return result;\n }\n\n isArray(array: any): boolean {\n return Array.isArray(array)\n }\n\n changePage(page: number) {\n this.page = page\n this.getItems()\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 clickEditButton(id?: number) {\n this.editEvent.emit(id)\n }\n\n clickDeleteButton(id?: number) {\n this.deleteEvent.emit(id);\n }\n\n}\n","@if (loading) {\n<div>\n Loading\n</div>\n}\n\n<div class=\"sau-table\">\n\n <!----------------------------------- Table mobile ----------------------------------->\n <div class=\"sau-table-mobile\">\n <!-- Mobile header -->\n <div class=\"sau-table-mobile-header\">\n <h3 class=\"sau-table-mobile-title\">Lista de elementos</h3>\n <div class=\"sau-table-mobile-divider\"></div>\n </div>\n\n <table class=\"sau-table-mobile-table\">\n <tbody>\n @for (item of items; track $index) {\n <tr class=\"sau-table-mobile-row\">\n <td>\n <table class=\"sau-table-width-full\">\n <tbody>\n @for (header of headers; track $index) {\n <tr [class]=\"$index%2==0?'sau-table-mobile-row-even':''\">\n\n <th scope=\"col\" class=\"sau-table-mobile-header-cell\">\n {{header.name}}\n </th>\n <td class=\"sau-table-mobile-data-cell\">\n\n @if(header.type == 'table' && !isArray(header.key)){\n\n <!-- CSS-only toggle button -->\n <input type=\"checkbox\" [id]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-input\">\n <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n <!-- <fa-icon [icon]=\"['fas', 'chevron-down']\"\n class=\"text-xs transition-transform duration-200 peer-checked:rotate-180\"></fa-icon> -->\n <span class=\"sau-table-toggle-text\">\n <span class=\"sau-table-toggle-show\">Mostrar</span>\n <span class=\"sau-table-toggle-hide\">Ocultar</span>\n </span>\n </label>\n\n <!-- Content that toggles -->\n <div class=\"sau-table-toggle-content\">\n <sau-table [headers]=\"header.headers\"\n [items]=\"getValue(item, header.key)\"></sau-table>\n </div>\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n\n }\n\n </td>\n\n </tr>\n }\n\n @if(this.url){\n <tr class=\"sau-table-mobile-actions-row\">\n <td colspan=\"2\">\n <div class=\"sau-table-mobile-actions-container\">\n @if(editEvent.observers.length > 0){\n <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n Editar\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button class=\"sau-table-delete-button\" (click)=\"clickDeleteButton(item.id)\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n Eliminar\n </button>\n }\n </div>\n </td>\n </tr>\n }\n\n </tbody>\n </table>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!--------------------------------- Table mobile end --------------------------------->\n\n <!----------------------------------- Table desktop ----------------------------------->\n <table class=\"sau-table-desktop\">\n <thead class=\"sau-table-desktop-header\">\n <tr>\n @for (header of headers; track $index) {\n <th scope=\"col\" class=\"sau-table-desktop-header-cell\">\n {{header.name}}\n </th>\n }\n\n @if(this.url){\n <th scope=\"col\" class=\"sau-table-desktop-header-cell\">\n Opciones\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of items; track $index) {\n <tr [class]=\"'sau-table-desktop-row ' + ($index%2==0?'sau-table-desktop-row-even':'')\">\n\n @for (header of headers; track $index) {\n <td class=\"sau-table-desktop-cell\">\n\n @if(header.type == 'table'){\n\n @if(!isArray(header.key)){\n <sau-table [headers]=\"header.headers\" [items]=\"getValue(item, header.key)\"></sau-table>\n }\n\n }@else{\n <ng-container [ngTemplateOutlet]=\"DataTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header}\"></ng-container>\n }\n\n </td>\n }\n\n @if(this.url){\n <td class=\"sau-table-desktop-actions-cell\">\n <div class=\"sau-table-desktop-actions-container\">\n @if(editEvent.observers.length > 0){\n <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <!-- <fa-icon [icon]=\"['fas', 'pen']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n\n @if(deleteEvent.observers.length > 0){\n <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\" title=\"Eliminar\">\n <!-- <fa-icon [icon]=\"['fas', 'trash-can']\" class=\"text-xs\"></fa-icon> -->\n </button>\n }\n </div>\n </td>\n }\n\n </tr>\n }\n </tbody>\n </table>\n <!--------------------------------- table desktop end --------------------------------->\n\n @if (items.length == 0) {\n <div class=\"sau-table-empty\">\n <div class=\"sau-table-empty-icon\">\n <!-- <fa-icon [icon]=\"['fas', 'inbox']\" class=\"text-purple-400 text-2xl\"></fa-icon> -->\n </div>\n <p class=\"sau-table-empty-title\">No hay elementos</p>\n <p class=\"sau-table-empty-subtitle\">Los elementos aparecerán aquí cuando estén disponibles</p>\n </div>\n\n } @else if(total.length > 1) {\n\n <!----------------------------------- Pagination ----------------------------------->\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 ‹‹\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 ‹\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 ›\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 ››\n </button>\n </div>\n </div>\n <!--------------------------------- pagination end --------------------------------->\n }\n\n</div>\n\n<!----------------------------------- Data template ----------------------------------->\n<ng-template #DataTemplate let-item=\"item\" let-header=\"header\">\n\n <section class=\"sau-table-data-section\">\n\n @if(header.name == 'NOMBRE' && item.role == 'ROLE_ADMIN') {\n <div class=\"sau-table-admin-crown\">\n <!-- <fa-icon [ngClass]=\"['text-orange-600', 'text-xs']\" [icon]=\"['fas', 'crown']\"></fa-icon> -->\n </div>\n }\n\n <span>\n @if (header.innerHtml) {\n <span [innerHTML]=\"getValue(item, header.key)\"></span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.key}\"></ng-container>\n }\n\n @if(header.subKey){\n <span class=\"sau-table-subkey\">\n (\n <ng-container [ngTemplateOutlet]=\"DataTypeTemplate\"\n [ngTemplateOutletContext]=\"{item:item, header:header, value:header.subKey}\"></ng-container>\n )\n </span>\n }\n </span>\n\n </section>\n\n</ng-template>\n<!--------------------------------- Data template end --------------------------------->\n\n<!----------------------------------- Data Type template ----------------------------------->\n<ng-template #DataTypeTemplate let-item=\"item\" let-header=\"header\" let-value=\"value\">\n\n <section class=\"sau-table-data-type-section\">\n @switch (header.type) {\n\n @case ('boolean') {\n @if(getValue(item, value)){\n <div class=\"sau-table-boolean-true\">\n <!-- <fa-icon [ngClass]=\"['text-emerald-600', 'text-xs']\" [icon]=\"['fas', 'check']\"></fa-icon> -->\n </div>\n } @else {\n <div class=\"sau-table-boolean-false\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @case ('currency'){\n <!-- {{formatEuro(getValue(item, value))}} -->\n }\n\n @case ('dateTime') {\n <span class=\"sau-table-datetime\">\n {{getValue(item, value) | date: 'dd/MM/yyyy HH:mm'}}\n </span>\n }\n\n @case ('color'){\n <span class=\"sau-table-color-indicator\" [style.background-color]=\"getValue(item, value)\"></span>\n }\n\n @case ('link'){\n @let link = getLink(header.url, item, value);\n\n @if(link.isExternal){\n <a [href]=\"link.url\" class=\"sau-table-link\">\n {{header.linkName}}\n </a>\n }@else{\n <a [routerLink]=\"link.url\" class=\"sau-table-link\" target=\"_blank\">\n {{header.linkName}}\n </a>\n }\n\n }\n\n @case ('image'){\n @let link = getLink(header.url, item, value);\n\n <img [src]=\"link.url\" [alt]=\"getValue(item, value)\" loading=\"lazy\" class=\"sau-table-image\">\n }\n\n @case ('login'){\n @if(item.active){\n <span class=\"sau-table-login-container\">\n\n @if(item.email_verified_at){\n <div [title]=\"item.email\" class=\"sau-table-login-email-verified\">\n <!-- <fa-icon [ngClass]=\"['text-blue-600', 'text-xs']\" [icon]=\"['fas', 'envelope']\"></fa-icon> -->\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n <!-- <fa-icon [ngClass]=\"['text-red-600', 'text-xs']\" [icon]=\"['fab', 'google']\"></fa-icon> -->\n </div>\n }\n\n </span>\n } @else {\n <div class=\"sau-table-login-inactive\">\n <!-- <fa-icon [ngClass]=\"['text-rose-600', 'text-xs']\" [icon]=\"['fas', 'xmark']\"></fa-icon> -->\n </div>\n }\n }\n\n @default {\n {{getValue(item, value)}}\n }\n }\n </section>\n\n</ng-template>\n<!--------------------------------- Data Type template end --------------------------------->","/*\n * Public API Surface of table\n */\n\nexport * from './lib/table';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|