npm - @some-angular-utils/table - Versions diffs - 0.1.6 → 0.1.7 - Mend

@some-angular-utils/table 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +1 -1
package/fesm2022/some-angular-utils-table.mjs +45 -142
package/fesm2022/some-angular-utils-table.mjs.map +1 -1
package/package.json +16 -7
package/{index.d.ts → types/some-angular-utils-table.d.ts} +6 -9

package/README.md CHANGED Viewed

@@ -18,7 +18,7 @@
 ## IMPORT
 ```ts
-import { TableModule } from '@some-angular-utils/table';
+import { SAUTableModule } from '@some-angular-utils/table';
 ```
 ## TYPESCRIPT

package/fesm2022/some-angular-utils-table.mjs CHANGED Viewed

@@ -4,17 +4,18 @@ import * as i0 from '@angular/core';
 import { Component, EventEmitter, Input, ContentChild, Output, ViewEncapsulation } from '@angular/core';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
+import { SAUPaginatorModule } from '@some-angular-utils/paginator';
 import * as i1 from '@angular/common/http';
 class ChevronDownIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronDownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChevronDownIconComponent, isStandalone: true, selector: "sau-chevron-down-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChevronDownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ChevronDownIconComponent, isStandalone: true, selector: "sau-chevron-down-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M12 15.5l-6-6h12l-6 6z" />
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronDownIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChevronDownIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-chevron-down-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -23,83 +24,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
   `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
         }] });
-class ChevronLeftIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChevronLeftIconComponent, isStandalone: true, selector: "sau-chevron-left-icon", ngImport: i0, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-    </svg>
-  `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronLeftIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sau-chevron-left-icon', standalone: true, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-    </svg>
-  `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
-        }] });
-class ChevronRightIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronRightIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChevronRightIconComponent, isStandalone: true, selector: "sau-chevron-right-icon", ngImport: i0, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-    </svg>
-  `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronRightIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sau-chevron-right-icon', standalone: true, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-    </svg>
-  `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
-        }] });
-class ChevronDoubleLeftIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronDoubleLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChevronDoubleLeftIconComponent, isStandalone: true, selector: "sau-chevron-double-left-icon", ngImport: i0, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"/>
-    </svg>
-  `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronDoubleLeftIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sau-chevron-double-left-icon', standalone: true, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z"/>
-    </svg>
-  `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
-        }] });
-class ChevronDoubleRightIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronDoubleRightIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChevronDoubleRightIconComponent, isStandalone: true, selector: "sau-chevron-double-right-icon", ngImport: i0, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"/>
-    </svg>
-  `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChevronDoubleRightIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sau-chevron-double-right-icon', standalone: true, template: `
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
-      <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z"/>
-    </svg>
-  `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
-        }] });
 class PenIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PenIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PenIconComponent, isStandalone: true, selector: "sau-pen-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PenIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: PenIconComponent, isStandalone: true, selector: "sau-pen-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PenIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PenIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-pen-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -109,14 +42,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 class TrashIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrashIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TrashIconComponent, isStandalone: true, selector: "sau-trash-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TrashIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TrashIconComponent, isStandalone: true, selector: "sau-trash-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrashIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TrashIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-trash-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -126,14 +59,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 class InboxIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InboxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: InboxIconComponent, isStandalone: true, selector: "sau-inbox-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InboxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: InboxIconComponent, isStandalone: true, selector: "sau-inbox-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H5V5h14v10z"/>
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InboxIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InboxIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-inbox-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -143,14 +76,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 class CrownIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CrownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CrownIconComponent, isStandalone: true, selector: "sau-crown-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CrownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CrownIconComponent, isStandalone: true, selector: "sau-crown-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M5 16L3 5l4.5 7L12 4l4.5 8L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1 3.7L12 9l-3.1 3.3-2.1-3.7L7.7 14z"/>
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CrownIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CrownIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-crown-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -160,14 +93,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 class CheckIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CheckIconComponent, isStandalone: true, selector: "sau-check-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CheckIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CheckIconComponent, isStandalone: true, selector: "sau-check-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CheckIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-check-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -177,14 +110,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 class XmarkIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: XmarkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: XmarkIconComponent, isStandalone: true, selector: "sau-xmark-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: XmarkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: XmarkIconComponent, isStandalone: true, selector: "sau-xmark-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.88-4.89c.39-.38.39-1.02.01-1.4z"/>
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: XmarkIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: XmarkIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-xmark-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -194,14 +127,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 class EnvelopeIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EnvelopeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: EnvelopeIconComponent, isStandalone: true, selector: "sau-envelope-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EnvelopeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: EnvelopeIconComponent, isStandalone: true, selector: "sau-envelope-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
       <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EnvelopeIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EnvelopeIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-envelope-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; fill: currentColor;">
@@ -211,8 +144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 class GoogleIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GoogleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: GoogleIconComponent, isStandalone: true, selector: "sau-google-icon", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: GoogleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: GoogleIconComponent, isStandalone: true, selector: "sau-google-icon", ngImport: i0, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;">
       <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
       <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
@@ -221,7 +154,7 @@ class GoogleIconComponent {
     </svg>
   `, isInline: true, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GoogleIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: GoogleIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sau-google-icon', standalone: true, template: `
     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;">
