@some-angular-utils/table 0.1.2 → 0.1.3
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.
|
@@ -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=\"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" }] });
|
|
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: [".sau-table{--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);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=\"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"] }]
|
|
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: [".sau-table{--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);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 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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"}
|
|
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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"}
|