ngx-eiffage-material 0.0.50 → 0.1.1

package/fesm2022/ngx-eiffage-material.mjs

@@ -1,58 +1,58 @@
 import * as i0 from '@angular/core';
-import { input, Component, inject, ChangeDetectorRef, signal, viewChild, afterRenderEffect, effect, untracked, forwardRef, output, ViewContainerRef, Directive, Injectable, Pipe, InjectionToken, computed, Optional, HostListener, DestroyRef, ViewEncapsulation, booleanAttribute, PLATFORM_ID } from '@angular/core';
+import { input, Component, inject, ChangeDetectorRef, signal, viewChild, computed, afterRenderEffect, effect, untracked, forwardRef, Injectable, output, ChangeDetectionStrategy, ViewContainerRef, Directive, Pipe, InjectionToken, PLATFORM_ID, HostListener, DestroyRef, ViewEncapsulation, booleanAttribute } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3$1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
-import * as i4$1 from '@angular/common';
-import { CommonModule, DatePipe, LowerCasePipe, isPlatformBrowser } from '@angular/common';
-import * as i2$2 from '@angular/material/chips';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NgControl, Validators, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
+import * as i11 from '@angular/common';
+import { CommonModule, DatePipe, isPlatformBrowser, LowerCasePipe } from '@angular/common';
+import * as i2$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i8 from '@angular/material/progress-bar';
+import * as i6 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i5 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/select';
+import { takeUntilDestroyed, toSignal, rxResource, toObservable } from '@angular/core/rxjs-interop';
+import * as i3$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import { Subject, fromEvent, startWith, map, takeUntil, catchError, of, merge, skip, debounceTime, distinctUntilChanged } from 'rxjs';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
-import * as i1$1 from '@angular/material/divider';
+import * as i1$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import { Subject, fromEvent, startWith, map, takeUntil, merge, skip, debounceTime, distinctUntilChanged } from 'rxjs';
-import * as i15 from '@angular/material/checkbox';
+import * as i14 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i11 from '@angular/material/datepicker';
+import * as i10 from '@angular/material/datepicker';
 import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