@@ -233,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
   `, styles: [":host{display:inline-block;width:1em;height:1em;vertical-align:middle}\n"] }]
         }] });
-class TableModule {
+class SAUTableModule {
     http;
     cdr;
     url;
@@ -259,25 +192,9 @@ class TableModule {
     }
     loading = false;
     items = [];
-    total = [];
+    total = 0;
     page = 1;
     limit = 10;
-    // Getter para obtener las páginas visibles (3 antes y 3 después de la página actual)
-    get visiblePages() {
-        const totalPages = this.total.length;
-        if (totalPages <= 7) {
-            // Si hay 7 páginas o menos, mostrar todas
-            return this.total;
-        }
-        const currentPage = this.page;
-        const start = Math.max(1, currentPage - 3);
-        const end = Math.min(totalPages, currentPage + 3);
-        const pages = [];
-        for (let i = start; i <= end; i++) {
-            pages.push(i);
-        }
-        return pages;
-    }
     constructor(http, cdr) {
         this.http = http;
         this.cdr = cdr;
@@ -311,10 +228,11 @@ class TableModule {
                     this.items = [...data]; // Crear nueva referencia del array
                 }
                 if (this.contentTotal) {
-                    this.total = [];
+                    const total = [];
                     for (let i = 0; i < data[this.contentTotal] / this.limit; i++) {
-                        this.total.push(i + 1);
+                        total.push(i + 1);
                     }
+                    this.total = total.length;
                 }
                 this.loading = false;
                 this.cdr.detectChanges(); // Forzar detección después de actualizar datos
@@ -363,7 +281,8 @@ class TableModule {
                 let finalValue = item[String(key)];
                 let isArray = Array.isArray(finalValue);
                 let isBoolean = typeof finalValue === 'boolean';
-                if (isArray || isBoolean) {
+                let isNumber = typeof finalValue === 'number';
+                if (isArray || isBoolean || isNumber) {
                     return finalValue;
                 }
                 for (let i = 0; value && i < keys.length; i++) {
@@ -378,43 +297,27 @@ class TableModule {
     isArray(array) {
         return Array.isArray(array);
     }
-    changePage(page) {
-        this.page = page;
-        this.getItems();
-    }
-    // Método para ir a la primera página
-    goToFirstPage() {
-        if (this.page !== 1) {
-            this.changePage(1);
-        }
-    }
-    // Método para ir a la última página
-    goToLastPage() {
-        const lastPage = this.total.length;
-        if (this.page !== lastPage && lastPage > 0) {
-            this.changePage(lastPage);
-        }
-    }
     clickEditButton(id) {
         this.editEvent.emit(id);
     }
     clickDeleteButton(id) {
         this.deleteEvent.emit(id);
     }
-    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 });
-    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", fixedContent: "fixedContent", headers: "headers", items: "items", limit: "limit" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, queries: [{ propertyName: "editButtonTemplate", first: true, predicate: ["editButton"], descendants: true }, { propertyName: "deleteButtonTemplate", first: true, predicate: ["deleteButton"], descendants: true }], 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\"\n                                            class=\"sau-table-toggle-input\">\n                                        <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n                                            <span class=\"sau-icon sau-icon-chevron-down\">\n                                                <sau-chevron-down-icon></sau-chevron-down-icon>\n                                            </span>\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(editButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasEditSubscription){\n                                            <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-pen\">\n                                                    <sau-pen-icon></sau-pen-icon>\n                                                </span>\n                                                Editar\n                                            </button>\n                                            }\n\n                                            @if(deleteButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasDeleteSubscription){\n                                            <button class=\"sau-table-delete-button\"\n                                                (click)=\"clickDeleteButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-trash\">\n                                                    <sau-trash-icon></sau-trash-icon>\n                                                </span>\n                                                Eliminar\n                                            </button>\n                                            }\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\n                        @if(editButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasEditSubscription){\n                        <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n                            <span class=\"sau-icon sau-icon-pen\">\n                                <sau-pen-icon></sau-pen-icon>\n                            </span>\n                        </button>\n                        }\n\n                        @if(deleteButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasDeleteSubscription){\n                        <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\"\n                            title=\"Eliminar\">\n                            <span class=\"sau-icon sau-icon-trash\">\n                                <sau-trash-icon></sau-trash-icon>\n                            </span>\n                        </button>\n                        }\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            <span class=\"sau-icon sau-icon-inbox\">\n                <sau-inbox-icon></sau-inbox-icon>\n            </span>\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                <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n            </button>\n\n            <!-- Bot\u00F3n p\u00E1gina anterior -->\n            <button type=\"button\" (click)=\"changePage(page-1)\"\n                [class]=\"'sau-table-pagination-nav-button ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n                title=\"P\u00E1gina anterior\">\n                <sau-chevron-left-icon></sau-chevron-left-icon>\n            </button>\n        </div>\n\n        <!-- Botones de navegaci\u00F3n derecha -->\n        <div class=\"sau-table-pagination-nav-right\">\n            <!-- Bot\u00F3n p\u00E1gina siguiente -->\n            <button type=\"button\" (click)=\"changePage(page+1)\"\n                [class]=\"'sau-table-pagination-nav-button ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n                title=\"P\u00E1gina siguiente\">\n                <sau-chevron-right-icon></sau-chevron-right-icon>\n            </button>\n\n            <!-- Bot\u00F3n ir al final -->\n            <button type=\"button\" (click)=\"goToLastPage()\"\n                [class]=\"'sau-table-pagination-nav-button-wide ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n                title=\"Ir al final\">\n                <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n            </button>\n        </div>\n    </div>\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            <span class=\"sau-icon sau-icon-crown\">\n                <sau-crown-icon></sau-crown-icon>\n            </span>\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            <span class=\"sau-icon sau-icon-check\">\n                <sau-check-icon></sau-check-icon>\n            </span>\n        </div>\n        } @else {\n        <div class=\"sau-table-boolean-false\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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                <span class=\"sau-icon sau-icon-envelope\">\n                    <sau-envelope-icon></sau-envelope-icon>\n                </span>\n            </div>\n            }\n\n            @if(item.google_id){\n            <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n                <span class=\"sau-icon sau-icon-google\">\n                    <sau-google-icon></sau-google-icon>\n                </span>\n            </div>\n            }\n\n        </span>\n        } @else {\n        <div class=\"sau-table-login-inactive\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);overflow:auto;background:var(--sau-color-background)}.sau-table .sau-table-width-full{width:100%}.sau-table .sau-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;display:flex;align-items:center;justify-content:center}.sau-table .sau-icon svg{width:100%;height:100%;fill:currentColor}.sau-table .sau-icon.sau-icon-chevron-down svg{width:1.8em;height:1.8em}.sau-table .sau-icon.sau-icon-inbox svg{width:1.5em;height:1.5em}@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-background);padding:.5rem 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-background);margin-top:.25rem}.sau-table .sau-table-mobile .sau-table-mobile-table{width:100%;font-size:.875rem;text-align:left;color:var(--sau-color-primary)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row{border-bottom:1px solid var(--sau-color-primary)}.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-background)}.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-background);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-primary)}.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-background);color:var(--sau-color-primary);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-secondary);color:var(--sau-color-background)}.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:.5rem solid transparent;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));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:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);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-delete);color:var(--sau-color-background)}.sau-table .sau-table-desktop{width:100%;font-size:.875rem;text-align:center;color:var(--sau-color-primary);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-background)}.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-primary)}.sau-table .sau-table-desktop .sau-table-desktop-row:last-child{border-bottom:none}.sau-table .sau-table-desktop .sau-table-desktop-row:hover,.sau-table .sau-table-desktop .sau-table-desktop-row.sau-table-desktop-row-even{background:var(--sau-color-background)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-cell,.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell{padding:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);transition:all .2s;font-size:1.2rem;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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);transition:all .2s;font-size:1.2rem;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-delete);color:var(--sau-color-background)}.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{position:relative;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--sau-color-primary);font-size:2rem}.sau-table .sau-table-empty .sau-table-empty-icon:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table .sau-table-empty .sau-table-empty-title{color:var(--sau-color-text);font-weight:500}.sau-table .sau-table-empty .sau-table-empty-subtitle{color:var(--sau-color-text);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:var(--sau-color-background);border-top:1px solid var(--sau-color-primary)}@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;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),var(--sau-color-secondary));color:var(--sau-color-background)}.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-background);border:1px solid var(--sau-color-primary)}.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-primary);color:var(--sau-color-background)}.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-background);border:1px solid var(--sau-color-primary);transition:all .2s}.sau-table .sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table .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-background);border:1px solid var(--sau-color-primary);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-primary);color:var(--sau-color-background)}.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-secondary)}.sau-table-data-section .sau-table-subkey{display:block;color:var(--sau-color-primary);font-size:.75rem;min-width:max-content}.sau-table-data-type-section{display:inline-block;min-width:max-content;color:var(--sau-color-text)}.sau-table-data-type-section .sau-table-boolean-true{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-true:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-boolean-false{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-false:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-datetime{color:var(--sau-color-text);font-size:.875rem}.sau-table-data-type-section .sau-table-color-indicator{display:inline-block;width:2rem;height:1rem}.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-primary)}.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-secondary)}\n"], dependencies: [{ kind: "component", type: TableModule, selector: "sau-table", inputs: ["url", "contentList", "contentTotal", "pageParamName", "limitParamName", "sizeInitialPage", "sizeBetweenPages", "fixedContent", "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: "component", type: ChevronDownIconComponent, selector: "sau-chevron-down-icon" }, { kind: "component", type: ChevronLeftIconComponent, selector: "sau-chevron-left-icon" }, { kind: "component", type: ChevronRightIconComponent, selector: "sau-chevron-right-icon" }, { kind: "component", type: ChevronDoubleLeftIconComponent, selector: "sau-chevron-double-left-icon" }, { kind: "component", type: ChevronDoubleRightIconComponent, selector: "sau-chevron-double-right-icon" }, { kind: "component", type: PenIconComponent, selector: "sau-pen-icon" }, { kind: "component", type: TrashIconComponent, selector: "sau-trash-icon" }, { kind: "component", type: InboxIconComponent, selector: "sau-inbox-icon" }, { kind: "component", type: CrownIconComponent, selector: "sau-crown-icon" }, { kind: "component", type: CheckIconComponent, selector: "sau-check-icon" }, { kind: "component", type: XmarkIconComponent, selector: "sau-xmark-icon" }, { kind: "component", type: EnvelopeIconComponent, selector: "sau-envelope-icon" }, { kind: "component", type: GoogleIconComponent, selector: "sau-google-icon" }, { kind: "pipe", type: DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
+    onPageChange(newPage) {
+        this.page = newPage;
+        this.getItems();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SAUTableModule, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SAUTableModule, isStandalone: true, selector: "sau-table", inputs: { url: "url", contentList: "contentList", contentTotal: "contentTotal", pageParamName: "pageParamName", limitParamName: "limitParamName", sizeInitialPage: "sizeInitialPage", sizeBetweenPages: "sizeBetweenPages", fixedContent: "fixedContent", headers: "headers", items: "items", limit: "limit" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, queries: [{ propertyName: "editButtonTemplate", first: true, predicate: ["editButton"], descendants: true }, { propertyName: "deleteButtonTemplate", first: true, predicate: ["deleteButton"], descendants: true }], 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\"\n                                            class=\"sau-table-toggle-input\">\n                                        <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n                                            <span class=\"sau-icon sau-icon-chevron-down\">\n                                                <sau-chevron-down-icon></sau-chevron-down-icon>\n                                            </span>\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(editButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasEditSubscription){\n                                            <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-pen\">\n                                                    <sau-pen-icon></sau-pen-icon>\n                                                </span>\n                                                Editar\n                                            </button>\n                                            }\n\n                                            @if(deleteButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasDeleteSubscription){\n                                            <button class=\"sau-table-delete-button\"\n                                                (click)=\"clickDeleteButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-trash\">\n                                                    <sau-trash-icon></sau-trash-icon>\n                                                </span>\n                                                Eliminar\n                                            </button>\n                                            }\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\n                        @if(editButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasEditSubscription){\n                        <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n                            <span class=\"sau-icon sau-icon-pen\">\n                                <sau-pen-icon></sau-pen-icon>\n                            </span>\n                        </button>\n                        }\n\n                        @if(deleteButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasDeleteSubscription){\n                        <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\"\n                            title=\"Eliminar\">\n                            <span class=\"sau-icon sau-icon-trash\">\n                                <sau-trash-icon></sau-trash-icon>\n                            </span>\n                        </button>\n                        }\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            <span class=\"sau-icon sau-icon-inbox\">\n                <sau-inbox-icon></sau-inbox-icon>\n            </span>\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 > 1) {\n\n    <sau-paginator [totalPages]=\"total\" [currentPage]=\"page\" (pageChange)=\"onPageChange($event)\"></sau-paginator>\n\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            <span class=\"sau-icon sau-icon-crown\">\n                <sau-crown-icon></sau-crown-icon>\n            </span>\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            <span class=\"sau-icon sau-icon-check\">\n                <sau-check-icon></sau-check-icon>\n            </span>\n        </div>\n        } @else {\n        <div class=\"sau-table-boolean-false\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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                <span class=\"sau-icon sau-icon-envelope\">\n                    <sau-envelope-icon></sau-envelope-icon>\n                </span>\n            </div>\n            }\n\n            @if(item.google_id){\n            <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n                <span class=\"sau-icon sau-icon-google\">\n                    <sau-google-icon></sau-google-icon>\n                </span>\n            </div>\n            }\n\n        </span>\n        } @else {\n        <div class=\"sau-table-login-inactive\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);overflow:auto;background:var(--sau-color-background)}.sau-table .sau-table-width-full{width:100%}.sau-table .sau-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;display:flex;align-items:center;justify-content:center}.sau-table .sau-icon svg{width:100%;height:100%;fill:currentColor}.sau-table .sau-icon.sau-icon-chevron-down svg{width:1.8em;height:1.8em}.sau-table .sau-icon.sau-icon-inbox svg{width:1.5em;height:1.5em}@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-background);padding:.5rem 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-background);margin-top:.25rem}.sau-table .sau-table-mobile .sau-table-mobile-table{width:100%;font-size:.875rem;text-align:left;color:var(--sau-color-primary)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row{border-bottom:1px solid var(--sau-color-primary)}.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-background)}.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-background);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-primary)}.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-background);color:var(--sau-color-primary);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-secondary);color:var(--sau-color-background)}.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:.5rem solid transparent;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));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:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);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-delete);color:var(--sau-color-background)}.sau-table .sau-table-desktop{width:100%;font-size:.875rem;text-align:center;color:var(--sau-color-primary);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-background)}.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-primary)}.sau-table .sau-table-desktop .sau-table-desktop-row:last-child{border-bottom:none}.sau-table .sau-table-desktop .sau-table-desktop-row:hover,.sau-table .sau-table-desktop .sau-table-desktop-row.sau-table-desktop-row-even{background:var(--sau-color-background)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-cell,.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell{padding:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);transition:all .2s;font-size:1.2rem;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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);transition:all .2s;font-size:1.2rem;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-delete);color:var(--sau-color-background)}.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{position:relative;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--sau-color-primary);font-size:2rem}.sau-table .sau-table-empty .sau-table-empty-icon:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table .sau-table-empty .sau-table-empty-title{color:var(--sau-color-text);font-weight:500}.sau-table .sau-table-empty .sau-table-empty-subtitle{color:var(--sau-color-text);font-size:.875rem}.sau-table .sau-paginator{border-top:1px solid var(--sau-color-primary);--sau-color-primary:inherit !important;--sau-color-secondary: inherit !important;--sau-color-background: inherit !important;--sau-color-edit: inherit !important;--sau-color-delete: inherit !important;--sau-color-text: inherit !important}.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-secondary)}.sau-table-data-section .sau-table-subkey{display:block;color:var(--sau-color-primary);font-size:.75rem;min-width:max-content}.sau-table-data-type-section{display:inline-block;min-width:max-content;color:var(--sau-color-text)}.sau-table-data-type-section .sau-table-boolean-true{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-true:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-boolean-false{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-false:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-datetime{color:var(--sau-color-text);font-size:.875rem}.sau-table-data-type-section .sau-table-color-indicator{display:inline-block;width:2rem;height:1rem}.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-primary)}.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-secondary)}\n"], dependencies: [{ kind: "component", type: SAUTableModule, selector: "sau-table", inputs: ["url", "contentList", "contentTotal", "pageParamName", "limitParamName", "sizeInitialPage", "sizeBetweenPages", "fixedContent", "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: "component", type: SAUPaginatorModule, selector: "sau-paginator", inputs: ["totalPages", "currentPage"], outputs: ["pageChange"] }, { kind: "component", type: ChevronDownIconComponent, selector: "sau-chevron-down-icon" }, { kind: "component", type: PenIconComponent, selector: "sau-pen-icon" }, { kind: "component", type: TrashIconComponent, selector: "sau-trash-icon" }, { kind: "component", type: InboxIconComponent, selector: "sau-inbox-icon" }, { kind: "component", type: CrownIconComponent, selector: "sau-crown-icon" }, { kind: "component", type: CheckIconComponent, selector: "sau-check-icon" }, { kind: "component", type: XmarkIconComponent, selector: "sau-xmark-icon" }, { kind: "component", type: EnvelopeIconComponent, selector: "sau-envelope-icon" }, { kind: "component", type: GoogleIconComponent, selector: "sau-google-icon" }, { kind: "pipe", type: DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SAUTableModule, decorators: [{
             type: Component,
             args: [{ selector: 'sau-table', encapsulation: ViewEncapsulation.None, imports: [
                         RouterModule,
                         DatePipe,
                         CommonModule,
+                        SAUPaginatorModule,
                         ChevronDownIconComponent,
-                        ChevronLeftIconComponent,
-                        ChevronRightIconComponent,
-                        ChevronDoubleLeftIconComponent,
-                        ChevronDoubleRightIconComponent,
                         PenIconComponent,
                         TrashIconComponent,
                         InboxIconComponent,
@@ -423,7 +326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         XmarkIconComponent,
                         EnvelopeIconComponent,
                         GoogleIconComponent,
-                    ], 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\"\n                                            class=\"sau-table-toggle-input\">\n                                        <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n                                            <span class=\"sau-icon sau-icon-chevron-down\">\n                                                <sau-chevron-down-icon></sau-chevron-down-icon>\n                                            </span>\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(editButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasEditSubscription){\n                                            <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-pen\">\n                                                    <sau-pen-icon></sau-pen-icon>\n                                                </span>\n                                                Editar\n                                            </button>\n                                            }\n\n                                            @if(deleteButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasDeleteSubscription){\n                                            <button class=\"sau-table-delete-button\"\n                                                (click)=\"clickDeleteButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-trash\">\n                                                    <sau-trash-icon></sau-trash-icon>\n                                                </span>\n                                                Eliminar\n                                            </button>\n                                            }\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\n                        @if(editButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasEditSubscription){\n                        <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n                            <span class=\"sau-icon sau-icon-pen\">\n                                <sau-pen-icon></sau-pen-icon>\n                            </span>\n                        </button>\n                        }\n\n                        @if(deleteButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasDeleteSubscription){\n                        <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\"\n                            title=\"Eliminar\">\n                            <span class=\"sau-icon sau-icon-trash\">\n                                <sau-trash-icon></sau-trash-icon>\n                            </span>\n                        </button>\n                        }\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            <span class=\"sau-icon sau-icon-inbox\">\n                <sau-inbox-icon></sau-inbox-icon>\n            </span>\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                <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n            </button>\n\n            <!-- Bot\u00F3n p\u00E1gina anterior -->\n            <button type=\"button\" (click)=\"changePage(page-1)\"\n                [class]=\"'sau-table-pagination-nav-button ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n                title=\"P\u00E1gina anterior\">\n                <sau-chevron-left-icon></sau-chevron-left-icon>\n            </button>\n        </div>\n\n        <!-- Botones de navegaci\u00F3n derecha -->\n        <div class=\"sau-table-pagination-nav-right\">\n            <!-- Bot\u00F3n p\u00E1gina siguiente -->\n            <button type=\"button\" (click)=\"changePage(page+1)\"\n                [class]=\"'sau-table-pagination-nav-button ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n                title=\"P\u00E1gina siguiente\">\n                <sau-chevron-right-icon></sau-chevron-right-icon>\n            </button>\n\n            <!-- Bot\u00F3n ir al final -->\n            <button type=\"button\" (click)=\"goToLastPage()\"\n                [class]=\"'sau-table-pagination-nav-button-wide ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n                title=\"Ir al final\">\n                <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n            </button>\n        </div>\n    </div>\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            <span class=\"sau-icon sau-icon-crown\">\n                <sau-crown-icon></sau-crown-icon>\n            </span>\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            <span class=\"sau-icon sau-icon-check\">\n                <sau-check-icon></sau-check-icon>\n            </span>\n        </div>\n        } @else {\n        <div class=\"sau-table-boolean-false\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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                <span class=\"sau-icon sau-icon-envelope\">\n                    <sau-envelope-icon></sau-envelope-icon>\n                </span>\n            </div>\n            }\n\n            @if(item.google_id){\n            <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n                <span class=\"sau-icon sau-icon-google\">\n                    <sau-google-icon></sau-google-icon>\n                </span>\n            </div>\n            }\n\n        </span>\n        } @else {\n        <div class=\"sau-table-login-inactive\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);overflow:auto;background:var(--sau-color-background)}.sau-table .sau-table-width-full{width:100%}.sau-table .sau-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;display:flex;align-items:center;justify-content:center}.sau-table .sau-icon svg{width:100%;height:100%;fill:currentColor}.sau-table .sau-icon.sau-icon-chevron-down svg{width:1.8em;height:1.8em}.sau-table .sau-icon.sau-icon-inbox svg{width:1.5em;height:1.5em}@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-background);padding:.5rem 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-background);margin-top:.25rem}.sau-table .sau-table-mobile .sau-table-mobile-table{width:100%;font-size:.875rem;text-align:left;color:var(--sau-color-primary)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row{border-bottom:1px solid var(--sau-color-primary)}.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-background)}.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-background);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-primary)}.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-background);color:var(--sau-color-primary);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-secondary);color:var(--sau-color-background)}.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:.5rem solid transparent;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));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:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);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-delete);color:var(--sau-color-background)}.sau-table .sau-table-desktop{width:100%;font-size:.875rem;text-align:center;color:var(--sau-color-primary);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-background)}.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-primary)}.sau-table .sau-table-desktop .sau-table-desktop-row:last-child{border-bottom:none}.sau-table .sau-table-desktop .sau-table-desktop-row:hover,.sau-table .sau-table-desktop .sau-table-desktop-row.sau-table-desktop-row-even{background:var(--sau-color-background)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-cell,.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell{padding:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);transition:all .2s;font-size:1.2rem;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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);transition:all .2s;font-size:1.2rem;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-delete);color:var(--sau-color-background)}.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{position:relative;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--sau-color-primary);font-size:2rem}.sau-table .sau-table-empty .sau-table-empty-icon:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table .sau-table-empty .sau-table-empty-title{color:var(--sau-color-text);font-weight:500}.sau-table .sau-table-empty .sau-table-empty-subtitle{color:var(--sau-color-text);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:var(--sau-color-background);border-top:1px solid var(--sau-color-primary)}@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;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),var(--sau-color-secondary));color:var(--sau-color-background)}.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-background);border:1px solid var(--sau-color-primary)}.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-primary);color:var(--sau-color-background)}.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-background);border:1px solid var(--sau-color-primary);transition:all .2s}.sau-table .sau-table-pagination .sau-table-pagination-nav-button.sau-table-pagination-nav-button-enabled:hover{background:var(--sau-color-primary);color:var(--sau-color-background)}.sau-table .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-background);border:1px solid var(--sau-color-primary);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-primary);color:var(--sau-color-background)}.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-secondary)}.sau-table-data-section .sau-table-subkey{display:block;color:var(--sau-color-primary);font-size:.75rem;min-width:max-content}.sau-table-data-type-section{display:inline-block;min-width:max-content;color:var(--sau-color-text)}.sau-table-data-type-section .sau-table-boolean-true{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-true:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-boolean-false{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-false:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-datetime{color:var(--sau-color-text);font-size:.875rem}.sau-table-data-type-section .sau-table-color-indicator{display:inline-block;width:2rem;height:1rem}.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-primary)}.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-secondary)}\n"] }]
+                    ], 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\"\n                                            class=\"sau-table-toggle-input\">\n                                        <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n                                            <span class=\"sau-icon sau-icon-chevron-down\">\n                                                <sau-chevron-down-icon></sau-chevron-down-icon>\n                                            </span>\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(editButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasEditSubscription){\n                                            <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-pen\">\n                                                    <sau-pen-icon></sau-pen-icon>\n                                                </span>\n                                                Editar\n                                            </button>\n                                            }\n\n                                            @if(deleteButtonTemplate){\n                                            <ng-container\n                                                *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                                            } @else if(hasDeleteSubscription){\n                                            <button class=\"sau-table-delete-button\"\n                                                (click)=\"clickDeleteButton(item.id)\">\n                                                <span class=\"sau-icon sau-icon-trash\">\n                                                    <sau-trash-icon></sau-trash-icon>\n                                                </span>\n                                                Eliminar\n                                            </button>\n                                            }\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\n                        @if(editButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasEditSubscription){\n                        <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n                            <span class=\"sau-icon sau-icon-pen\">\n                                <sau-pen-icon></sau-pen-icon>\n                            </span>\n                        </button>\n                        }\n\n                        @if(deleteButtonTemplate){\n                        <ng-container\n                            *ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n                        } @else if(hasDeleteSubscription){\n                        <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\"\n                            title=\"Eliminar\">\n                            <span class=\"sau-icon sau-icon-trash\">\n                                <sau-trash-icon></sau-trash-icon>\n                            </span>\n                        </button>\n                        }\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            <span class=\"sau-icon sau-icon-inbox\">\n                <sau-inbox-icon></sau-inbox-icon>\n            </span>\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 > 1) {\n\n    <sau-paginator [totalPages]=\"total\" [currentPage]=\"page\" (pageChange)=\"onPageChange($event)\"></sau-paginator>\n\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            <span class=\"sau-icon sau-icon-crown\">\n                <sau-crown-icon></sau-crown-icon>\n            </span>\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            <span class=\"sau-icon sau-icon-check\">\n                <sau-check-icon></sau-check-icon>\n            </span>\n        </div>\n        } @else {\n        <div class=\"sau-table-boolean-false\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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                <span class=\"sau-icon sau-icon-envelope\">\n                    <sau-envelope-icon></sau-envelope-icon>\n                </span>\n            </div>\n            }\n\n            @if(item.google_id){\n            <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n                <span class=\"sau-icon sau-icon-google\">\n                    <sau-google-icon></sau-google-icon>\n                </span>\n            </div>\n            }\n\n        </span>\n        } @else {\n        <div class=\"sau-table-login-inactive\">\n            <span class=\"sau-icon sau-icon-xmark\">\n                <sau-xmark-icon></sau-xmark-icon>\n            </span>\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: var(--sau-color-primary);--sau-color-background: rgb(255, 255, 255);--sau-color-edit: rgb(34, 197, 94);--sau-color-delete: rgb(239, 68, 68);--sau-color-text: rgb(31, 41, 55);overflow:auto;background:var(--sau-color-background)}.sau-table .sau-table-width-full{width:100%}.sau-table .sau-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;display:flex;align-items:center;justify-content:center}.sau-table .sau-icon svg{width:100%;height:100%;fill:currentColor}.sau-table .sau-icon.sau-icon-chevron-down svg{width:1.8em;height:1.8em}.sau-table .sau-icon.sau-icon-inbox svg{width:1.5em;height:1.5em}@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-background);padding:.5rem 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-background);margin-top:.25rem}.sau-table .sau-table-mobile .sau-table-mobile-table{width:100%;font-size:.875rem;text-align:left;color:var(--sau-color-primary)}.sau-table .sau-table-mobile .sau-table-mobile-table .sau-table-mobile-row{border-bottom:1px solid var(--sau-color-primary)}.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-background)}.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-background);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-primary)}.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-background);color:var(--sau-color-primary);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-secondary);color:var(--sau-color-background)}.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:.5rem solid transparent;background:linear-gradient(to right,var(--sau-color-primary),var(--sau-color-secondary));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:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);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-delete);color:var(--sau-color-background)}.sau-table .sau-table-desktop{width:100%;font-size:.875rem;text-align:center;color:var(--sau-color-primary);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-background)}.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-primary)}.sau-table .sau-table-desktop .sau-table-desktop-row:last-child{border-bottom:none}.sau-table .sau-table-desktop .sau-table-desktop-row:hover,.sau-table .sau-table-desktop .sau-table-desktop-row.sau-table-desktop-row-even{background:var(--sau-color-background)}.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-cell,.sau-table .sau-table-desktop .sau-table-desktop-row .sau-table-desktop-actions-cell{padding:.5rem}.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-edit);background:var(--sau-color-background);border:1px solid var(--sau-color-edit);transition:all .2s;font-size:1.2rem;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-edit);color:var(--sau-color-background)}.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-delete);background:var(--sau-color-background);border:1px solid var(--sau-color-delete);transition:all .2s;font-size:1.2rem;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-delete);color:var(--sau-color-background)}.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{position:relative;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--sau-color-primary);font-size:2rem}.sau-table .sau-table-empty .sau-table-empty-icon:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table .sau-table-empty .sau-table-empty-title{color:var(--sau-color-text);font-weight:500}.sau-table .sau-table-empty .sau-table-empty-subtitle{color:var(--sau-color-text);font-size:.875rem}.sau-table .sau-paginator{border-top:1px solid var(--sau-color-primary);--sau-color-primary:inherit !important;--sau-color-secondary: inherit !important;--sau-color-background: inherit !important;--sau-color-edit: inherit !important;--sau-color-delete: inherit !important;--sau-color-text: inherit !important}.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-secondary)}.sau-table-data-section .sau-table-subkey{display:block;color:var(--sau-color-primary);font-size:.75rem;min-width:max-content}.sau-table-data-type-section{display:inline-block;min-width:max-content;color:var(--sau-color-text)}.sau-table-data-type-section .sau-table-boolean-true{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-true:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-boolean-false{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}.sau-table-data-type-section .sau-table-boolean-false:after{content:\"\";width:100%;height:100%;background:var(--sau-color-primary);position:absolute;top:0;left:0;opacity:.3;border-radius:50%}.sau-table-data-type-section .sau-table-datetime{color:var(--sau-color-text);font-size:.875rem}.sau-table-data-type-section .sau-table-color-indicator{display:inline-block;width:2rem;height:1rem}.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-primary)}.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-secondary)}\n"] }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { url: [{
                 type: Input
             }], contentList: [{
@@ -466,5 +369,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { TableModule };
+export { SAUTableModule };
 //# sourceMappingURL=some-angular-utils-table.mjs.map

package/fesm2022/some-angular-utils-table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"some-angular-utils-table.mjs","sources":["../../../../projects/some-angular-utils/table/src/lib/icons/chevron-down-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/chevron-left-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/chevron-right-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/chevron-double-left-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/chevron-double-right-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/pen-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/trash-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/inbox-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/crown-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/check-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/xmark-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/envelope-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/google-icon.ts","../../../../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 { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-down-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M12 15.5l-6-6h12l-6 6z\" />\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDownIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-left-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronLeftIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-right-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronRightIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-double-left-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDoubleLeftIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-double-right-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41zM16 6h2v12h-2V6z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDoubleRightIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-pen-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class PenIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-trash-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class TrashIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-inbox-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H5V5h14v10z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class InboxIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-crown-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M5 16L3 5l4.5 7L12 4l4.5 8L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1 3.7L12 9l-3.1 3.3-2.1-3.7L7.7 14z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class CrownIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-check-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class CheckIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-xmark-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.88-4.89c.39-.38.39-1.02.01-1.4z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class XmarkIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-envelope-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class EnvelopeIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-google-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%;\">\n <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" fill=\"#4285F4\"/>\n <path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\"/>\n <path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" fill=\"#FBBC05\"/>\n <path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class GoogleIconComponent {}","import { CommonModule, DatePipe } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation, ContentChild } from '@angular/core';\nimport { TemplateRef } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { ChevronDownIconComponent } from './icons/chevron-down-icon';\nimport { ChevronLeftIconComponent } from './icons/chevron-left-icon';\nimport { ChevronRightIconComponent } from './icons/chevron-right-icon';\nimport { ChevronDoubleLeftIconComponent } from './icons/chevron-double-left-icon';\nimport { ChevronDoubleRightIconComponent } from './icons/chevron-double-right-icon';\nimport { PenIconComponent } from './icons/pen-icon';\nimport { TrashIconComponent } from './icons/trash-icon';\nimport { InboxIconComponent } from './icons/inbox-icon';\nimport { CrownIconComponent } from './icons/crown-icon';\nimport { CheckIconComponent } from './icons/check-icon';\nimport { XmarkIconComponent } from './icons/xmark-icon';\nimport { EnvelopeIconComponent } from './icons/envelope-icon';\nimport { GoogleIconComponent } from './icons/google-icon';\n\n@Component({\n selector: 'sau-table',\n templateUrl: './table.html',\n styleUrls: ['./table.scss'],\n encapsulation: ViewEncapsulation.None,\n imports: [\n RouterModule,\n DatePipe,\n CommonModule,\n ChevronDownIconComponent,\n ChevronLeftIconComponent,\n ChevronRightIconComponent,\n ChevronDoubleLeftIconComponent,\n ChevronDoubleRightIconComponent,\n PenIconComponent,\n TrashIconComponent,\n InboxIconComponent,\n CrownIconComponent,\n CheckIconComponent,\n XmarkIconComponent,\n EnvelopeIconComponent,\n GoogleIconComponent,\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() fixedContent = []\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 // ContentChild para detectar cosas personalizadas\n @ContentChild('editButton', { static: false }) editButtonTemplate?: TemplateRef<any>;\n @ContentChild('deleteButton', { static: false }) deleteButtonTemplate?: TemplateRef<any>;\n\n // Getters para verificar si hay suscriptores\n get hasEditSubscription(): boolean {\n return this.editEvent.observed;\n }\n\n get hasDeleteSubscription(): boolean {\n return this.deleteEvent.observed;\n }\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 } else if (this.fixedContent && this.fixedContent.length > 0) {\n this.items = [...this.fixedContent];\n\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\"\n class=\"sau-table-toggle-input\">\n <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n <span class=\"sau-icon sau-icon-chevron-down\">\n <sau-chevron-down-icon></sau-chevron-down-icon>\n </span>\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(editButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasEditSubscription){\n <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n <span class=\"sau-icon sau-icon-pen\">\n <sau-pen-icon></sau-pen-icon>\n </span>\n Editar\n </button>\n }\n\n @if(deleteButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasDeleteSubscription){\n <button class=\"sau-table-delete-button\"\n (click)=\"clickDeleteButton(item.id)\">\n <span class=\"sau-icon sau-icon-trash\">\n <sau-trash-icon></sau-trash-icon>\n </span>\n Eliminar\n </button>\n }\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\n @if(editButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasEditSubscription){\n <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <span class=\"sau-icon sau-icon-pen\">\n <sau-pen-icon></sau-pen-icon>\n </span>\n </button>\n }\n\n @if(deleteButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasDeleteSubscription){\n <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\"\n title=\"Eliminar\">\n <span class=\"sau-icon sau-icon-trash\">\n <sau-trash-icon></sau-trash-icon>\n </span>\n </button>\n }\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 <span class=\"sau-icon sau-icon-inbox\">\n <sau-inbox-icon></sau-inbox-icon>\n </span>\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 <sau-chevron-double-left-icon></sau-chevron-double-left-icon>\n </button>\n\n <!-- Botón página anterior -->\n <button type=\"button\" (click)=\"changePage(page-1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == 1?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Página anterior\">\n <sau-chevron-left-icon></sau-chevron-left-icon>\n </button>\n </div>\n\n <!-- Botones de navegación derecha -->\n <div class=\"sau-table-pagination-nav-right\">\n <!-- Botón página siguiente -->\n <button type=\"button\" (click)=\"changePage(page+1)\"\n [class]=\"'sau-table-pagination-nav-button ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Página siguiente\">\n <sau-chevron-right-icon></sau-chevron-right-icon>\n </button>\n\n <!-- Botón ir al final -->\n <button type=\"button\" (click)=\"goToLastPage()\"\n [class]=\"'sau-table-pagination-nav-button-wide ' + (page == total[total.length-1]?'sau-table-pagination-nav-button-disabled':'sau-table-pagination-nav-button-enabled')\"\n title=\"Ir al final\">\n <sau-chevron-double-right-icon></sau-chevron-double-right-icon>\n </button>\n </div>\n </div>\n <!--------------------------------- 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 <span class=\"sau-icon sau-icon-crown\">\n <sau-crown-icon></sau-crown-icon>\n </span>\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 <span class=\"sau-icon sau-icon-check\">\n <sau-check-icon></sau-check-icon>\n </span>\n </div>\n } @else {\n <div class=\"sau-table-boolean-false\">\n <span class=\"sau-icon sau-icon-xmark\">\n <sau-xmark-icon></sau-xmark-icon>\n </span>\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 <span class=\"sau-icon sau-icon-envelope\">\n <sau-envelope-icon></sau-envelope-icon>\n </span>\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n <span class=\"sau-icon sau-icon-google\">\n <sau-google-icon></sau-google-icon>\n </span>\n </div>\n }\n\n </span>\n } @else {\n <div class=\"sau-table-login-inactive\">\n <span class=\"sau-icon sau-icon-xmark\">\n <sau-xmark-icon></sau-xmark-icon>\n </span>\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":";;;;;;;;MAmBa,wBAAwB,CAAA;uGAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdzB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAjBpC,SAAS;+BACE,uBAAuB,EAAA,UAAA,EACrB,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,wBAAwB,CAAA;uGAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdzB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAjBpC,SAAS;+BACE,uBAAuB,EAAA,UAAA,EACrB,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,yBAAyB,CAAA;uGAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAd1B;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAjBrC,SAAS;+BACE,wBAAwB,EAAA,UAAA,EACtB,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,8BAA8B,CAAA;uGAA9B,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA9B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAd/B;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAjB1C,SAAS;+BACE,8BAA8B,EAAA,UAAA,EAC5B,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,+BAA+B,CAAA;uGAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA/B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,+BAA+B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdhC;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAjB3C,SAAS;+BACE,+BAA+B,EAAA,UAAA,EAC7B,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,gBAAgB,CAAA;uGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdjB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAjB5B,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdnB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjB9B,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdnB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjB9B,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdnB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjB9B,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdnB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjB9B,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdnB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjB9B,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCUU,qBAAqB,CAAA;uGAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdtB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAjBjC,SAAS;+BACE,mBAAmB,EAAA,UAAA,EACjB,IAAI,EAAA,QAAA,EACN;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MCaU,mBAAmB,CAAA;uGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAjBpB;;;;;;;AAOT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,CAAA;;2FAUU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBApB/B,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,QAAA,EACN;;;;;;;AAOT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;;MC+BU,WAAW,CAAA;AAyDZ,IAAA,IAAA;AACA,IAAA,GAAA;AAzDD,IAAA,GAAG;AACH,IAAA,WAAW;AACX,IAAA,YAAY;IACZ,aAAa,GAAG,MAAM;IACtB,cAAc,GAAG,OAAO;IACxB,eAAe,GAAG,CAAC;IACnB,gBAAgB,GAAG,CAAC;IACpB,YAAY,GAAG,EAAE;AACjB,IAAA,OAAO;AACN,IAAA,SAAS,GAAG,IAAI,YAAY,EAAE;AAC9B,IAAA,WAAW,GAAG,IAAI,YAAY,EAAE;;AAGK,IAAA,kBAAkB;AAChB,IAAA,oBAAoB;;AAGrE,IAAA,IAAI,mBAAmB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ;IAChC;AAEA,IAAA,IAAI,qBAAqB,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ;IAClC;IAEA,OAAO,GAAG,KAAK;IAEN,KAAK,GAAQ,EAAE;IAExB,KAAK,GAAa,EAAE;IAEpB,IAAI,GAAG,CAAC;IAEC,KAAK,GAAG,EAAE;;AAGnB,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;AACpC,QAAA,IAAI,UAAU,IAAI,CAAC,EAAE;;YAEnB,OAAO,IAAI,CAAC,KAAK;QACnB;AAEA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI;AAC7B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC;AAC1C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,GAAG,CAAC,CAAC;QAEjD,MAAM,KAAK,GAAa,EAAE;AAC1B,QAAA,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;AACjC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QACf;AAEA,QAAA,OAAO,KAAK;IACd;IAEA,WAAA,CACU,IAAgB,EAChB,GAAsB,EAAA;QADtB,IAAA,CAAA,IAAI,GAAJ,IAAI;QACJ,IAAA,CAAA,GAAG,GAAH,GAAG;IACT;IAEJ,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,QAAQ,EAAE;QAEjB;AAAO,aAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;YAC5D,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC;QAErC;IACF;;IAGQ,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC,EAAE;YAC9B,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,gBAAgB;QAChD;AACA,QAAA,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB;IAC1C;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;AAEzB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,aAAa,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA,EAAI,IAAI,CAAC,cAAc,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,EAAE;AAE7F,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,SAAS,CAAC;AAC1C,YAAA,IAAI,EAAE,CAAC,IAAS,KAAI;gBAElB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;AAC9C,oBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;gBAC3C;qBAAO;oBACL,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;gBACzB;AAEA,gBAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,oBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;oBACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;wBAC7D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;oBACxB;gBACF;AAEA,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,gBAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;YAC3B,CAAC;AACD,YAAA,KAAK,EAAE,CAAC,KAAU,KAAI;AACpB,gBAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,GAAG,KAAK,CAAC;AAClD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,gBAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;YAC1B;AACD,SAAA,CAAC;IACJ;;IAGA,OAAO,GAAA;AACL,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;AAChB,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,EAAE;QACjB;IACF;AAEA,IAAA,OAAO,CAAC,OAAA,GAAkB,OAAO,EAAE,IAAS,EAAE,KAAwB,EAAA;QACpE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;QAC3C,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC;AAC9C,QAAA,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,UAAU,CAAC;QAE1E,OAAO;YACL,GAAG;YACH;SACD;IACH;IAEA,QAAQ,CAAC,IAAS,EAAE,GAAsB,EAAA;QAExC,IAAI,QAAQ,GAAG,EAAE;QAEjB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;AACvB,YAAA,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;QACpB;aAAO;AACL,YAAA,QAAQ,GAAG,GAAG,CAAC,KAAK,EAAE;QACxB;QAEA,IAAI,MAAM,GAAG,EAAE;AAEf,QAAA,OAAO,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAE1B,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;YACjC,IAAI,KAAK,GAAG,IAAI;YAEhB,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAC1B,gBAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;AAExC,gBAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,OAAY,KAAK,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;YAE3G;iBAAO;gBACL,IAAI,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAElC,IAAI,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;AACvC,gBAAA,IAAI,SAAS,GAAG,OAAO,UAAU,KAAK,SAAS;AAE/C,gBAAA,IAAI,OAAO,IAAI,SAAS,EAAE;AACxB,oBAAA,OAAO,UAAU;gBACnB;AAEA,gBAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBAC7C,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACxB;YACF;YAEA,QAAQ,CAAC,KAAK,EAAE;YAEhB,MAAM,IAAI,CAAC,KAAK,IAAI,EAAE,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;QAE5D;AAEA,QAAA,OAAO,MAAM;IACf;AAEA,IAAA,OAAO,CAAC,KAAU,EAAA;AAChB,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAC7B;AAEA,IAAA,UAAU,CAAC,IAAY,EAAA;AACrB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;QAChB,IAAI,CAAC,QAAQ,EAAE;IACjB;;IAGA,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QACpB;IACF;;IAGA,YAAY,GAAA;AACV,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;QAClC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,QAAQ,GAAG,CAAC,EAAE;AAC1C,YAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAC3B;IACF;AAEA,IAAA,eAAe,CAAC,EAAW,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;IACzB;AAEA,IAAA,iBAAiB,CAAC,EAAW,EAAA;AAC3B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;IAC3B;uGAjNW,WAAW,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,KAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,aAAA,EAAA,eAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3CxB,q3fA8X6F,EAAA,MAAA,EAAA,CAAA,u6aAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnVhF,WAAW,mQAlBpB,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAEZ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,wBAAwB,EAAA,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACxB,wBAAwB,EAAA,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACxB,yBAAyB,mEACzB,8BAA8B,EAAA,QAAA,EAAA,8BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC9B,+BAA+B,EAAA,QAAA,EAAA,+BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC/B,gBAAgB,EAAA,QAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,kBAAkB,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,kBAAkB,2DAClB,kBAAkB,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,kBAAkB,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,kBAAkB,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,qBAAqB,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACrB,mBAAmB,uDAdnB,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAiBC,WAAW,EAAA,UAAA,EAAA,CAAA;kBAxBvB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,aAAA,EAGN,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;wBACP,YAAY;wBACZ,QAAQ;wBACR,YAAY;wBACZ,wBAAwB;wBACxB,wBAAwB;wBACxB,yBAAyB;wBACzB,8BAA8B;wBAC9B,+BAA+B;wBAC/B,gBAAgB;wBAChB,kBAAkB;wBAClB,kBAAkB;wBAClB,kBAAkB;wBAClB,kBAAkB;wBAClB,kBAAkB;wBAClB,qBAAqB;wBACrB,mBAAmB;AACpB,qBAAA,EAAA,QAAA,EAAA,q3fAAA,EAAA,MAAA,EAAA,CAAA,u6aAAA,CAAA,EAAA;+GAGQ,GAAG,EAAA,CAAA;sBAAX;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACS,SAAS,EAAA,CAAA;sBAAlB;gBACS,WAAW,EAAA,CAAA;sBAApB;gBAG8C,kBAAkB,EAAA,CAAA;sBAAhE,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;gBACI,oBAAoB,EAAA,CAAA;sBAApE,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,cAAc,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;gBAatC,KAAK,EAAA,CAAA;sBAAb;gBAMQ,KAAK,EAAA,CAAA;sBAAb;;;AE7EH;;AAEG;;ACFH;;AAEG;;;;"}
1	+ {"version":3,"file":"some-angular-utils-table.mjs","sources":["../../../../projects/some-angular-utils/table/src/lib/icons/chevron-down-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/pen-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/trash-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/inbox-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/crown-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/check-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/xmark-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/envelope-icon.ts","../../../../projects/some-angular-utils/table/src/lib/icons/google-icon.ts","../../../../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 { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-chevron-down-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M12 15.5l-6-6h12l-6 6z\" />\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class ChevronDownIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-pen-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class PenIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-trash-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class TrashIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-inbox-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H5V5h14v10z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class InboxIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-crown-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M5 16L3 5l4.5 7L12 4l4.5 8L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1 3.7L12 9l-3.1 3.3-2.1-3.7L7.7 14z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class CrownIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-check-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class CheckIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-xmark-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.88-4.89c.39-.38.39-1.02.01-1.4z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class XmarkIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-envelope-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%; fill: currentColor;\">\n <path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class EnvelopeIconComponent {}","import { Component } from '@angular/core';\n\n@Component({\n selector: 'sau-google-icon',\n standalone: true,\n template: `\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%;\">\n <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" fill=\"#4285F4\"/>\n <path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\"/>\n <path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" fill=\"#FBBC05\"/>\n <path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\"/>\n </svg>\n `,\n styles: [`\n :host {\n display: inline-block;\n width: 1em;\n height: 1em;\n vertical-align: middle;\n }\n `]\n})\nexport class GoogleIconComponent {}","import { CommonModule, DatePipe } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation, ContentChild } from '@angular/core';\nimport { TemplateRef } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { SAUPaginatorModule } from '@some-angular-utils/paginator'\n\nimport { ChevronDownIconComponent } from './icons/chevron-down-icon';\nimport { PenIconComponent } from './icons/pen-icon';\nimport { TrashIconComponent } from './icons/trash-icon';\nimport { InboxIconComponent } from './icons/inbox-icon';\nimport { CrownIconComponent } from './icons/crown-icon';\nimport { CheckIconComponent } from './icons/check-icon';\nimport { XmarkIconComponent } from './icons/xmark-icon';\nimport { EnvelopeIconComponent } from './icons/envelope-icon';\nimport { GoogleIconComponent } from './icons/google-icon';\n\n@Component({\n selector: 'sau-table',\n templateUrl: './table.html',\n styleUrls: ['./table.scss'],\n encapsulation: ViewEncapsulation.None,\n imports: [\n RouterModule,\n DatePipe,\n CommonModule,\n SAUPaginatorModule,\n ChevronDownIconComponent,\n PenIconComponent,\n TrashIconComponent,\n InboxIconComponent,\n CrownIconComponent,\n CheckIconComponent,\n XmarkIconComponent,\n EnvelopeIconComponent,\n GoogleIconComponent,\n ]\n})\nexport class SAUTableModule {\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() fixedContent = []\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 // ContentChild para detectar cosas personalizadas\n @ContentChild('editButton', { static: false }) editButtonTemplate?: TemplateRef<any>;\n @ContentChild('deleteButton', { static: false }) deleteButtonTemplate?: TemplateRef<any>;\n\n // Getters para verificar si hay suscriptores\n get hasEditSubscription(): boolean {\n return this.editEvent.observed;\n }\n\n get hasDeleteSubscription(): boolean {\n return this.deleteEvent.observed;\n }\n\n loading = false\n\n @Input() items: any = [];\n\n total: number = 0\n\n page = 1\n\n @Input() limit = 10\n\n constructor(\n private http: HttpClient,\n private cdr: ChangeDetectorRef\n ) { }\n\n ngOnInit() {\n if (this.url) {\n this.getItems();\n\n } else if (this.fixedContent && this.fixedContent.length > 0) {\n this.items = [...this.fixedContent];\n\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 const total = []\n for (let i = 0; i < data[this.contentTotal] / this.limit; i++) {\n total.push(i + 1)\n }\n\n this.total = total.length\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 let isNumber = typeof finalValue === 'number'\n\n if (isArray \|\| isBoolean \|\| isNumber) {\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 clickEditButton(id?: number) {\n this.editEvent.emit(id)\n }\n\n clickDeleteButton(id?: number) {\n this.deleteEvent.emit(id);\n }\n\n onPageChange(newPage: number) {\n this.page = newPage;\n this.getItems()\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\"\n class=\"sau-table-toggle-input\">\n <label [for]=\"'toggle-table-' + $index\" class=\"sau-table-toggle-label\">\n <span class=\"sau-icon sau-icon-chevron-down\">\n <sau-chevron-down-icon></sau-chevron-down-icon>\n </span>\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(editButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasEditSubscription){\n <button class=\"sau-table-edit-button\" (click)=\"clickEditButton(item.id)\">\n <span class=\"sau-icon sau-icon-pen\">\n <sau-pen-icon></sau-pen-icon>\n </span>\n Editar\n </button>\n }\n\n @if(deleteButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasDeleteSubscription){\n <button class=\"sau-table-delete-button\"\n (click)=\"clickDeleteButton(item.id)\">\n <span class=\"sau-icon sau-icon-trash\">\n <sau-trash-icon></sau-trash-icon>\n </span>\n Eliminar\n </button>\n }\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\n @if(editButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"editButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasEditSubscription){\n <button class=\"sau-table-desktop-edit-button\" (click)=\"clickEditButton(item.id)\" title=\"Editar\">\n <span class=\"sau-icon sau-icon-pen\">\n <sau-pen-icon></sau-pen-icon>\n </span>\n </button>\n }\n\n @if(deleteButtonTemplate){\n <ng-container\n ngTemplateOutlet=\"deleteButtonTemplate; context: { $implicit: item }\"></ng-container>\n\n } @else if(hasDeleteSubscription){\n <button class=\"sau-table-desktop-delete-button\" (click)=\"clickDeleteButton(item.id)\"\n title=\"Eliminar\">\n <span class=\"sau-icon sau-icon-trash\">\n <sau-trash-icon></sau-trash-icon>\n </span>\n </button>\n }\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 <span class=\"sau-icon sau-icon-inbox\">\n <sau-inbox-icon></sau-inbox-icon>\n </span>\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 > 1) {\n\n <sau-paginator [totalPages]=\"total\" [currentPage]=\"page\" (pageChange)=\"onPageChange($event)\"></sau-paginator>\n\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 <span class=\"sau-icon sau-icon-crown\">\n <sau-crown-icon></sau-crown-icon>\n </span>\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 <span class=\"sau-icon sau-icon-check\">\n <sau-check-icon></sau-check-icon>\n </span>\n </div>\n } @else {\n <div class=\"sau-table-boolean-false\">\n <span class=\"sau-icon sau-icon-xmark\">\n <sau-xmark-icon></sau-xmark-icon>\n </span>\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 <span class=\"sau-icon sau-icon-envelope\">\n <sau-envelope-icon></sau-envelope-icon>\n </span>\n </div>\n }\n\n @if(item.google_id){\n <div [title]=\"item.google_id\" class=\"sau-table-login-google\">\n <span class=\"sau-icon sau-icon-google\">\n <sau-google-icon></sau-google-icon>\n </span>\n </div>\n }\n\n </span>\n } @else {\n <div class=\"sau-table-login-inactive\">\n <span class=\"sau-icon sau-icon-xmark\">\n <sau-xmark-icon></sau-xmark-icon>\n </span>\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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"}

package/package.json CHANGED Viewed

@@ -1,27 +1,36 @@
 {
   "name": "@some-angular-utils/table",
-  "version": "0.1.6",
-  "description": "Angular table utility library",
+  "version": "0.1.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/some-angular-utils/table.git"
   },
+  "description": "Angular table utility library",
+  "license": "MIT",
+  "homepage": "https://tanstack.com/table",
+  "keywords": [
+    "angular",
+    "table",
+    "angular-table",
+    "datagrid"
+  ],
   "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "@some-angular-utils/paginator": "^0.0.11"
   },
   "sideEffects": false,
   "module": "fesm2022/some-angular-utils-table.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/some-angular-utils-table.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/some-angular-utils-table.d.ts",
       "default": "./fesm2022/some-angular-utils-table.mjs"
     }
   }

package/{index.d.ts → types/some-angular-utils-table.d.ts} RENAMED Viewed

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { EventEmitter, TemplateRef, ChangeDetectorRef } from '@angular/core';
-declare class TableModule {
+declare class SAUTableModule {
     private http;
     private cdr;
     url?: string;
@@ -29,10 +29,9 @@ declare class TableModule {
     get hasDeleteSubscription(): boolean;
     loading: boolean;
     items: any;
-    total: number[];
+    total: number;
     page: number;
     limit: number;
-    get visiblePages(): number[];
     constructor(http: HttpClient, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     private getInternalPage;
@@ -44,13 +43,11 @@ declare class TableModule {
     };
     getValue(item: any, key: string | string[]): any;
     isArray(array: any): boolean;
-    changePage(page: number): void;
-    goToFirstPage(): void;
-    goToLastPage(): void;
     clickEditButton(id?: number): void;
     clickDeleteButton(id?: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TableModule, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableModule, "sau-table", never, { "url": { "alias": "url"; "required": false; }; "contentList": { "alias": "contentList"; "required": false; }; "contentTotal": { "alias": "contentTotal"; "required": false; }; "pageParamName": { "alias": "pageParamName"; "required": false; }; "limitParamName": { "alias": "limitParamName"; "required": false; }; "sizeInitialPage": { "alias": "sizeInitialPage"; "required": false; }; "sizeBetweenPages": { "alias": "sizeBetweenPages"; "required": false; }; "fixedContent": { "alias": "fixedContent"; "required": false; }; "headers": { "alias": "headers"; "required": false; }; "items": { "alias": "items"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; }, { "editEvent": "editEvent"; "deleteEvent": "deleteEvent"; }, ["editButtonTemplate", "deleteButtonTemplate"], never, true, never>;
+    onPageChange(newPage: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SAUTableModule, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SAUTableModule, "sau-table", never, { "url": { "alias": "url"; "required": false; }; "contentList": { "alias": "contentList"; "required": false; }; "contentTotal": { "alias": "contentTotal"; "required": false; }; "pageParamName": { "alias": "pageParamName"; "required": false; }; "limitParamName": { "alias": "limitParamName"; "required": false; }; "sizeInitialPage": { "alias": "sizeInitialPage"; "required": false; }; "sizeBetweenPages": { "alias": "sizeBetweenPages"; "required": false; }; "fixedContent": { "alias": "fixedContent"; "required": false; }; "headers": { "alias": "headers"; "required": false; }; "items": { "alias": "items"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; }, { "editEvent": "editEvent"; "deleteEvent": "deleteEvent"; }, ["editButtonTemplate", "deleteButtonTemplate"], never, true, never>;
 }
-export { TableModule };
+export { SAUTableModule };