-import * as i13 from '@angular/material/menu';
+import * as i12 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4$3 from '@angular/material/paginator';
+import * as i3$4 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i3$3 from '@angular/material/sort';
+import * as i2$2 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
-import * as i2$3 from '@angular/material/table';
+import * as i1$3 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { toSignal, rxResource, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import jsPDF from 'jspdf';
 import autoTable from 'jspdf-autotable';
 import { utils, writeFileXLSX } from 'xlsx';
 import { v4 } from 'uuid';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import moment from 'moment';
-import * as i3$2 from '@angular/material/slide-toggle';
+import * as i3$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i4$2 from '@angular/material/button-toggle';
+import * as i4$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA, MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i5$1 from '@angular/material/core';
+import * as i4$2 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import { MatBadgeModule } from '@angular/material/badge';
 
@@ -85,7 +85,12 @@ class NgxInputFile {
     onChangeCb;
     onTouchCb;
     label = input('Seleccionar archivo', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    /**
+     * FormControl externo. Es opcional: si el componente se usa con
+     * `formControlName` / `[formControl]`, el enlace se hace por
+     * ControlValueAccessor y no hace falta pasarlo.
+     */
+    control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     placeholder = input('Haz click o arrastra archivos aquí', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
@@ -96,22 +101,32 @@ class NgxInputFile {
     isDropping = signal(false, ...(ngDevMode ? [{ debugName: "isDropping" }] : []));
     inputFileRef = viewChild('inputFileRef', ...(ngDevMode ? [{ debugName: "inputFileRef" }] : []));
     internalControl = new FormControl([]);
+    /** Estado deshabilitado que llega desde setDisabledState() (reactive forms). */
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
+    /** Estado deshabilitado efectivo: input `disabled` o el del FormControl padre. */
+    isDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     constructor() {
         afterRenderEffect(() => {
-            const disabled = this.disabled();
-            if (disabled && this.control().enabled) {
-                this.control().disable({ emitEvent: false });
-                this.internalControl.disable({ emitEvent: false });
+            const disabled = this.isDisabled();
+            const control = this.control();
+            if (disabled) {
+                if (control?.enabled)
+                    control.disable({ emitEvent: false });
+                if (this.internalControl.enabled)
+                    this.internalControl.disable({ emitEvent: false });
             }
-            else if (!disabled && this.control().disabled) {
-                this.control().enable({ emitEvent: false });
-                this.internalControl.enable({ emitEvent: false });
+            else {
+                if (control?.disabled)
+                    control.enable({ emitEvent: false });
+                if (this.internalControl.disabled)
+                    this.internalControl.enable({ emitEvent: false });
             }
         });
     }
     checkErrors() {
-        if (this.control().invalid) {
-            this.internalControl.setErrors(this.control().errors);
+        const control = this.control();
+        if (control?.invalid) {
+            this.internalControl.setErrors(control.errors);
         }
         else {
             this.internalControl.setErrors(null);
@@ -122,7 +137,7 @@ class NgxInputFile {
         const value = this.value();
         // Usar untracked para evitar ciclos y emitEvent: false para no disparar eventos
         untracked(() => {
-            this.control().setValue(value, { emitEvent: false });
+            this.control()?.setValue(value, { emitEvent: false });
             // Actualizar el control interno con strings (nombres de archivo)
             const fileNames = value.map(f => f.name);
             this.internalControl.setValue(fileNames, { emitEvent: false });
@@ -131,15 +146,14 @@ class NgxInputFile {
         });
     }, ...(ngDevMode ? [{ debugName: "controlEffect" }] : []));
     ngOnInit() {
-        if (this.disabled()) {
-            this.control().disable();
+        if (this.isDisabled()) {
+            this.control()?.disable();
             this.internalControl.disable();
         }
     }
     onContainerClick() {
-        if (!this.disabled()) {
-            this.control().markAsTouched();
-            this.internalControl.markAsTouched();
+        if (!this.isDisabled()) {
+            this.markAsTouched();
             this.checkErrors();
             this._cdr.markForCheck();
             this.onTouchCb?.();
@@ -154,7 +168,8 @@ class NgxInputFile {
     }
     onDragOver(event) {
         event.preventDefault();
-        this.isDropping.set(true);
+        if (!this.isDisabled())
+            this.isDropping.set(true);
     }
     onDragLeave(event) {
         event.preventDefault();
@@ -163,10 +178,9 @@ class NgxInputFile {
     onDrop(event) {
         event.preventDefault();
         this.isDropping.set(false);
-        this.onTouchCb?.();
-        if (!this.disabled()) {
+        if (!this.isDisabled()) {
+            this.onTouchCb?.();
             const files = event.dataTransfer?.files;
-            // const validation = validateFiles(files, this.accept());
             this.attachFiles(files);
         }
     }
@@ -183,10 +197,8 @@ class NgxInputFile {
             }
             this.value.set(newValue);
             this.onChangeCb?.(newValue);
-            this.control().markAsTouched();
-            this.internalControl.markAsTouched();
-            this.control().markAsDirty();
-            this.internalControl.markAsDirty();
+            this.markAsTouched();
+            this.markAsDirty();
         }
     }
     writeValue(files) {
@@ -198,14 +210,15 @@ class NgxInputFile {
     registerOnTouched(fn) {
         this.onTouchCb = fn;
     }
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
     onDeleteFileClick(file) {
         const newValue = this.value().filter((item) => item !== file);
         this.value.set(newValue);
         this.onChangeCb?.(newValue);
-        this.control().markAsTouched();
-        this.internalControl.markAsTouched();
-        this.control().markAsDirty();
-        this.internalControl.markAsDirty();
+        this.markAsTouched();
+        this.markAsDirty();
     }
     getAccept() {
         return this.accept().join();
@@ -213,14 +226,22 @@ class NgxInputFile {
     bytesToMegaBytes(bytes) {
         return (bytes / 1024 / 1024).toFixed(1);
     }
+    markAsTouched() {
+        this.control()?.markAsTouched();
+        this.internalControl.markAsTouched();
+    }
+    markAsDirty() {
+        this.control()?.markAsDirty();
+        this.internalControl.markAsDirty();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxInputFile, isStandalone: true, selector: "ngx-input-file", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxInputFile, isStandalone: true, selector: "ngx-input-file", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxInputFile),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\"\r\n  (click)=\"onContainerClick()\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDropping()\"\r\n>\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <mat-chip-grid \r\n    #chipGrid \r\n    [formControl]=\"internalControl\"\r\n    class=\"chips-grid\"\r\n  >\r\n    @for(file of value(); track file.name + $index) {\r\n      <mat-chip-row\r\n        (removed)=\"onDeleteFileClick(file)\"\r\n        class=\"chip-item\"\r\n        [title]=\"file.name\"\r\n      >\r\n        <div class=\"chip-content\">\r\n          <span class=\"chip-label\">\r\n            ({{ bytesToMegaBytes(file.size) }} MB) {{ file.name }}\r\n          </span>\r\n        </div>\r\n        <button matChipRemove [attr.aria-label]=\"'Eliminar ' + file.name\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input \r\n    #inputFileRef\r\n    type=\"file\"\r\n    [accept]=\"getAccept()\" \r\n    [multiple]=\"multiple()\" \r\n    (change)=\"onInputchange($event)\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    style=\"display: none\"\r\n  />  \r\n  <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }] });
+        ], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\"\r\n  (click)=\"onContainerClick()\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDropping()\"\r\n>\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <mat-chip-grid \r\n    #chipGrid \r\n    [formControl]=\"internalControl\"\r\n    class=\"chips-grid\"\r\n  >\r\n    @for(file of value(); track file.name + $index) {\r\n      <mat-chip-row\r\n        (removed)=\"onDeleteFileClick(file)\"\r\n        class=\"chip-item\"\r\n        [title]=\"file.name\"\r\n      >\r\n        <div class=\"chip-content\">\r\n          <span class=\"chip-label\">\r\n            ({{ bytesToMegaBytes(file.size) }} MB) {{ file.name }}\r\n          </span>\r\n        </div>\r\n        <button matChipRemove [attr.aria-label]=\"'Eliminar ' + file.name\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input \r\n    #inputFileRef\r\n    type=\"file\"\r\n    [accept]=\"getAccept()\" \r\n    [multiple]=\"multiple()\" \r\n    (change)=\"onInputchange($event)\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    style=\"display: none\"\r\n  />  \r\n  <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, decorators: [{
             type: Component,
@@ -241,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             multi: true,
                         },
                     ], template: "<mat-form-field\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\"\r\n  (click)=\"onContainerClick()\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDropping()\"\r\n>\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <mat-chip-grid \r\n    #chipGrid \r\n    [formControl]=\"internalControl\"\r\n    class=\"chips-grid\"\r\n  >\r\n    @for(file of value(); track file.name + $index) {\r\n      <mat-chip-row\r\n        (removed)=\"onDeleteFileClick(file)\"\r\n        class=\"chip-item\"\r\n        [title]=\"file.name\"\r\n      >\r\n        <div class=\"chip-content\">\r\n          <span class=\"chip-label\">\r\n            ({{ bytesToMegaBytes(file.size) }} MB) {{ file.name }}\r\n          </span>\r\n        </div>\r\n        <button matChipRemove [attr.aria-label]=\"'Eliminar ' + file.name\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input \r\n    #inputFileRef\r\n    type=\"file\"\r\n    [accept]=\"getAccept()\" \r\n    [multiple]=\"multiple()\" \r\n    (change)=\"onInputchange($event)\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    style=\"display: none\"\r\n  />  \r\n  <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], inputFileRef: [{ type: i0.ViewChild, args: ['inputFileRef', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], inputFileRef: [{ type: i0.ViewChild, args: ['inputFileRef', { isSignal: true }] }] } });
 
 const includeNoSensible = (cadena, query) => {
     const nomalizadoCadena = cadena
@@ -263,174 +284,6 @@ const base64ToUtf8 = (str) => {
         .join(''));
 };
 
-class NgxBasicSelect {
-    //inputs
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
-    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
-    basicSelectConfig = input.required(...(ngDevMode ? [{ debugName: "basicSelectConfig" }] : []));
-    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
-    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    subscriptSizing = input('fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
-    appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
-    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    //outputs
-    selectionChange = output();
-    //viewChilds
-    matSelect = viewChild.required('matSelect');
-    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
-    constructor() {
-        afterRenderEffect(() => {
-            const disabled = this.disabled();
-            const control = this.control();
-            if (disabled && control.enabled) {
-                control.disable({ emitEvent: false });
-            }
-            else if (!disabled && control.disabled) {
-                control.enable({ emitEvent: false });
-            }
-        });
-    }
-    onOpenedChange(opened) {
-        if (opened) {
-            this.onClearInputClick();
-            setTimeout(() => {
-                const panel = this.matSelect().panel?.nativeElement;
-                if (panel) {
-                    panel.scrollTop = 0;
-                }
-            });
-        }
-    }
-    includeInFilter(option, query) {
-        return includeNoSensible(String(this.basicSelectConfig().displayedLabel(option)), query);
-    }
-    onClearClick() {
-        const newValue = this.multiple() ? [] : null;
-        this.control().setValue(newValue, { emitEvent: true });
-        this.control().markAsTouched();
-        this.control().updateValueAndValidity();
-        this.selectionChange.emit(newValue);
-    }
-    onSelectionChange(event) {
-        if (this.multiple()) {
-            const values = event.value;
-            this.selectionChange.emit(values);
-        }
-        else {
-            const value = event.value;
-            this.selectionChange.emit(value);
-        }
-    }
-    onClearInputClick() {
-        const searchInputRef = this.searchInput();
-        if (searchInputRef) {
-            searchInputRef.nativeElement.value = '';
-            searchInputRef.nativeElement.focus();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select \n        #matSelect\n        [formControl]=\"control()\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(!isLoading()) {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input \n                    matInput\n                    #searchInput \n                    type=\"text\"\n                    (keydown)=\"$event.stopPropagation()\"\n                />\n                <button matIconButton (click)=\"onClearInputClick(); searchInput.value = ''\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            @for(option of options(); track option[basicSelectConfig().valueKey]) {\n                <mat-option \n                    [value]=\"option[basicSelectConfig().valueKey]\" \n                    [disabled]=\"basicSelectConfig().disabled ? basicSelectConfig().disabled?.(option) : false\"\n                    [style]=\"{ display: includeInFilter(option, searchInput.value) ? 'flex' : 'none' }\"\n                >   \n                    {{ basicSelectConfig().displayedLabel(option) }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? control().value?.length : control().value)) {\n        <mat-icon matSuffix (click)=\"onClearClick(); $event.stopPropagation()\">close</mat-icon>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--background-color);z-index:10;border-bottom:1px solid var(--accent-3)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}button{position:absolute;right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-basic-select', imports: [
-                        MatInputModule,
-                        MatSelectModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatProgressSpinnerModule,
-                    ], template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select \n        #matSelect\n        [formControl]=\"control()\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(!isLoading()) {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input \n                    matInput\n                    #searchInput \n                    type=\"text\"\n                    (keydown)=\"$event.stopPropagation()\"\n                />\n                <button matIconButton (click)=\"onClearInputClick(); searchInput.value = ''\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            @for(option of options(); track option[basicSelectConfig().valueKey]) {\n                <mat-option \n                    [value]=\"option[basicSelectConfig().valueKey]\" \n                    [disabled]=\"basicSelectConfig().disabled ? basicSelectConfig().disabled?.(option) : false\"\n                    [style]=\"{ display: includeInFilter(option, searchInput.value) ? 'flex' : 'none' }\"\n                >   \n                    {{ basicSelectConfig().displayedLabel(option) }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? control().value?.length : control().value)) {\n        <mat-icon matSuffix (click)=\"onClearClick(); $event.stopPropagation()\">close</mat-icon>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--background-color);z-index:10;border-bottom:1px solid var(--accent-3)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}button{position:absolute;right:5px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], basicSelectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "basicSelectConfig", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
-
-var DialogBodyType;
-(function (DialogBodyType) {
-    DialogBodyType["TEXT"] = "text";
-    DialogBodyType["HTML"] = "html";
-    DialogBodyType["COMPONENT"] = "component";
-    DialogBodyType["TEMPLATE"] = "template";
-})(DialogBodyType || (DialogBodyType = {}));
-
-class DynamicHostDirective {
-    _vcr = inject(ViewContainerRef);
-    _currentRef = null;
-    component = input(...(ngDevMode ? [undefined, { debugName: "component" }] : []));
-    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
-    constructor() {
-        effect(() => {
-            const componentType = this.component();
-            // 1. Gestión de la creación/destrucción del componente
-            if (!componentType) {
-                this._vcr.clear();
-                this._currentRef = null;
-                return;
-            }
-            // Si el componente es diferente al que tenemos, lo recreamos
-            if (this._currentRef?.componentType !== componentType) {
-                this._vcr.clear();
-                this._currentRef = this._vcr.createComponent(componentType);
-            }
-            // 2. Actualización de datos (siempre, tanto si es nuevo como si ya existía)
-            const data = this.data();
-            if (this._currentRef && data !== undefined) {
-                // La forma correcta de setear un input en Angular moderno
-                this._currentRef.setInput('data', data);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: DynamicHostDirective, isStandalone: true, selector: "[ngxDynamicHost]", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHostDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxDynamicHost]'
-                }]
-        }], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
-
-class NgxDialog {
-    //dependencies injection
-    _dialogRef = inject((MatDialogRef));
-    _data = inject(MAT_DIALOG_DATA);
-    title = this._data.title;
-    icon = this._data.icon;
-    iconColor = this._data.iconColor;
-    subtitle = this._data.subtitle;
-    body = this._data.body;
-    showCancel = this._data.showCancel ?? true;
-    showConfirm = this._data.showConfirm ?? true;
-    cancelText = this._data.cancelText ?? 'Cancelar';
-    confirmText = this._data.confirmText ?? 'Aceptar';
-    DialogBodyType = DialogBodyType;
-    onCancelClick() {
-        this._dialogRef.close(false);
-    }
-    onConfirmClick() {
-        this._dialogRef.close(true);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", ngImport: i0, template: "<h2 mat-dialog-title class=\"title\">\r\n    {{ title }}\r\n    @if(icon) {\r\n        <mat-icon \r\n            [style.color]=\"iconColor\"\r\n            class=\"icon\"\r\n        >\r\n            {{ icon }}\r\n        </mat-icon>\r\n    }\r\n</h2>\r\n<mat-dialog-content>\r\n    @if(subtitle) {\r\n        <p class=\"subtitle\">{{ subtitle }}</p>\r\n        <mat-divider />\r\n    }\r\n\r\n    <div class=\"content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p>{{ body.content }}</p>\r\n            }\r\n            @case (DialogBodyType.HTML) {\r\n                <div [innerHTML]=\"body.content\"></div>\r\n            }\r\n            @case (DialogBodyType.COMPONENT) {\r\n                <ng-container \r\n                    ngxDynamicHost \r\n                    [component]=\"$any(body.content)\"\r\n                    [data]=\"body.data\"\r\n                />\r\n            }\r\n            @case (DialogBodyType.TEMPLATE) {\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"$any(body.content)\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n    @if(showCancel) {\r\n        <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n            {{ cancelText }}\r\n        </button>\r\n    }\r\n    @if(showConfirm) {\r\n        <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n            {{ confirmText }}\r\n        </button>\r\n    }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-dialog', imports: [
-                        MatDialogTitle,
-                        MatDialogContent,
-                        MatDialogActions,
-                        MatDividerModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        CommonModule,
-                        DynamicHostDirective
-                    ], template: "<h2 mat-dialog-title class=\"title\">\r\n    {{ title }}\r\n    @if(icon) {\r\n        <mat-icon \r\n            [style.color]=\"iconColor\"\r\n            class=\"icon\"\r\n        >\r\n            {{ icon }}\r\n        </mat-icon>\r\n    }\r\n</h2>\r\n<mat-dialog-content>\r\n    @if(subtitle) {\r\n        <p class=\"subtitle\">{{ subtitle }}</p>\r\n        <mat-divider />\r\n    }\r\n\r\n    <div class=\"content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p>{{ body.content }}</p>\r\n            }\r\n            @case (DialogBodyType.HTML) {\r\n                <div [innerHTML]=\"body.content\"></div>\r\n            }\r\n            @case (DialogBodyType.COMPONENT) {\r\n                <ng-container \r\n                    ngxDynamicHost \r\n                    [component]=\"$any(body.content)\"\r\n                    [data]=\"body.data\"\r\n                />\r\n            }\r\n            @case (DialogBodyType.TEMPLATE) {\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"$any(body.content)\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n    @if(showCancel) {\r\n        <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n            {{ cancelText }}\r\n        </button>\r\n    }\r\n    @if(showConfirm) {\r\n        <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n            {{ confirmText }}\r\n        </button>\r\n    }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"] }]
-        }] });
-
 class NgxTablesIntl {
     /**
      * Stream que emite cuando las etiquetas cambian.
@@ -624,6 +477,29 @@ class NgxTablesIntl {
     /** Etiqueta del botón de ver más resultados */
     showMoreLabel = 'Ver más';
     // ========================================
+    // === NGX-PAGINATED-SELECT ===
+    // ========================================
+    /** Botón de confirmar selección (modo múltiple) */
+    paginatedSelectConfirmLabel = 'Confirmar';
+    /** Botón de limpiar selección (modo múltiple) */
+    paginatedSelectResetLabel = 'Limpiar';
+    /** Etiqueta del toggle "Seleccionar todo" */
+    paginatedSelectSelectAllLabel = 'Seleccionar todo';
+    /** Fila "cargando más…" al paginar por scroll */
+    paginatedSelectLoadingMoreLabel = 'Cargando más…';
+    /** Fila de fin de lista cuando ya no quedan más resultados */
+    paginatedSelectEndOfListLabel = 'No hay más resultados';
+    /** Ayuda bajo el mensaje de "sin resultados" cuando hay búsqueda activa */
+    paginatedSelectNoResultsHint = 'Prueba con otro término de búsqueda';
+    /** Botón para limpiar la búsqueda desde el estado vacío */
+    paginatedSelectClearSearchLabel = 'Limpiar búsqueda';
+    /** Título del estado de error al fallar la carga */
+    paginatedSelectErrorTitle = 'No se pudieron cargar los datos';
+    /** Ayuda del estado de error */
+    paginatedSelectErrorHint = 'Revisa tu conexión e inténtalo de nuevo';
+    /** Botón de reintentar la carga */
+    paginatedSelectRetryLabel = 'Reintentar';
+    // ========================================
     // === FUNCIONES AUXILIARES ===
     // ========================================
     /**
@@ -673,6 +549,27 @@ class NgxTablesIntl {
     getRemoveOptionText(optionName) {
         return `-- Quitar ${optionName} --`;
     }
+    /**
+     * Mensaje anunciado por lectores de pantalla (aria-live) con el número de
+     * resultados tras filtrar en un select buscable.
+     * @param count Número de resultados visibles
+     */
+    getSearchResultsCountMessage(count) {
+        return count === 1 ? '1 resultado' : `${count} resultados`;
+    }
+    /**
+     * Footer del ngx-paginated-select en modo múltiple: elementos seleccionados
+     * sobre el total disponible.
+     */
+    getPaginatedSelectSelectedCountLabel(selected, total) {
+        return `${selected} de ${total} seleccionados`;
+    }
+    /**
+     * Footer del ngx-paginated-select en modo simple: número total de resultados.
+     */
+    getPaginatedSelectResultsCountLabel(total) {
+        return total === 1 ? '1 resultado' : `${total} resultados`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTablesIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTablesIntl, providedIn: 'root' });
 }
@@ -681,12 +578,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Teclas que deben llegar al mat-select para navegar/seleccionar desde el buscador. */
+const NAVIGATION_KEYS = new Set([
+    'ArrowDown',
+    'ArrowUp',
+    'Enter',
+    'Escape',
+    'Home',
+    'End',
+    'Tab',
+]);
+class NgxBasicSelect {
+    // Servicio de internacionalización (placeholder del buscador, mensajes de estado…)
+    intl = inject(NgxTablesIntl);
+    /**
+     * Se auto-registra como ControlValueAccessor del control del formulario.
+     * Se usa `self`/`optional` para poder leer el estado de validación (invalid/touched)
+     * y para no fallar cuando el componente se usa sin formulario.
+     */
+    _ngControl = inject(NgControl, { self: true, optional: true });
+    // ─── Inputs ──────────────────────────────────────────────────────────────
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    basicSelectConfig = input.required(...(ngDevMode ? [{ debugName: "basicSelectConfig" }] : []));
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    subscriptSizing = input('fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
+    appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // ─── Outputs ─────────────────────────────────────────────────────────────
+    /** Emite el/los valor(es) de `valueKey` al cambiar la selección. */
+    selectionChange = output();
+    // ─── ViewChilds ──────────────────────────────────────────────────────────
+    matSelect = viewChild.required('matSelect');
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    // ─── Estado interno ──────────────────────────────────────────────────────
+    /** FormControl interno que gobierna el mat-select (independiente del control del form). */
+    innerControl = new FormControl(null);
+    /** Copia del valor como signal, para leerlo reactivamente en plantilla (OnPush). */
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Deshabilitado que llega vía setDisabledState (reactive forms). */
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    /** Estado del buscador (signal, no el DOM, para funcionar en zoneless). */
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** Deshabilitado efectivo: input `disabled` o el que llega del formulario. */
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /**
+     * Opciones resueltas y marcadas con `visible` según el buscador. Las no visibles
+     * NO se quitan del DOM (se ocultan con display:none) para que el mat-select siga
+     * pudiendo pintar la etiqueta del valor seleccionado aunque esté filtrado.
+     */
+    resolvedOptions = computed(() => {
+        const query = this.searchQuery();
+        const options = this.options();
+        const config = this.basicSelectConfig();
+        return options.map(option => {
+            const label = String(config.displayedLabel(option));
+            return {
+                value: option[config.valueKey],
+                label,
+                disabled: config.disabled ? config.disabled(option) : false,
+                visible: includeNoSensible(label, query),
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : []));
+    /** Hay datos de entrada (con independencia del buscador). */
+    hasData = computed(() => this.resolvedOptions().length > 0, ...(ngDevMode ? [{ debugName: "hasData" }] : []));
+    /**
+     * Opciones que se renderizan realmente: las que casan con el buscador MÁS las que
+     * estén seleccionadas (aunque no casen). Se quitan del DOM las que no casan para que
+     * el ListKeyManager de mat-select no las pueda enfocar con las flechas —marcarlas
+     * `disabled` no basta: con el panel abierto Material permite enfocar deshabilitadas
+     * (recomendación WAI-ARIA)—. Las seleccionadas se conservan para que el trigger
+     * pueda pintar su etiqueta y no se pierda el valor al filtrar.
+     */
+    displayedOptions = computed(() => {
+        const value = this.value();
+        const selected = new Set(Array.isArray(value) ? value : (value != null ? [value] : []));
+        return this.resolvedOptions().filter(o => o.visible || selected.has(o.value));
+    }, ...(ngDevMode ? [{ debugName: "displayedOptions" }] : []));
+    /** No hay ninguna opción que mostrar (ni coincidencia ni seleccionada). */
+    showNoOptionsMessage = computed(() => this.displayedOptions().length === 0, ...(ngDevMode ? [{ debugName: "showNoOptionsMessage" }] : []));
+    /** Mensaje aria-live con el recuento de resultados al filtrar. */
+    searchAnnouncement = computed(() => {
+        const query = this.searchQuery();
+        if (!query)
+            return '';
+        const count = this.resolvedOptions().filter(o => o.visible).length;
+        return this.intl.getSearchResultsCountMessage(count);
+    }, ...(ngDevMode ? [{ debugName: "searchAnnouncement" }] : []));
+    /** ErrorStateMatcher que refleja el estado del control del formulario. */
+    errorStateMatcher = {
+        isErrorState: () => !!(this._ngControl?.invalid && this._ngControl?.touched),
+    };
+    constructor() {
+        // Auto-registro como CVA (evita el provider NG_VALUE_ACCESSOR y su DI circular).
+        if (this._ngControl)
+            this._ngControl.valueAccessor = this;
+        // Sincroniza el deshabilitado efectivo con el control interno.
+        afterRenderEffect(() => {
+            const disabled = this.isDisabled();
+            if (disabled && this.innerControl.enabled)
+                this.innerControl.disable({ emitEvent: false });
+            else if (!disabled && this.innerControl.disabled)
+                this.innerControl.enable({ emitEvent: false });
+        });
+        // Propaga los cambios del control interno al formulario, al output y al signal de valor.
+        this.innerControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(value => {
+            this.value.set(value);
+            this.onChange(value);
+            this.selectionChange.emit(value);
+        });
+    }
+    // ─── ControlValueAccessor ─────────────────────────────────────────────────
+    writeValue(value) {
+        this.innerControl.setValue(value, { emitEvent: false });
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ─── Interacción ──────────────────────────────────────────────────────────
+    onOpenedChange(opened) {
+        if (opened) {
+            this.searchQuery.set('');
+            setTimeout(() => {
+                this.searchInput()?.nativeElement.focus();
+                const panel = this.matSelect().panel?.nativeElement;
+                if (panel)
+                    panel.scrollTop = 0;
+            });
+        }
+        else {
+            // Al cerrar marcamos como tocado para que salte la validación
+            this.onTouched();
+            this._ngControl?.control?.markAsTouched();
+        }
+    }
+    onSearchInput(value) {
+        this.searchQuery.set(value);
+    }
+    /**
+     * Deja pasar al mat-select las teclas de navegación (flechas, Enter, Escape…) para
+     * poder moverse por la lista sin salir del buscador, y detiene las de carácter para
+     * que no disparen el typeahead nativo del mat-select.
+     */
+    onSearchKeydown(event) {
+        if (!NAVIGATION_KEYS.has(event.key))
+            event.stopPropagation();
+    }
+    clearSearch() {
+        this.searchQuery.set('');
+        this.searchInput()?.nativeElement.focus();
+    }
+    onClearClick() {
+        const newValue = this.multiple() ? [] : null;
+        this.innerControl.setValue(newValue); // emite → onChange + output + signal
+        this.innerControl.markAsTouched();
+        this._ngControl?.control?.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n        #matSelect\n        [formControl]=\"innerControl\"\n        [errorStateMatcher]=\"errorStateMatcher\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(isLoading()) {\n            <!--\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n                panel abre tambien durante la carga y se ve el indicador.\n            -->\n            <mat-option disabled class=\"stateOption loadingOption\">\n                <mat-spinner diameter=\"18\" />\n                <span>{{ intl.loadingMessage }}</span>\n            </mat-option>\n        } @else {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input\n                    matInput\n                    #searchInput\n                    type=\"text\"\n                    [attr.aria-label]=\"intl.searchPlaceholder\"\n                    [placeholder]=\"intl.searchPlaceholder\"\n                    [value]=\"searchQuery()\"\n                    (input)=\"onSearchInput($any($event.target).value)\"\n                    (keydown)=\"onSearchKeydown($event)\"\n                />\n                <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            <!--\n                Solo se renderizan las opciones que casan con el buscador (mas las\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n            -->\n            @for(option of displayedOptions(); track option.value) {\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                    {{ option.label }}\n                </mat-option>\n            }\n            @if(showNoOptionsMessage()) {\n                <mat-option disabled class=\"stateOption noResults\">\n                    {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\n        <button\n            matIconButton\n            matSuffix\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"onClearClick(); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.loadingOption{display:flex;align-items:center;gap:8px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-basic-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatInputModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                    ], template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n        #matSelect\n        [formControl]=\"innerControl\"\n        [errorStateMatcher]=\"errorStateMatcher\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(isLoading()) {\n            <!--\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n                panel abre tambien durante la carga y se ve el indicador.\n            -->\n            <mat-option disabled class=\"stateOption loadingOption\">\n                <mat-spinner diameter=\"18\" />\n                <span>{{ intl.loadingMessage }}</span>\n            </mat-option>\n        } @else {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input\n                    matInput\n                    #searchInput\n                    type=\"text\"\n                    [attr.aria-label]=\"intl.searchPlaceholder\"\n                    [placeholder]=\"intl.searchPlaceholder\"\n                    [value]=\"searchQuery()\"\n                    (input)=\"onSearchInput($any($event.target).value)\"\n                    (keydown)=\"onSearchKeydown($event)\"\n                />\n                <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            <!--\n                Solo se renderizan las opciones que casan con el buscador (mas las\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n            -->\n            @for(option of displayedOptions(); track option.value) {\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                    {{ option.label }}\n                </mat-option>\n            }\n            @if(showNoOptionsMessage()) {\n                <mat-option disabled class=\"stateOption noResults\">\n                    {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\n        <button\n            matIconButton\n            matSuffix\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"onClearClick(); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.loadingOption{display:flex;align-items:center;gap:8px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], basicSelectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "basicSelectConfig", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+var DialogBodyType;
+(function (DialogBodyType) {
+    DialogBodyType["TEXT"] = "text";
+    DialogBodyType["HTML"] = "html";
+    DialogBodyType["COMPONENT"] = "component";
+    DialogBodyType["TEMPLATE"] = "template";
+})(DialogBodyType || (DialogBodyType = {}));
+
+class DynamicHostDirective {
+    _vcr = inject(ViewContainerRef);
+    _currentRef = null;
+    component = input(...(ngDevMode ? [undefined, { debugName: "component" }] : []));
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+    constructor() {
+        effect(() => {
+            const componentType = this.component();
+            // 1. Gestión de la creación/destrucción del componente
+            if (!componentType) {
+                this._vcr.clear();
+                this._currentRef = null;
+                return;
+            }
+            // Si el componente es diferente al que tenemos, lo recreamos
+            if (this._currentRef?.componentType !== componentType) {
+                this._vcr.clear();
+                this._currentRef = this._vcr.createComponent(componentType);
+            }
+            // 2. Actualización de datos (siempre, tanto si es nuevo como si ya existía)
+            const data = this.data();
+            if (this._currentRef && data !== undefined) {
+                // La forma correcta de setear un input en Angular moderno
+                this._currentRef.setInput('data', data);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: DynamicHostDirective, isStandalone: true, selector: "[ngxDynamicHost]", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxDynamicHost]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+class NgxDialog {
+    //dependencies injection
+    _dialogRef = inject((MatDialogRef));
+    _data = inject(MAT_DIALOG_DATA);
+    title = this._data.title;
+    icon = this._data.icon;
+    iconColor = this._data.iconColor;
+    subtitle = this._data.subtitle;
+    body = this._data.body;
+    showCancel = this._data.showCancel ?? true;
+    showConfirm = this._data.showConfirm ?? true;
+    cancelText = this._data.cancelText ?? 'Cancelar';
+    confirmText = this._data.confirmText ?? 'Aceptar';
+    DialogBodyType = DialogBodyType;
+    onCancelClick() {
+        this._dialogRef.close(false);
+    }
+    onConfirmClick() {
+        this._dialogRef.close(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", ngImport: i0, template: "<h2 mat-dialog-title class=\"title\">\r\n    {{ title }}\r\n    @if(icon) {\r\n        <mat-icon \r\n            [style.color]=\"iconColor\"\r\n            class=\"icon\"\r\n        >\r\n            {{ icon }}\r\n        </mat-icon>\r\n    }\r\n</h2>\r\n<mat-dialog-content>\r\n    @if(subtitle) {\r\n        <p class=\"subtitle\">{{ subtitle }}</p>\r\n        <mat-divider />\r\n    }\r\n\r\n    <div class=\"content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p>{{ body.content }}</p>\r\n            }\r\n            @case (DialogBodyType.HTML) {\r\n                <div [innerHTML]=\"body.content\"></div>\r\n            }\r\n            @case (DialogBodyType.COMPONENT) {\r\n                <ng-container \r\n                    ngxDynamicHost \r\n                    [component]=\"$any(body.content)\"\r\n                    [data]=\"body.data\"\r\n                />\r\n            }\r\n            @case (DialogBodyType.TEMPLATE) {\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"$any(body.content)\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n    @if(showCancel) {\r\n        <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n            {{ cancelText }}\r\n        </button>\r\n    }\r\n    @if(showConfirm) {\r\n        <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n            {{ confirmText }}\r\n        </button>\r\n    }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dialog', imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatDividerModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        CommonModule,
+                        DynamicHostDirective
+                    ], template: "<h2 mat-dialog-title class=\"title\">\r\n    {{ title }}\r\n    @if(icon) {\r\n        <mat-icon \r\n            [style.color]=\"iconColor\"\r\n            class=\"icon\"\r\n        >\r\n            {{ icon }}\r\n        </mat-icon>\r\n    }\r\n</h2>\r\n<mat-dialog-content>\r\n    @if(subtitle) {\r\n        <p class=\"subtitle\">{{ subtitle }}</p>\r\n        <mat-divider />\r\n    }\r\n\r\n    <div class=\"content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p>{{ body.content }}</p>\r\n            }\r\n            @case (DialogBodyType.HTML) {\r\n                <div [innerHTML]=\"body.content\"></div>\r\n            }\r\n            @case (DialogBodyType.COMPONENT) {\r\n                <ng-container \r\n                    ngxDynamicHost \r\n                    [component]=\"$any(body.content)\"\r\n                    [data]=\"body.data\"\r\n                />\r\n            }\r\n            @case (DialogBodyType.TEMPLATE) {\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"$any(body.content)\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n    @if(showCancel) {\r\n        <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n            {{ cancelText }}\r\n        </button>\r\n    }\r\n    @if(showConfirm) {\r\n        <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n            {{ confirmText }}\r\n        </button>\r\n    }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"] }]
+        }] });
+
 class NgxConfirmDialogComponent {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
     intl = inject(NgxTablesIntl);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxConfirmDialogComponent, isStandalone: true, selector: "ngx-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content>\r\n    @if(data.body) {\r\n        <p>{{data.body}}</p>\r\n    }\r\n    \r\n    @if (data.template) {\r\n        <ng-container *ngTemplateOutlet=\"data.template; context: { $implicit: data.row }\"></ng-container>\r\n    }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"false\">{{ data.denyButtonLabel ?? intl.cancelButtonLabel }}</button>\r\n    <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? intl.confirmButtonLabel }}</button>\r\n</mat-dialog-actions>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxConfirmDialogComponent, isStandalone: true, selector: "ngx-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content>\r\n    @if(data.body) {\r\n        <p>{{data.body}}</p>\r\n    }\r\n    \r\n    @if (data.template) {\r\n        <ng-container *ngTemplateOutlet=\"data.template; context: { $implicit: data.row }\"></ng-container>\r\n    }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"false\">{{ data.denyButtonLabel ?? intl.cancelButtonLabel }}</button>\r\n    <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? intl.confirmButtonLabel }}</button>\r\n</mat-dialog-actions>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxConfirmDialogComponent, decorators: [{
             type: Component,
@@ -705,16 +873,41 @@ class DynamicCellHostDirective {
     component = input(...(ngDevMode ? [undefined, { debugName: "component" }] : []));
     row = input(...(ngDevMode ? [undefined, { debugName: "row" }] : []));
     key = input(...(ngDevMode ? [undefined, { debugName: "key" }] : []));
+    _currentRef = null;
+    _rowSignal;
+    _keySignal;
     effect = effect(() => {
         const component = this.component();
         const row = this.row();
         const key = this.key();
-        if (component) {
-            const compRef = this.vcr.createComponent(component);
-            if (row && key) {
-                compRef.instance.row = signal(row);
-                compRef.instance.key = signal(key);
-            }
+        //Si no hay componente, limpiamos lo que hubiera
+        if (!component) {
+            this.vcr.clear();
+            this._currentRef = null;
+            this._rowSignal = undefined;
+            this._keySignal = undefined;
+            return;
+        }
+        //Solo se recrea si cambia el tipo de componente. En caso contrario se reutiliza
+        //la instancia y se actualizan sus signals, evitando apilar componentes en el DOM
+        //cada vez que cambian los datos de la fila.
+        if (this._currentRef?.componentType !== component) {
+            this.vcr.clear();
+            this._currentRef = this.vcr.createComponent(component);
+            this._rowSignal = undefined;
+            this._keySignal = undefined;
+        }
+        if (row === undefined || key === undefined)
+            return;
+        if (!this._rowSignal || !this._keySignal) {
+            this._rowSignal = signal(row);
+            this._keySignal = signal(key);
+            this._currentRef.instance.row = this._rowSignal;
+            this._currentRef.instance.key = this._keySignal;
+        }
+        else {
+            this._rowSignal.set(row);
+            this._keySignal.set(key);
         }
     }, ...(ngDevMode ? [{ debugName: "effect" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicCellHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1009,7 +1202,18 @@ class AdvancedFilterUtils {
     }
 }
 
-const USER_ID_FACTORY = new InjectionToken('USER_ID_FACTORY');
+/**
+ * Signal con el identificador del usuario actual. Se usa para aislar por usuario
+ * la configuracion de columnas y los filtros avanzados guardados en localStorage.
+ *
+ * Si la aplicacion no lo provee, el valor por defecto es `undefined`, lo que
+ * desactiva la persistencia: las tablas siguen funcionando, pero no recuerdan
+ * la configuracion entre sesiones.
+ */
+const USER_ID_FACTORY = new InjectionToken('USER_ID_FACTORY', {
+    providedIn: 'root',
+    factory: () => signal(undefined)
+});
 
 const OPERATOR_BY_FILTER_TYPE = {
     number: ['=', '<>', '>', '>=', '<', '<='],
@@ -1182,7 +1386,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }] });
 
 class DatosPantallaService {
-    pantalla = toSignal(fromEvent(window, 'resize').pipe(startWith(this.obtenerDatosPantalla()), map(() => this.obtenerDatosPantalla())));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    //En servidor no existe window, asi que se devuelve undefined en lugar de romper
+    pantalla = this.isBrowser
+        ? toSignal(fromEvent(window, 'resize').pipe(startWith(this.obtenerDatosPantalla()), map(() => this.obtenerDatosPantalla())))
+        : signal(undefined);
     obtenerDatosPantalla() {
         let pantalla = {
             tipo: 'escritorio',
@@ -1306,7 +1514,7 @@ class ConfigureTableColumnsComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigureTableColumnsComponent, isStandalone: true, selector: "lib-configure-table-columns", ngImport: i0, template: "<h2 mat-dialog-title>{{intl.configureColumnsTitle}} {{data.tableName| lowercase}}</h2>\r\n<mat-dialog-content>\r\n\r\n    <div class=\"columnsList\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n        @for (column of columns(); track $index;  let first = $first; let last = $last;) {\r\n            <div \r\n                class=\"columnContainer\" \r\n                cdkDrag \r\n                [class.pinned]=\"$index == animationIndex()\"\r\n                [style]=\"{ transition: `background-color ${animationTime}ms ease` }\">\r\n\r\n                <div class=\"labelContainer\">\r\n                    <mat-icon>drag_indicator</mat-icon>\r\n                    <p class=\"label\">\r\n                        {{data.columnsLabels[column.key] ?? ''}}\r\n                        @if(hasFilterAndDisabled(column)) {\r\n                            <span> {{intl.hasFiltersAppliedText}}</span>\r\n                        }\r\n                    </p>\r\n                </div>\r\n\r\n                <div class=\"actions\">\r\n                    <button \r\n                        matIconButton\r\n                        [matTooltip]=\"column.isSticky ? intl.unpinColumnTooltip : intl.pinColumnTooltip\"\r\n                        (click)=\"onPinClick(column, $index)\">\r\n                        <mat-icon>{{column.isSticky ? 'keep_off' : 'keep'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <button [matTooltip]=\"intl.moveUpTooltip\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n                    <button [matTooltip]=\"intl.moveDownTooltip\" matIconButton [disabled]=\"$last\" (click)=\"onDownClick($index)\"><mat-icon>keyboard_arrow_down</mat-icon></button>\r\n                    <mat-slide-toggle [checked]=\"column.show\" (toggleChange)=\"onToggleChange(column)\"></mat-slide-toggle>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <p class=\"note\"><span>{{intl.noteLabel}}</span> {{intl.hideColumnWithFiltersNote}}</p>\r\n    \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n  <button matButton (click)=\"onResetClick()\">{{intl.resetColumnsButtonLabel}}</button>\r\n  <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{intl.confirmButtonLabel}}</button>\r\n</mat-dialog-actions>", styles: [".columnsList{display:flex;flex-direction:column;cursor:grab}.columnContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface);padding:4px 10px}p{margin:0}.label span{font:var(--mat-sys-label-small);color:var(--mat-sys-error);font-weight:400;font-style:italic}.labelContainer,.actions{display:flex;flex-direction:row;align-items:center;gap:10px}.note{margin-top:20px;font-style:italic;font:var(--mat-sys-body-small);font-weight:300;width:100%;text-align:center}.note span{font-weight:500}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer:last-child{border:none}.columnsList.cdk-drop-list-dragging .columnContainer:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer.pinned{background-color:#ffeb3b4d;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigureTableColumnsComponent, isStandalone: true, selector: "lib-configure-table-columns", ngImport: i0, template: "<h2 mat-dialog-title>{{intl.configureColumnsTitle}} {{data.tableName| lowercase}}</h2>\r\n<mat-dialog-content>\r\n\r\n    <div class=\"columnsList\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n        @for (column of columns(); track $index;  let first = $first; let last = $last;) {\r\n            <div \r\n                class=\"columnContainer\" \r\n                cdkDrag \r\n                [class.pinned]=\"$index == animationIndex()\"\r\n                [style]=\"{ transition: `background-color ${animationTime}ms ease` }\">\r\n\r\n                <div class=\"labelContainer\">\r\n                    <mat-icon>drag_indicator</mat-icon>\r\n                    <p class=\"label\">\r\n                        {{data.columnsLabels[column.key] ?? ''}}\r\n                        @if(hasFilterAndDisabled(column)) {\r\n                            <span> {{intl.hasFiltersAppliedText}}</span>\r\n                        }\r\n                    </p>\r\n                </div>\r\n\r\n                <div class=\"actions\">\r\n                    <button \r\n                        matIconButton\r\n                        [matTooltip]=\"column.isSticky ? intl.unpinColumnTooltip : intl.pinColumnTooltip\"\r\n                        (click)=\"onPinClick(column, $index)\">\r\n                        <mat-icon>{{column.isSticky ? 'keep_off' : 'keep'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <button [matTooltip]=\"intl.moveUpTooltip\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n                    <button [matTooltip]=\"intl.moveDownTooltip\" matIconButton [disabled]=\"$last\" (click)=\"onDownClick($index)\"><mat-icon>keyboard_arrow_down</mat-icon></button>\r\n                    <mat-slide-toggle [checked]=\"column.show\" (toggleChange)=\"onToggleChange(column)\"></mat-slide-toggle>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <p class=\"note\"><span>{{intl.noteLabel}}</span> {{intl.hideColumnWithFiltersNote}}</p>\r\n    \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n  <button matButton (click)=\"onResetClick()\">{{intl.resetColumnsButtonLabel}}</button>\r\n  <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{intl.confirmButtonLabel}}</button>\r\n</mat-dialog-actions>", styles: [".columnsList{display:flex;flex-direction:column;cursor:grab}.columnContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface);padding:4px 10px}p{margin:0}.label span{font:var(--mat-sys-label-small);color:var(--mat-sys-error);font-weight:400;font-style:italic}.labelContainer,.actions{display:flex;flex-direction:row;align-items:center;gap:10px}.note{margin-top:20px;font-style:italic;font:var(--mat-sys-body-small);font-weight:300;width:100%;text-align:center}.note span{font-weight:500}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer:last-child{border:none}.columnsList.cdk-drop-list-dragging .columnContainer:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer.pinned{background-color:#ffeb3b4d;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, decorators: [{
             type: Component,
@@ -1326,8 +1534,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }] });
 
 class PaginatedSearchableSelectComponent {
-    // Inyectar el servicio de internacionalización (opcional para permitir override)
-    intl;
+    // Inyectar el servicio de internacionalización.
+    // inject() resuelve tambien los providers a nivel de componente/ruta, por lo que
+    // el override sigue siendo posible.
+    intl = inject(NgxTablesIntl);
     control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
     endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
     filters = input(signal({
@@ -1363,9 +1573,6 @@ class PaginatedSearchableSelectComponent {
     innerControl = signal(new FormControl(undefined), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
     queryTimeout = undefined;
     debounceTime = 300;
-    constructor(intl) {
-        this.intl = intl ?? inject(NgxTablesIntl);
-    }
     selectedEffect = effect(() => {
         const selected = this.selected();
         const control = this.control();
@@ -1469,8 +1676,8 @@ class PaginatedSearchableSelectComponent {
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, deps: [{ token: NgxTablesIntl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{ selectLabel() }}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\"\r\n        [compareWith]=\"compareWith()\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\"\r\n                [value]=\"filters()().query ?? ''\" \r\n                (input)=\"onQueryChange()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\" />\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option [value]=\"option\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Es MUY importante que estos vayan los ultimos (al final de todas las opciones). -->\r\n        @for (option of optionsSelectedForView(); track $index) {\r\n            <mat-option [value]=\"option\" class=\"hideOption\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Si es multiple, como no esta el option de resetear, si filtran y no hay opciones, y luego cierran el select el desplegable no se abre y queda inutilizado, por eso, ponemos esta opcion dummy, que siempre esta oculta, y no hace nada, pero ya hace que haya un item, y el desplegable se abra -->\r\n        @if(multiple()) {\r\n            <mat-option class=\"hideOption\" dummyOption></mat-option>\r\n        }\r\n\r\n        @if (total() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n\r\n        @if((filters()().pageNumber * filters()().pageSize) < total() && !dataResource.isLoading()) {\r\n            <button matButton=\"text\" class=\"showMore\" (click)=\"onMoreClick()\">\r\n                {{ intl.showMoreLabel }}\r\n            </button>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{ selectLabel() }}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\"\r\n        [compareWith]=\"compareWith()\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\"\r\n                [value]=\"filters()().query ?? ''\" \r\n                (input)=\"onQueryChange()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\" />\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option [value]=\"option\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Es MUY importante que estos vayan los ultimos (al final de todas las opciones). -->\r\n        @for (option of optionsSelectedForView(); track $index) {\r\n            <mat-option [value]=\"option\" class=\"hideOption\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Si es multiple, como no esta el option de resetear, si filtran y no hay opciones, y luego cierran el select el desplegable no se abre y queda inutilizado, por eso, ponemos esta opcion dummy, que siempre esta oculta, y no hace nada, pero ya hace que haya un item, y el desplegable se abra -->\r\n        @if(multiple()) {\r\n            <mat-option class=\"hideOption\" dummyOption></mat-option>\r\n        }\r\n\r\n        @if (total() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n\r\n        @if((filters()().pageNumber * filters()().pageSize) < total() && !dataResource.isLoading()) {\r\n            <button matButton=\"text\" class=\"showMore\" (click)=\"onMoreClick()\">\r\n                {{ intl.showMoreLabel }}\r\n            </button>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, decorators: [{
             type: Component,
@@ -1484,13 +1691,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CommonModule,
                         MatProgressBarModule
                     ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{ selectLabel() }}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\"\r\n        [compareWith]=\"compareWith()\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\"\r\n                [value]=\"filters()().query ?? ''\" \r\n                (input)=\"onQueryChange()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\" />\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option [value]=\"option\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Es MUY importante que estos vayan los ultimos (al final de todas las opciones). -->\r\n        @for (option of optionsSelectedForView(); track $index) {\r\n            <mat-option [value]=\"option\" class=\"hideOption\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Si es multiple, como no esta el option de resetear, si filtran y no hay opciones, y luego cierran el select el desplegable no se abre y queda inutilizado, por eso, ponemos esta opcion dummy, que siempre esta oculta, y no hace nada, pero ya hace que haya un item, y el desplegable se abra -->\r\n        @if(multiple()) {\r\n            <mat-option class=\"hideOption\" dummyOption></mat-option>\r\n        }\r\n\r\n        @if (total() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n\r\n        @if((filters()().pageNumber * filters()().pageSize) < total() && !dataResource.isLoading()) {\r\n            <button matButton=\"text\" class=\"showMore\" (click)=\"onMoreClick()\">\r\n                {{ intl.showMoreLabel }}\r\n            </button>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"] }]
-        }], ctorParameters: () => [{ type: NgxTablesIntl, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], selectPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPlaceholder", required: false }] }], clearableOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableOptionLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], searcher: [{ type: i0.ViewChild, args: ['htmlSearcher', { isSignal: true }] }] } });
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], selectPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPlaceholder", required: false }] }], clearableOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableOptionLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], searcher: [{ type: i0.ViewChild, args: ['htmlSearcher', { isSignal: true }] }] } });
 
 class SearchableSelectComponent {
-    // Inyectar el servicio de internacionalización (opcional para permitir override)
-    intl;
+    // Inyectar el servicio de internacionalización.
+    // inject() resuelve tambien los providers a nivel de componente/ruta, por lo que
+    // el override sigue siendo posible.
+    intl = inject(NgxTablesIntl);
     control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input((option) => {
@@ -1517,9 +1724,6 @@ class SearchableSelectComponent {
     optionChange = output();
     searcher = viewChild('htmlSearcher', ...(ngDevMode ? [{ debugName: "searcher" }] : []));
     innerControl = signal(new FormControl(undefined), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
-    constructor(intl) {
-        this.intl = intl ?? inject(NgxTablesIntl);
-    }
     selectedEffect = effect(() => {
         const selected = this.selected();
         const control = this.control();
@@ -1573,8 +1777,8 @@ class SearchableSelectComponent {
         });
         return results.length;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, deps: [{ token: NgxTablesIntl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{selectLabel()}}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option \r\n                [value]=\"optionValue()(option)\"\r\n                [class.hideOption]=\"!showOption(option)\">\r\n                    {{optionLabel()(option)}}\r\n            </mat-option>\r\n        }\r\n\r\n        @if (numberOfResults() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{selectLabel()}}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option \r\n                [value]=\"optionValue()(option)\"\r\n                [class.hideOption]=\"!showOption(option)\">\r\n                    {{optionLabel()(option)}}\r\n            </mat-option>\r\n        }\r\n\r\n        @if (numberOfResults() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, decorators: [{
             type: Component,
@@ -1587,9 +1791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatButtonModule,
                         CommonModule
                     ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{selectLabel()}}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option \r\n                [value]=\"optionValue()(option)\"\r\n                [class.hideOption]=\"!showOption(option)\">\r\n                    {{optionLabel()(option)}}\r\n            </mat-option>\r\n        }\r\n\r\n        @if (numberOfResults() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"] }]
-        }], ctorParameters: () => [{ type: NgxTablesIntl, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], selectPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPlaceholder", required: false }] }], clearableOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableOptionLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], searcher: [{ type: i0.ViewChild, args: ['htmlSearcher', { isSignal: true }] }] } });
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], selectPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPlaceholder", required: false }] }], clearableOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableOptionLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], searcher: [{ type: i0.ViewChild, args: ['htmlSearcher', { isSignal: true }] }] } });
 
 class AdvancedFilterRuleComponent {
     rule = input.required(...(ngDevMode ? [{ debugName: "rule" }] : []));
@@ -1646,7 +1848,7 @@ class AdvancedFilterRuleComponent {
     operatorOptionLabel = (filterOperator) => this.filterOperatorLabel()[filterOperator];
     operatorOptionValue = (filterOperator) => filterOperator;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterRuleComponent, isStandalone: true, selector: "lib-advanced-filter-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteFilter: "deleteFilter" }, ngImport: i0, template: "<button \r\n    matIconButton \r\n    [matTooltip]=\"intl.deleteFilterTooltip\" \r\n    (click)=\"deleteFilter.emit(getRuleId())\"\r\n    class=\"deleteButton\"\r\n    type=\"button\">\r\n    <mat-icon>delete</mat-icon>\r\n</button>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getKey()\"\r\n    [options]=\"columns()\"\r\n    [optionLabel]=\"keyOptionLabel\"\r\n    [optionValue]=\"keyOptionValue\"\r\n    (optionChange)=\"onKeyChange($event)\"\r\n    [selectLabel]=\"intl.fieldLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getOperator()\"\r\n    [options]=\"getOperatorsOption(getKey().value)\"\r\n    [optionLabel]=\"operatorOptionLabel\"\r\n    [optionValue]=\"operatorOptionValue\"\r\n    [selectLabel]=\"intl.conditionLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\r\n    @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\r\n        <ngx-paginated-searchable-select \r\n            [control]=\"getValue()\"\r\n            [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\r\n            [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    } @else {\r\n        <ngx-searchable-select\r\n            [control]=\"getValue()\"\r\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    }\r\n}\r\n\r\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input\r\n            [formControl]=\"getValue()\"\r\n            matInput \r\n            [matDatepicker]=\"picker\">\r\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:14px}.deleteButton{margin-bottom:20px}mat-form-field,ngx-searchable-select,ngx-paginated-searchable-select{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterRuleComponent, isStandalone: true, selector: "lib-advanced-filter-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteFilter: "deleteFilter" }, ngImport: i0, template: "<button \r\n    matIconButton \r\n    [matTooltip]=\"intl.deleteFilterTooltip\" \r\n    (click)=\"deleteFilter.emit(getRuleId())\"\r\n    class=\"deleteButton\"\r\n    type=\"button\">\r\n    <mat-icon>delete</mat-icon>\r\n</button>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getKey()\"\r\n    [options]=\"columns()\"\r\n    [optionLabel]=\"keyOptionLabel\"\r\n    [optionValue]=\"keyOptionValue\"\r\n    (optionChange)=\"onKeyChange($event)\"\r\n    [selectLabel]=\"intl.fieldLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getOperator()\"\r\n    [options]=\"getOperatorsOption(getKey().value)\"\r\n    [optionLabel]=\"operatorOptionLabel\"\r\n    [optionValue]=\"operatorOptionValue\"\r\n    [selectLabel]=\"intl.conditionLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\r\n    @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\r\n        <ngx-paginated-searchable-select \r\n            [control]=\"getValue()\"\r\n            [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\r\n            [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    } @else {\r\n        <ngx-searchable-select\r\n            [control]=\"getValue()\"\r\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    }\r\n}\r\n\r\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input\r\n            [formControl]=\"getValue()\"\r\n            matInput \r\n            [matDatepicker]=\"picker\">\r\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:14px}.deleteButton{margin-bottom:20px}mat-form-field,ngx-searchable-select,ngx-paginated-searchable-select{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, decorators: [{
             type: Component,
@@ -1692,7 +1894,7 @@ class AdvancedFilterGroupComponent {
         return this.group().get('filters').controls;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterGroupComponent, isStandalone: true, selector: "lib-advanced-filter-group", inputs: { isRootNode: { classPropertyName: "isRootNode", publicName: "isRootNode", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addGroup: "addGroup", addFilter: "addFilter", deleteGroup: "deleteGroup", deleteFilter: "deleteFilter" }, ngImport: i0, template: "<div class=\"grupo\" [formGroup]=\"group()\">\r\n    \r\n    <mat-button-toggle-group [formControl]=\"getConnector()\">\r\n        @for (option of optionsFilterConnector(); track option.value) {\r\n            <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\r\n        }\r\n    </mat-button-toggle-group>\r\n\r\n    @if (isDesktop()) {\r\n        <button \r\n            matButton=\"outlined\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n            {{intl.addFilterButtonLabel}}\r\n        </button>\r\n\r\n        <button \r\n            matButton=\"outlined\"\r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n            {{intl.addGroupButtonLabel}}\r\n        </button>\r\n    } @else {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addFilterButtonLabel\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n        </button>\r\n\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addGroupButtonLabel\" \r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n        </button>\r\n    }\r\n    \r\n\r\n    @if(!isRootNode()) {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.deleteGroupTooltip\" \r\n            (click)=\"deleteGroup.emit(getGroupId())\"\r\n            class=\"deleteGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>delete</mat-icon>\r\n        </button>\r\n    }\r\n\r\n    @for (group of getFilters(); track $index) {\r\n        @if(isFilterGroupForm(group)) {\r\n            <lib-advanced-filter-group \r\n                [group]=\"group\"\r\n                [config]=\"config()\"\r\n                [isRootNode]=\"false\"\r\n                (addGroup)=\"addGroup.emit($event)\"\r\n                (addFilter)=\"addFilter.emit($event)\"\r\n                (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        } @else {\r\n            <lib-advanced-filter-rule \r\n                [rule]=\"group\"\r\n                [config]=\"config()\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        }\r\n    }\r\n\r\n</div>", styles: [":host{display:block}.grupo{border-radius:4px;border:1px solid var(--mat-sys-outline);padding:40px 34px 10px 20px;position:relative;min-height:60px;display:flex;flex-direction:column;margin-top:24px;gap:8px}mat-button-toggle-group{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:var(--mat-sys-surface)}.addFilterButton{position:absolute;top:-20px;left:10px;background-color:var(--mat-sys-surface)}.addGroupButton{position:absolute;top:-20px;right:10px;background-color:var(--mat-sys-surface)}.deleteGroupButton{position:absolute;top:50%;right:-20px;transform:translateY(-50%);background-color:var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: AdvancedFilterRuleComponent, selector: "lib-advanced-filter-rule", inputs: ["rule", "config"], outputs: ["deleteFilter"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterGroupComponent, isStandalone: true, selector: "lib-advanced-filter-group", inputs: { isRootNode: { classPropertyName: "isRootNode", publicName: "isRootNode", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addGroup: "addGroup", addFilter: "addFilter", deleteGroup: "deleteGroup", deleteFilter: "deleteFilter" }, ngImport: i0, template: "<div class=\"grupo\" [formGroup]=\"group()\">\r\n    \r\n    <mat-button-toggle-group [formControl]=\"getConnector()\">\r\n        @for (option of optionsFilterConnector(); track option.value) {\r\n            <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\r\n        }\r\n    </mat-button-toggle-group>\r\n\r\n    @if (isDesktop()) {\r\n        <button \r\n            matButton=\"outlined\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n            {{intl.addFilterButtonLabel}}\r\n        </button>\r\n\r\n        <button \r\n            matButton=\"outlined\"\r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n            {{intl.addGroupButtonLabel}}\r\n        </button>\r\n    } @else {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addFilterButtonLabel\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n        </button>\r\n\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addGroupButtonLabel\" \r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n        </button>\r\n    }\r\n    \r\n\r\n    @if(!isRootNode()) {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.deleteGroupTooltip\" \r\n            (click)=\"deleteGroup.emit(getGroupId())\"\r\n            class=\"deleteGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>delete</mat-icon>\r\n        </button>\r\n    }\r\n\r\n    @for (group of getFilters(); track $index) {\r\n        @if(isFilterGroupForm(group)) {\r\n            <lib-advanced-filter-group \r\n                [group]=\"group\"\r\n                [config]=\"config()\"\r\n                [isRootNode]=\"false\"\r\n                (addGroup)=\"addGroup.emit($event)\"\r\n                (addFilter)=\"addFilter.emit($event)\"\r\n                (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        } @else {\r\n            <lib-advanced-filter-rule \r\n                [rule]=\"group\"\r\n                [config]=\"config()\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        }\r\n    }\r\n\r\n</div>", styles: [":host{display:block}.grupo{border-radius:4px;border:1px solid var(--mat-sys-outline);padding:40px 34px 10px 20px;position:relative;min-height:60px;display:flex;flex-direction:column;margin-top:24px;gap:8px}mat-button-toggle-group{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:var(--mat-sys-surface)}.addFilterButton{position:absolute;top:-20px;left:10px;background-color:var(--mat-sys-surface)}.addGroupButton{position:absolute;top:-20px;right:10px;background-color:var(--mat-sys-surface)}.deleteGroupButton{position:absolute;top:50%;right:-20px;transform:translateY(-50%);background-color:var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: AdvancedFilterRuleComponent, selector: "lib-advanced-filter-rule", inputs: ["rule", "config"], outputs: ["deleteFilter"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, decorators: [{
             type: Component,
@@ -1766,7 +1968,7 @@ class ConfigureAdvancedFilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigureAdvancedFilterComponent, isStandalone: true, selector: "lib-configure-advanced-filter", ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n  <h2 mat-dialog-title>{{intl.advancedFiltersDialogTitle}} {{data.config.title() | lowercase}}</h2>\r\n  <mat-dialog-content>\r\n\r\n      <p class=\"advancedFilterResult\" [innerHTML]=\"query()\" [style.visibility]=\"query() ? 'visible': 'hidden'\"></p>\r\n\r\n      <mat-form-field>\r\n          <mat-label>{{intl.templateNameLabel}}</mat-label>\r\n          <input matInput formControlName=\"name\" [maxlength]=\"16\">\r\n          <mat-hint>{{form.get('name')?.value.length ?? 0}}/16</mat-hint>\r\n          <mat-error>{{intl.templateNameRequiredError}}</mat-error>\r\n      </mat-form-field>\r\n\r\n      <lib-advanced-filter-group \r\n        [group]=\"getRootGroup()\"\r\n        [config]=\"data.config\"\r\n        [isRootNode]=\"true\"\r\n        (addGroup)=\"addGroup($event)\"\r\n        (addFilter)=\"addFilter($event)\"\r\n        (deleteGroup)=\"deleteGroup($event)\"\r\n        (deleteFilter)=\"deleteFilter($event)\"\r\n      />\r\n\r\n      <div class=\"helperContainer\">\r\n        <p class=\"helperTitle\"><strong>{{intl.advancedFiltersHelpTitle}}</strong></p>\r\n        <p class=\"helper\">\r\n          <strong>{{intl.groupLabel}} </strong>{{intl.advancedFiltersGroupHelp}}<br>\r\n          <strong>{{intl.filterLabel}} </strong>{{intl.advancedFiltersRuleHelp}}\r\n        </p>\r\n      </div>\r\n      \r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{intl.saveButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{intl.saveAndApplyButtonLabel}}</button>\r\n  </mat-dialog-actions>\r\n\r\n\r\n</form>", styles: [":host{display:block}mat-dialog-content{display:flex;flex-direction:column;gap:12px}.helperContainer{margin-top:30px}.helperTitle,.helper{font:var(--mat-sys-body-small);font-weight:300;margin:0}.helper{margin-top:4px;padding-left:20px}.advancedFilterResult{align-self:center;text-align:center;font:var(--mat-sys-body-large);padding:8px;border-radius:4px;background-color:var(--warning);color:var(--on-warning)}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigureAdvancedFilterComponent, isStandalone: true, selector: "lib-configure-advanced-filter", ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n  <h2 mat-dialog-title>{{intl.advancedFiltersDialogTitle}} {{data.config.title() | lowercase}}</h2>\r\n  <mat-dialog-content>\r\n\r\n      <p class=\"advancedFilterResult\" [innerHTML]=\"query()\" [style.visibility]=\"query() ? 'visible': 'hidden'\"></p>\r\n\r\n      <mat-form-field>\r\n          <mat-label>{{intl.templateNameLabel}}</mat-label>\r\n          <input matInput formControlName=\"name\" [maxlength]=\"16\">\r\n          <mat-hint>{{form.get('name')?.value.length ?? 0}}/16</mat-hint>\r\n          <mat-error>{{intl.templateNameRequiredError}}</mat-error>\r\n      </mat-form-field>\r\n\r\n      <lib-advanced-filter-group \r\n        [group]=\"getRootGroup()\"\r\n        [config]=\"data.config\"\r\n        [isRootNode]=\"true\"\r\n        (addGroup)=\"addGroup($event)\"\r\n        (addFilter)=\"addFilter($event)\"\r\n        (deleteGroup)=\"deleteGroup($event)\"\r\n        (deleteFilter)=\"deleteFilter($event)\"\r\n      />\r\n\r\n      <div class=\"helperContainer\">\r\n        <p class=\"helperTitle\"><strong>{{intl.advancedFiltersHelpTitle}}</strong></p>\r\n        <p class=\"helper\">\r\n          <strong>{{intl.groupLabel}} </strong>{{intl.advancedFiltersGroupHelp}}<br>\r\n          <strong>{{intl.filterLabel}} </strong>{{intl.advancedFiltersRuleHelp}}\r\n        </p>\r\n      </div>\r\n      \r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{intl.saveButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{intl.saveAndApplyButtonLabel}}</button>\r\n  </mat-dialog-actions>\r\n\r\n\r\n</form>", styles: [":host{display:block}mat-dialog-content{display:flex;flex-direction:column;gap:12px}.helperContainer{margin-top:30px}.helperTitle,.helper{font:var(--mat-sys-body-small);font-weight:300;margin:0}.helper{margin-top:4px;padding-left:20px}.advancedFilterResult{align-self:center;text-align:center;font:var(--mat-sys-body-large);padding:8px;border-radius:4px;background-color:var(--warning);color:var(--on-warning)}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, decorators: [{
             type: Component,
@@ -1791,8 +1993,10 @@ class NgxPaginatedTable {
     dialog = inject(MatDialog);
     datosPantallaService = inject(DatosPantallaService);
     _changeDetectorRef = inject(ChangeDetectorRef);
-    // Inyectar el servicio de internacionalización (opcional para permitir override)
-    intl;
+    // Inyectar el servicio de internacionalización.
+    // inject() resuelve tambien los providers a nivel de componente/ruta, por lo que
+    // el override sigue siendo posible sin necesidad de instanciarlo a mano.
+    intl = inject(NgxTablesIntl);
     _destroy$ = new Subject();
     isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
     endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
@@ -1888,14 +2092,20 @@ class NgxPaginatedTable {
     showTotalGeneralFooter = computed(() => {
         const columns = this.config()().columns;
         const keys = this.keys();
-        return keys.some(key => columns.find(column => key == column.key)?.showTotalGeneral);
+        //En la tabla paginada el total general solo puede calcularlo el consumidor,
+        //asi que sin getTotalGeneral la fila quedaria vacia
+        return keys.some(key => {
+            const column = columns.find(column => key == column.key);
+            return column?.showTotalGeneral && !!column.getTotalGeneral;
+        });
     }, ...(ngDevMode ? [{ debugName: "showTotalGeneralFooter" }] : []));
     queryTimeout = undefined;
     timeoutsByKey = {};
     advancedFilters = computed(() => {
         const allTablesAdvancedFilters = this.advancedFilterService.advancedFilters();
         const tableId = this.config()().tableId;
-        return allTablesAdvancedFilters[tableId];
+        //Si la tabla todavia no tiene filtros guardados, la clave no existe en el record
+        return allTablesAdvancedFilters[tableId] ?? [];
     }, ...(ngDevMode ? [{ debugName: "advancedFilters" }] : []));
     expandableColumnDef = 'expandedDetail';
     expandedItem = signal(null, ...(ngDevMode ? [{ debugName: "expandedItem" }] : []));
@@ -1912,9 +2122,6 @@ class NgxPaginatedTable {
         pageSize: 20,
         query: undefined
     }, ...(ngDevMode ? [{ debugName: "defaultFiltersForPaginatedFilterOptions" }] : []));
-    constructor(intl) {
-        this.intl = intl ?? new NgxTablesIntl();
-    }
     ngOnInit() {
         // Suscribirse a los cambios de las etiquetas
         this.intl.changes
@@ -2037,8 +2244,11 @@ class NgxPaginatedTable {
     }
     onColumnFilterChange(columnKey, value) {
         this.filters().update(currentValue => {
-            const columnsFiltersValue = currentValue.columnsFiltersValue ?? {};
-            columnsFiltersValue[columnKey] = value;
+            //Se clona para no mutar el estado anterior de la signal
+            const columnsFiltersValue = {
+                ...(currentValue.columnsFiltersValue ?? {}),
+                [columnKey]: value
+            };
             return {
                 ...currentValue,
                 pageNumber: 1,
@@ -2269,7 +2479,9 @@ class NgxPaginatedTable {
         //const workSheet = utils.json_to_sheet(data);
         const workSheet = utils.aoa_to_sheet(aoaData);
         const workBook = utils.book_new();
-        utils.book_append_sheet(workBook, workSheet, title);
+        //El nombre de la hoja no puede exceder de 31 caracteres
+        const name = title.substring(0, 31);
+        utils.book_append_sheet(workBook, workSheet, name);
         writeFileXLSX(workBook, `${fileName}.xlsx`);
     }
     exportToPdfCurrentPage() {
@@ -2335,8 +2547,8 @@ class NgxPaginatedTable {
         const topOverlay = overlays[overlays.length - 1];
         return topOverlay === this.overlayRef.hostElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, deps: [{ token: NgxTablesIntl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedTable, isStandalone: true, selector: "ngx-paginated-table", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(config()().showAdvancedFilters) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"intl.advancedFiltersLabel\"\r\n                            [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n                            #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n                            <mat-icon>filter_alt</mat-icon>\r\n                        </button>\r\n\r\n                        <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"onNewAdvancedFiltersClick()\">\r\n                                <mat-icon>filter_alt</mat-icon>\r\n                                <span>{{ intl.newAdvancedFilterLabel }}</span>\r\n                            </button>\r\n\r\n                            @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n                                @if (first) {\r\n                                    <mat-divider />\r\n                                }\r\n\r\n                                <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n                                    <div class=\"templateContainer\">                            \r\n                                        <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n                                        <div class=\"buttonTemplateContainer\">\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getEditAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n                                                <mat-icon>edit</mat-icon>\r\n                                            </button>\r\n\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getDeleteAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n                                                <mat-icon>delete</mat-icon>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            }\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsvCurrentPage()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdfCurrentPage()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(config()().showQueryFilter) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        @if(filters()().advancedFilterId) {\r\n            <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n                <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n                <button matIconButton [matTooltip]=\"intl.removeAdvancedFilterTooltip\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"data()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n                                <mat-checkbox\r\n                                    (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                    [checked]=\"isRowSelected(row)\">\r\n                                </mat-checkbox>\r\n                            }\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td \r\n                            mat-footer-cell \r\n                            *matFooterCellDef \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n                                    } @else {\r\n                                        {{ column.getTotalGeneral() }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }\r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedTable, isStandalone: true, selector: "ngx-paginated-table", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().hideColumnConfig?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                            <mat-icon>table_edit</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().showAdvancedFilters) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"intl.advancedFiltersLabel\"\r\n                            [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n                            #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n                            <mat-icon>filter_alt</mat-icon>\r\n                        </button>\r\n\r\n                        <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"onNewAdvancedFiltersClick()\">\r\n                                <mat-icon>filter_alt</mat-icon>\r\n                                <span>{{ intl.newAdvancedFilterLabel }}</span>\r\n                            </button>\r\n\r\n                            @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n                                @if (first) {\r\n                                    <mat-divider />\r\n                                }\r\n\r\n                                <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n                                    <div class=\"templateContainer\">                            \r\n                                        <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n                                        <div class=\"buttonTemplateContainer\">\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getEditAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n                                                <mat-icon>edit</mat-icon>\r\n                                            </button>\r\n\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getDeleteAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n                                                <mat-icon>delete</mat-icon>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            }\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsvCurrentPage()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdfCurrentPage()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                            <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(config()().showQueryFilter) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        @if(filters()().advancedFilterId) {\r\n            <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n                <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n                <button matIconButton [matTooltip]=\"intl.removeAdvancedFilterTooltip\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"data()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n                                <mat-checkbox\r\n                                    (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                    [checked]=\"isRowSelected(row)\">\r\n                                </mat-checkbox>\r\n                            }\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td \r\n                            mat-footer-cell \r\n                            *matFooterCellDef \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n                                    } @else {\r\n                                        {{ column.getTotalGeneral() }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }\r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, decorators: [{
             type: Component,
@@ -2360,10 +2572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         PaginatedSearchableSelectComponent,
                         SearchableSelectComponent
-                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(config()().showAdvancedFilters) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"intl.advancedFiltersLabel\"\r\n                            [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n                            #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n                            <mat-icon>filter_alt</mat-icon>\r\n                        </button>\r\n\r\n                        <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"onNewAdvancedFiltersClick()\">\r\n                                <mat-icon>filter_alt</mat-icon>\r\n                                <span>{{ intl.newAdvancedFilterLabel }}</span>\r\n                            </button>\r\n\r\n                            @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n                                @if (first) {\r\n                                    <mat-divider />\r\n                                }\r\n\r\n                                <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n                                    <div class=\"templateContainer\">                            \r\n                                        <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n                                        <div class=\"buttonTemplateContainer\">\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getEditAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n                                                <mat-icon>edit</mat-icon>\r\n                                            </button>\r\n\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getDeleteAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n                                                <mat-icon>delete</mat-icon>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            }\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsvCurrentPage()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdfCurrentPage()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(config()().showQueryFilter) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        @if(filters()().advancedFilterId) {\r\n            <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n                <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n                <button matIconButton [matTooltip]=\"intl.removeAdvancedFilterTooltip\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"data()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n                                <mat-checkbox\r\n                                    (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                    [checked]=\"isRowSelected(row)\">\r\n                                </mat-checkbox>\r\n                            }\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td \r\n                            mat-footer-cell \r\n                            *matFooterCellDef \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n                                    } @else {\r\n                                        {{ column.getTotalGeneral() }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }\r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
-        }], ctorParameters: () => [{ type: NgxTablesIntl, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }], onEscape: [{
+                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().hideColumnConfig?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                            <mat-icon>table_edit</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().showAdvancedFilters) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"intl.advancedFiltersLabel\"\r\n                            [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n                            #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n                            <mat-icon>filter_alt</mat-icon>\r\n                        </button>\r\n\r\n                        <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"onNewAdvancedFiltersClick()\">\r\n                                <mat-icon>filter_alt</mat-icon>\r\n                                <span>{{ intl.newAdvancedFilterLabel }}</span>\r\n                            </button>\r\n\r\n                            @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n                                @if (first) {\r\n                                    <mat-divider />\r\n                                }\r\n\r\n                                <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n                                    <div class=\"templateContainer\">                            \r\n                                        <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n                                        <div class=\"buttonTemplateContainer\">\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getEditAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n                                                <mat-icon>edit</mat-icon>\r\n                                            </button>\r\n\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getDeleteAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n                                                <mat-icon>delete</mat-icon>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            }\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsvCurrentPage()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdfCurrentPage()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                            <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(config()().showQueryFilter) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        @if(filters()().advancedFilterId) {\r\n            <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n                <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n                <button matIconButton [matTooltip]=\"intl.removeAdvancedFilterTooltip\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"data()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            @if(!config()().showRowSelection || config()().showRowSelection?.(row)) {\r\n                                <mat-checkbox\r\n                                    (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                    [checked]=\"isRowSelected(row)\">\r\n                                </mat-checkbox>\r\n                            }\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td \r\n                            mat-footer-cell \r\n                            *matFooterCellDef \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n                                    } @else {\r\n                                        {{ column.getTotalGeneral() }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }\r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
+        }], propDecorators: { endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
@@ -2816,7 +3026,8 @@ class NgxBasicTable {
     }
     isAllPageRowSelected() {
         const records = this.getDataOfCurrentPage();
-        return records.every(record => this.isRowSelected(record));
+        //Sin registros no hay nada seleccionado (every sobre un array vacio devuelve true)
+        return records.length > 0 && records.every(record => this.isRowSelected(record));
     }
     areEqualByKeys(record1, record2) {
         const primaryKey = this.config()().primaryKey;
@@ -2898,8 +3109,11 @@ class NgxBasicTable {
     }
     onColumnFilterChange(columnKey, value) {
         this.filters().update(currentValue => {
-            const columnsFiltersValue = currentValue.columnsFiltersValue ?? {};
-            columnsFiltersValue[columnKey] = value;
+            //Se clona para no mutar el estado anterior de la signal
+            const columnsFiltersValue = {
+                ...(currentValue.columnsFiltersValue ?? {}),
+                [columnKey]: value
+            };
             return {
                 ...currentValue,
                 pageNumber: 1,
@@ -2918,7 +3132,7 @@ class NgxBasicTable {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: true, isRequired: false, transformFunction: null }, moreFilters: { classPropertyName: "moreFilters", publicName: "moreFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: true, isRequired: false, transformFunction: null }, moreFilters: { classPropertyName: "moreFilters", publicName: "moreFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().hideColumnConfig?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                            <mat-icon>table_edit</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                            <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i10.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i10.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i10.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i10.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, decorators: [{
             type: Component,
@@ -2941,7 +3155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         SearchableSelectComponent,
                         PaginatedSearchableSelectComponent
-                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
+                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(config()().hideColumnConfig?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                            <mat-icon>table_edit</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    @if(config()().hideExportData?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                            <mat-icon>download</mat-icon>\r\n                        </button>\r\n                        <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                                <mat-icon>csv</mat-icon>\r\n                                <span>{{ intl.exportToExcelLabel }}</span>\r\n                            </button>\r\n\r\n                            <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                                <mat-icon>picture_as_pdf</mat-icon>\r\n                                <span>{{ intl.exportToPdfLabel }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                            <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
         }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], queryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryFilter", required: false }] }], moreFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreFilters", required: false }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -2961,7 +3175,7 @@ class NgxAlert {
         }
     }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxAlert, isStandalone: true, selector: "ngx-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert\" [class]=\"type()\">\n  <div class=\"icon-wrapper\">\n    <mat-icon>{{ iconName() }}</mat-icon>\n  </div>\n  <div class=\"content\">\n    @if (title()) {\n      <div class=\"title\">{{ title() }}</div>\n    }\n    <div class=\"description\">\n      @if (message()) {\n        {{ message() }}\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.alert{display:flex;gap:16px;padding:16px;border-left-width:4px;border-left-style:solid;border-radius:4px;box-shadow:0 1px 2px #0000001a;margin-bottom:24px}.alert .icon-wrapper{display:flex;align-items:flex-start;padding-top:2px}.alert .content{display:flex;flex-direction:column;gap:4px;flex:1}.alert .content .title{font-weight:600;font-size:16px}.alert .content .description{margin:0;font-size:14px;line-height:1.5}.alert.warning{background-color:#fff8e1;border-left-color:#ffc107}.alert.warning .icon-wrapper mat-icon{color:#ffb300}.alert.warning .content .title{color:#4e342e}.alert.warning .content .description{color:#5d4037}.alert.error{background-color:#ffebee;border-left-color:#f44336}.alert.error .icon-wrapper mat-icon{color:#d32f2f}.alert.error .content .title{color:#b71c1c}.alert.error .content .description{color:#c62828}.alert.info{background-color:#e3f2fd;border-left-color:#2196f3}.alert.info .icon-wrapper mat-icon{color:#1976d2}.alert.info .content .title{color:#0d47a1}.alert.info .content .description{color:#1565c0}.alert.success{background-color:#e8f5e9;border-left-color:#4caf50}.alert.success .icon-wrapper mat-icon{color:#2e7d32}.alert.success .content .title{color:#1b5e20}.alert.success .content .description{color:#2e7d32}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxAlert, isStandalone: true, selector: "ngx-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert\" [class]=\"type()\">\n  <div class=\"icon-wrapper\">\n    <mat-icon>{{ iconName() }}</mat-icon>\n  </div>\n  <div class=\"content\">\n    @if (title()) {\n      <div class=\"title\">{{ title() }}</div>\n    }\n    <div class=\"description\">\n      @if (message()) {\n        {{ message() }}\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.alert{display:flex;gap:16px;padding:16px;border-left-width:4px;border-left-style:solid;border-radius:4px;box-shadow:0 1px 2px #0000001a;margin-bottom:24px}.alert .icon-wrapper{display:flex;align-items:flex-start;padding-top:2px}.alert .content{display:flex;flex-direction:column;gap:4px;flex:1}.alert .content .title{font-weight:600;font-size:16px}.alert .content .description{margin:0;font-size:14px;line-height:1.5}.alert.warning{background-color:#fff8e1;border-left-color:#ffc107}.alert.warning .icon-wrapper mat-icon{color:#ffb300}.alert.warning .content .title{color:#4e342e}.alert.warning .content .description{color:#5d4037}.alert.error{background-color:#ffebee;border-left-color:#f44336}.alert.error .icon-wrapper mat-icon{color:#d32f2f}.alert.error .content .title{color:#b71c1c}.alert.error .content .description{color:#c62828}.alert.info{background-color:#e3f2fd;border-left-color:#2196f3}.alert.info .icon-wrapper mat-icon{color:#1976d2}.alert.info .content .title{color:#0d47a1}.alert.info .content .description{color:#1565c0}.alert.success{background-color:#e8f5e9;border-left-color:#4caf50}.alert.success .icon-wrapper mat-icon{color:#2e7d32}.alert.success .content .title{color:#1b5e20}.alert.success .content .description{color:#2e7d32}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxAlert, decorators: [{
             type: Component,
@@ -2975,6 +3189,7 @@ class NgxPaginatedSelectBottomSheetComponent {
     _ref = inject((MatBottomSheetRef));
     _destroy = inject(DestroyRef);
     data = inject(MAT_BOTTOM_SHEET_DATA);
+    intl = inject(NgxTablesIntl);
     // ─── State ─────────────────────────────────────────────────────────────────
     /** Raw input value — updates on every keystroke, does NOT trigger the resource */
     query = signal(this.data.filters().query, ...(ngDevMode ? [{ debugName: "query" }] : []));
@@ -2995,14 +3210,44 @@ class NgxPaginatedSelectBottomSheetComponent {
      */
     resource = rxResource({
         params: () => ({ ...this.data.filters() }),
-        stream: ({ params }) => this.data.endpoint(params),
+        // Un fallo de red degrada a lista vacía (estado "sin resultados") en vez de
+        // dejar el resource en error —que rompería el render y ensuciaría la consola—.
+        stream: ({ params }) => this.data.endpoint(params).pipe(catchError(() => of({ items: [], total: 0 }))),
         defaultValue: { items: [], total: 0 },
     });
     // ─── Computed ──────────────────────────────────────────────────────────────
     isLoading = computed(() => this.resource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     options = computed(() => this.accumulatedItems(), ...(ngDevMode ? [{ debugName: "options" }] : []));
-    total = computed(() => this.resource.value().total, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    hasError = computed(() => !!this.resource.error(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
     selectedCount = computed(() => this.selectedItems().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
+    /**
+     * Total como signal, actualizado SOLO cuando el recurso no está cargando. Durante
+     * la carga por scroll, resource.value() pasa transitoriamente al defaultValue
+     * (total: 0); leerlo directamente hacía parpadear el footer a "0 resultados"
+     * aunque el total real no cambie. Con este signal el total se mantiene estable
+     * mientras se cargan más páginas.
+     */
+    _total = signal(0, ...(ngDevMode ? [{ debugName: "_total" }] : []));
+    total = this._total.asReadonly();
+    _totalEffect = effect(() => {
+        if (this.resource.isLoading())
+            return;
+        try {
+            this._total.set(this.resource.error() ? 0 : this.resource.value().total);
+        }
+        catch {
+            // El recurso puede lanzar si está en error o se elimina durante el teardown;
+            // se conserva el último total y no se rompe el ciclo de detección de cambios.
+        }
+    }, ...(ngDevMode ? [{ debugName: "_totalEffect" }] : []));
+    /** Cargando la PRIMERA página (lista vacía) → se muestran skeletons. */
+    isInitialLoading = computed(() => this.isLoading() && this.options().length === 0, ...(ngDevMode ? [{ debugName: "isInitialLoading" }] : []));
+    /** Cargando MÁS páginas (scroll) → fila inline "cargando más…", sin barra superior. */
+    isLoadingMore = computed(() => this.isLoading() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "isLoadingMore" }] : []));
+    /** Ya se han cargado todos los resultados disponibles. */
+    allLoaded = computed(() => this.total() > 0 && this.options().length >= this.total(), ...(ngDevMode ? [{ debugName: "allLoaded" }] : []));
+    /** Cabecera con sombra solo cuando la lista está desplazada. */
+    headerScrolled = signal(false, ...(ngDevMode ? [{ debugName: "headerScrolled" }] : []));
     allSelected = computed(() => {
         const items = this.options();
         if (items.length === 0)
@@ -3036,16 +3281,37 @@ class NgxPaginatedSelectBottomSheetComponent {
      */
     _lastFilterFingerprint = null;
     _accumEffect = effect(() => {
-        const value = this.resource.value();
-        const { pageNumber: _pn, ...rest } = untracked(() => this.data.filters());
+        // Si el endpoint falla, resource.value() lanza: se trata como lista vacía.
+        if (this.resource.error()) {
+            this.accumulatedItems.set([]);
+            return;
+        }
+        let value;
+        try {
+            value = this.resource.value();
+        }
+        catch {
+            // El recurso puede lanzar si se elimina durante el teardown; se ignora para
+            // no romper el ciclo de detección de cambios.
+            return;
+        }
+        const { pageNumber, ...rest } = untracked(() => this.data.filters());
         const fingerprint = JSON.stringify(rest);
-        if (fingerprint !== this._lastFilterFingerprint) {
+        // Cambio de filtros, o refetch de la primera pagina (reintento, error que
+        // devuelve el defaultValue del resource...): se reemplaza en vez de acumular.
+        if (fingerprint !== this._lastFilterFingerprint || pageNumber <= 1) {
             this._lastFilterFingerprint = fingerprint;
             this.accumulatedItems.set([...value.items]);
+            return;
         }
-        else {
-            this.accumulatedItems.update(acc => [...acc, ...value.items]);
-        }
+        // Scroll: se anaden solo los que no estuvieran ya, para que un refetch de la
+        // misma pagina no duplique elementos en la lista.
+        const key = this.data.config.valueKey;
+        this.accumulatedItems.update(acc => {
+            const known = new Set(acc.map(item => item[key]));
+            const nuevos = value.items.filter(item => !known.has(item[key]));
+            return nuevos.length > 0 ? [...acc, ...nuevos] : acc;
+        });
     }, ...(ngDevMode ? [{ debugName: "_accumEffect" }] : []));
     constructor() {
         // Reset to page 1 when the sheet opens
@@ -3100,6 +3366,20 @@ class NgxPaginatedSelectBottomSheetComponent {
         }
         return this.getLabel(item).charAt(0).toUpperCase();
     }
+    /** Claves de items cuya imagen de avatar falló al cargar (para el fallback). */
+    failedImages = signal(new Set(), ...(ngDevMode ? [{ debugName: "failedImages" }] : []));
+    /** URL de imagen del avatar, o null si no hay o si falló al cargar. */
+    getAvatarImage(item) {
+        const key = item[this.data.config.valueKey];
+        if (this.failedImages().has(key))
+            return null;
+        return this.data.config.avatarImage?.(item);
+    }
+    /** Marca la imagen como fallida para caer al texto/icono. */
+    onAvatarError(item) {
+        const key = item[this.data.config.valueKey];
+        this.failedImages.update(s => new Set(s).add(key));
+    }
     // ─── Selection ──────────────────────────────────────────────────────────────
     toggleItem(item) {
         if (this.data.config.disabled?.(item))
@@ -3139,23 +3419,33 @@ class NgxPaginatedSelectBottomSheetComponent {
         // Only update the raw signal — the debounce subscription handles the rest
         this.query.set(event.target.value);
     }
-    clearQuery(inputEl, container) {
-        inputEl.value = '';
-        container.scrollTop = 0;
+    clearQuery(container) {
+        // El input refleja la query vía [value]="query()", así que basta con resetear
+        // el signal (no hace falta el ref del DOM, que no está en scope en el estado vacío).
+        if (container)
+            container.scrollTop = 0;
         this.query.set('');
         // Emit on the immediate subject to bypass the 400 ms debounce
         this._immediateQuery$.next('');
     }
     // ─── Scroll ──────────────────────────────────────────────────────────────────
     onScroll(container) {
+        // Sombra bajo la cabecera al desplazar
+        this.headerScrolled.set(container.scrollTop > 4);
         if (this.isLoading())
             return;
         const { scrollTop, clientHeight, scrollHeight } = container;
-        if (scrollTop + clientHeight + 250 >= scrollHeight &&
+        // Prefetch: se pide la siguiente página ~320px antes del final para que la
+        // fila de "cargando más" apenas se vea (scroll infinito fluido).
+        if (scrollTop + clientHeight + 320 >= scrollHeight &&
             this.options().length < this.total()) {
             this.data.filters.update(f => ({ ...f, pageNumber: f.pageNumber + 1 }));
         }
     }
+    /** Reintenta la carga tras un error. */
+    retry() {
+        this.resource.reload();
+    }
     // ─── Select all ─────────────────────────────────────────────────────────────
     toggleSelectAll() {
         const key = this.data.config.valueKey;
@@ -3179,7 +3469,7 @@ class NgxPaginatedSelectBottomSheetComponent {
         this._ref.dismiss(undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            (click)=\"clearQuery(searchInput, optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__progress\">\n    @if (isLoading()) {\n      <mat-progress-bar mode=\"indeterminate\" />\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n    <!-- Skeleton loading (staggered) -->\n    @if (options().length === 0 && isLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Empty state -->\n    @if (options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__empty\">\n        <div class=\"ps-bs__empty-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <span class=\"ps-bs__empty-text\">{{ data.noResultsMessage }}</span>\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else {\n          @if (selected) {\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ selectedCount() }} de {{ total() }} seleccionados\n      } @else {\n        {{ total() }} resultados\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton=\"outlined\" (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".ngx-paginated-select-panel .mat-bottom-sheet-container{border-radius:28px 28px 0 0;padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;height:min(78vh,640px)!important;max-height:min(78vh,640px)!important;min-width:min(640px,100vw)}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:flex;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:40px;height:4px;border-radius:2px;background:var(--mat-sys-outline-variant, rgba(0, 0, 0, .2))}.ps-bs__header{flex:0 0 auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font-size:20px;font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;font-size:12px;font-weight:600;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest, #e6e0e9);border-radius:28px;border:2px solid transparent;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.ps-bs__search:focus-within{background:var(--mat-sys-surface, #fffbfe);border-color:var(--mat-sys-primary, #6750a4);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 16%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font-size:15px;font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .45))}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s ease;flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #1c1b1f) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:68px;overflow-y:auto;padding:2px 0}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 4px 0 12px;border-radius:8px;background:var(--mat-sys-secondary-container, #e8def8);color:var(--mat-sys-on-secondary-container, #1d192b);font-size:13px;font-weight:500;white-space:nowrap;max-width:180px;animation:chip-in .2s cubic-bezier(.4,0,.2,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container, #1d192b) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__progress{flex:0 0 auto;height:4px}.ps-bs__progress mat-progress-bar{display:block}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 20px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .08));transition:background .15s ease}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #1c1b1f) 5%,transparent)}.ps-bs__select-all-label{font-size:14px;font-weight:500;color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 0;min-height:0;overflow-y:auto;padding:4px 8px}.ps-bs__skeleton{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;opacity:0;animation:skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:42px;height:42px;min-width:42px;border-radius:50%;background:linear-gradient(110deg,var(--mat-sys-surface-container, #f3edf7) 30%,var(--mat-sys-surface-container-high, #ece6f0) 50%,var(--mat-sys-surface-container, #f3edf7) 70%);background-size:300% 100%;animation:shimmer 1.8s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(110deg,var(--mat-sys-surface-container, #f3edf7) 30%,var(--mat-sys-surface-container-high, #ece6f0) 50%,var(--mat-sys-surface-container, #f3edf7) 70%);background-size:300% 100%;animation:shimmer 1.8s ease-in-out infinite}.ps-bs__skeleton-line--title{width:65%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ps-bs__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:16px}.ps-bs__empty-icon-wrap{width:80px;height:80px;border-radius:50%;background:var(--mat-sys-surface-container-highest, #e6e0e9);display:flex;align-items:center;justify-content:center}.ps-bs__empty-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .4))}.ps-bs__empty-text{font-size:15px;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .45));text-align:center}.ps-bs__option{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;border-radius:12px;transition:background .15s ease;min-height:56px}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface, #1c1b1f) 6%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 16%,transparent)}.ps-bs__option--disabled{opacity:.4;cursor:not-allowed}.ps-bs__option-avatar{width:42px;height:42px;min-width:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;background:var(--mat-sys-primary-container, #eaddff);color:var(--mat-sys-on-primary-container, #21005d);transition:background .2s ease,color .2s ease,transform .2s ease}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary, #6750a4);color:var(--mat-sys-on-primary, #fff);transform:scale(1.05)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font-size:14px;color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease,font-weight .15s ease}.ps-bs__option--selected .ps-bs__option-label{font-weight:600;color:var(--mat-sys-primary, #6750a4)}.ps-bs__option-subtitle{font-size:12px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary, #6750a4);font-size:22px;width:22px;height:22px}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--mat-sys-surface, #fffbfe);box-shadow:0 -4px 20px #0000000f;gap:12px;z-index:1}.ps-bs__footer-count{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5));white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}@media (max-width: 600px){.ngx-paginated-select-panel .mat-bottom-sheet-container{height:90vh!important;max-height:90vh!important;min-width:100vw;border-radius:20px 20px 0 0}.ps-bs__header{padding:12px 16px;gap:12px}.ps-bs__title{font-size:18px}.ps-bs__search{height:42px}.ps-bs__options{padding:4px 6px}.ps-bs__option{padding:10px;border-radius:10px}.ps-bs__footer{padding:12px 16px}}@media (min-width: 601px){.ps-bs__handle{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Filtros extra + chips: bloque con scroll propio para que no aplasten la lista -->\n    @if (data.extraFiltersTemplate || (data.multiple && selectedItems().length > 0)) {\n      <div class=\"ps-bs__header-scroll\">\n        <!-- Extra filters projection -->\n        @if (data.extraFiltersTemplate) {\n          <div class=\"ps-bs__extra-filters\">\n            <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n          </div>\n        }\n\n        <!-- Selected chips (custom lightweight chips) -->\n        @if (data.multiple && selectedItems().length > 0) {\n          <div class=\"ps-bs__selected-chips\">\n            @for (item of selectedItems(); track item[data.config.valueKey]) {\n              <div class=\"ps-bs__chip\">\n                <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n                <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n\n    <!-- Skeleton loading (only for the first page) -->\n    @if (isInitialLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Error state -->\n    @if (hasError() && !isLoading() && options().length === 0) {\n      <div class=\"ps-bs__state ps-bs__error\">\n        <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n          <mat-icon>error_outline</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n        <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n        <button matButton=\"tonal\" (click)=\"retry()\">\n          <mat-icon>refresh</mat-icon>\n          {{ intl.paginatedSelectRetryLabel }}\n        </button>\n      </div>\n    }\n\n    <!-- Empty state -->\n    @if (!hasError() && options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__state ps-bs__empty\">\n        <div class=\"ps-bs__state-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n        @if (query()) {\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n          <button matButton (click)=\"clearQuery(optionsContainer)\">\n            {{ intl.paginatedSelectClearSearchLabel }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n      @let avatarImg = getAvatarImage(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (avatarImg) {\n            <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n          } @else if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else if (selected) {\n          <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n        }\n      </div>\n    }\n\n    <!-- Loading more (pagination) / end of list -->\n    @if (isLoadingMore()) {\n      <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n      </div>\n    } @else if (allLoaded() && options().length > 0) {\n      <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(560px,100vw - 48px);min-width:0;max-width:560px;height:min(85vh,720px)!important;max-height:min(85vh,720px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__header-scroll{display:flex;flex-direction:column;gap:14px;min-height:0;max-height:34vh;overflow-y:auto}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:76px;overflow-y:auto;padding:4px 0 2px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 24px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,transparent)}.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 auto;min-height:25vh;overflow-y:auto;padding:6px 10px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent);box-shadow:inset 3px 0 0 0 var(--mat-sys-primary)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{box-shadow:0 0 0 2px var(--mat-sys-primary),0 0 0 4px var(--mat-sys-surface-container-high)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__options{padding:4px 8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, decorators: [{
             type: Component,
@@ -3197,15 +3487,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         MatTooltipModule,
                         MatBadgeModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            (click)=\"clearQuery(searchInput, optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__progress\">\n    @if (isLoading()) {\n      <mat-progress-bar mode=\"indeterminate\" />\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n    <!-- Skeleton loading (staggered) -->\n    @if (options().length === 0 && isLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Empty state -->\n    @if (options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__empty\">\n        <div class=\"ps-bs__empty-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <span class=\"ps-bs__empty-text\">{{ data.noResultsMessage }}</span>\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else {\n          @if (selected) {\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ selectedCount() }} de {{ total() }} seleccionados\n      } @else {\n        {{ total() }} resultados\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton=\"outlined\" (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".ngx-paginated-select-panel .mat-bottom-sheet-container{border-radius:28px 28px 0 0;padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;height:min(78vh,640px)!important;max-height:min(78vh,640px)!important;min-width:min(640px,100vw)}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:flex;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:40px;height:4px;border-radius:2px;background:var(--mat-sys-outline-variant, rgba(0, 0, 0, .2))}.ps-bs__header{flex:0 0 auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font-size:20px;font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;font-size:12px;font-weight:600;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest, #e6e0e9);border-radius:28px;border:2px solid transparent;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.ps-bs__search:focus-within{background:var(--mat-sys-surface, #fffbfe);border-color:var(--mat-sys-primary, #6750a4);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 16%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font-size:15px;font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .45))}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s ease;flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #1c1b1f) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:68px;overflow-y:auto;padding:2px 0}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 4px 0 12px;border-radius:8px;background:var(--mat-sys-secondary-container, #e8def8);color:var(--mat-sys-on-secondary-container, #1d192b);font-size:13px;font-weight:500;white-space:nowrap;max-width:180px;animation:chip-in .2s cubic-bezier(.4,0,.2,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container, #1d192b) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__progress{flex:0 0 auto;height:4px}.ps-bs__progress mat-progress-bar{display:block}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 20px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .08));transition:background .15s ease}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #1c1b1f) 5%,transparent)}.ps-bs__select-all-label{font-size:14px;font-weight:500;color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 0;min-height:0;overflow-y:auto;padding:4px 8px}.ps-bs__skeleton{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;opacity:0;animation:skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:42px;height:42px;min-width:42px;border-radius:50%;background:linear-gradient(110deg,var(--mat-sys-surface-container, #f3edf7) 30%,var(--mat-sys-surface-container-high, #ece6f0) 50%,var(--mat-sys-surface-container, #f3edf7) 70%);background-size:300% 100%;animation:shimmer 1.8s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(110deg,var(--mat-sys-surface-container, #f3edf7) 30%,var(--mat-sys-surface-container-high, #ece6f0) 50%,var(--mat-sys-surface-container, #f3edf7) 70%);background-size:300% 100%;animation:shimmer 1.8s ease-in-out infinite}.ps-bs__skeleton-line--title{width:65%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ps-bs__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:16px}.ps-bs__empty-icon-wrap{width:80px;height:80px;border-radius:50%;background:var(--mat-sys-surface-container-highest, #e6e0e9);display:flex;align-items:center;justify-content:center}.ps-bs__empty-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .4))}.ps-bs__empty-text{font-size:15px;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .45));text-align:center}.ps-bs__option{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;border-radius:12px;transition:background .15s ease;min-height:56px}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface, #1c1b1f) 6%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 16%,transparent)}.ps-bs__option--disabled{opacity:.4;cursor:not-allowed}.ps-bs__option-avatar{width:42px;height:42px;min-width:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;background:var(--mat-sys-primary-container, #eaddff);color:var(--mat-sys-on-primary-container, #21005d);transition:background .2s ease,color .2s ease,transform .2s ease}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary, #6750a4);color:var(--mat-sys-on-primary, #fff);transform:scale(1.05)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font-size:14px;color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease,font-weight .15s ease}.ps-bs__option--selected .ps-bs__option-label{font-weight:600;color:var(--mat-sys-primary, #6750a4)}.ps-bs__option-subtitle{font-size:12px;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary, #6750a4);font-size:22px;width:22px;height:22px}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--mat-sys-surface, #fffbfe);box-shadow:0 -4px 20px #0000000f;gap:12px;z-index:1}.ps-bs__footer-count{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .5));white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}@media (max-width: 600px){.ngx-paginated-select-panel .mat-bottom-sheet-container{height:90vh!important;max-height:90vh!important;min-width:100vw;border-radius:20px 20px 0 0}.ps-bs__header{padding:12px 16px;gap:12px}.ps-bs__title{font-size:18px}.ps-bs__search{height:42px}.ps-bs__options{padding:4px 6px}.ps-bs__option{padding:10px;border-radius:10px}.ps-bs__footer{padding:12px 16px}}@media (min-width: 601px){.ps-bs__handle{display:none}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Filtros extra + chips: bloque con scroll propio para que no aplasten la lista -->\n    @if (data.extraFiltersTemplate || (data.multiple && selectedItems().length > 0)) {\n      <div class=\"ps-bs__header-scroll\">\n        <!-- Extra filters projection -->\n        @if (data.extraFiltersTemplate) {\n          <div class=\"ps-bs__extra-filters\">\n            <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n          </div>\n        }\n\n        <!-- Selected chips (custom lightweight chips) -->\n        @if (data.multiple && selectedItems().length > 0) {\n          <div class=\"ps-bs__selected-chips\">\n            @for (item of selectedItems(); track item[data.config.valueKey]) {\n              <div class=\"ps-bs__chip\">\n                <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n                <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n\n    <!-- Skeleton loading (only for the first page) -->\n    @if (isInitialLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Error state -->\n    @if (hasError() && !isLoading() && options().length === 0) {\n      <div class=\"ps-bs__state ps-bs__error\">\n        <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n          <mat-icon>error_outline</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n        <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n        <button matButton=\"tonal\" (click)=\"retry()\">\n          <mat-icon>refresh</mat-icon>\n          {{ intl.paginatedSelectRetryLabel }}\n        </button>\n      </div>\n    }\n\n    <!-- Empty state -->\n    @if (!hasError() && options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__state ps-bs__empty\">\n        <div class=\"ps-bs__state-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n        @if (query()) {\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n          <button matButton (click)=\"clearQuery(optionsContainer)\">\n            {{ intl.paginatedSelectClearSearchLabel }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n      @let avatarImg = getAvatarImage(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (avatarImg) {\n            <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n          } @else if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else if (selected) {\n          <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n        }\n      </div>\n    }\n\n    <!-- Loading more (pagination) / end of list -->\n    @if (isLoadingMore()) {\n      <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n      </div>\n    } @else if (allLoaded() && options().length > 0) {\n      <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(560px,100vw - 48px);min-width:0;max-width:560px;height:min(85vh,720px)!important;max-height:min(85vh,720px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__header-scroll{display:flex;flex-direction:column;gap:14px;min-height:0;max-height:34vh;overflow-y:auto}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:76px;overflow-y:auto;padding:4px 0 2px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 24px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,transparent)}.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 auto;min-height:25vh;overflow-y:auto;padding:6px 10px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent);box-shadow:inset 3px 0 0 0 var(--mat-sys-primary)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{box-shadow:0 0 0 2px var(--mat-sys-primary),0 0 0 4px var(--mat-sys-surface-container-high)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__options{padding:4px 8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"] }]
         }], ctorParameters: () => [] });
 
 class NgxPaginatedSelect {
     // ─── Dependencies ──────────────────────────────────────────────────────────
     _bottomSheet = inject(MatBottomSheet);
-    _cdr = inject(ChangeDetectorRef);
-    // ─── ViewChild ─────────────────────────────────────────────────────────────
-    _matSelect = viewChild('matSelect', ...(ngDevMode ? [{ debugName: "_matSelect" }] : []));
+    /** Se auto-registra como CVA (self/optional para leer validación y no fallar sin form). */
+    _ngControl = inject(NgControl, { self: true, optional: true });
+    intl = inject(NgxTablesIntl);
     // ─── Inputs ────────────────────────────────────────────────────────────────
     /** Label that floats on the form field */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -3222,8 +3512,6 @@ class NgxPaginatedSelect {
         query: undefined,
         sortBy: undefined,
     }), ...(ngDevMode ? [{ debugName: "filters" }] : []));
-    /** FormControl to integrate with reactive forms */
-    control = input(new FormControl(), ...(ngDevMode ? [{ debugName: "control" }] : []));
     /** Pre-selected items — accepts full objects OR partials with only the valueKey set */
     selectedItems = input([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     /** Allow selecting multiple items */
@@ -3240,14 +3528,14 @@ class NgxPaginatedSelect {
     displayMode = input('chips', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
     /** Whether to show the search input inside the bottom sheet */
     showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Placeholder for the search input inside the bottom sheet */
-    searchPlaceholder = input('Buscar...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
-    /** Message when no results are found */
-    noResultsMessage = input('No se encontraron resultados', ...(ngDevMode ? [{ debugName: "noResultsMessage" }] : []));
-    /** Label for the confirm button (multiple mode) */
-    confirmLabel = input('Confirmar', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : []));
-    /** Label for the reset button (multiple mode) */
-    resetLabel = input('Limpiar', ...(ngDevMode ? [{ debugName: "resetLabel" }] : []));
+    /** Placeholder for the search input inside the bottom sheet (defaults to intl) */
+    searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : []));
+    /** Message when no results are found (defaults to intl) */
+    noResultsMessage = input(...(ngDevMode ? [undefined, { debugName: "noResultsMessage" }] : []));
+    /** Label for the confirm button (multiple mode, defaults to intl) */
+    confirmLabel = input(...(ngDevMode ? [undefined, { debugName: "confirmLabel" }] : []));
+    /** Label for the reset button (multiple mode, defaults to intl) */
+    resetLabel = input(...(ngDevMode ? [undefined, { debugName: "resetLabel" }] : []));
     /** Controls how the subscript wrapper (hint/error) reserves space */
     subscriptSizing = input('fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
     /** Error message rendered inside mat-error */
@@ -3267,8 +3555,8 @@ class NgxPaginatedSelect {
     chipsDirection = input('column', ...(ngDevMode ? [{ debugName: "chipsDirection" }] : []));
     /** Whether to show a "Select all" toggle in the bottom sheet (multiple mode) */
     showSelectAll = input(false, ...(ngDevMode ? [{ debugName: "showSelectAll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Label for the select all toggle */
-    selectAllLabel = input('Seleccionar todo', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
+    /** Label for the select all toggle (defaults to intl) */
+    selectAllLabel = input(...(ngDevMode ? [undefined, { debugName: "selectAllLabel" }] : []));
     // ─── Outputs ───────────────────────────────────────────────────────────────
     /** Emits the full T object (single) or T[] (multiple) when selection changes */
     valueChange = output();
@@ -3276,15 +3564,113 @@ class NgxPaginatedSelect {
     selectionChange = output();
     // ─── Internal state ────────────────────────────────────────────────────────
     _selectedItems = signal([], ...(ngDevMode ? [{ debugName: "_selectedItems" }] : []));
-    _isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** Evita re-emitir onChange cuando el cambio viene del formulario (writeValue). */
+    _suppressEmit = false;
+    /** Huella de la última selección aplicada desde el input `selectedItems`. */
+    _lastSyncedSelection = null;
     // ─── Computed ──────────────────────────────────────────────────────────────
+    isDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     selectedLabel = computed(() => {
         const items = this._selectedItems();
         if (items.length === 0)
             return '';
         return items.map(i => this.getLabel(i)).join(', ');
     }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
+    hasSelection = computed(() => this._selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    showChips = computed(() => this.multiple() && this.displayMode() === 'chips', ...(ngDevMode ? [{ debugName: "showChips" }] : []));
+    displayedChips = computed(() => this._selectedItems().slice(0, this.maxChipsDisplayed()), ...(ngDevMode ? [{ debugName: "displayedChips" }] : []));
+    remainingChipsCount = computed(() => Math.max(0, this._selectedItems().length - this.maxChipsDisplayed()), ...(ngDevMode ? [{ debugName: "remainingChipsCount" }] : []));
+    /** ErrorStateMatcher que refleja el estado del control del formulario. */
+    errorStateMatcher = {
+        isErrorState: () => !!(this._ngControl?.invalid && this._ngControl?.touched),
+    };
+    // Etiquetas efectivas (override por input o valor por defecto de intl)
+    effectiveSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this.intl.searchPlaceholder, ...(ngDevMode ? [{ debugName: "effectiveSearchPlaceholder" }] : []));
+    effectiveNoResults = computed(() => this.noResultsMessage() ?? this.intl.noResultsMessage, ...(ngDevMode ? [{ debugName: "effectiveNoResults" }] : []));
+    effectiveConfirmLabel = computed(() => this.confirmLabel() ?? this.intl.paginatedSelectConfirmLabel, ...(ngDevMode ? [{ debugName: "effectiveConfirmLabel" }] : []));
+    effectiveResetLabel = computed(() => this.resetLabel() ?? this.intl.paginatedSelectResetLabel, ...(ngDevMode ? [{ debugName: "effectiveResetLabel" }] : []));
+    effectiveSelectAllLabel = computed(() => this.selectAllLabel() ?? this.intl.paginatedSelectSelectAllLabel, ...(ngDevMode ? [{ debugName: "effectiveSelectAllLabel" }] : []));
+    constructor() {
+        if (this._ngControl)
+            this._ngControl.valueAccessor = this;
+        // Sync selectedItems input → estado interno (solo si el contenido cambia de verdad;
+        // un literal `[...]` recreado en cada CD no debe borrar la selección del usuario).
+        effect(() => {
+            const incoming = this.selectedItems();
+            const key = this.config().valueKey;
+            const fingerprint = JSON.stringify(incoming.map(item => item?.[key]));
+            if (fingerprint === this._lastSyncedSelection)
+                return;
+            this._lastSyncedSelection = fingerprint;
+            this._selectedItems.set(incoming);
+        });
+        // Estado interno → formulario + outputs (se omite cuando el cambio viene de writeValue).
+        effect(() => {
+            const items = this._selectedItems();
+            if (this._suppressEmit) {
+                this._suppressEmit = false;
+                return;
+            }
+            untracked(() => this.emitChange(items));
+        });
+    }
+    // ─── ControlValueAccessor ───────────────────────────────────────────────────
+    writeValue(value) {
+        const key = this.config().valueKey;
+        const keys = this.keysFromValue(value);
+        const currentKeys = this._selectedItems().map(i => i[key]);
+        // Mismo conjunto de claves → no tocamos el estado (conserva objetos enriquecidos).
+        if (this.sameKeySet(keys, currentKeys))
+            return;
+        this._suppressEmit = true;
+        this.applyValueFromKeys(keys);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
+    // ─── Helpers de valor ───────────────────────────────────────────────────────
+    keysFromValue(value) {
+        if (value == null)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }
+    applyValueFromKeys(keys) {
+        const key = this.config().valueKey;
+        // Se conservan los objetos completos ya conocidos para no perder las etiquetas.
+        const known = new Map(this._selectedItems().map(i => [i[key], i]));
+        this._selectedItems.set(keys.map(k => known.get(k) ?? { [key]: k }));
+    }
+    sameKeySet(a, b) {
+        if (a.length !== b.length)
+            return false;
+        const set = new Set(b);
+        return a.every(k => set.has(k));
+    }
+    emitChange(items) {
+        const key = this.config().valueKey;
+        // Se descartan items sin valueKey (meterían undefined → null en el payload).
+        const validItems = items.filter(i => i != null && i[key] != null);
+        if (this.multiple()) {
+            // null en vez de [] para que Validators.required marque vacío correctamente
+            this.onChange(validItems.length > 0 ? validItems.map(i => i[key]) : null);
+            this.valueChange.emit(validItems);
+        }
+        else {
+            this.onChange(validItems[0]?.[key] ?? null);
+            this.valueChange.emit(validItems[0]);
+        }
+        this.selectionChange.emit(validItems);
+    }
     /**
      * Safe label resolver: tries `displayedLabel(item)`, falls back to
      * `String(item[valueKey])` so partial objects never throw.
@@ -3301,68 +3687,13 @@ class NgxPaginatedSelect {
             return keyVal;
         }
     }
-    hasSelection = computed(() => this._selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
-    /** ErrorStateMatcher that reflects the bound FormControl's touched+invalid state */
-    errorStateMatcher = computed(() => ({
-        isErrorState: () => {
-            const ctrl = this.control();
-            return !!(ctrl && ctrl.invalid && ctrl.touched);
-        },
-    }), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
-    showChips = computed(() => this.multiple() && this.displayMode() === 'chips', ...(ngDevMode ? [{ debugName: "showChips" }] : []));
-    displayedChips = computed(() => {
-        const items = this._selectedItems();
-        const max = this.maxChipsDisplayed();
-        return items.slice(0, max);
-    }, ...(ngDevMode ? [{ debugName: "displayedChips" }] : []));
-    remainingChipsCount = computed(() => Math.max(0, this._selectedItems().length - this.maxChipsDisplayed()), ...(ngDevMode ? [{ debugName: "remainingChipsCount" }] : []));
-    constructor() {
-        // Sync selectedItems input → internal state
-        effect(() => {
-            this._selectedItems.set(this.selectedItems());
-        });
-        // Sync disabled input → internal state
-        effect(() => {
-            const isDisabled = this.disabled();
-            this._isDisabled.set(isDisabled);
-        });
-        // Sync selection → FormControl value + outputs
-        effect(() => {
-            const items = this._selectedItems();
-            const key = this.config().valueKey;
-            // Drop items that don't carry the configured valueKey — otherwise we'd
-            // push `undefined` into the FormControl, which JSON-serializes as `null`
-            // and breaks downstream payloads silently.
-            const validItems = items.filter(i => i != null && i[key] != null);
-            if (validItems.length !== items.length) {
-                console.warn('[NgxPaginatedSelect] Dropped selected items missing valueKey ' +
-                    `'${String(key)}'. Check the endpoint response or selectedItems input.`, items);
-            }
-            if (this.multiple()) {
-                // Use null instead of [] so Validators.required flags empty selection correctly
-                this.control()?.setValue(validItems.length > 0 ? validItems.map(i => i[key]) : null);
-                this.valueChange.emit(validItems);
-            }
-            else {
-                this.control()?.setValue(validItems[0]?.[key] ?? null);
-                this.valueChange.emit(validItems[0]);
-            }
-            this.selectionChange.emit(validItems);
-            this._cdr.markForCheck();
-        });
-    }
-    ngOnInit() {
-        if (this.disabled()) {
-            this.control()?.disable();
-        }
-    }
     // ─── Bottom sheet ──────────────────────────────────────────────────────────
     openBottomSheet(event) {
         event.stopPropagation();
-        if (this._isDisabled())
+        if (this.isDisabled())
             return;
-        this.control()?.markAsTouched();
-        this.control()?.updateValueAndValidity();
+        this.onTouched();
+        this._ngControl?.control?.markAsTouched();
         this._isOpen.set(true);
         const filtersSignal = this.filters();
         filtersSignal.update(f => ({ ...f, pageNumber: 1 }));
@@ -3374,19 +3705,20 @@ class NgxPaginatedSelect {
             selectedItems: [...this._selectedItems()],
             multiple: this.multiple(),
             showSearch: this.showSearch(),
-            searchPlaceholder: this.searchPlaceholder(),
-            noResultsMessage: this.noResultsMessage(),
-            confirmLabel: this.confirmLabel(),
-            resetLabel: this.resetLabel(),
+            searchPlaceholder: this.effectiveSearchPlaceholder(),
+            noResultsMessage: this.effectiveNoResults(),
+            confirmLabel: this.effectiveConfirmLabel(),
+            resetLabel: this.effectiveResetLabel(),
             optionTemplate: this.optionTemplate(),
             extraFiltersTemplate: this.extraFiltersTemplate(),
             showSelectAll: this.showSelectAll(),
-            selectAllLabel: this.selectAllLabel(),
+            selectAllLabel: this.effectiveSelectAllLabel(),
         };
         this._bottomSheet
             .open(NgxPaginatedSelectBottomSheetComponent, {
             data,
             panelClass: 'ngx-paginated-select-panel',
+            backdropClass: 'ngx-paginated-select-backdrop',
             autoFocus: data.showSearch ? '.ps-bs__search-input' : 'first-tabbable',
         })
             .afterDismissed()
@@ -3395,38 +3727,40 @@ class NgxPaginatedSelect {
             if (result !== undefined) {
                 this._selectedItems.set(result);
             }
-            this.control()?.markAsTouched();
-            this.control()?.updateValueAndValidity();
-            this._cdr.detectChanges();
+            this.onTouched();
+            this._ngControl?.control?.markAsTouched();
         });
     }
+    /** Abrir el bottom sheet desde el teclado (Enter / Espacio / flecha abajo). */
+    onTriggerKeydown(event) {
+        if (this.isDisabled())
+            return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.openBottomSheet(event);
+        }
+    }
     // ─── Chip actions ──────────────────────────────────────────────────────────
+    // La propagación del click de la "x" se detiene en la plantilla para que no
+    // burbujee al form-field y abra el bottom sheet.
     removeChip(item, _event) {
         const key = this.config().valueKey;
         this._selectedItems.update(items => items.filter(i => i[key] !== item[key]));
-        this.control()?.markAsTouched();
-        this.control()?.updateValueAndValidity();
-        this._cdr.detectChanges();
-    }
-    preventOpen(isOpen) {
-        if (isOpen) {
-            this._matSelect()?.close();
-        }
+        this.onTouched();
+        this._ngControl?.control?.markAsTouched();
     }
     clearSelection(event) {
         event.stopPropagation();
         this._selectedItems.set([]);
-        this.control()?.reset();
-        this.control()?.markAsTouched();
-        this.control()?.updateValueAndValidity();
-        this._cdr.markForCheck();
+        this.onTouched();
+        this._ngControl?.control?.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null }, maxChipsDisplayed: { classPropertyName: "maxChipsDisplayed", publicName: "maxChipsDisplayed", isSignal: true, isRequired: false, transformFunction: null }, chipsDirection: { classPropertyName: "chipsDirection", publicName: "chipsDirection", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "_matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"_isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid #chipGrid class=\"ps-trigger__chip-grid\" [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\" [formControl]=\"control()\">\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"_isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"_isDisabled()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid -->\n    <input matInput [matChipInputFor]=\"chipGrid\" style=\"display: none\" readonly />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !_isDisabled()) {\n        <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"_isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-select\n      #matSelect\n      class=\"ps-trigger__input\"\n      [formControl]=\"control()\"\n      [multiple]=\"multiple()\"\n      style=\"pointer-events: none\"\n      (openedChange)=\"preventOpen($event)\"\n    >\n      @for (item of _selectedItems(); track item[config().valueKey]) {\n        <mat-option [value]=\"item[config().valueKey]\">{{ getLabel(item) }}</mat-option>\n      }\n    </mat-select>\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !_isDisabled()) {\n        <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip{font-size:13px}.ps-trigger__chip ::ng-deep .mdc-evolution-chip__cell--primary,.ps-trigger__chip ::ng-deep .mdc-evolution-chip__action--primary{padding-left:10px;padding-right:0}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:12px;font-size:11px;font-weight:700;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null }, maxChipsDisplayed: { classPropertyName: "maxChipsDisplayed", publicName: "maxChipsDisplayed", isSignal: true, isRequired: false, transformFunction: null }, chipsDirection: { classPropertyName: "chipsDirection", publicName: "chipsDirection", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid\n      #chipGrid\n      class=\"ps-trigger__chip-grid\"\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n    >\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n    <input\n      matInput\n      [matChipInputFor]=\"chipGrid\"\n      class=\"ps-trigger__kbd-input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [attr.aria-label]=\"label()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <input\n      matInput\n      class=\"ps-trigger__input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [value]=\"selectedLabel()\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-paginated-select', imports: [
+            args: [{ selector: 'ngx-paginated-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         MatBottomSheetModule,
@@ -3435,11 +3769,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
-                        MatSelectModule,
                         MatTooltipModule,
                         MatProgressSpinnerModule,
-                    ], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"_isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid #chipGrid class=\"ps-trigger__chip-grid\" [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\" [formControl]=\"control()\">\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"_isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"_isDisabled()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid -->\n    <input matInput [matChipInputFor]=\"chipGrid\" style=\"display: none\" readonly />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !_isDisabled()) {\n        <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"_isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-select\n      #matSelect\n      class=\"ps-trigger__input\"\n      [formControl]=\"control()\"\n      [multiple]=\"multiple()\"\n      style=\"pointer-events: none\"\n      (openedChange)=\"preventOpen($event)\"\n    >\n      @for (item of _selectedItems(); track item[config().valueKey]) {\n        <mat-option [value]=\"item[config().valueKey]\">{{ getLabel(item) }}</mat-option>\n      }\n    </mat-select>\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !_isDisabled()) {\n        <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip{font-size:13px}.ps-trigger__chip ::ng-deep .mdc-evolution-chip__cell--primary,.ps-trigger__chip ::ng-deep .mdc-evolution-chip__action--primary{padding-left:10px;padding-right:0}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:12px;font-size:11px;font-weight:700;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], extraFiltersTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFiltersTemplate", required: false }] }], maxChipsDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChipsDisplayed", required: false }] }], chipsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsDirection", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+                    ], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid\n      #chipGrid\n      class=\"ps-trigger__chip-grid\"\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n    >\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n    <input\n      matInput\n      [matChipInputFor]=\"chipGrid\"\n      class=\"ps-trigger__kbd-input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [attr.aria-label]=\"label()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <input\n      matInput\n      class=\"ps-trigger__input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [value]=\"selectedLabel()\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], extraFiltersTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFiltersTemplate", required: false }] }], maxChipsDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChipsDisplayed", required: false }] }], chipsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsDirection", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class NgxSkeleton {
     /** Shape variant of the skeleton: text (horizontal bars), circle, rect, or rounded rect. */
@@ -3503,6 +3836,7 @@ let _uid = 0;
 class NgxFileInput {
     _platform = inject(PLATFORM_ID);
     _inputId = `ngx-fi-${++_uid}`;
+    _nativeInput = viewChild('nativeInput', ...(ngDevMode ? [{ debugName: "_nativeInput" }] : []));
     // ── Inputs ──────────────────────────────────────────────────────────────────
     /** Accepted MIME types or extensions (e.g. `'image/*,.pdf'`). */
     accept = input('*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -3540,6 +3874,13 @@ class NgxFileInput {
     liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
     /** Unique id for the hidden file input. */
     inputId = this._inputId;
+    /** Disabled state coming from `setDisabledState()` (reactive forms). */
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
+    /**
+     * Effective disabled state: the `disabled` input OR the state pushed by the
+     * parent FormControl through `setDisabledState()`.
+     */
+    isDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     /** Derived: valid files only (used as FormControl value). */
     validFiles = computed(() => this.items().filter(i => i.status === 'valid').map(i => i.file), ...(ngDevMode ? [{ debugName: "validFiles" }] : []));
     // ── ControlValueAccessor ────────────────────────────────────────────────────
@@ -3559,11 +3900,14 @@ class NgxFileInput {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
     // ── Drag & Drop ─────────────────────────────────────────────────────────────
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (!this.disabled())
+        if (!this.isDisabled())
             this.isDragOver.set(true);
     }
     onDragLeave(event) {
@@ -3575,7 +3919,7 @@ class NgxFileInput {
         event.preventDefault();
         event.stopPropagation();
         this.isDragOver.set(false);
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         const files = event.dataTransfer?.files;
         if (files && files.length > 0) {
@@ -3592,10 +3936,10 @@ class NgxFileInput {
         input.value = '';
     }
     openFilePicker() {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         this._onTouched();
-        document.getElementById(this._inputId)?.click();
+        this._nativeInput()?.nativeElement.click();
     }
     // ── Remove ──────────────────────────────────────────────────────────────────
     removeFile(item) {
@@ -3765,13 +4109,13 @@ class NgxFileInput {
         return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxFileInput, isStandalone: true, selector: "ngx-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, host: { properties: { "class.ngx-fi--disabled": "disabled()", "class.ngx-fi--default": "variant() === 'default'", "class.ngx-fi--compact": "variant() === 'compact'", "class.ngx-fi--button": "variant() === 'button'" }, classAttribute: "ngx-file-input" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxFileInput, isStandalone: true, selector: "ngx-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, host: { properties: { "class.ngx-fi--disabled": "isDisabled()", "class.ngx-fi--default": "variant() === 'default'", "class.ngx-fi--compact": "variant() === 'compact'", "class.ngx-fi--button": "variant() === 'button'" }, classAttribute: "ngx-file-input" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxFileInput),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- Hidden native file input \u2014 always in DOM for accessibility -->\n<input\n  [id]=\"inputId\"\n  class=\"ngx-fi-native-input\"\n  type=\"file\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileInputChange($event)\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n/>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     VARIANT: DEFAULT \u2014 large drop zone\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (variant() === 'default') {\n  <div\n    class=\"ngx-fi-zone\"\n    [class.ngx-fi-zone--dragover]=\"isDragOver()\"\n    [class.ngx-fi-zone--disabled]=\"disabled()\"\n    role=\"region\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-disabled]=\"disabled()\"\n    tabindex=\"0\"\n    (click)=\"openFilePicker()\"\n    (keydown.enter)=\"openFilePicker()\"\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <mat-icon class=\"ngx-fi-zone__icon\">cloud_upload</mat-icon>\n    <span class=\"ngx-fi-zone__label\">{{ label() }}</span>\n    @if (hint()) {\n      <span class=\"ngx-fi-zone__hint\">{{ hint() }}</span>\n    }\n    <span class=\"ngx-fi-zone__btn-text\">o haz clic para seleccionar</span>\n\n    <!-- Drop confirmation flash -->\n    @if (showDropConfirm()) {\n      <div class=\"ngx-fi-zone__confirm\">\n        <mat-icon>check_circle</mat-icon>\n      </div>\n    }\n  </div>\n}\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     VARIANT: COMPACT \u2014 horizontal bar\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (variant() === 'compact') {\n  <div\n    class=\"ngx-fi-compact\"\n    [class.ngx-fi-compact--dragover]=\"isDragOver()\"\n    [class.ngx-fi-compact--disabled]=\"disabled()\"\n    role=\"region\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-disabled]=\"disabled()\"\n    tabindex=\"0\"\n    (click)=\"openFilePicker()\"\n    (keydown.enter)=\"openFilePicker()\"\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <mat-icon class=\"ngx-fi-compact__icon\">cloud_upload</mat-icon>\n    <div class=\"ngx-fi-compact__text\">\n      <span class=\"ngx-fi-compact__label\">{{ label() }}</span>\n      @if (hint()) {\n        <span class=\"ngx-fi-compact__hint\">{{ hint() }}</span>\n      }\n    </div>\n\n    @if (showDropConfirm()) {\n      <div class=\"ngx-fi-zone__confirm\">\n        <mat-icon>check_circle</mat-icon>\n      </div>\n    }\n  </div>\n}\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     VARIANT: BUTTON \u2014 only a button\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (variant() === 'button') {\n  <div\n    class=\"ngx-fi-button-wrap\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n    [class.ngx-fi-button-wrap--dragover]=\"isDragOver()\"\n  >\n    <button\n      mat-raised-button\n      color=\"primary\"\n      [disabled]=\"disabled()\"\n      (click)=\"openFilePicker()\"\n      type=\"button\"\n    >\n      <mat-icon>attach_file</mat-icon>\n      {{ label() }}\n    </button>\n  </div>\n}\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     FILE PREVIEW LIST\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (showPreview() && items().length > 0) {\n  <div class=\"ngx-fi-list\">\n    @for (item of items(); track item.id) {\n      <div\n        class=\"ngx-fi-item\"\n        [class.ngx-fi-item--error]=\"item.status === 'error'\"\n      >\n        <!-- Thumbnail / Icon -->\n        <div class=\"ngx-fi-item__thumb\" [class]=\"getFileColorClass(item.type)\">\n          @if (item.preview) {\n            <img [src]=\"item.preview\" [alt]=\"item.name\" />\n          } @else {\n            <mat-icon>{{ getFileIcon(item.type) }}</mat-icon>\n          }\n        </div>\n\n        <!-- Info -->\n        <div class=\"ngx-fi-item__info\">\n          <span class=\"ngx-fi-item__name\" [matTooltip]=\"item.name\">{{ item.name }}</span>\n          <span class=\"ngx-fi-item__meta\">\n            {{ formatSize(item.size) }}\n            @if (item.error) {\n              <span class=\"ngx-fi-item__error\">\n                <mat-icon>warning</mat-icon> {{ item.error }}\n              </span>\n            }\n          </span>\n        </div>\n\n        <!-- Remove -->\n        <button\n          class=\"ngx-fi-item__remove\"\n          type=\"button\"\n          mat-icon-button\n          (click)=\"removeFile(item); $event.stopPropagation()\"\n          [matTooltip]=\"'Eliminar ' + item.name\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n}\n\n<!-- Screen reader announcements -->\n<div class=\"ngx-fi-sr-only\" aria-live=\"polite\">{{ liveAnnouncement() }}</div>\n", styles: [".ngx-fi-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ngx-fi-native-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.ngx-fi-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:180px;padding:2rem 1.5rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-zone:hover:not(.ngx-fi-zone--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-zone:focus-visible:not(.ngx-fi-zone--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-zone--dragover .ngx-fi-zone__icon{transform:scale(1.15);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-zone__icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-on-surface-variant, #666);transition:transform .2s,color .2s}.ngx-fi-zone__label{font-size:1.05rem;font-weight:500;color:var(--mat-sys-on-surface, #333);text-align:center}.ngx-fi-zone__hint{font-size:.82rem;color:var(--mat-sys-on-surface-variant, #666);text-align:center}.ngx-fi-zone__btn-text{font-size:.82rem;color:var(--mat-sys-primary, #5c6bc0);font-weight:500;margin-top:.25rem}.ngx-fi-zone__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#43a0471f;pointer-events:none;animation:ngx-fi-confirm-flash .4s ease-out forwards}.ngx-fi-zone__confirm mat-icon{font-size:56px;width:56px;height:56px;color:var(--mat-sys-tertiary, #43a047)}.ngx-fi-compact{position:relative;display:flex;align-items:center;gap:1rem;height:80px;padding:0 1.25rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-compact:hover:not(.ngx-fi-compact--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-compact:focus-visible:not(.ngx-fi-compact--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-compact--dragover .ngx-fi-compact__icon{transform:scale(1.1);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-compact__icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant, #666);flex-shrink:0;transition:transform .2s,color .2s}.ngx-fi-compact__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.ngx-fi-compact__label{font-size:.95rem;font-weight:500;color:var(--mat-sys-on-surface, #333)}.ngx-fi-compact__hint{font-size:.78rem;color:var(--mat-sys-on-surface-variant, #666)}.ngx-fi-button-wrap{display:inline-block;position:relative;padding:4px;border-radius:8px;transition:background-color .2s,box-shadow .2s}.ngx-fi-button-wrap--dragover{background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:0 0 12px #5c6bc040}.ngx-fi-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.ngx-fi-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .65rem;border-radius:10px;background:var(--mat-sys-surface-container-low, #fafafa);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);transition:border-color .2s,background-color .2s;animation:ngx-fi-item-enter .2s ease-out both}.ngx-fi-item--error{border-color:var(--mat-sys-error, #d32f2f);background:#d32f2f0a}.ngx-fi-item__thumb{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.ngx-fi-item__thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}.ngx-fi-item__thumb mat-icon{font-size:24px;width:24px;height:24px}.ngx-fi-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.ngx-fi-item__name{font-size:.88rem;font-weight:500;color:var(--mat-sys-on-surface, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-fi-item__meta{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #666);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ngx-fi-item__error{color:var(--mat-sys-error, #d32f2f);display:inline-flex;align-items:center;gap:.2rem;font-weight:500}.ngx-fi-item__error mat-icon{font-size:14px;width:14px;height:14px}.ngx-fi-item__remove{flex-shrink:0}.ngx-fi-icon--image{background:#5c6bc01a}.ngx-fi-icon--image mat-icon{color:#5c6bc0}.ngx-fi-icon--pdf{background:#d32f2f1a}.ngx-fi-icon--pdf mat-icon{color:#d32f2f}.ngx-fi-icon--video{background:#1e88e51a}.ngx-fi-icon--video mat-icon{color:#1e88e5}.ngx-fi-icon--audio{background:#8e24aa1a}.ngx-fi-icon--audio mat-icon{color:#8e24aa}.ngx-fi-icon--generic{background:#0000000f}.ngx-fi-icon--generic mat-icon{color:#757575}@keyframes ngx-fi-item-enter{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ngx-fi-confirm-flash{0%{opacity:1}to{opacity:0}}.ngx-fi-item:nth-child(1){animation-delay:0ms}.ngx-fi-item:nth-child(2){animation-delay:50ms}.ngx-fi-item:nth-child(3){animation-delay:.1s}.ngx-fi-item:nth-child(4){animation-delay:.15s}.ngx-fi-item:nth-child(5){animation-delay:.2s}.ngx-fi-item:nth-child(6){animation-delay:.25s}.ngx-fi-item:nth-child(7){animation-delay:.3s}.ngx-fi-item:nth-child(8){animation-delay:.35s}.ngx-fi-item:nth-child(9){animation-delay:.4s}.ngx-fi-item:nth-child(10){animation-delay:.45s}.ngx-fi-item:nth-child(11){animation-delay:.5s}.ngx-fi-item:nth-child(12){animation-delay:.55s}.ngx-fi-item:nth-child(13){animation-delay:.6s}.ngx-fi-item:nth-child(14){animation-delay:.65s}.ngx-fi-item:nth-child(15){animation-delay:.7s}.ngx-fi-item:nth-child(16){animation-delay:.75s}.ngx-fi-item:nth-child(17){animation-delay:.8s}.ngx-fi-item:nth-child(18){animation-delay:.85s}.ngx-fi-item:nth-child(19){animation-delay:.9s}.ngx-fi-item:nth-child(20){animation-delay:.95s}@keyframes ngx-fi-glow{0%,to{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 12px #5c6bc02e}50%{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 22px #5c6bc059}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Hidden native file input \u2014 always in DOM for accessibility -->\r\n<input\r\n  #nativeInput\r\n  [id]=\"inputId\"\r\n  class=\"ngx-fi-native-input\"\r\n  type=\"file\"\r\n  [accept]=\"accept()\"\r\n  [multiple]=\"multiple()\"\r\n  [disabled]=\"isDisabled()\"\r\n  (change)=\"onFileInputChange($event)\"\r\n  tabindex=\"-1\"\r\n  aria-hidden=\"true\"\r\n/>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     VARIANT: DEFAULT \u2014 large drop zone\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (variant() === 'default') {\r\n  <div\r\n    class=\"ngx-fi-zone\"\r\n    [class.ngx-fi-zone--dragover]=\"isDragOver()\"\r\n    [class.ngx-fi-zone--disabled]=\"isDisabled()\"\r\n    role=\"region\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    tabindex=\"0\"\r\n    (click)=\"openFilePicker()\"\r\n    (keydown.enter)=\"openFilePicker()\"\r\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <mat-icon class=\"ngx-fi-zone__icon\">cloud_upload</mat-icon>\r\n    <span class=\"ngx-fi-zone__label\">{{ label() }}</span>\r\n    @if (hint()) {\r\n      <span class=\"ngx-fi-zone__hint\">{{ hint() }}</span>\r\n    }\r\n    <span class=\"ngx-fi-zone__btn-text\">o haz clic para seleccionar</span>\r\n\r\n    <!-- Drop confirmation flash -->\r\n    @if (showDropConfirm()) {\r\n      <div class=\"ngx-fi-zone__confirm\">\r\n        <mat-icon>check_circle</mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     VARIANT: COMPACT \u2014 horizontal bar\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (variant() === 'compact') {\r\n  <div\r\n    class=\"ngx-fi-compact\"\r\n    [class.ngx-fi-compact--dragover]=\"isDragOver()\"\r\n    [class.ngx-fi-compact--disabled]=\"isDisabled()\"\r\n    role=\"region\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    tabindex=\"0\"\r\n    (click)=\"openFilePicker()\"\r\n    (keydown.enter)=\"openFilePicker()\"\r\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <mat-icon class=\"ngx-fi-compact__icon\">cloud_upload</mat-icon>\r\n    <div class=\"ngx-fi-compact__text\">\r\n      <span class=\"ngx-fi-compact__label\">{{ label() }}</span>\r\n      @if (hint()) {\r\n        <span class=\"ngx-fi-compact__hint\">{{ hint() }}</span>\r\n      }\r\n    </div>\r\n\r\n    @if (showDropConfirm()) {\r\n      <div class=\"ngx-fi-zone__confirm\">\r\n        <mat-icon>check_circle</mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     VARIANT: BUTTON \u2014 only a button\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (variant() === 'button') {\r\n  <div\r\n    class=\"ngx-fi-button-wrap\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    [class.ngx-fi-button-wrap--dragover]=\"isDragOver()\"\r\n  >\r\n    <button\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"openFilePicker()\"\r\n      type=\"button\"\r\n    >\r\n      <mat-icon>attach_file</mat-icon>\r\n      {{ label() }}\r\n    </button>\r\n  </div>\r\n}\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     FILE PREVIEW LIST\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (showPreview() && items().length > 0) {\r\n  <div class=\"ngx-fi-list\">\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"ngx-fi-item\"\r\n        [class.ngx-fi-item--error]=\"item.status === 'error'\"\r\n      >\r\n        <!-- Thumbnail / Icon -->\r\n        <div class=\"ngx-fi-item__thumb\" [class]=\"getFileColorClass(item.type)\">\r\n          @if (item.preview) {\r\n            <img [src]=\"item.preview\" [alt]=\"item.name\" />\r\n          } @else {\r\n            <mat-icon>{{ getFileIcon(item.type) }}</mat-icon>\r\n          }\r\n        </div>\r\n\r\n        <!-- Info -->\r\n        <div class=\"ngx-fi-item__info\">\r\n          <span class=\"ngx-fi-item__name\" [matTooltip]=\"item.name\">{{ item.name }}</span>\r\n          <span class=\"ngx-fi-item__meta\">\r\n            {{ formatSize(item.size) }}\r\n            @if (item.error) {\r\n              <span class=\"ngx-fi-item__error\">\r\n                <mat-icon>warning</mat-icon> {{ item.error }}\r\n              </span>\r\n            }\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Remove -->\r\n        <button\r\n          class=\"ngx-fi-item__remove\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          (click)=\"removeFile(item); $event.stopPropagation()\"\r\n          [matTooltip]=\"'Eliminar ' + item.name\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Screen reader announcements -->\r\n<div class=\"ngx-fi-sr-only\" aria-live=\"polite\">{{ liveAnnouncement() }}</div>\r\n", styles: [".ngx-fi-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ngx-fi-native-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.ngx-fi-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:180px;padding:2rem 1.5rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-zone:hover:not(.ngx-fi-zone--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-zone:focus-visible:not(.ngx-fi-zone--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-zone--dragover .ngx-fi-zone__icon{transform:scale(1.15);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-zone__icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-on-surface-variant, #666);transition:transform .2s,color .2s}.ngx-fi-zone__label{font-size:1.05rem;font-weight:500;color:var(--mat-sys-on-surface, #333);text-align:center}.ngx-fi-zone__hint{font-size:.82rem;color:var(--mat-sys-on-surface-variant, #666);text-align:center}.ngx-fi-zone__btn-text{font-size:.82rem;color:var(--mat-sys-primary, #5c6bc0);font-weight:500;margin-top:.25rem}.ngx-fi-zone__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#43a0471f;pointer-events:none;animation:ngx-fi-confirm-flash .4s ease-out forwards}.ngx-fi-zone__confirm mat-icon{font-size:56px;width:56px;height:56px;color:var(--mat-sys-tertiary, #43a047)}.ngx-fi-compact{position:relative;display:flex;align-items:center;gap:1rem;height:80px;padding:0 1.25rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-compact:hover:not(.ngx-fi-compact--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-compact:focus-visible:not(.ngx-fi-compact--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-compact--dragover .ngx-fi-compact__icon{transform:scale(1.1);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-compact__icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant, #666);flex-shrink:0;transition:transform .2s,color .2s}.ngx-fi-compact__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.ngx-fi-compact__label{font-size:.95rem;font-weight:500;color:var(--mat-sys-on-surface, #333)}.ngx-fi-compact__hint{font-size:.78rem;color:var(--mat-sys-on-surface-variant, #666)}.ngx-fi-button-wrap{display:inline-block;position:relative;padding:4px;border-radius:8px;transition:background-color .2s,box-shadow .2s}.ngx-fi-button-wrap--dragover{background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:0 0 12px #5c6bc040}.ngx-fi-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.ngx-fi-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .65rem;border-radius:10px;background:var(--mat-sys-surface-container-low, #fafafa);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);transition:border-color .2s,background-color .2s;animation:ngx-fi-item-enter .2s ease-out both}.ngx-fi-item--error{border-color:var(--mat-sys-error, #d32f2f);background:#d32f2f0a}.ngx-fi-item__thumb{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.ngx-fi-item__thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}.ngx-fi-item__thumb mat-icon{font-size:24px;width:24px;height:24px}.ngx-fi-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.ngx-fi-item__name{font-size:.88rem;font-weight:500;color:var(--mat-sys-on-surface, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-fi-item__meta{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #666);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ngx-fi-item__error{color:var(--mat-sys-error, #d32f2f);display:inline-flex;align-items:center;gap:.2rem;font-weight:500}.ngx-fi-item__error mat-icon{font-size:14px;width:14px;height:14px}.ngx-fi-item__remove{flex-shrink:0}.ngx-fi-icon--image{background:#5c6bc01a}.ngx-fi-icon--image mat-icon{color:#5c6bc0}.ngx-fi-icon--pdf{background:#d32f2f1a}.ngx-fi-icon--pdf mat-icon{color:#d32f2f}.ngx-fi-icon--video{background:#1e88e51a}.ngx-fi-icon--video mat-icon{color:#1e88e5}.ngx-fi-icon--audio{background:#8e24aa1a}.ngx-fi-icon--audio mat-icon{color:#8e24aa}.ngx-fi-icon--generic{background:#0000000f}.ngx-fi-icon--generic mat-icon{color:#757575}@keyframes ngx-fi-item-enter{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ngx-fi-confirm-flash{0%{opacity:1}to{opacity:0}}.ngx-fi-item:nth-child(1){animation-delay:0ms}.ngx-fi-item:nth-child(2){animation-delay:50ms}.ngx-fi-item:nth-child(3){animation-delay:.1s}.ngx-fi-item:nth-child(4){animation-delay:.15s}.ngx-fi-item:nth-child(5){animation-delay:.2s}.ngx-fi-item:nth-child(6){animation-delay:.25s}.ngx-fi-item:nth-child(7){animation-delay:.3s}.ngx-fi-item:nth-child(8){animation-delay:.35s}.ngx-fi-item:nth-child(9){animation-delay:.4s}.ngx-fi-item:nth-child(10){animation-delay:.45s}.ngx-fi-item:nth-child(11){animation-delay:.5s}.ngx-fi-item:nth-child(12){animation-delay:.55s}.ngx-fi-item:nth-child(13){animation-delay:.6s}.ngx-fi-item:nth-child(14){animation-delay:.65s}.ngx-fi-item:nth-child(15){animation-delay:.7s}.ngx-fi-item:nth-child(16){animation-delay:.75s}.ngx-fi-item:nth-child(17){animation-delay:.8s}.ngx-fi-item:nth-child(18){animation-delay:.85s}.ngx-fi-item:nth-child(19){animation-delay:.9s}.ngx-fi-item:nth-child(20){animation-delay:.95s}@keyframes ngx-fi-glow{0%,to{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 12px #5c6bc02e}50%{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 22px #5c6bc059}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxFileInput, decorators: [{
             type: Component,
@@ -3783,12 +4127,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         },
                     ], host: {
                         'class': 'ngx-file-input',
-                        '[class.ngx-fi--disabled]': 'disabled()',
+                        '[class.ngx-fi--disabled]': 'isDisabled()',
                         '[class.ngx-fi--default]': "variant() === 'default'",
                         '[class.ngx-fi--compact]': "variant() === 'compact'",
                         '[class.ngx-fi--button]': "variant() === 'button'",
-                    }, template: "<!-- Hidden native file input \u2014 always in DOM for accessibility -->\n<input\n  [id]=\"inputId\"\n  class=\"ngx-fi-native-input\"\n  type=\"file\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileInputChange($event)\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n/>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     VARIANT: DEFAULT \u2014 large drop zone\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (variant() === 'default') {\n  <div\n    class=\"ngx-fi-zone\"\n    [class.ngx-fi-zone--dragover]=\"isDragOver()\"\n    [class.ngx-fi-zone--disabled]=\"disabled()\"\n    role=\"region\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-disabled]=\"disabled()\"\n    tabindex=\"0\"\n    (click)=\"openFilePicker()\"\n    (keydown.enter)=\"openFilePicker()\"\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <mat-icon class=\"ngx-fi-zone__icon\">cloud_upload</mat-icon>\n    <span class=\"ngx-fi-zone__label\">{{ label() }}</span>\n    @if (hint()) {\n      <span class=\"ngx-fi-zone__hint\">{{ hint() }}</span>\n    }\n    <span class=\"ngx-fi-zone__btn-text\">o haz clic para seleccionar</span>\n\n    <!-- Drop confirmation flash -->\n    @if (showDropConfirm()) {\n      <div class=\"ngx-fi-zone__confirm\">\n        <mat-icon>check_circle</mat-icon>\n      </div>\n    }\n  </div>\n}\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     VARIANT: COMPACT \u2014 horizontal bar\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (variant() === 'compact') {\n  <div\n    class=\"ngx-fi-compact\"\n    [class.ngx-fi-compact--dragover]=\"isDragOver()\"\n    [class.ngx-fi-compact--disabled]=\"disabled()\"\n    role=\"region\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-disabled]=\"disabled()\"\n    tabindex=\"0\"\n    (click)=\"openFilePicker()\"\n    (keydown.enter)=\"openFilePicker()\"\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <mat-icon class=\"ngx-fi-compact__icon\">cloud_upload</mat-icon>\n    <div class=\"ngx-fi-compact__text\">\n      <span class=\"ngx-fi-compact__label\">{{ label() }}</span>\n      @if (hint()) {\n        <span class=\"ngx-fi-compact__hint\">{{ hint() }}</span>\n      }\n    </div>\n\n    @if (showDropConfirm()) {\n      <div class=\"ngx-fi-zone__confirm\">\n        <mat-icon>check_circle</mat-icon>\n      </div>\n    }\n  </div>\n}\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     VARIANT: BUTTON \u2014 only a button\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (variant() === 'button') {\n  <div\n    class=\"ngx-fi-button-wrap\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n    [class.ngx-fi-button-wrap--dragover]=\"isDragOver()\"\n  >\n    <button\n      mat-raised-button\n      color=\"primary\"\n      [disabled]=\"disabled()\"\n      (click)=\"openFilePicker()\"\n      type=\"button\"\n    >\n      <mat-icon>attach_file</mat-icon>\n      {{ label() }}\n    </button>\n  </div>\n}\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     FILE PREVIEW LIST\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (showPreview() && items().length > 0) {\n  <div class=\"ngx-fi-list\">\n    @for (item of items(); track item.id) {\n      <div\n        class=\"ngx-fi-item\"\n        [class.ngx-fi-item--error]=\"item.status === 'error'\"\n      >\n        <!-- Thumbnail / Icon -->\n        <div class=\"ngx-fi-item__thumb\" [class]=\"getFileColorClass(item.type)\">\n          @if (item.preview) {\n            <img [src]=\"item.preview\" [alt]=\"item.name\" />\n          } @else {\n            <mat-icon>{{ getFileIcon(item.type) }}</mat-icon>\n          }\n        </div>\n\n        <!-- Info -->\n        <div class=\"ngx-fi-item__info\">\n          <span class=\"ngx-fi-item__name\" [matTooltip]=\"item.name\">{{ item.name }}</span>\n          <span class=\"ngx-fi-item__meta\">\n            {{ formatSize(item.size) }}\n            @if (item.error) {\n              <span class=\"ngx-fi-item__error\">\n                <mat-icon>warning</mat-icon> {{ item.error }}\n              </span>\n            }\n          </span>\n        </div>\n\n        <!-- Remove -->\n        <button\n          class=\"ngx-fi-item__remove\"\n          type=\"button\"\n          mat-icon-button\n          (click)=\"removeFile(item); $event.stopPropagation()\"\n          [matTooltip]=\"'Eliminar ' + item.name\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n}\n\n<!-- Screen reader announcements -->\n<div class=\"ngx-fi-sr-only\" aria-live=\"polite\">{{ liveAnnouncement() }}</div>\n", styles: [".ngx-fi-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ngx-fi-native-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.ngx-fi-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:180px;padding:2rem 1.5rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-zone:hover:not(.ngx-fi-zone--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-zone:focus-visible:not(.ngx-fi-zone--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-zone--dragover .ngx-fi-zone__icon{transform:scale(1.15);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-zone__icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-on-surface-variant, #666);transition:transform .2s,color .2s}.ngx-fi-zone__label{font-size:1.05rem;font-weight:500;color:var(--mat-sys-on-surface, #333);text-align:center}.ngx-fi-zone__hint{font-size:.82rem;color:var(--mat-sys-on-surface-variant, #666);text-align:center}.ngx-fi-zone__btn-text{font-size:.82rem;color:var(--mat-sys-primary, #5c6bc0);font-weight:500;margin-top:.25rem}.ngx-fi-zone__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#43a0471f;pointer-events:none;animation:ngx-fi-confirm-flash .4s ease-out forwards}.ngx-fi-zone__confirm mat-icon{font-size:56px;width:56px;height:56px;color:var(--mat-sys-tertiary, #43a047)}.ngx-fi-compact{position:relative;display:flex;align-items:center;gap:1rem;height:80px;padding:0 1.25rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-compact:hover:not(.ngx-fi-compact--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-compact:focus-visible:not(.ngx-fi-compact--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-compact--dragover .ngx-fi-compact__icon{transform:scale(1.1);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-compact__icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant, #666);flex-shrink:0;transition:transform .2s,color .2s}.ngx-fi-compact__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.ngx-fi-compact__label{font-size:.95rem;font-weight:500;color:var(--mat-sys-on-surface, #333)}.ngx-fi-compact__hint{font-size:.78rem;color:var(--mat-sys-on-surface-variant, #666)}.ngx-fi-button-wrap{display:inline-block;position:relative;padding:4px;border-radius:8px;transition:background-color .2s,box-shadow .2s}.ngx-fi-button-wrap--dragover{background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:0 0 12px #5c6bc040}.ngx-fi-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.ngx-fi-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .65rem;border-radius:10px;background:var(--mat-sys-surface-container-low, #fafafa);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);transition:border-color .2s,background-color .2s;animation:ngx-fi-item-enter .2s ease-out both}.ngx-fi-item--error{border-color:var(--mat-sys-error, #d32f2f);background:#d32f2f0a}.ngx-fi-item__thumb{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.ngx-fi-item__thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}.ngx-fi-item__thumb mat-icon{font-size:24px;width:24px;height:24px}.ngx-fi-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.ngx-fi-item__name{font-size:.88rem;font-weight:500;color:var(--mat-sys-on-surface, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-fi-item__meta{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #666);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ngx-fi-item__error{color:var(--mat-sys-error, #d32f2f);display:inline-flex;align-items:center;gap:.2rem;font-weight:500}.ngx-fi-item__error mat-icon{font-size:14px;width:14px;height:14px}.ngx-fi-item__remove{flex-shrink:0}.ngx-fi-icon--image{background:#5c6bc01a}.ngx-fi-icon--image mat-icon{color:#5c6bc0}.ngx-fi-icon--pdf{background:#d32f2f1a}.ngx-fi-icon--pdf mat-icon{color:#d32f2f}.ngx-fi-icon--video{background:#1e88e51a}.ngx-fi-icon--video mat-icon{color:#1e88e5}.ngx-fi-icon--audio{background:#8e24aa1a}.ngx-fi-icon--audio mat-icon{color:#8e24aa}.ngx-fi-icon--generic{background:#0000000f}.ngx-fi-icon--generic mat-icon{color:#757575}@keyframes ngx-fi-item-enter{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ngx-fi-confirm-flash{0%{opacity:1}to{opacity:0}}.ngx-fi-item:nth-child(1){animation-delay:0ms}.ngx-fi-item:nth-child(2){animation-delay:50ms}.ngx-fi-item:nth-child(3){animation-delay:.1s}.ngx-fi-item:nth-child(4){animation-delay:.15s}.ngx-fi-item:nth-child(5){animation-delay:.2s}.ngx-fi-item:nth-child(6){animation-delay:.25s}.ngx-fi-item:nth-child(7){animation-delay:.3s}.ngx-fi-item:nth-child(8){animation-delay:.35s}.ngx-fi-item:nth-child(9){animation-delay:.4s}.ngx-fi-item:nth-child(10){animation-delay:.45s}.ngx-fi-item:nth-child(11){animation-delay:.5s}.ngx-fi-item:nth-child(12){animation-delay:.55s}.ngx-fi-item:nth-child(13){animation-delay:.6s}.ngx-fi-item:nth-child(14){animation-delay:.65s}.ngx-fi-item:nth-child(15){animation-delay:.7s}.ngx-fi-item:nth-child(16){animation-delay:.75s}.ngx-fi-item:nth-child(17){animation-delay:.8s}.ngx-fi-item:nth-child(18){animation-delay:.85s}.ngx-fi-item:nth-child(19){animation-delay:.9s}.ngx-fi-item:nth-child(20){animation-delay:.95s}@keyframes ngx-fi-glow{0%,to{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 12px #5c6bc02e}50%{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 22px #5c6bc059}}\n"] }]
-        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
+                    }, template: "<!-- Hidden native file input \u2014 always in DOM for accessibility -->\r\n<input\r\n  #nativeInput\r\n  [id]=\"inputId\"\r\n  class=\"ngx-fi-native-input\"\r\n  type=\"file\"\r\n  [accept]=\"accept()\"\r\n  [multiple]=\"multiple()\"\r\n  [disabled]=\"isDisabled()\"\r\n  (change)=\"onFileInputChange($event)\"\r\n  tabindex=\"-1\"\r\n  aria-hidden=\"true\"\r\n/>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     VARIANT: DEFAULT \u2014 large drop zone\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (variant() === 'default') {\r\n  <div\r\n    class=\"ngx-fi-zone\"\r\n    [class.ngx-fi-zone--dragover]=\"isDragOver()\"\r\n    [class.ngx-fi-zone--disabled]=\"isDisabled()\"\r\n    role=\"region\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    tabindex=\"0\"\r\n    (click)=\"openFilePicker()\"\r\n    (keydown.enter)=\"openFilePicker()\"\r\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <mat-icon class=\"ngx-fi-zone__icon\">cloud_upload</mat-icon>\r\n    <span class=\"ngx-fi-zone__label\">{{ label() }}</span>\r\n    @if (hint()) {\r\n      <span class=\"ngx-fi-zone__hint\">{{ hint() }}</span>\r\n    }\r\n    <span class=\"ngx-fi-zone__btn-text\">o haz clic para seleccionar</span>\r\n\r\n    <!-- Drop confirmation flash -->\r\n    @if (showDropConfirm()) {\r\n      <div class=\"ngx-fi-zone__confirm\">\r\n        <mat-icon>check_circle</mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     VARIANT: COMPACT \u2014 horizontal bar\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (variant() === 'compact') {\r\n  <div\r\n    class=\"ngx-fi-compact\"\r\n    [class.ngx-fi-compact--dragover]=\"isDragOver()\"\r\n    [class.ngx-fi-compact--disabled]=\"isDisabled()\"\r\n    role=\"region\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    tabindex=\"0\"\r\n    (click)=\"openFilePicker()\"\r\n    (keydown.enter)=\"openFilePicker()\"\r\n    (keydown.space)=\"openFilePicker(); $event.preventDefault()\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <mat-icon class=\"ngx-fi-compact__icon\">cloud_upload</mat-icon>\r\n    <div class=\"ngx-fi-compact__text\">\r\n      <span class=\"ngx-fi-compact__label\">{{ label() }}</span>\r\n      @if (hint()) {\r\n        <span class=\"ngx-fi-compact__hint\">{{ hint() }}</span>\r\n      }\r\n    </div>\r\n\r\n    @if (showDropConfirm()) {\r\n      <div class=\"ngx-fi-zone__confirm\">\r\n        <mat-icon>check_circle</mat-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     VARIANT: BUTTON \u2014 only a button\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (variant() === 'button') {\r\n  <div\r\n    class=\"ngx-fi-button-wrap\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    [class.ngx-fi-button-wrap--dragover]=\"isDragOver()\"\r\n  >\r\n    <button\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"openFilePicker()\"\r\n      type=\"button\"\r\n    >\r\n      <mat-icon>attach_file</mat-icon>\r\n      {{ label() }}\r\n    </button>\r\n  </div>\r\n}\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     FILE PREVIEW LIST\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n@if (showPreview() && items().length > 0) {\r\n  <div class=\"ngx-fi-list\">\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"ngx-fi-item\"\r\n        [class.ngx-fi-item--error]=\"item.status === 'error'\"\r\n      >\r\n        <!-- Thumbnail / Icon -->\r\n        <div class=\"ngx-fi-item__thumb\" [class]=\"getFileColorClass(item.type)\">\r\n          @if (item.preview) {\r\n            <img [src]=\"item.preview\" [alt]=\"item.name\" />\r\n          } @else {\r\n            <mat-icon>{{ getFileIcon(item.type) }}</mat-icon>\r\n          }\r\n        </div>\r\n\r\n        <!-- Info -->\r\n        <div class=\"ngx-fi-item__info\">\r\n          <span class=\"ngx-fi-item__name\" [matTooltip]=\"item.name\">{{ item.name }}</span>\r\n          <span class=\"ngx-fi-item__meta\">\r\n            {{ formatSize(item.size) }}\r\n            @if (item.error) {\r\n              <span class=\"ngx-fi-item__error\">\r\n                <mat-icon>warning</mat-icon> {{ item.error }}\r\n              </span>\r\n            }\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Remove -->\r\n        <button\r\n          class=\"ngx-fi-item__remove\"\r\n          type=\"button\"\r\n          mat-icon-button\r\n          (click)=\"removeFile(item); $event.stopPropagation()\"\r\n          [matTooltip]=\"'Eliminar ' + item.name\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Screen reader announcements -->\r\n<div class=\"ngx-fi-sr-only\" aria-live=\"polite\">{{ liveAnnouncement() }}</div>\r\n", styles: [".ngx-fi-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ngx-fi-native-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.ngx-fi-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:180px;padding:2rem 1.5rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-zone:hover:not(.ngx-fi-zone--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-zone:focus-visible:not(.ngx-fi-zone--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-zone--dragover .ngx-fi-zone__icon{transform:scale(1.15);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-zone--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-zone__icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-on-surface-variant, #666);transition:transform .2s,color .2s}.ngx-fi-zone__label{font-size:1.05rem;font-weight:500;color:var(--mat-sys-on-surface, #333);text-align:center}.ngx-fi-zone__hint{font-size:.82rem;color:var(--mat-sys-on-surface-variant, #666);text-align:center}.ngx-fi-zone__btn-text{font-size:.82rem;color:var(--mat-sys-primary, #5c6bc0);font-weight:500;margin-top:.25rem}.ngx-fi-zone__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#43a0471f;pointer-events:none;animation:ngx-fi-confirm-flash .4s ease-out forwards}.ngx-fi-zone__confirm mat-icon{font-size:56px;width:56px;height:56px;color:var(--mat-sys-tertiary, #43a047)}.ngx-fi-compact{position:relative;display:flex;align-items:center;gap:1rem;height:80px;padding:0 1.25rem;border:2px dashed var(--mat-sys-outline-variant, #c4c4c4);border-radius:12px;background:var(--mat-sys-surface-container-low, #fafafa);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;outline:none;-webkit-user-select:none;user-select:none;overflow:hidden}.ngx-fi-compact:hover:not(.ngx-fi-compact--disabled){border-style:solid;background:var(--mat-sys-surface-container, #f0f0f0)}.ngx-fi-compact:focus-visible:not(.ngx-fi-compact--disabled){box-shadow:0 0 0 3px #5c6bc040;border-color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--dragover{border-color:var(--mat-sys-primary, #5c6bc0);border-style:solid;background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 16px #5c6bc033;animation:ngx-fi-glow 1s ease-in-out infinite}.ngx-fi-compact--dragover .ngx-fi-compact__icon{transform:scale(1.1);color:var(--mat-sys-primary, #5c6bc0)}.ngx-fi-compact--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ngx-fi-compact__icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant, #666);flex-shrink:0;transition:transform .2s,color .2s}.ngx-fi-compact__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.ngx-fi-compact__label{font-size:.95rem;font-weight:500;color:var(--mat-sys-on-surface, #333)}.ngx-fi-compact__hint{font-size:.78rem;color:var(--mat-sys-on-surface-variant, #666)}.ngx-fi-button-wrap{display:inline-block;position:relative;padding:4px;border-radius:8px;transition:background-color .2s,box-shadow .2s}.ngx-fi-button-wrap--dragover{background:var(--mat-sys-primary-container, rgba(92, 107, 192, .08));box-shadow:0 0 12px #5c6bc040}.ngx-fi-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.ngx-fi-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .65rem;border-radius:10px;background:var(--mat-sys-surface-container-low, #fafafa);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);transition:border-color .2s,background-color .2s;animation:ngx-fi-item-enter .2s ease-out both}.ngx-fi-item--error{border-color:var(--mat-sys-error, #d32f2f);background:#d32f2f0a}.ngx-fi-item__thumb{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.ngx-fi-item__thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}.ngx-fi-item__thumb mat-icon{font-size:24px;width:24px;height:24px}.ngx-fi-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.ngx-fi-item__name{font-size:.88rem;font-weight:500;color:var(--mat-sys-on-surface, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-fi-item__meta{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #666);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ngx-fi-item__error{color:var(--mat-sys-error, #d32f2f);display:inline-flex;align-items:center;gap:.2rem;font-weight:500}.ngx-fi-item__error mat-icon{font-size:14px;width:14px;height:14px}.ngx-fi-item__remove{flex-shrink:0}.ngx-fi-icon--image{background:#5c6bc01a}.ngx-fi-icon--image mat-icon{color:#5c6bc0}.ngx-fi-icon--pdf{background:#d32f2f1a}.ngx-fi-icon--pdf mat-icon{color:#d32f2f}.ngx-fi-icon--video{background:#1e88e51a}.ngx-fi-icon--video mat-icon{color:#1e88e5}.ngx-fi-icon--audio{background:#8e24aa1a}.ngx-fi-icon--audio mat-icon{color:#8e24aa}.ngx-fi-icon--generic{background:#0000000f}.ngx-fi-icon--generic mat-icon{color:#757575}@keyframes ngx-fi-item-enter{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ngx-fi-confirm-flash{0%{opacity:1}to{opacity:0}}.ngx-fi-item:nth-child(1){animation-delay:0ms}.ngx-fi-item:nth-child(2){animation-delay:50ms}.ngx-fi-item:nth-child(3){animation-delay:.1s}.ngx-fi-item:nth-child(4){animation-delay:.15s}.ngx-fi-item:nth-child(5){animation-delay:.2s}.ngx-fi-item:nth-child(6){animation-delay:.25s}.ngx-fi-item:nth-child(7){animation-delay:.3s}.ngx-fi-item:nth-child(8){animation-delay:.35s}.ngx-fi-item:nth-child(9){animation-delay:.4s}.ngx-fi-item:nth-child(10){animation-delay:.45s}.ngx-fi-item:nth-child(11){animation-delay:.5s}.ngx-fi-item:nth-child(12){animation-delay:.55s}.ngx-fi-item:nth-child(13){animation-delay:.6s}.ngx-fi-item:nth-child(14){animation-delay:.65s}.ngx-fi-item:nth-child(15){animation-delay:.7s}.ngx-fi-item:nth-child(16){animation-delay:.75s}.ngx-fi-item:nth-child(17){animation-delay:.8s}.ngx-fi-item:nth-child(18){animation-delay:.85s}.ngx-fi-item:nth-child(19){animation-delay:.9s}.ngx-fi-item:nth-child(20){animation-delay:.95s}@keyframes ngx-fi-glow{0%,to{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 12px #5c6bc02e}50%{box-shadow:inset 0 0 0 2px var(--mat-sys-primary, #5c6bc0),0 0 22px #5c6bc059}}\n"] }]
+        }], propDecorators: { _nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
 
 class NgxDialogService {
     // dependencies injection
@@ -3946,5 +4290,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DynamicHostDirective, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogService, NgxFileInput, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedSelectBottomSheetComponent, NgxPaginatedTable, NgxSkeleton, NgxTablesIntl, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption };
+export { AdvancedFilterService, AdvancedFilterUtils, ColumnConfigService, DatosPantallaService, DialogBodyType, DynamicHostDirective, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogService, NgxFileInput, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedSelectBottomSheetComponent, NgxPaginatedTable, NgxSkeleton, NgxTablesIntl, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption };
 //# sourceMappingURL=ngx-eiffage-material.mjs.map