ngx-eiffage-material 0.1.8 → 0.3.0

package/fesm2022/ngx-eiffage-material.mjs

@@ -1,43 +1,43 @@
 import * as i0 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 { Injectable, InjectionToken, makeEnvironmentProviders, isSignal, signal, inject, computed, input, booleanAttribute, numberAttribute, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, LOCALE_ID, viewChild, model, output, DestroyRef, afterRenderEffect, ViewContainerRef, effect, Directive, forwardRef, Pipe, PLATFORM_ID, untracked, HostListener, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-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 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm, Validators, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
-import * as i11 from '@angular/common';
-import { CommonModule, DatePipe, isPlatformBrowser, LowerCasePipe } from '@angular/common';
+import { Subject, EMPTY, merge, fromEvent, startWith, map, catchError, of, skip, debounceTime, distinctUntilChanged } from 'rxjs';
+import { toSignal, takeUntilDestroyed, rxResource, toObservable } from '@angular/core/rxjs-interop';
+import * as i3$1 from '@angular/forms';
+import { NgControl, FormGroupDirective, NgForm, Validators, FormControl, ReactiveFormsModule, FormArray, FormGroup, FormBuilder, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatChipGrid, MatChipsModule } from '@angular/material/chips';
 import * as i2$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i6 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { takeUntilDestroyed, toSignal, rxResource, toObservable } from '@angular/core/rxjs-interop';
-import * as i3$1 from '@angular/material/select';
+import * as i3 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 * as i11 from '@angular/common';
+import { NgTemplateOutlet, CommonModule, DatePipe, isPlatformBrowser, LowerCasePipe } from '@angular/common';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
-import * as i1$2 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
 import * as i14 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i10 from '@angular/material/datepicker';
 import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
+import * as i13 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import * as i12 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i3$3 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i2$3 from '@angular/material/sort';
+import * as i6 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$4 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
-import * as i1$3 from '@angular/material/table';
+import * as i1$1 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -56,234 +56,12 @@ import * as i4$2 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import { MatBadgeModule } from '@angular/material/badge';
 
-class NgxLoadingButton {
-    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : [])); //Indica si el botón está cargando
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : [])); //Texto del botón
-    matButton = input('filled', ...(ngDevMode ? [{ debugName: "matButton" }] : [])); //Tipo de botón
-    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : [])); //Tipo de acción del botón
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : [])); //Indica si el botón está deshabilitado
-    spinnerDiameter = input(24, ...(ngDevMode ? [{ debugName: "spinnerDiameter" }] : [])); //Diameter del spinner de carga
-    spinnerStrokeWidth = input(3, ...(ngDevMode ? [{ debugName: "spinnerStrokeWidth" }] : [])); //StrokeWidth del spinner de carga
-    //Por defecto es Primary
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : [])); //Color del botón
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxLoadingButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxLoadingButton, isStandalone: true, selector: "ngx-loading-button", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, matButton: { classPropertyName: "matButton", publicName: "matButton", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\r\n  class=\"loadingButton\"\r\n  [matButton]=\"matButton()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled() || isLoading()\"\r\n  [class.isLoading]=\"isLoading()\"\r\n  [class]=\"color() ?? ''\"\r\n>\r\n  {{ label() }}\r\n</button>\r\n\r\n@if (isLoading()) {\r\n  <mat-spinner\r\n    class=\"spinnerLoadingButton\"\r\n    [diameter]=\"spinnerDiameter()\"\r\n    [strokeWidth]=\"spinnerStrokeWidth()\"\r\n  />\r\n}\r\n", styles: [":host{display:inline-flex;position:relative}.loadingButton{width:100%}.spinnerLoadingButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.isLoading{--mat-button-filled-disabled-label-text-color: transparent;--mat-button-outlined-disabled-label-text-color: transparent;--mat-button-protected-disabled-label-text-color: transparent;--mat-button-text-disabled-label-text-color: transparent;--mat-button-tonal-disabled-label-text-color: transparent}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.secondarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-secondary)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}.tertiarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-tertiary)}\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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxLoadingButton, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-loading-button', imports: [
-                        MatButtonModule,
-                        MatProgressSpinnerModule,
-                        MatIconModule,
-                    ], template: "<button\r\n  class=\"loadingButton\"\r\n  [matButton]=\"matButton()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled() || isLoading()\"\r\n  [class.isLoading]=\"isLoading()\"\r\n  [class]=\"color() ?? ''\"\r\n>\r\n  {{ label() }}\r\n</button>\r\n\r\n@if (isLoading()) {\r\n  <mat-spinner\r\n    class=\"spinnerLoadingButton\"\r\n    [diameter]=\"spinnerDiameter()\"\r\n    [strokeWidth]=\"spinnerStrokeWidth()\"\r\n  />\r\n}\r\n", styles: [":host{display:inline-flex;position:relative}.loadingButton{width:100%}.spinnerLoadingButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.isLoading{--mat-button-filled-disabled-label-text-color: transparent;--mat-button-outlined-disabled-label-text-color: transparent;--mat-button-protected-disabled-label-text-color: transparent;--mat-button-text-disabled-label-text-color: transparent;--mat-button-tonal-disabled-label-text-color: transparent}.secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}.secondarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-secondary)}.tertiary{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}.tertiarySpinner{--mat-progress-spinner-active-indicator-color: var(--mat-sys-tertiary)}\n"] }]
-        }], propDecorators: { isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], matButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "matButton", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], spinnerStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerStrokeWidth", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
-
-class NgxInputFile {
-    // dependencies injection
-    _cdr = inject(ChangeDetectorRef);
-    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
-    onChangeCb;
-    onTouchCb;
-    label = input('Seleccionar archivo', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /**
-     * 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" }] : []));
-    accept = input([], ...(ngDevMode ? [{ debugName: "accept" }] : []));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
-    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-    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.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 (control?.disabled)
-                    control.enable({ emitEvent: false });
-                if (this.internalControl.disabled)
-                    this.internalControl.enable({ emitEvent: false });
-            }
-        });
-    }
-    checkErrors() {
-        const control = this.control();
-        if (control?.invalid) {
-            this.internalControl.setErrors(control.errors);
-        }
-        else {
-            this.internalControl.setErrors(null);
-        }
-        this._cdr.markForCheck();
-    }
-    controlEffect = effect(() => {
-        const value = this.value();
-        // Usar untracked para evitar ciclos y emitEvent: false para no disparar eventos
-        untracked(() => {
-            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 });
-            this.checkErrors();
-            this._cdr.markForCheck();
-        });
-    }, ...(ngDevMode ? [{ debugName: "controlEffect" }] : []));
-    ngOnInit() {
-        if (this.isDisabled()) {
-            this.control()?.disable();
-            this.internalControl.disable();
-        }
-    }
-    onContainerClick() {
-        if (!this.isDisabled()) {
-            this.markAsTouched();
-            this.checkErrors();
-            this._cdr.markForCheck();
-            this.onTouchCb?.();
-            this.inputFileRef()?.nativeElement.click();
-        }
-    }
-    onInputchange(event) {
-        const target = event.target;
-        const files = target.files;
-        this.attachFiles(files);
-        target.value = '';
-    }
-    onDragOver(event) {
-        event.preventDefault();
-        if (!this.isDisabled())
-            this.isDropping.set(true);
-    }
-    onDragLeave(event) {
-        event.preventDefault();
-        this.isDropping.set(false);
-    }
-    onDrop(event) {
-        event.preventDefault();
-        this.isDropping.set(false);
-        if (!this.isDisabled()) {
-            this.onTouchCb?.();
-            const files = event.dataTransfer?.files;
-            this.attachFiles(files);
-        }
-    }
-    attachFiles(files) {
-        if (files && files.length > 0) {
-            let newValue;
-            if (this.multiple()) {
-                const currentFiles = this.value();
-                const newFiles = Array.from(files);
-                newValue = [...currentFiles, ...newFiles];
-            }
-            else {
-                newValue = [files[0]];
-            }
-            this.value.set(newValue);
-            this.onChangeCb?.(newValue);
-            this.markAsTouched();
-            this.markAsDirty();
-        }
-    }
-    writeValue(files) {
-        this.value.set(files ?? []);
-    }
-    registerOnChange(fn) {
-        this.onChangeCb = fn;
-    }
-    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.markAsTouched();
-        this.markAsDirty();
-    }
-    getAccept() {
-        return this.accept().join();
-    }
-    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: 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: 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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,
-            args: [{ selector: 'ngx-input-file', imports: [
-                        CommonModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatProgressBarModule,
-                        MatChipsModule,
-                        MatTooltipModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatInputModule,
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NgxInputFile),
-                            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: 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
-        .toLowerCase()
-        .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, '');
-    const nomalizadoQuery = query
-        .toLowerCase()
-        .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, '');
-    return nomalizadoCadena.includes(nomalizadoQuery);
-};
-const base64ToUtf8 = (str) => {
-    return decodeURIComponent(atob(str)
-        .split('')
-        .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-    })
-        .join(''));
-};
-
+/**
+ * @deprecated Usa `provideNgxEiffageTexts()`: solo hay que indicar los textos que cambian, se agrupan
+ * por componente y se actualizan solos al cambiar de idioma (signals). Mientras tanto, una subclase de
+ * NgxTablesIntl provista en la app se sigue respetando. Esta clase no recibirá textos nuevos y se
+ * eliminará en una versión mayor.
+ */
 class NgxTablesIntl {
     /**
      * Stream que emite cuando las etiquetas cambian.
@@ -578,6 +356,701 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const plural = (count, one, many) => (count === 1 ? one : many);
+/** Valores por defecto (castellano). */
+const NGX_EIFFAGE_DEFAULT_TEXTS = {
+    common: {
+        search: 'Buscar...',
+        clearSearch: 'Limpiar búsqueda',
+        noData: 'No se han encontrado resultados...',
+        loading: 'Cargando...',
+        cancel: 'Cancelar',
+        confirm: 'Confirmar',
+        close: 'Cerrar',
+        save: 'Guardar',
+        saveAndApply: 'Guardar y aplicar',
+    },
+    table: {
+        create: 'Nuevo',
+        edit: 'Editar',
+        delete: 'Eliminar',
+        confirmDelete: 'Eliminar',
+        deleteConfirmTitle: 'Eliminar',
+        deleteConfirmBody: 'Vas a eliminar el registro seleccionado. ¿Estas seguro?',
+        editColumns: 'Visualizar y ordenar columnas',
+        deselectAll: 'Desmarcar todos los registros',
+        selectionActions: 'Operaciones sobre los registros seleccionados',
+        export: 'Exportar datos',
+        exportExcel: 'Exportar a XLSX la página actual',
+        exportPdf: 'Exportar a PDF la página actual',
+        enterFullscreen: 'Pantalla completa',
+        exitFullscreen: 'Salir del modo de pantalla completa',
+        actions: 'Acciones',
+        dateRangeStart: 'Desde',
+        dateRangeEnd: 'Hasta',
+        totalPerPage: 'Total parcial (por página)',
+        totalGeneral: 'Total (todos los registros)',
+    },
+    columnsDialog: {
+        title: 'Ordenar y visualizar columnas de la tabla',
+        pin: 'Anclar columna',
+        unpin: 'Desanclar',
+        moveUp: 'Subir',
+        moveDown: 'Bajar',
+        hasFiltersApplied: '(hay filtros aplicados)',
+        hideColumnWithFiltersNote: 'Para ocultar una columna, primero debes quitar los filtros que tenga aplicados',
+        note: 'Nota:',
+        reset: 'Reestablecer orden y visualización',
+    },
+    advancedFilters: {
+        label: 'Filtros avanzados',
+        new: 'Nuevo filtro',
+        remove: 'Quitar filtros avanzados',
+        editTooltip: name => `Editar '${name}'`,
+        deleteTooltip: name => `Eliminar '${name}'`,
+        deleteTitle: 'Eliminar plantilla de filtro avanzado',
+        deleteMessage: name => `Vas a eliminar la plantilla de filtro avanzado '${name}'. ¿Estas seguro?`,
+        dialogTitle: 'Filtros avanzados para la tabla',
+        templateName: 'Nombre de la plantilla',
+        templateNameRequired: 'El nombre es obligatorio',
+        helpTitle: 'Uso de filtros avanzados',
+        groupHelp: 'Un conjunto de filtros que se evalúan juntos. Todos los filtros dentro de un grupo usan el mismo conector (“Y” u “O”). Cada rectángulo representa un grupo y dentro de ellos puede haber filtros u otros grupos',
+        ruleHelp: 'Una regla individual que compara un campo con un valor (por ejemplo: “Precio > 100”)',
+        group: 'Grupo:',
+        filter: 'Filtro:',
+        addFilter: 'Añadir filtro',
+        addGroup: 'Añadir grupo',
+        deleteGroup: 'Eliminar grupo',
+        deleteFilter: 'Eliminar filtro',
+        field: 'Campo',
+        condition: 'Condición',
+        value: 'Valor',
+        selectOption: 'Selecciona una opción',
+        required: 'Obligatorio',
+        and: 'Y',
+        or: 'O',
+        operators: {
+            equals: 'Igual a',
+            notEquals: 'Distinto de',
+            greaterThan: 'Mayor que',
+            greaterOrEquals: 'Mayor o igual que',
+            lessThan: 'Menor que',
+            lessOrEquals: 'Menor o igual que',
+            like: 'Contiene',
+        },
+    },
+    select: {
+        noResults: 'No se han encontrado resultados...',
+        showMore: 'Ver más',
+        removeOption: name => `-- Quitar ${name} --`,
+        resultsCount: count => plural(count, '1 resultado', `${count} resultados`),
+    },
+    paginatedSelect: {
+        confirm: 'Confirmar',
+        reset: 'Limpiar',
+        selectAll: 'Seleccionar todo',
+        loadingMore: 'Cargando más…',
+        endOfList: 'No hay más resultados',
+        noResultsHint: 'Prueba con otro término de búsqueda',
+        clearSearch: 'Limpiar búsqueda',
+        errorTitle: 'No se pudieron cargar los datos',
+        errorHint: 'Revisa tu conexión e inténtalo de nuevo',
+        retry: 'Reintentar',
+        selectedCount: (selected, total) => `${selected} de ${total} seleccionados`,
+        resultsCount: total => plural(total, '1 resultado', `${total} resultados`),
+    },
+    dialog: {
+        cancel: 'Cancelar',
+        confirm: 'Confirmar',
+        accept: 'Aceptar',
+        close: 'Cerrar',
+    },
+    fileInput: {
+        dropLabel: 'Arrastra archivos aquí',
+        browse: 'o haz clic para seleccionar',
+        remove: name => `Eliminar ${name}`,
+        removed: name => `Archivo ${name} eliminado`,
+        added: count => plural(count, '1 archivo añadido', `${count} archivos añadidos`),
+        maxFiles: max => `Máximo ${max} archivos permitidos`,
+        typeNotAllowed: type => `Tipo no permitido: ${type}`,
+        tooLarge: maxSize => `Excede el tamaño máximo (${maxSize})`,
+    },
+    inputFile: {
+        label: 'Seleccionar archivo',
+        placeholder: 'Haz clic o arrastra aquí',
+        dropping: 'Suelta los archivos para añadirlos',
+        browse: 'Examinar',
+        remove: name => `Eliminar ${name}`,
+        rejectedType: name => `«${name}»: tipo de archivo no permitido`,
+        rejectedSize: (name, maxSize) => `«${name}» supera el tamaño máximo (${maxSize})`,
+        rejectedCount: max => plural(max, 'Solo se permite 1 archivo', `Solo se permiten ${max} archivos`),
+    },
+    skeleton: {
+        loading: 'Cargando…',
+    },
+    alert: {
+        dismiss: 'Cerrar aviso',
+    },
+    loadingButton: {
+        busy: 'Cargando…',
+    },
+};
+/** Textos que la app consumidora sustituye. Se provee con provideNgxEiffageTexts(). */
+const NGX_EIFFAGE_TEXTS = new InjectionToken('NGX_EIFFAGE_TEXTS');
+/**
+ * Cambia los textos de la librería. Solo hay que indicar los que difieren de los valores por defecto.
+ *
+ * ```ts
+ * // Textos fijos
+ * provideNgxEiffageTexts({ alert: { dismiss: 'Dismiss' } })
+ *
+ * // Según el idioma de la app: una función (se ejecuta en contexto de inyección) que devuelve un signal
+ * provideNgxEiffageTexts(() => {
+ *   const language = inject(LanguageService);
+ *   return computed(() => language.current() === 'en' ? EN_TEXTS : {});
+ * })
+ * ```
+ */
+function provideNgxEiffageTexts(texts) {
+    return makeEnvironmentProviders([
+        {
+            provide: NGX_EIFFAGE_TEXTS,
+            useFactory: () => {
+                const source = typeof texts === 'function' && !isSignal(texts) ? texts() : texts;
+                return isSignal(source) ? source : signal(source);
+            },
+        },
+    ]);
+}
+/** Textos efectivos de la librería: valores por defecto + NgxTablesIntl (obsoleto) + provideNgxEiffageTexts. */
+class NgxTexts {
+    _overrides = inject(NGX_EIFFAGE_TEXTS, { optional: true });
+    _legacyIntl = inject(NgxTablesIntl);
+    _legacyChanges = toSignal(this._legacyIntl.changes);
+    /** Todos los textos ya combinados. En plantilla: `texts().alert.dismiss`. */
+    texts = computed(() => {
+        this._legacyChanges();
+        const legacy = isCustomizedLegacyIntl(this._legacyIntl) ? textsFromLegacyIntl(this._legacyIntl) : {};
+        return deepMerge(deepMerge(NGX_EIFFAGE_DEFAULT_TEXTS, legacy), this._overrides?.() ?? {});
+    }, ...(ngDevMode ? [{ debugName: "texts" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTexts, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTexts, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTexts, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+// ── Compatibilidad con NgxTablesIntl ────────────────────────────────────────
+/** Solo se leen los valores de NgxTablesIntl si el consumidor la ha sustituido (subclase o useValue). */
+function isCustomizedLegacyIntl(intl) {
+    return Object.getPrototypeOf(intl) !== NgxTablesIntl.prototype;
+}
+/** Traduce una NgxTablesIntl personalizada al formato nuevo. */
+function textsFromLegacyIntl(intl) {
+    return {
+        common: {
+            search: intl.searchPlaceholder,
+            clearSearch: intl.clearSearchTooltip,
+            noData: intl.noDataMessage,
+            loading: intl.loadingMessage,
+            cancel: intl.cancelButtonLabel,
+            confirm: intl.confirmButtonLabel,
+            close: intl.closeButtonLabel,
+            save: intl.saveButtonLabel,
+            saveAndApply: intl.saveAndApplyButtonLabel,
+        },
+        table: {
+            create: intl.createButtonLabel,
+            edit: intl.editTooltip,
+            delete: intl.deleteTooltip,
+            confirmDelete: intl.confirmDeleteLabel,
+            deleteConfirmTitle: intl.deleteConfirmTitle,
+            deleteConfirmBody: intl.deleteConfirmBody,
+            editColumns: intl.editColumnsTooltip,
+            deselectAll: intl.deselectAllLabel,
+            selectionActions: intl.selectionActionsTooltip,
+            export: intl.exportTooltip,
+            exportExcel: intl.exportToExcelLabel,
+            exportPdf: intl.exportToPdfLabel,
+            enterFullscreen: intl.enterFullscreenTooltip,
+            exitFullscreen: intl.exitFullscreenTooltip,
+            actions: intl.actionsLabel,
+            dateRangeStart: intl.dateRangeStartPlaceholder,
+            dateRangeEnd: intl.dateRangeEndPlaceholder,
+            totalPerPage: intl.totalPerPageLabel,
+            totalGeneral: intl.totalGeneralLabel,
+        },
+        columnsDialog: {
+            title: intl.configureColumnsTitle,
+            pin: intl.pinColumnTooltip,
+            unpin: intl.unpinColumnTooltip,
+            moveUp: intl.moveUpTooltip,
+            moveDown: intl.moveDownTooltip,
+            hasFiltersApplied: intl.hasFiltersAppliedText,
+            hideColumnWithFiltersNote: intl.hideColumnWithFiltersNote,
+            note: intl.noteLabel,
+            reset: intl.resetColumnsButtonLabel,
+        },
+        advancedFilters: {
+            label: intl.advancedFiltersLabel,
+            new: intl.newAdvancedFilterLabel,
+            remove: intl.removeAdvancedFilterTooltip,
+            editTooltip: name => intl.getEditAdvancedFilterTooltip(name),
+            deleteTooltip: name => intl.getDeleteAdvancedFilterTooltip(name),
+            deleteTitle: intl.deleteAdvancedFilterTitle,
+            deleteMessage: name => intl.getDeleteAdvancedFilterMessage(name),
+            dialogTitle: intl.advancedFiltersDialogTitle,
+            templateName: intl.templateNameLabel,
+            templateNameRequired: intl.templateNameRequiredError,
+            helpTitle: intl.advancedFiltersHelpTitle,
+            groupHelp: intl.advancedFiltersGroupHelp,
+            ruleHelp: intl.advancedFiltersRuleHelp,
+            group: intl.groupLabel,
+            filter: intl.filterLabel,
+            addFilter: intl.addFilterButtonLabel,
+            addGroup: intl.addGroupButtonLabel,
+            deleteGroup: intl.deleteGroupTooltip,
+            deleteFilter: intl.deleteFilterTooltip,
+            field: intl.fieldLabel,
+            condition: intl.conditionLabel,
+            value: intl.valueLabel,
+            selectOption: intl.selectOptionPlaceholder,
+            required: intl.requiredFieldError,
+            and: intl.connectorAnd,
+            or: intl.connectorOr,
+            operators: {
+                equals: intl.operatorEquals,
+                notEquals: intl.operatorNotEquals,
+                greaterThan: intl.operatorGreaterThan,
+                greaterOrEquals: intl.operatorGreaterOrEquals,
+                lessThan: intl.operatorLessThan,
+                lessOrEquals: intl.operatorLessOrEquals,
+                like: intl.operatorLike,
+            },
+        },
+        select: {
+            noResults: intl.noResultsMessage,
+            showMore: intl.showMoreLabel,
+            removeOption: name => intl.getRemoveOptionText(name),
+            resultsCount: count => intl.getSearchResultsCountMessage(count),
+        },
+        paginatedSelect: {
+            confirm: intl.paginatedSelectConfirmLabel,
+            reset: intl.paginatedSelectResetLabel,
+            selectAll: intl.paginatedSelectSelectAllLabel,
+            loadingMore: intl.paginatedSelectLoadingMoreLabel,
+            endOfList: intl.paginatedSelectEndOfListLabel,
+            noResultsHint: intl.paginatedSelectNoResultsHint,
+            clearSearch: intl.paginatedSelectClearSearchLabel,
+            errorTitle: intl.paginatedSelectErrorTitle,
+            errorHint: intl.paginatedSelectErrorHint,
+            retry: intl.paginatedSelectRetryLabel,
+            selectedCount: (selected, total) => intl.getPaginatedSelectSelectedCountLabel(selected, total),
+            resultsCount: total => intl.getPaginatedSelectResultsCountLabel(total),
+        },
+    };
+}
+// ── Utilidades ──────────────────────────────────────────────────────────────
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value) && !isSignal(value);
+}
+/** Copia profunda de `base` con los valores de `overrides` encima; ignora los undefined. */
+function deepMerge(base, overrides) {
+    const result = { ...base };
+    for (const [key, value] of Object.entries(overrides)) {
+        if (value === undefined)
+            continue;
+        const current = result[key];
+        result[key] = isPlainObject(current) && isPlainObject(value)
+            ? deepMerge(current, value)
+            : value;
+    }
+    return result;
+}
+
+/**
+ * Botón de Material que muestra un spinner mientras dura una acción y no deja volver a pulsarlo.
+ *
+ * El clic se escucha en el propio selector: `<ngx-loading-button (click)="save()" />`.
+ * Mientras `isLoading` es true el clic no llega (ni el submit del formulario, ni con Enter).
+ */
+class NgxLoadingButton {
+    _texts = inject(NgxTexts).texts;
+    /** Muestra el spinner y bloquea el botón. */
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Texto del botón. Para iconos o contenido con formato, proyéctalo en su lugar. */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /**
+     * Texto que sustituye al contenido mientras carga, con un spinner pequeño delante
+     * (p. ej. «Guardando…»). Sin él, el spinner se superpone y el botón mantiene su ancho.
+     */
+    loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : []));
+    /** Apariencia de Material: text, filled, elevated, outlined o tonal. */
+    matButton = input('filled', ...(ngDevMode ? [{ debugName: "matButton" }] : []));
+    /** Tipo nativo del botón. */
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /** Deshabilita el botón (independiente de isLoading). */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Color. Sin valor, el primary del tema. */
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** Diámetro en px del spinner superpuesto. */
+    spinnerDiameter = input(24, ...(ngDevMode ? [{ debugName: "spinnerDiameter", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Grosor en px del trazo del spinner. */
+    spinnerStrokeWidth = input(3, ...(ngDevMode ? [{ debugName: "spinnerStrokeWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Lo que anuncia el lector de pantalla mientras carga. Por defecto, el texto `loadingButton.busy` de la librería. */
+    busyLabel = input(...(ngDevMode ? [undefined, { debugName: "busyLabel" }] : []));
+    /** El spinner va encima del contenido (que se oculta sin cambiar el ancho). */
+    overlaySpinner = computed(() => this.isLoading() && !this.loadingText(), ...(ngDevMode ? [{ debugName: "overlaySpinner" }] : []));
+    /** El spinner va en línea, delante de loadingText. */
+    inlineSpinner = computed(() => this.isLoading() && !!this.loadingText(), ...(ngDevMode ? [{ debugName: "inlineSpinner" }] : []));
+    resolvedBusyLabel = computed(() => {
+        return this.busyLabel() ?? this._texts().loadingButton.busy;
+    }, ...(ngDevMode ? [{ debugName: "resolvedBusyLabel" }] : []));
+    /**
+     * Mientras carga, anula el clic en el propio botón: preventDefault evita el submit del formulario
+     * (también el implícito al pulsar Enter en un campo) y stopImmediatePropagation evita que llegue
+     * al (click) que el consumidor escucha en <ngx-loading-button>.
+     */
+    blockWhileLoading(event) {
+        if (!this.isLoading())
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxLoadingButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxLoadingButton, isStandalone: true, selector: "ngx-loading-button", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, matButton: { classPropertyName: "matButton", publicName: "matButton", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null }, spinnerStrokeWidth: { classPropertyName: "spinnerStrokeWidth", publicName: "spinnerStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, busyLabel: { classPropertyName: "busyLabel", publicName: "busyLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngx-loading-button--secondary": "color() === \"secondary\"", "class.ngx-loading-button--tertiary": "color() === \"tertiary\"", "class.ngx-loading-button--error": "color() === \"error\"", "class.ngx-loading-button--loading": "isLoading() && !disabled()" } }, ngImport: i0, template: "<!--\r\n  Mientras carga: disabledInteractive mantiene el foco en el bot\u00F3n (el lector de pantalla sigue en \u00E9l\r\n  y oye aria-busy). Material NO bloquea el clic de un <button> en ese estado: lo hace blockWhileLoading.\r\n  Con disabled, el bot\u00F3n se deshabilita del todo y el navegador ya no emite clics.\r\n-->\r\n<button\r\n  class=\"loadingButton\"\r\n  [matButton]=\"matButton()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled() || isLoading()\"\r\n  [disabledInteractive]=\"isLoading() && !disabled()\"\r\n  [attr.aria-busy]=\"isLoading() || null\"\r\n  (click)=\"blockWhileLoading($event)\"\r\n>\r\n  <span class=\"loadingButton__content\" [class.loadingButton__content--hidden]=\"overlaySpinner()\" [class.loadingButton__content--gone]=\"inlineSpinner()\">\r\n    {{ label() }}\r\n    <ng-content />\r\n  </span>\r\n\r\n  @if (inlineSpinner()) {\r\n    <span class=\"loadingButton__content\">\r\n      <mat-spinner class=\"loadingButton__inlineSpinner\" diameter=\"18\" strokeWidth=\"2.5\" aria-hidden=\"true\" />\r\n      {{ loadingText() }}\r\n    </span>\r\n  }\r\n\r\n  @if (overlaySpinner()) {\r\n    <mat-spinner\r\n      class=\"loadingButton__overlaySpinner\"\r\n      [diameter]=\"spinnerDiameter()\"\r\n      [strokeWidth]=\"spinnerStrokeWidth()\"\r\n      [attr.aria-label]=\"resolvedBusyLabel()\"\r\n    />\r\n  }\r\n</button>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.loadingButton{width:100%}.loadingButton__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.loadingButton__content--hidden{visibility:hidden}.loadingButton__content--gone{display:none}.loadingButton__content ::ng-deep .mat-icon{width:18px;height:18px;font-size:18px}.loadingButton__overlaySpinner,.loadingButton__inlineSpinner{--mat-progress-spinner-active-indicator-color: currentColor}.loadingButton__overlaySpinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.loadingButton__inlineSpinner{flex:none}.loadingButton[aria-busy=true]{cursor:progress}:host(.ngx-loading-button--loading){--mat-button-filled-disabled-container-color: var(--mat-button-filled-container-color, var(--mat-sys-primary));--mat-button-filled-disabled-label-text-color: var(--mat-button-filled-label-text-color, var(--mat-sys-on-primary));--mat-button-tonal-disabled-container-color: var(--mat-button-tonal-container-color, var(--mat-sys-secondary-container));--mat-button-tonal-disabled-label-text-color: var(--mat-button-tonal-label-text-color, var(--mat-sys-on-secondary-container));--mat-button-protected-disabled-container-color: var(--mat-button-protected-container-color, var(--mat-sys-surface));--mat-button-protected-disabled-container-elevation-shadow: var(--mat-button-protected-container-elevation-shadow, var(--mat-sys-level1));--mat-button-protected-disabled-label-text-color: var(--mat-button-protected-label-text-color, var(--mat-sys-primary));--mat-button-outlined-disabled-outline-color: var(--mat-button-outlined-outline-color, var(--mat-sys-outline));--mat-button-outlined-disabled-label-text-color: var(--mat-button-outlined-label-text-color, var(--mat-sys-primary));--mat-button-text-disabled-label-text-color: var(--mat-button-text-label-text-color, var(--mat-sys-primary))}:host(.ngx-loading-button--secondary){--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-filled-state-layer-color: var(--mat-sys-on-secondary);--mat-button-tonal-container-color: var(--mat-sys-secondary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-secondary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-secondary-container);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}:host(.ngx-loading-button--tertiary){--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-filled-state-layer-color: var(--mat-sys-on-tertiary);--mat-button-tonal-container-color: var(--mat-sys-tertiary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-tertiary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-tertiary-container);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}:host(.ngx-loading-button--error){--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: var(--mat-sys-error-container);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-protected-state-layer-color: var(--mat-sys-error);--mat-button-protected-ripple-color: var(--mat-sys-error-container);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: var(--mat-sys-error-container)}\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: "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: NgxLoadingButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-loading-button', imports: [MatButtonModule, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ngx-loading-button--secondary]': 'color() === "secondary"',
+                        '[class.ngx-loading-button--tertiary]': 'color() === "tertiary"',
+                        '[class.ngx-loading-button--error]': 'color() === "error"',
+                        '[class.ngx-loading-button--loading]': 'isLoading() && !disabled()',
+                    }, template: "<!--\r\n  Mientras carga: disabledInteractive mantiene el foco en el bot\u00F3n (el lector de pantalla sigue en \u00E9l\r\n  y oye aria-busy). Material NO bloquea el clic de un <button> en ese estado: lo hace blockWhileLoading.\r\n  Con disabled, el bot\u00F3n se deshabilita del todo y el navegador ya no emite clics.\r\n-->\r\n<button\r\n  class=\"loadingButton\"\r\n  [matButton]=\"matButton()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled() || isLoading()\"\r\n  [disabledInteractive]=\"isLoading() && !disabled()\"\r\n  [attr.aria-busy]=\"isLoading() || null\"\r\n  (click)=\"blockWhileLoading($event)\"\r\n>\r\n  <span class=\"loadingButton__content\" [class.loadingButton__content--hidden]=\"overlaySpinner()\" [class.loadingButton__content--gone]=\"inlineSpinner()\">\r\n    {{ label() }}\r\n    <ng-content />\r\n  </span>\r\n\r\n  @if (inlineSpinner()) {\r\n    <span class=\"loadingButton__content\">\r\n      <mat-spinner class=\"loadingButton__inlineSpinner\" diameter=\"18\" strokeWidth=\"2.5\" aria-hidden=\"true\" />\r\n      {{ loadingText() }}\r\n    </span>\r\n  }\r\n\r\n  @if (overlaySpinner()) {\r\n    <mat-spinner\r\n      class=\"loadingButton__overlaySpinner\"\r\n      [diameter]=\"spinnerDiameter()\"\r\n      [strokeWidth]=\"spinnerStrokeWidth()\"\r\n      [attr.aria-label]=\"resolvedBusyLabel()\"\r\n    />\r\n  }\r\n</button>\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.loadingButton{width:100%}.loadingButton__content{display:inline-flex;align-items:center;justify-content:center;gap:8px}.loadingButton__content--hidden{visibility:hidden}.loadingButton__content--gone{display:none}.loadingButton__content ::ng-deep .mat-icon{width:18px;height:18px;font-size:18px}.loadingButton__overlaySpinner,.loadingButton__inlineSpinner{--mat-progress-spinner-active-indicator-color: currentColor}.loadingButton__overlaySpinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.loadingButton__inlineSpinner{flex:none}.loadingButton[aria-busy=true]{cursor:progress}:host(.ngx-loading-button--loading){--mat-button-filled-disabled-container-color: var(--mat-button-filled-container-color, var(--mat-sys-primary));--mat-button-filled-disabled-label-text-color: var(--mat-button-filled-label-text-color, var(--mat-sys-on-primary));--mat-button-tonal-disabled-container-color: var(--mat-button-tonal-container-color, var(--mat-sys-secondary-container));--mat-button-tonal-disabled-label-text-color: var(--mat-button-tonal-label-text-color, var(--mat-sys-on-secondary-container));--mat-button-protected-disabled-container-color: var(--mat-button-protected-container-color, var(--mat-sys-surface));--mat-button-protected-disabled-container-elevation-shadow: var(--mat-button-protected-container-elevation-shadow, var(--mat-sys-level1));--mat-button-protected-disabled-label-text-color: var(--mat-button-protected-label-text-color, var(--mat-sys-primary));--mat-button-outlined-disabled-outline-color: var(--mat-button-outlined-outline-color, var(--mat-sys-outline));--mat-button-outlined-disabled-label-text-color: var(--mat-button-outlined-label-text-color, var(--mat-sys-primary));--mat-button-text-disabled-label-text-color: var(--mat-button-text-label-text-color, var(--mat-sys-primary))}:host(.ngx-loading-button--secondary){--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-filled-state-layer-color: var(--mat-sys-on-secondary);--mat-button-tonal-container-color: var(--mat-sys-secondary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-secondary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-secondary-container);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-outlined-state-layer-color: var(--mat-sys-secondary);--mat-button-outlined-ripple-color: var(--mat-sys-secondary-container);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-protected-state-layer-color: var(--mat-sys-secondary);--mat-button-protected-ripple-color: var(--mat-sys-secondary-container);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary);--mat-button-text-ripple-color: var(--mat-sys-secondary-container)}:host(.ngx-loading-button--tertiary){--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-filled-state-layer-color: var(--mat-sys-on-tertiary);--mat-button-tonal-container-color: var(--mat-sys-tertiary-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-tertiary-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-tertiary-container);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-outlined-state-layer-color: var(--mat-sys-tertiary);--mat-button-outlined-ripple-color: var(--mat-sys-tertiary-container);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-state-layer-color: var(--mat-sys-tertiary);--mat-button-protected-ripple-color: var(--mat-sys-tertiary-container);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary);--mat-button-text-ripple-color: var(--mat-sys-tertiary-container)}:host(.ngx-loading-button--error){--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: var(--mat-sys-error-container);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-protected-state-layer-color: var(--mat-sys-error);--mat-button-protected-ripple-color: var(--mat-sys-error-container);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: var(--mat-sys-error-container)}\n"] }]
+        }], propDecorators: { isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], matButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "matButton", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], spinnerStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerStrokeWidth", required: false }] }], busyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "busyLabel", required: false }] }] } });
+
+// Utilidades internas de ngx-input-file (no se exportan en el barril).
+/** Normaliza `accept` (array o cadena separada por comas) a patrones en minúsculas. `*` o vacío = sin filtro. */
+function parseAccept(accept) {
+    const parts = Array.isArray(accept) ? accept : String(accept ?? '').split(',');
+    return parts.map(part => part.trim().toLowerCase()).filter(part => part && part !== '*' && part !== '*/*');
+}
+/** ¿Cumple el fichero alguno de los patrones? Admite extensiones (`.pdf`), MIME (`application/pdf`) y comodines (`image/*`). */
+function matchesAccept(file, patterns) {
+    if (!patterns.length)
+        return true;
+    const type = file.type.toLowerCase();
+    const name = file.name.toLowerCase();
+    return patterns.some(pattern => {
+        if (pattern.startsWith('.'))
+            return name.endsWith(pattern);
+        if (pattern.endsWith('/*'))
+            return type.startsWith(pattern.slice(0, -1));
+        return type === pattern;
+    });
+}
+/** Mismo fichero = mismo nombre, tamaño y fecha de modificación (el navegador da objetos File distintos en cada selección). */
+function isSameFile(a, b) {
+    return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+}
+const UNITS = ['B', 'KB', 'MB', 'GB'];
+/** Tamaño legible con el formato numérico del idioma: 845 B, 12 KB, 1,4 MB. */
+function formatFileSize(bytes, locale) {
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < UNITS.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    const digits = unit === 0 || value >= 10 ? 0 : 1;
+    return `${new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value)} ${UNITS[unit]}`;
+}
+/** Icono de Material Symbols según el tipo; si el navegador no da MIME (pasa con .docx, .dwg…), según la extensión. */
+function fileIcon(file) {
+    const type = file.type.toLowerCase();
+    const extension = file.name.toLowerCase().split('.').pop() ?? '';
+    if (type.startsWith('image/'))
+        return 'image';
+    if (type === 'application/pdf' || extension === 'pdf')
+        return 'picture_as_pdf';
+    if (type.startsWith('video/'))
+        return 'videocam';
+    if (type.startsWith('audio/'))
+        return 'audio_file';
+    if (/spreadsheet|excel|csv/.test(type) || ['xls', 'xlsx', 'csv', 'ods'].includes(extension))
+        return 'table_chart';
+    if (/word|document|text\//.test(type) || ['doc', 'docx', 'odt', 'txt', 'rtf'].includes(extension))
+        return 'description';
+    if (/zip|compressed|tar|rar|7z/.test(type) || ['zip', 'rar', '7z', 'tar', 'gz'].includes(extension))
+        return 'folder_zip';
+    return 'draft';
+}
+
+/**
+ * Selector de ficheros con forma de campo de formulario: un `mat-form-field` con los ficheros como chips.
+ * Se usa con `formControlName` / `[formControl]` / `ngModel` (valor: `File[]`) o con `[(files)]`.
+ */
+class NgxInputFile {
+    // Se registra como value accessor a mano (en vez de con NG_VALUE_ACCESSOR) para poder leer el
+    // control del formulario: su estado decide el asterisco de obligatorio y cuándo se ve el error.
+    _ngControl = inject(NgControl, { self: true, optional: true });
+    _parentForm = inject(FormGroupDirective, { optional: true }) ?? inject(NgForm, { optional: true });
+    _cdr = inject(ChangeDetectorRef);
+    _host = inject(ElementRef);
+    _locale = inject(LOCALE_ID);
+    _nativeInput = viewChild.required('nativeInput');
+    _chipGrid = viewChild(MatChipGrid, ...(ngDevMode ? [{ debugName: "_chipGrid" }] : []));
+    texts = inject(NgxTexts).texts;
+    /** Etiqueta del campo. Por defecto, el texto `inputFile.label` de la librería. */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /** Texto del campo vacío. Por defecto, el texto `inputFile.placeholder` de la librería. */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    /** Texto de ayuda bajo el campo. */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /** Mensaje de error. Se ve cuando el control es inválido y está tocado o el formulario se ha enviado. */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Tipos admitidos: extensiones (`.pdf`), MIME (`application/pdf`) o comodines (`image/*`). Se comprueba también al arrastrar. */
+    accept = input([], ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    /** Permite varios ficheros; cada selección se añade a los que ya hay. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Tamaño máximo por fichero, en bytes. Los mayores se descartan. */
+    maxSize = input(null, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    /** Número máximo de ficheros (con `multiple`). Los que no caben se descartan. */
+    maxFiles = input(null, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Apariencia del `mat-form-field`. */
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Ficheros seleccionados. Admite `[(files)]` para usarlo sin formularios. */
+    files = model([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    /** Fichero descartado al seleccionar o arrastrar (tipo, tamaño o número), con el mismo formato que ngx-file-input. */
+    validationError = output();
+    resolvedLabel = computed(() => this.label() ?? this.texts().inputFile.label, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
+    resolvedPlaceholder = computed(() => this.files().length ? '' : (this.placeholder() ?? this.texts().inputFile.placeholder), ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : []));
+    acceptAttr = computed(() => parseAccept(this.accept()).join(','), ...(ngDevMode ? [{ debugName: "acceptAttr" }] : []));
+    items = computed(() => this.files().map(file => ({ file, icon: fileIcon(file), size: formatFileSize(file.size, this._locale) })), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
+    /** Deshabilitado por el input `disabled` o por el control del formulario. */
+    isDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isDropping = signal(false, ...(ngDevMode ? [{ debugName: "isDropping" }] : []));
+    isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    /** Ficheros descartados en la última selección; el mensaje se recalcula si cambia el idioma. */
+    _rejected = signal([], ...(ngDevMode ? [{ debugName: "_rejected" }] : []));
+    rejectionMessage = computed(() => {
+        const messages = this._rejected().map(({ file, code }) => this._message(file, code));
+        return [...new Set(messages)].join(' · ');
+    }, ...(ngDevMode ? [{ debugName: "rejectionMessage" }] : []));
+    /** Error con el estado del control del formulario (inválido y tocado, o formulario enviado). */
+    errorStateMatcher = {
+        isErrorState: () => {
+            const control = this._control();
+            return !!control && control.invalid && (control.touched || !!this._parentForm?.submitted);
+        },
+    };
+    noSeparators = [];
+    _onChange = () => { };
+    _onTouched = () => { };
+    _controlSub;
+    constructor() {
+        if (this._ngControl)
+            this._ngControl.valueAccessor = this;
+        inject(DestroyRef).onDestroy(() => this._controlSub?.unsubscribe());
+    }
+    ngAfterViewInit() {
+        // formControlName asigna su control después de registerOnChange: aquí ya está
+        if (this._ngControl?.control)
+            this._bindControl(this._ngControl.control);
+    }
+    ngDoCheck() {
+        // Como hacen los campos de Material: hay cambios sin evento (resetForm quita el «enviado» después del reset)
+        this._chipGrid()?.updateErrorState();
+    }
+    /** Abre el selector de ficheros del sistema. */
+    openPicker() {
+        if (!this.isDisabled())
+            this._nativeInput().nativeElement.click();
+    }
+    /** Quita un fichero de la selección. */
+    remove(file) {
+        this._rejected.set([]);
+        this._commit(this.files().filter(item => item !== file));
+    }
+    // ── Eventos de la plantilla ─────────────────────────────────────────────────
+    onFieldClick(event) {
+        // Pulsar un chip (o su botón de quitar) no abre el selector
+        if (event.target.closest('.mat-mdc-chip, .ngx-input-file__browse'))
+            return;
+        this.openPicker();
+    }
+    onTriggerKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openPicker();
+        }
+    }
+    onTriggerBlur() {
+        // Al abrir el diálogo del sistema la ventana pierde el foco: eso no cuenta como salir del campo
+        if (typeof document !== 'undefined' && document.hasFocus())
+            this._markTouched();
+    }
+    onNativeChange(event) {
+        const input = event.target;
+        this._addFiles(input.files);
+        input.value = '';
+    }
+    onNativeCancel() {
+        this._markTouched();
+    }
+    onDragOver(event) {
+        // Siempre: si no, el navegador abre el fichero al soltarlo
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = this.isDisabled() ? 'none' : 'copy';
+        if (!this.isDisabled())
+            this.isDropping.set(true);
+    }
+    onDragLeave(event) {
+        // dragleave también salta al pasar por encima de un hijo: solo cuenta si sale del componente
+        if (!this._host.nativeElement.contains(event.relatedTarget))
+            this.isDropping.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDropping.set(false);
+        if (!this.isDisabled())
+            this._addFiles(event.dataTransfer?.files);
+    }
+    // ── ControlValueAccessor ────────────────────────────────────────────────────
+    writeValue(files) {
+        this.files.set(Array.isArray(files) ? files : []);
+        this._rejected.set([]);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+        // [formControl] ya tiene aquí su control (también si se cambia por otro); formControlName, en ngAfterViewInit
+        if (this._ngControl?.control)
+            this._bindControl(this._ngControl.control);
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
+    // ── Privado ─────────────────────────────────────────────────────────────────
+    _control() {
+        return this._ngControl?.control ?? null;
+    }
+    /** Escucha el control (y el envío del formulario) para refrescar el asterisco y el estado de error con OnPush. */
+    _bindControl(control) {
+        this._controlSub?.unsubscribe();
+        if (!control)
+            return;
+        const submit$ = this._parentForm?.ngSubmit ?? EMPTY;
+        this._controlSub = merge(control.events, submit$).subscribe(() => this._syncFormState(control));
+        this._syncFormState(control);
+    }
+    _syncFormState(control) {
+        this.isRequired.set(control.hasValidator(Validators.required));
+        // mat-chip-grid solo recalcula su error en ngDoCheck y si tiene NgControl propio, que aquí no tiene
+        this._chipGrid()?.updateErrorState();
+        this._cdr.markForCheck();
+    }
+    _addFiles(list) {
+        const incoming = Array.from(list ?? []);
+        if (!incoming.length)
+            return;
+        const patterns = parseAccept(this.accept());
+        const maxSize = this.maxSize();
+        const rejected = [];
+        const valid = [];
+        for (const file of incoming) {
+            if (!matchesAccept(file, patterns))
+                rejected.push({ file, code: 'TYPE_NOT_ALLOWED' });
+            else if (maxSize != null && file.size > maxSize)
+                rejected.push({ file, code: 'SIZE_EXCEEDED' });
+            else
+                valid.push(file);
+        }
+        let next = this.files();
+        if (!this.multiple()) {
+            if (valid.length)
+                next = [valid[0]];
+        }
+        else {
+            // Los repetidos (ya seleccionados o dos veces en la misma tanda) se ignoran sin avisar
+            const fresh = valid.filter((file, index) => !next.some(current => isSameFile(current, file)) && valid.findIndex(other => isSameFile(other, file)) === index);
+            const max = this.maxFiles();
+            const room = max == null ? fresh.length : Math.max(max - next.length, 0);
+            fresh.slice(room).forEach(file => rejected.push({ file, code: 'MAX_FILES_EXCEEDED' }));
+            if (room > 0 && fresh.length)
+                next = [...next, ...fresh.slice(0, room)];
+        }
+        this._rejected.set(rejected);
+        for (const { file, code } of rejected)
+            this.validationError.emit({ file, code, message: this._message(file, code) });
+        if (next !== this.files())
+            this._commit(next);
+        else
+            this._markTouched();
+    }
+    _commit(files) {
+        this.files.set(files);
+        this._onChange(files);
+        this._markTouched();
+    }
+    _markTouched() {
+        this._onTouched();
+        this._chipGrid()?.updateErrorState();
+        this._cdr.markForCheck();
+    }
+    _message(file, code) {
+        const texts = this.texts().inputFile;
+        switch (code) {
+            case 'TYPE_NOT_ALLOWED':
+                return texts.rejectedType(file.name);
+            case 'SIZE_EXCEEDED':
+                return texts.rejectedSize(file.name, formatFileSize(this.maxSize() ?? 0, this._locale));
+            case 'MAX_FILES_EXCEEDED':
+                return texts.rejectedCount(this.maxFiles() ?? 0);
+        }
+    }
+    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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", validationError: "validationError" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.ngx-input-file--disabled": "isDisabled()", "class.ngx-input-file--dropping": "isDropping()", "class.ngx-input-file--has-files": "files().length > 0" }, classAttribute: "ngx-input-file" }, viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "_chipGrid", first: true, predicate: MatChipGrid, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n  class=\"ngx-input-file__field\"\r\n  [appearance]=\"appearance()\"\r\n  floatLabel=\"always\"\r\n  subscriptSizing=\"dynamic\"\r\n  (click)=\"onFieldClick($event)\">\r\n  <mat-label>{{ resolvedLabel() }}</mat-label>\r\n\r\n  <mat-chip-grid\r\n    #chipGrid\r\n    class=\"ngx-input-file__chips\"\r\n    [disabled]=\"isDisabled()\"\r\n    [required]=\"isRequired()\"\r\n    [errorStateMatcher]=\"errorStateMatcher\">\r\n    @for (item of items(); track item.file) {\r\n      <mat-chip-row class=\"ngx-input-file__chip\" [title]=\"item.file.name + ' \u00B7 ' + item.size\" (removed)=\"remove(item.file)\">\r\n        <mat-icon matChipAvatar aria-hidden=\"true\">{{ item.icon }}</mat-icon>\r\n        <span class=\"ngx-input-file__chip-name\">{{ item.file.name }}</span>\r\n        <span class=\"ngx-input-file__chip-size\">{{ item.size }}</span>\r\n        <button matChipRemove type=\"button\" [attr.aria-label]=\"texts().inputFile.remove(item.file.name)\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n\r\n    <!-- Entrada de texto de solo lectura: da el foco con Tab, el placeholder y abre el selector con Intro o Espacio -->\r\n    <input\r\n      class=\"ngx-input-file__trigger\"\r\n      readonly\r\n      [matChipInputFor]=\"chipGrid\"\r\n      [matChipInputSeparatorKeyCodes]=\"noSeparators\"\r\n      [placeholder]=\"resolvedPlaceholder()\"\r\n      (keydown)=\"onTriggerKeydown($event)\"\r\n      (blur)=\"onTriggerBlur()\" />\r\n  </mat-chip-grid>\r\n\r\n  <button\r\n    matIconSuffix\r\n    matIconButton\r\n    type=\"button\"\r\n    class=\"ngx-input-file__browse\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-label]=\"texts().inputFile.browse\"\r\n    [matTooltip]=\"texts().inputFile.browse\"\r\n    (click)=\"openPicker()\">\r\n    <mat-icon>attach_file</mat-icon>\r\n  </button>\r\n\r\n  <input\r\n    #nativeInput\r\n    type=\"file\"\r\n    hidden\r\n    tabindex=\"-1\"\r\n    [accept]=\"acceptAttr()\"\r\n    [multiple]=\"multiple()\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (cancel)=\"onNativeCancel()\" />\r\n\r\n  <mat-hint>\r\n    @if (isDropping()) {\r\n      {{ texts().inputFile.dropping }}\r\n    } @else if (rejectionMessage()) {\r\n      <span class=\"ngx-input-file__rejection\">{{ rejectionMessage() }}</span>\r\n    } @else {\r\n      {{ hint() }}\r\n    }\r\n  </mat-hint>\r\n\r\n  @if (error()) {\r\n    <mat-error>{{ error() }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n\r\n<!-- Regi\u00F3n viva fija: los descartes se anuncian aunque el lector est\u00E9 en otro sitio -->\r\n<div class=\"ngx-input-file__live\" aria-live=\"polite\">{{ rejectionMessage() }}</div>\r\n", styles: [":host{display:block;width:100%}.ngx-input-file__field{width:100%;cursor:pointer}:host(.ngx-input-file--has-files) .ngx-input-file__field{--mat-form-field-container-vertical-padding: 8px}:host(.ngx-input-file--disabled) .ngx-input-file__field{cursor:default}:host(.ngx-input-file--dropping) .ngx-input-file__field{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-outline-width: 2px;--mat-form-field-filled-active-indicator-color: var(--mat-sys-primary);--mat-form-field-filled-hover-active-indicator-color: var(--mat-sys-primary)}.ngx-input-file__chips{width:100%}.ngx-input-file__trigger.mat-mdc-chip-input{cursor:inherit;caret-color:transparent;flex:1 0 8ch}:host(.ngx-input-file--has-files) .ngx-input-file__trigger.mat-mdc-chip-input{flex:1 1 0;min-width:0;margin-left:0}.ngx-input-file__chip{max-width:100%}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__cell--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__action--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{min-width:0;overflow:hidden}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{display:flex;align-items:baseline;gap:6px}.ngx-input-file__chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngx-input-file__chip-size{flex:none;font:var(--mat-sys-label-small);color:var(--mat-sys-on-surface-variant)}.ngx-input-file__rejection{color:var(--mat-sys-error)}.ngx-input-file__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\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: MatChipsModule }, { kind: "directive", type: i2$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-input-file', imports: [MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ngx-input-file',
+                        '[class.ngx-input-file--disabled]': 'isDisabled()',
+                        '[class.ngx-input-file--dropping]': 'isDropping()',
+                        '[class.ngx-input-file--has-files]': 'files().length > 0',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
+                        '(drop)': 'onDrop($event)',
+                    }, template: "<mat-form-field\r\n  class=\"ngx-input-file__field\"\r\n  [appearance]=\"appearance()\"\r\n  floatLabel=\"always\"\r\n  subscriptSizing=\"dynamic\"\r\n  (click)=\"onFieldClick($event)\">\r\n  <mat-label>{{ resolvedLabel() }}</mat-label>\r\n\r\n  <mat-chip-grid\r\n    #chipGrid\r\n    class=\"ngx-input-file__chips\"\r\n    [disabled]=\"isDisabled()\"\r\n    [required]=\"isRequired()\"\r\n    [errorStateMatcher]=\"errorStateMatcher\">\r\n    @for (item of items(); track item.file) {\r\n      <mat-chip-row class=\"ngx-input-file__chip\" [title]=\"item.file.name + ' \u00B7 ' + item.size\" (removed)=\"remove(item.file)\">\r\n        <mat-icon matChipAvatar aria-hidden=\"true\">{{ item.icon }}</mat-icon>\r\n        <span class=\"ngx-input-file__chip-name\">{{ item.file.name }}</span>\r\n        <span class=\"ngx-input-file__chip-size\">{{ item.size }}</span>\r\n        <button matChipRemove type=\"button\" [attr.aria-label]=\"texts().inputFile.remove(item.file.name)\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n\r\n    <!-- Entrada de texto de solo lectura: da el foco con Tab, el placeholder y abre el selector con Intro o Espacio -->\r\n    <input\r\n      class=\"ngx-input-file__trigger\"\r\n      readonly\r\n      [matChipInputFor]=\"chipGrid\"\r\n      [matChipInputSeparatorKeyCodes]=\"noSeparators\"\r\n      [placeholder]=\"resolvedPlaceholder()\"\r\n      (keydown)=\"onTriggerKeydown($event)\"\r\n      (blur)=\"onTriggerBlur()\" />\r\n  </mat-chip-grid>\r\n\r\n  <button\r\n    matIconSuffix\r\n    matIconButton\r\n    type=\"button\"\r\n    class=\"ngx-input-file__browse\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-label]=\"texts().inputFile.browse\"\r\n    [matTooltip]=\"texts().inputFile.browse\"\r\n    (click)=\"openPicker()\">\r\n    <mat-icon>attach_file</mat-icon>\r\n  </button>\r\n\r\n  <input\r\n    #nativeInput\r\n    type=\"file\"\r\n    hidden\r\n    tabindex=\"-1\"\r\n    [accept]=\"acceptAttr()\"\r\n    [multiple]=\"multiple()\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (cancel)=\"onNativeCancel()\" />\r\n\r\n  <mat-hint>\r\n    @if (isDropping()) {\r\n      {{ texts().inputFile.dropping }}\r\n    } @else if (rejectionMessage()) {\r\n      <span class=\"ngx-input-file__rejection\">{{ rejectionMessage() }}</span>\r\n    } @else {\r\n      {{ hint() }}\r\n    }\r\n  </mat-hint>\r\n\r\n  @if (error()) {\r\n    <mat-error>{{ error() }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n\r\n<!-- Regi\u00F3n viva fija: los descartes se anuncian aunque el lector est\u00E9 en otro sitio -->\r\n<div class=\"ngx-input-file__live\" aria-live=\"polite\">{{ rejectionMessage() }}</div>\r\n", styles: [":host{display:block;width:100%}.ngx-input-file__field{width:100%;cursor:pointer}:host(.ngx-input-file--has-files) .ngx-input-file__field{--mat-form-field-container-vertical-padding: 8px}:host(.ngx-input-file--disabled) .ngx-input-file__field{cursor:default}:host(.ngx-input-file--dropping) .ngx-input-file__field{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-outline-width: 2px;--mat-form-field-filled-active-indicator-color: var(--mat-sys-primary);--mat-form-field-filled-hover-active-indicator-color: var(--mat-sys-primary)}.ngx-input-file__chips{width:100%}.ngx-input-file__trigger.mat-mdc-chip-input{cursor:inherit;caret-color:transparent;flex:1 0 8ch}:host(.ngx-input-file--has-files) .ngx-input-file__trigger.mat-mdc-chip-input{flex:1 1 0;min-width:0;margin-left:0}.ngx-input-file__chip{max-width:100%}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__cell--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__action--primary,.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{min-width:0;overflow:hidden}.ngx-input-file__chip ::ng-deep .mdc-evolution-chip__text-label{display:flex;align-items:baseline;gap:6px}.ngx-input-file__chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngx-input-file__chip-size{flex:none;font:var(--mat-sys-label-small);color:var(--mat-sys-on-surface-variant)}.ngx-input-file__rejection{color:var(--mat-sys-error)}.ngx-input-file__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], _chipGrid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatChipGrid), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], 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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
+
+const includeNoSensible = (cadena, query) => {
+    const nomalizadoCadena = cadena
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+    const nomalizadoQuery = query
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+    return nomalizadoCadena.includes(nomalizadoQuery);
+};
+const base64ToUtf8 = (str) => {
+    return decodeURIComponent(atob(str)
+        .split('')
+        .map(function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    })
+        .join(''));
+};
+
 /** Teclas que deben llegar al mat-select para navegar/seleccionar desde el buscador. */
 const NAVIGATION_KEYS = new Set([
     'ArrowDown',
@@ -590,7 +1063,7 @@ const NAVIGATION_KEYS = new Set([
 ]);
 class NgxBasicSelect {
     // Servicio de internacionalización (placeholder del buscador, mensajes de estado…)
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     /**
      * Se auto-registra como ControlValueAccessor del control del formulario.
      * Se usa `self`/`optional` para poder leer el estado de validación (invalid/touched)
@@ -675,7 +1148,7 @@ class NgxBasicSelect {
         if (!query)
             return '';
         const count = this.resolvedOptions().filter(o => o.visible).length;
-        return this.intl.getSearchResultsCountMessage(count);
+        return this.texts().select.resultsCount(count);
     }, ...(ngDevMode ? [{ debugName: "searchAnnouncement" }] : []));
     /**
      * ErrorStateMatcher que refleja el estado del control del formulario.
@@ -785,7 +1258,7 @@ class NgxBasicSelect {
         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        [required]=\"isRequired()\"\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 type=\"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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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$1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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 });
+    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: "\r\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\r\n    <mat-label>{{ label() }}</mat-label>\r\n    <mat-select\r\n        #matSelect\r\n        [formControl]=\"innerControl\"\r\n        [errorStateMatcher]=\"errorStateMatcher\"\r\n        [required]=\"isRequired()\"\r\n        [multiple]=\"multiple()\"\r\n        [placeholder]=\"placeholder()\"\r\n        (openedChange)=\"onOpenedChange($event)\"\r\n    >\r\n        @if(isLoading()) {\r\n            <!--\r\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\r\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\r\n                panel abre tambien durante la carga y se ve el indicador.\r\n            -->\r\n            <mat-option disabled class=\"stateOption loadingOption\">\r\n                <mat-spinner diameter=\"18\" />\r\n                <span>{{ texts().common.loading }}</span>\r\n            </mat-option>\r\n        } @else {\r\n            <div class=\"searchFilter\">\r\n                <mat-icon class=\"searchIcon\">search</mat-icon>\r\n                <input\r\n                    matInput\r\n                    #searchInput\r\n                    type=\"text\"\r\n                    [attr.aria-label]=\"texts().common.search\"\r\n                    [placeholder]=\"texts().common.search\"\r\n                    [value]=\"searchQuery()\"\r\n                    (input)=\"onSearchInput($any($event.target).value)\"\r\n                    (keydown)=\"onSearchKeydown($event)\"\r\n                />\r\n                <button type=\"button\" matIconButton [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSearch()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n            <!--\r\n                Solo se renderizan las opciones que casan con el buscador (mas las\r\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\r\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\r\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\r\n            -->\r\n            @for(option of displayedOptions(); track option.value) {\r\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\r\n                    {{ option.label }}\r\n                </mat-option>\r\n            }\r\n            @if(showNoOptionsMessage()) {\r\n                <mat-option disabled class=\"stateOption noResults\">\r\n                    {{ hasData() ? texts().select.noResults : texts().common.noData }}\r\n                </mat-option>\r\n            }\r\n        }\r\n    </mat-select>\r\n    @if(isLoading()) {\r\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\r\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\r\n        <button\r\n            matIconButton\r\n            matSuffix\r\n            [attr.aria-label]=\"texts().common.clearSearch\"\r\n            (click)=\"onClearClick(); $event.stopPropagation()\"\r\n        >\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n    }\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>\r\n\r\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\r\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\r\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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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,
@@ -797,7 +1270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         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        [required]=\"isRequired()\"\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 type=\"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"] }]
+                    ], template: "\r\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\r\n    <mat-label>{{ label() }}</mat-label>\r\n    <mat-select\r\n        #matSelect\r\n        [formControl]=\"innerControl\"\r\n        [errorStateMatcher]=\"errorStateMatcher\"\r\n        [required]=\"isRequired()\"\r\n        [multiple]=\"multiple()\"\r\n        [placeholder]=\"placeholder()\"\r\n        (openedChange)=\"onOpenedChange($event)\"\r\n    >\r\n        @if(isLoading()) {\r\n            <!--\r\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\r\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\r\n                panel abre tambien durante la carga y se ve el indicador.\r\n            -->\r\n            <mat-option disabled class=\"stateOption loadingOption\">\r\n                <mat-spinner diameter=\"18\" />\r\n                <span>{{ texts().common.loading }}</span>\r\n            </mat-option>\r\n        } @else {\r\n            <div class=\"searchFilter\">\r\n                <mat-icon class=\"searchIcon\">search</mat-icon>\r\n                <input\r\n                    matInput\r\n                    #searchInput\r\n                    type=\"text\"\r\n                    [attr.aria-label]=\"texts().common.search\"\r\n                    [placeholder]=\"texts().common.search\"\r\n                    [value]=\"searchQuery()\"\r\n                    (input)=\"onSearchInput($any($event.target).value)\"\r\n                    (keydown)=\"onSearchKeydown($event)\"\r\n                />\r\n                <button type=\"button\" matIconButton [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSearch()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n            <!--\r\n                Solo se renderizan las opciones que casan con el buscador (mas las\r\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\r\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\r\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\r\n            -->\r\n            @for(option of displayedOptions(); track option.value) {\r\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\r\n                    {{ option.label }}\r\n                </mat-option>\r\n            }\r\n            @if(showNoOptionsMessage()) {\r\n                <mat-option disabled class=\"stateOption noResults\">\r\n                    {{ hasData() ? texts().select.noResults : texts().common.noData }}\r\n                </mat-option>\r\n            }\r\n        }\r\n    </mat-select>\r\n    @if(isLoading()) {\r\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\r\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\r\n        <button\r\n            matIconButton\r\n            matSuffix\r\n            [attr.aria-label]=\"texts().common.clearSearch\"\r\n            (click)=\"onClearClick(); $event.stopPropagation()\"\r\n        >\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n    }\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>\r\n\r\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\r\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\r\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;
@@ -807,6 +1280,14 @@ var DialogBodyType;
     DialogBodyType["COMPONENT"] = "component";
     DialogBodyType["TEMPLATE"] = "template";
 })(DialogBodyType || (DialogBodyType = {}));
+/**
+ * Lo que un componente o plantilla dentro de un diálogo de NgxDialogService puede controlar.
+ *
+ * - En un componente: `inject(NgxDialogContext)`.
+ * - En una plantilla: viene en el contexto como `dialog` (`let-dialog="dialog"`).
+ */
+class NgxDialogContext {
+}
 
 class DynamicHostDirective {
     _vcr = inject(ViewContainerRef);
@@ -845,10 +1326,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
+/**
+ * Diálogo genérico que abre NgxDialogService. El contenido (texto, HTML, componente o plantilla)
+ * puede usar NgxDialogContext para devolver un resultado o deshabilitar el botón de confirmar.
+ */
 class NgxDialog {
-    //dependencies injection
     _dialogRef = inject((MatDialogRef));
     _data = inject(MAT_DIALOG_DATA);
+    _texts = inject(NgxTexts).texts;
     title = this._data.title;
     icon = this._data.icon;
     iconColor = this._data.iconColor;
@@ -856,17 +1341,35 @@ class NgxDialog {
     body = this._data.body;
     showCancel = this._data.showCancel ?? true;
     showConfirm = this._data.showConfirm ?? true;
-    cancelText = this._data.cancelText ?? 'Cancelar';
-    confirmText = this._data.confirmText ?? 'Aceptar';
+    destructive = this._data.destructive ?? false;
+    /** La X no tiene sentido en un diálogo con disableClose (está pensado para no poder cerrarse sin decidir). */
+    showClose = this._data.showClose ?? !this._dialogRef.disableClose;
+    closeLabel = this._texts().dialog.close;
+    cancelText = this._data.cancelText ?? this._texts().dialog.cancel;
+    confirmText = this._data.confirmText ?? this._texts().dialog.accept;
+    // ── NgxDialogContext ──────────────────────────────────────────────────────
+    result = signal(undefined, ...(ngDevMode ? [{ debugName: "result" }] : []));
+    confirmDisabled = signal(false, ...(ngDevMode ? [{ debugName: "confirmDisabled" }] : []));
+    close(result) {
+        this._dialogRef.close(result);
+    }
+    // ── Plantilla ─────────────────────────────────────────────────────────────
     DialogBodyType = DialogBodyType;
+    templateContext = {
+        $implicit: this.body.data,
+        dialog: this,
+    };
     onCancelClick() {
         this._dialogRef.close(false);
     }
     onConfirmClick() {
-        this._dialogRef.close(true);
+        if (this.confirmDisabled())
+            return;
+        const result = this.result();
+        this._dialogRef.close(result === undefined ? true : result);
     }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", providers: [{ provide: NgxDialogContext, useExisting: forwardRef(() => NgxDialog) }], ngImport: i0, template: "<!--\r\n  Encabezado: el h2 (mat-dialog-title) da el nombre accesible al di\u00E1logo, as\u00ED que la X va fuera de \u00E9l,\r\n  posicionada encima, para que no forme parte de ese nombre.\r\n-->\r\n<div class=\"ngx-dialog__header\" [class.ngx-dialog__header--closable]=\"showClose\">\r\n    <h2 mat-dialog-title class=\"ngx-dialog__title\">\r\n        @if (icon) {\r\n            <mat-icon class=\"ngx-dialog__icon\" [style.color]=\"iconColor || null\" aria-hidden=\"true\">{{ icon }}</mat-icon>\r\n        }\r\n        <span class=\"ngx-dialog__heading\">\r\n            <span class=\"ngx-dialog__title-text\">{{ title }}</span>\r\n            @if (subtitle) {\r\n                <span class=\"ngx-dialog__subtitle\">{{ subtitle }}</span>\r\n            }\r\n        </span>\r\n    </h2>\r\n\r\n    @if (showClose) {\r\n        <button\r\n            type=\"button\"\r\n            matIconButton\r\n            class=\"ngx-dialog__close\"\r\n            [attr.aria-label]=\"closeLabel\"\r\n            [matTooltip]=\"closeLabel\"\r\n            (click)=\"close()\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n    }\r\n</div>\r\n\r\n<mat-dialog-content>\r\n    <div class=\"ngx-dialog__content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p class=\"ngx-dialog__text\">{{ 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]=\"templateContext\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n@if (showCancel || showConfirm) {\r\n    <mat-dialog-actions align=\"end\" class=\"ngx-dialog__actions\">\r\n        @if (showCancel) {\r\n            <button type=\"button\" matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n                {{ cancelText }}\r\n            </button>\r\n        }\r\n        @if (showConfirm) {\r\n            <button\r\n                type=\"button\"\r\n                matButton=\"filled\"\r\n                class=\"ngx-dialog__confirm\"\r\n                [class.ngx-dialog__confirm--destructive]=\"destructive\"\r\n                [disabled]=\"confirmDisabled()\"\r\n                (click)=\"onConfirmClick()\">\r\n                {{ confirmText }}\r\n            </button>\r\n        }\r\n    </mat-dialog-actions>\r\n}\r\n", styles: [":host{display:block}.ngx-dialog__header{position:relative}.ngx-dialog__title.mat-mdc-dialog-title{display:flex;align-items:center;gap:12px;margin:0;padding:18px 24px 16px}.ngx-dialog__title.mat-mdc-dialog-title:before{display:none}.ngx-dialog__header--closable .ngx-dialog__title.mat-mdc-dialog-title{padding-right:64px}.ngx-dialog__icon{flex:none;width:28px;height:28px;font-size:28px}.ngx-dialog__heading{display:flex;flex-direction:column;gap:2px;min-width:0}.ngx-dialog__title-text{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);overflow-wrap:anywhere}.ngx-dialog__subtitle{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant)}.ngx-dialog__close{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:var(--mat-sys-on-surface-variant)}.ngx-dialog__content{padding-top:4px}.ngx-dialog__text{margin:0;white-space:pre-line}.ngx-dialog__actions{gap:8px}.ngx-dialog__confirm--destructive{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error)}\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: 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$3.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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, decorators: [{
             type: Component,
@@ -874,20 +1377,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         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"] }]
+                        MatTooltipModule,
+                        NgTemplateOutlet,
+                        DynamicHostDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NgxDialogContext, useExisting: forwardRef(() => NgxDialog) }], template: "<!--\r\n  Encabezado: el h2 (mat-dialog-title) da el nombre accesible al di\u00E1logo, as\u00ED que la X va fuera de \u00E9l,\r\n  posicionada encima, para que no forme parte de ese nombre.\r\n-->\r\n<div class=\"ngx-dialog__header\" [class.ngx-dialog__header--closable]=\"showClose\">\r\n    <h2 mat-dialog-title class=\"ngx-dialog__title\">\r\n        @if (icon) {\r\n            <mat-icon class=\"ngx-dialog__icon\" [style.color]=\"iconColor || null\" aria-hidden=\"true\">{{ icon }}</mat-icon>\r\n        }\r\n        <span class=\"ngx-dialog__heading\">\r\n            <span class=\"ngx-dialog__title-text\">{{ title }}</span>\r\n            @if (subtitle) {\r\n                <span class=\"ngx-dialog__subtitle\">{{ subtitle }}</span>\r\n            }\r\n        </span>\r\n    </h2>\r\n\r\n    @if (showClose) {\r\n        <button\r\n            type=\"button\"\r\n            matIconButton\r\n            class=\"ngx-dialog__close\"\r\n            [attr.aria-label]=\"closeLabel\"\r\n            [matTooltip]=\"closeLabel\"\r\n            (click)=\"close()\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n    }\r\n</div>\r\n\r\n<mat-dialog-content>\r\n    <div class=\"ngx-dialog__content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p class=\"ngx-dialog__text\">{{ 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]=\"templateContext\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n@if (showCancel || showConfirm) {\r\n    <mat-dialog-actions align=\"end\" class=\"ngx-dialog__actions\">\r\n        @if (showCancel) {\r\n            <button type=\"button\" matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n                {{ cancelText }}\r\n            </button>\r\n        }\r\n        @if (showConfirm) {\r\n            <button\r\n                type=\"button\"\r\n                matButton=\"filled\"\r\n                class=\"ngx-dialog__confirm\"\r\n                [class.ngx-dialog__confirm--destructive]=\"destructive\"\r\n                [disabled]=\"confirmDisabled()\"\r\n                (click)=\"onConfirmClick()\">\r\n                {{ confirmText }}\r\n            </button>\r\n        }\r\n    </mat-dialog-actions>\r\n}\r\n", styles: [":host{display:block}.ngx-dialog__header{position:relative}.ngx-dialog__title.mat-mdc-dialog-title{display:flex;align-items:center;gap:12px;margin:0;padding:18px 24px 16px}.ngx-dialog__title.mat-mdc-dialog-title:before{display:none}.ngx-dialog__header--closable .ngx-dialog__title.mat-mdc-dialog-title{padding-right:64px}.ngx-dialog__icon{flex:none;width:28px;height:28px;font-size:28px}.ngx-dialog__heading{display:flex;flex-direction:column;gap:2px;min-width:0}.ngx-dialog__title-text{font:var(--mat-sys-title-large);color:var(--mat-sys-on-surface);overflow-wrap:anywhere}.ngx-dialog__subtitle{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant)}.ngx-dialog__close{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:var(--mat-sys-on-surface-variant)}.ngx-dialog__content{padding-top:4px}.ngx-dialog__text{margin:0;white-space:pre-line}.ngx-dialog__actions{gap:8px}.ngx-dialog__confirm--destructive{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error)}\n"] }]
         }] });
 
+/**
+ * @deprecated Usar `NgxDialogService.confirm()` (o `template()` con contenido propio), que tiene el
+ * encabezado, el botón X y la opción `destructive` de ngx-dialog. Las tablas ya no lo usan; se
+ * mantiene solo por compatibilidad con quien lo abra directamente.
+ */
 class NgxConfirmDialogComponent {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     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: i11.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 ?? texts().common.cancel }}</button>\r\n    <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? texts().common.confirm }}</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,
@@ -898,7 +1406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatDialogActions,
                         MatDialogClose,
                         CommonModule
-                    ], 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"] }]
+                    ], 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 ?? texts().common.cancel }}</button>\r\n    <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? texts().common.confirm }}</button>\r\n</mat-dialog-actions>", styles: [":host{display:block}\n"] }]
         }] });
 
 class DynamicCellHostDirective {
@@ -1130,40 +1638,40 @@ class AdvancedFilterUtils {
     static isNonEmptyRule(rule) {
         return !!(rule.key && rule.operator && rule.value !== undefined && rule.value !== null && rule.value !== '');
     }
-    static groupsToReadableHtml(groups, columns, intl) {
-        return this.groupToHtml(groups[0], columns, intl);
+    static groupsToReadableHtml(groups, columns, texts) {
+        return this.groupToHtml(groups[0], columns, texts);
         //return groups.map(g => this.groupToString(g)).join(' OR ');
     }
-    static groupToHtml(group, columns, intl) {
-        const connectorLabel = group.connector === 'AND' ? intl.connectorAnd : intl.connectorOr;
+    static groupToHtml(group, columns, texts) {
+        const connectorLabel = group.connector === 'AND' ? texts.advancedFilters.and : texts.advancedFilters.or;
         const connector = ` <strong>${connectorLabel}</strong> `;
         const parts = group.filters.map(filter => {
             if (this.isFilterGroup(filter))
-                return `<strong>[ </strong>${this.groupToHtml(filter, columns, intl)}<strong> ]</strong>`;
+                return `<strong>[ </strong>${this.groupToHtml(filter, columns, texts)}<strong> ]</strong>`;
             else
-                return this.ruleToHtml(filter, columns, intl);
+                return this.ruleToHtml(filter, columns, texts);
         });
         return parts.join(connector);
     }
-    static ruleToHtml(rule, columns, intl) {
+    static ruleToHtml(rule, columns, texts) {
         const column = columns.find(column => column.key == rule.key);
         if (!column)
             return "";
         const key = `<i>${column.label}</i>`;
-        const operator = rule.operator ? this.getOperatorLabel(rule.operator, intl).toLowerCase() : '';
+        const operator = rule.operator ? this.getOperatorLabel(rule.operator, texts).toLowerCase() : '';
         //const operator = rule.operator ?? '';
         const value = this.valueToHtml(rule.value, column);
         return `${key} ${operator} "${value}"`;
     }
-    static getOperatorLabel(operator, intl) {
+    static getOperatorLabel(operator, texts) {
         const operatorLabels = {
-            '=': intl.operatorEquals,
-            '<>': intl.operatorNotEquals,
-            '>': intl.operatorGreaterThan,
-            '>=': intl.operatorGreaterOrEquals,
-            '<': intl.operatorLessThan,
-            '<=': intl.operatorLessOrEquals,
-            'LIKE': intl.operatorLike
+            '=': texts.advancedFilters.operators.equals,
+            '<>': texts.advancedFilters.operators.notEquals,
+            '>': texts.advancedFilters.operators.greaterThan,
+            '>=': texts.advancedFilters.operators.greaterOrEquals,
+            '<': texts.advancedFilters.operators.lessThan,
+            '<=': texts.advancedFilters.operators.lessOrEquals,
+            'LIKE': texts.advancedFilters.operators.like
         };
         return operatorLabels[operator];
     }
@@ -1450,11 +1958,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+/**
+ * Ancho mínimo por defecto: 400px, pero nunca más que la pantalla menos un margen
+ * (un 400px fijo se salía de los móviles).
+ */
+const DEFAULT_MIN_WIDTH = 'min(400px, calc(100vw - 32px))';
+/**
+ * Abre diálogos de Material con una estructura común: título con icono opcional, subtítulo,
+ * cuerpo (texto, HTML, componente o plantilla) y botones de cancelar/confirmar.
+ *
+ * Todos devuelven un Observable que emite al cerrarse y completa:
+ * - `true` (o el resultado fijado por el contenido) si se confirma,
+ * - `false` si se cancela,
+ * - `undefined` si se cierra sin pulsar ningún botón (Esc o clic fuera).
+ */
+class NgxDialogService {
+    _dialog = inject(MatDialog);
+    _texts = inject(NgxTexts).texts;
+    /** Diálogo con un texto. Base de `confirm()` e `info()`. */
+    openText(config, dialogConfig) {
+        const { content, ...header } = config;
+        return this._open(header, { type: DialogBodyType.TEXT, content }, dialogConfig);
+    }
+    /** Pregunta de confirmación con botones de cancelar y confirmar. */
+    confirm(config, dialogConfig) {
+        const { message, ...header } = config;
+        return this.openText({
+            ...header,
+            content: message,
+            cancelText: config.cancelText ?? this._texts().dialog.cancel,
+            confirmText: config.confirmText ?? this._texts().dialog.confirm,
+        }, dialogConfig);
+    }
+    /** Aviso informativo con un único botón. */
+    info(config, dialogConfig) {
+        const { message, ...header } = config;
+        return this.openText({
+            ...header,
+            content: message,
+            showCancel: false,
+            confirmText: config.confirmText ?? this._texts().dialog.accept,
+        }, dialogConfig);
+    }
+    /**
+     * Diálogo con HTML. Angular sanea el HTML: se quitan scripts, estilos en línea y atributos
+     * peligrosos. Para contenido con interacción, usa `component()` o `template()`.
+     */
+    html(config, dialogConfig) {
+        const { html, ...header } = config;
+        return this._open(header, { type: DialogBodyType.HTML, content: html }, dialogConfig);
+    }
+    /**
+     * Diálogo con un componente propio. El componente recibe `componentData` por su input `data`
+     * y puede inyectar `NgxDialogContext<R>` para devolver un resultado (`result`), cerrar
+     * (`close()`) o deshabilitar el botón de confirmar (`confirmDisabled`).
+     */
+    component(config, dialogConfig) {
+        const { component, componentData, ...header } = config;
+        return this._open(header, { type: DialogBodyType.COMPONENT, content: component, data: componentData }, dialogConfig);
+    }
+    /**
+     * Diálogo con una plantilla. La plantilla recibe `templateData` como `$implicit` y el contexto
+     * del diálogo como `dialog` (`let-data let-dialog="dialog"`).
+     */
+    template(config, dialogConfig) {
+        const { template, templateData, ...header } = config;
+        return this._open(header, { type: DialogBodyType.TEMPLATE, content: template, data: templateData }, dialogConfig);
+    }
+    _open(header, body, dialogConfig) {
+        const data = { ...header, body };
+        return this._dialog.open(NgxDialog, {
+            ...dialogConfig,
+            data,
+            minWidth: dialogConfig?.minWidth ?? DEFAULT_MIN_WIDTH,
+            autoFocus: dialogConfig?.autoFocus ?? false,
+        }).afterClosed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class ConfigureTableColumnsComponent {
     columnConfigService = inject(ColumnConfigService);
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     columns = signal(this.data.columns, ...(ngDevMode ? [{ debugName: "columns" }] : []));
     isConfirmDisabled = computed(() => {
         const allDisabled = this.columns().every(column => !column.show);
@@ -1547,7 +2141,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: i1$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>{{texts().columnsDialog.title}} {{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> {{texts().columnsDialog.hasFiltersApplied}}</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 ? texts().columnsDialog.unpin : texts().columnsDialog.pin\"\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]=\"texts().columnsDialog.moveUp\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n                    <button [matTooltip]=\"texts().columnsDialog.moveDown\" 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>{{texts().columnsDialog.note}}</span> {{texts().columnsDialog.hideColumnWithFiltersNote}}</p>\r\n    \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button matButton [mat-dialog-close]=\"undefined\">{{texts().common.close}}</button>\r\n  <button matButton (click)=\"onResetClick()\">{{texts().columnsDialog.reset}}</button>\r\n  <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{texts().common.confirm}}</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$3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, decorators: [{
             type: Component,
@@ -1563,15 +2157,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CdkDropList,
                         CdkDrag,
                         MatTooltipModule
-                    ], 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"] }]
+                    ], template: "<h2 mat-dialog-title>{{texts().columnsDialog.title}} {{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> {{texts().columnsDialog.hasFiltersApplied}}</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 ? texts().columnsDialog.unpin : texts().columnsDialog.pin\"\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]=\"texts().columnsDialog.moveUp\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n                    <button [matTooltip]=\"texts().columnsDialog.moveDown\" 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>{{texts().columnsDialog.note}}</span> {{texts().columnsDialog.hideColumnWithFiltersNote}}</p>\r\n    \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button matButton [mat-dialog-close]=\"undefined\">{{texts().common.close}}</button>\r\n  <button matButton (click)=\"onResetClick()\">{{texts().columnsDialog.reset}}</button>\r\n  <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{texts().common.confirm}}</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"] }]
         }] });
 
 class PaginatedSearchableSelectComponent {
     // 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" }] : []));
+    texts = inject(NgxTexts).texts;
     endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
     filters = input(signal({
         pageNumber: 1,
@@ -1598,7 +2191,8 @@ class PaginatedSearchableSelectComponent {
     subscriptSizing = input('fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
     clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-    //Estos input/output se utiliza por si no se quiere utilizar el componente select buscable dentro de un formulario
+    // Sin formulario (p. ej. los filtros de columna de las tablas): valor con [selected] y cambios con (optionChange).
+    // En un formulario: formControlName / [formControl] / ngModel, como cualquier campo.
     selected = input(...(ngDevMode ? [undefined, { debugName: "selected" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     optionChange = output();
@@ -1606,13 +2200,56 @@ class PaginatedSearchableSelectComponent {
     innerControl = signal(new FormControl(undefined), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
     queryTimeout = undefined;
     debounceTime = 300;
+    /** Control del formulario si se usa con formControlName / [formControl] / ngModel (se registra como su value accessor). */
+    _ngControl = inject(NgControl, { self: true, optional: true });
+    _parentForm = inject(FormGroupDirective, { optional: true }) ?? inject(NgForm, { optional: true });
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
+    _onChange = () => { };
+    _onTouched = () => { };
+    /** Asterisco de obligatorio: lo decide el control del formulario. */
+    isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    /** Error con el estado del control del formulario (inválido y tocado, o formulario enviado). */
+    errorStateMatcher = {
+        isErrorState: () => {
+            const control = this._ngControl?.control;
+            return !!control && control.invalid && (control.touched || !!this._parentForm?.submitted);
+        },
+    };
+    constructor() {
+        if (this._ngControl)
+            this._ngControl.valueAccessor = this;
+    }
     selectedEffect = effect(() => {
+        const disabled = this.disabled() || this._cvaDisabled();
+        // En un formulario el control interno se conserva: el valor llega por writeValue
+        if (this._ngControl) {
+            const innerControl = untracked(this.innerControl);
+            if (disabled)
+                innerControl.disable({ emitEvent: false });
+            else
+                innerControl.enable({ emitEvent: false });
+            return;
+        }
         const selected = this.selected();
-        const control = this.control();
-        const disabled = this.disabled();
-        const innerControl = control ? control : new FormControl({ value: selected, disabled: disabled });
-        this.innerControl.set(innerControl);
+        this.innerControl.set(new FormControl({ value: selected, disabled: disabled }));
     }, ...(ngDevMode ? [{ debugName: "selectedEffect" }] : []));
+    ngAfterViewInit() {
+        // formControlName asigna su control después de registrar el value accessor: aquí ya está
+        this.isRequired.set(this._ngControl?.control?.hasValidator(Validators.required) ?? false);
+    }
+    // ── ControlValueAccessor ──────────────────────────────────────────────────
+    writeValue(value) {
+        this.innerControl().setValue(value ?? undefined, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
     dataResource = rxResource({
         params: () => this.filters()(),
         stream: ({ params }) => {
@@ -1651,6 +2288,8 @@ class PaginatedSearchableSelectComponent {
             clearTimeout(this.queryTimeout);
     }
     openedChange(open) {
+        if (!open)
+            this._onTouched();
         if (!open)
             return;
         const searcher = this.searcher();
@@ -1690,6 +2329,7 @@ class PaginatedSearchableSelectComponent {
         return selectPlaceholder.toLowerCase();
     }
     onOptionChange(event) {
+        this._onChange(event.value);
         this.optionChange.emit(event.value);
     }
     optionsSelectedForView() {
@@ -1710,7 +2350,7 @@ class PaginatedSearchableSelectComponent {
         });
     }
     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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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$1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { 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        [errorStateMatcher]=\"errorStateMatcher\"\r\n        [required]=\"isRequired()\"\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() || texts().common.search }}</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>{{ texts().select.removeOption(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\">{{ texts().select.noResults }}</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                {{ texts().select.showMore }}\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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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,
@@ -1723,15 +2363,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatButtonModule,
                         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"] }]
-        }], 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 }] }] } });
+                    ], 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        [errorStateMatcher]=\"errorStateMatcher\"\r\n        [required]=\"isRequired()\"\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() || texts().common.search }}</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>{{ texts().select.removeOption(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\">{{ texts().select.noResults }}</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                {{ texts().select.showMore }}\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: () => [], propDecorators: { 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.
     // 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" }] : []));
+    texts = inject(NgxTexts).texts;
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input((option) => {
         if (isFilterOption(option))
@@ -1751,20 +2390,66 @@ class SearchableSelectComponent {
     subscriptSizing = input('fixed', ...(ngDevMode ? [{ debugName: "subscriptSizing" }] : []));
     clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-    //Estos input/output se utiliza por si no se quiere utilizar el componente select buscable dentro de un formulario
+    // Sin formulario (p. ej. los filtros de columna de las tablas): valor con [selected] y cambios con (optionChange).
+    // En un formulario: formControlName / [formControl] / ngModel, como cualquier campo.
     selected = input(...(ngDevMode ? [undefined, { debugName: "selected" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     optionChange = output();
     searcher = viewChild('htmlSearcher', ...(ngDevMode ? [{ debugName: "searcher" }] : []));
     innerControl = signal(new FormControl(undefined), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
+    /** Control del formulario si se usa con formControlName / [formControl] / ngModel (se registra como su value accessor). */
+    _ngControl = inject(NgControl, { self: true, optional: true });
+    _parentForm = inject(FormGroupDirective, { optional: true }) ?? inject(NgForm, { optional: true });
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
+    _onChange = () => { };
+    _onTouched = () => { };
+    /** Asterisco de obligatorio: lo decide el control del formulario. */
+    isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    /** Error con el estado del control del formulario (inválido y tocado, o formulario enviado). */
+    errorStateMatcher = {
+        isErrorState: () => {
+            const control = this._ngControl?.control;
+            return !!control && control.invalid && (control.touched || !!this._parentForm?.submitted);
+        },
+    };
+    constructor() {
+        if (this._ngControl)
+            this._ngControl.valueAccessor = this;
+    }
     selectedEffect = effect(() => {
+        const disabled = this.disabled() || this._cvaDisabled();
+        // En un formulario el control interno se conserva: el valor llega por writeValue
+        if (this._ngControl) {
+            const innerControl = untracked(this.innerControl);
+            if (disabled)
+                innerControl.disable({ emitEvent: false });
+            else
+                innerControl.enable({ emitEvent: false });
+            return;
+        }
         const selected = this.selected();
-        const control = this.control();
-        const disabled = this.disabled();
-        const innerControl = control ? control : new FormControl({ value: selected, disabled: disabled });
-        this.innerControl.set(innerControl);
+        this.innerControl.set(new FormControl({ value: selected, disabled: disabled }));
     }, ...(ngDevMode ? [{ debugName: "selectedEffect" }] : []));
+    ngAfterViewInit() {
+        // formControlName asigna su control después de registrar el value accessor: aquí ya está
+        this.isRequired.set(this._ngControl?.control?.hasValidator(Validators.required) ?? false);
+    }
+    // ── ControlValueAccessor ──────────────────────────────────────────────────
+    writeValue(value) {
+        this.innerControl().setValue(value ?? undefined, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
     openedChange(open) {
+        if (!open)
+            this._onTouched();
         /*if (open)
           this.cleanQuery();*/
         if (!open)
@@ -1799,6 +2484,7 @@ class SearchableSelectComponent {
         return includeNoSensible(label, query);
     }
     onOptionChange(event) {
+        this._onChange(event.value);
         this.optionChange.emit(event.value);
     }
     numberOfResults() {
@@ -1811,7 +2497,7 @@ class SearchableSelectComponent {
         return results.length;
     }
     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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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$1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { 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        [errorStateMatcher]=\"errorStateMatcher\"\r\n        [required]=\"isRequired()\"\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() || texts().common.search }}</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>{{ texts().select.removeOption(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\">{{ texts().select.noResults }}</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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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,
@@ -1823,24 +2509,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         ReactiveFormsModule,
                         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"] }]
-        }], 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 }] }] } });
+                    ], 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        [errorStateMatcher]=\"errorStateMatcher\"\r\n        [required]=\"isRequired()\"\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() || texts().common.search }}</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>{{ texts().select.removeOption(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\">{{ texts().select.noResults }}</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: () => [], propDecorators: { 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" }] : []));
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
     deleteFilter = output();
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     columns = computed(() => this.config().columns.filter(column => column.filterType != undefined), ...(ngDevMode ? [{ debugName: "columns" }] : []));
     operatorByFilterType = OPERATOR_BY_FILTER_TYPE;
     filterOperatorLabel = computed(() => ({
-        '=': this.intl.operatorEquals,
-        '<>': this.intl.operatorNotEquals,
-        '>': this.intl.operatorGreaterThan,
-        '>=': this.intl.operatorGreaterOrEquals,
-        '<': this.intl.operatorLessThan,
-        '<=': this.intl.operatorLessOrEquals,
-        'LIKE': this.intl.operatorLike
+        '=': this.texts().advancedFilters.operators.equals,
+        '<>': this.texts().advancedFilters.operators.notEquals,
+        '>': this.texts().advancedFilters.operators.greaterThan,
+        '>=': this.texts().advancedFilters.operators.greaterOrEquals,
+        '<': this.texts().advancedFilters.operators.lessThan,
+        '<=': this.texts().advancedFilters.operators.lessOrEquals,
+        'LIKE': this.texts().advancedFilters.operators.like
     }), ...(ngDevMode ? [{ debugName: "filterOperatorLabel" }] : []));
     defaultFiltersForPaginatedFilterOptions = signal({
         pageNumber: 1,
@@ -1881,7 +2567,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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.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"] }] });
+    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 \n    matIconButton \n    [matTooltip]=\"texts().advancedFilters.deleteFilter\" \n    (click)=\"deleteFilter.emit(getRuleId())\"\n    class=\"deleteButton\"\n    type=\"button\">\n    <mat-icon>delete</mat-icon>\n</button>\n\n<ngx-searchable-select\n    [formControl]=\"getKey()\"\n    [options]=\"columns()\"\n    [optionLabel]=\"keyOptionLabel\"\n    [optionValue]=\"keyOptionValue\"\n    (optionChange)=\"onKeyChange($event)\"\n    [selectLabel]=\"texts().advancedFilters.field\"\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n    [error]=\"texts().advancedFilters.required\"\n/>\n\n<ngx-searchable-select\n    [formControl]=\"getOperator()\"\n    [options]=\"getOperatorsOption(getKey().value)\"\n    [optionLabel]=\"operatorOptionLabel\"\n    [optionValue]=\"operatorOptionValue\"\n    [selectLabel]=\"texts().advancedFilters.condition\"\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n    [error]=\"texts().advancedFilters.required\"\n/>\n\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\n    <mat-form-field>\n        <mat-label>{{texts().advancedFilters.value}}</mat-label>\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\n        <mat-error>{{texts().advancedFilters.required}}</mat-error>\n    </mat-form-field>\n}\n\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\n    @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\n        <ngx-paginated-searchable-select \n            [formControl]=\"getValue()\"\n            [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\n            [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\n            [selectLabel]=\"texts().advancedFilters.value\"\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n            [error]=\"texts().advancedFilters.required\"\n        />\n    } @else {\n        <ngx-searchable-select\n            [formControl]=\"getValue()\"\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\n            [selectLabel]=\"texts().advancedFilters.value\"\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n            [error]=\"texts().advancedFilters.required\"\n        />\n    }\n}\n\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\n    <mat-form-field>\n        <mat-label>{{texts().advancedFilters.value}}</mat-label>\n        <input\n            [formControl]=\"getValue()\"\n            matInput \n            [matDatepicker]=\"picker\">\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{texts().advancedFilters.required}}</mat-error>\n    </mat-form-field>\n}\n\n\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$3.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.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: ["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: ["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,
@@ -1896,7 +2582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatTooltipModule,
                         SearchableSelectComponent,
                         PaginatedSearchableSelectComponent
-                    ], 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"] }]
+                    ], template: "<button \n    matIconButton \n    [matTooltip]=\"texts().advancedFilters.deleteFilter\" \n    (click)=\"deleteFilter.emit(getRuleId())\"\n    class=\"deleteButton\"\n    type=\"button\">\n    <mat-icon>delete</mat-icon>\n</button>\n\n<ngx-searchable-select\n    [formControl]=\"getKey()\"\n    [options]=\"columns()\"\n    [optionLabel]=\"keyOptionLabel\"\n    [optionValue]=\"keyOptionValue\"\n    (optionChange)=\"onKeyChange($event)\"\n    [selectLabel]=\"texts().advancedFilters.field\"\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n    [error]=\"texts().advancedFilters.required\"\n/>\n\n<ngx-searchable-select\n    [formControl]=\"getOperator()\"\n    [options]=\"getOperatorsOption(getKey().value)\"\n    [optionLabel]=\"operatorOptionLabel\"\n    [optionValue]=\"operatorOptionValue\"\n    [selectLabel]=\"texts().advancedFilters.condition\"\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n    [error]=\"texts().advancedFilters.required\"\n/>\n\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\n    <mat-form-field>\n        <mat-label>{{texts().advancedFilters.value}}</mat-label>\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\n        <mat-error>{{texts().advancedFilters.required}}</mat-error>\n    </mat-form-field>\n}\n\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\n    @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\n        <ngx-paginated-searchable-select \n            [formControl]=\"getValue()\"\n            [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\n            [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\n            [selectLabel]=\"texts().advancedFilters.value\"\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n            [error]=\"texts().advancedFilters.required\"\n        />\n    } @else {\n        <ngx-searchable-select\n            [formControl]=\"getValue()\"\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\n            [selectLabel]=\"texts().advancedFilters.value\"\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\n            [error]=\"texts().advancedFilters.required\"\n        />\n    }\n}\n\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\n    <mat-form-field>\n        <mat-label>{{texts().advancedFilters.value}}</mat-label>\n        <input\n            [formControl]=\"getValue()\"\n            matInput \n            [matDatepicker]=\"picker\">\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n        <mat-error>{{texts().advancedFilters.required}}</mat-error>\n    </mat-form-field>\n}\n\n\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"] }]
         }], propDecorators: { rule: [{ type: i0.Input, args: [{ isSignal: true, alias: "rule", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], deleteFilter: [{ type: i0.Output, args: ["deleteFilter"] }] } });
 
 class AdvancedFilterGroupComponent {
@@ -1908,11 +2594,11 @@ class AdvancedFilterGroupComponent {
     deleteGroup = output();
     deleteFilter = output();
     datosPantallaService = inject(DatosPantallaService);
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
     optionsFilterConnector = computed(() => [
-        { value: 'AND', label: this.intl.connectorAnd },
-        { value: 'OR', label: this.intl.connectorOr }
+        { value: 'AND', label: this.texts().advancedFilters.and },
+        { value: 'OR', label: this.texts().advancedFilters.or }
     ], ...(ngDevMode ? [{ debugName: "optionsFilterConnector" }] : []));
     isFilterGroupForm(group) {
         return AdvancedFilterUtils.isFilterGroupForm(group);
@@ -1927,7 +2613,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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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"] }] });
+    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            {{texts().advancedFilters.addFilter}}\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            {{texts().advancedFilters.addGroup}}\r\n        </button>\r\n    } @else {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"texts().advancedFilters.addFilter\" \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]=\"texts().advancedFilters.addGroup\" \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]=\"texts().advancedFilters.deleteGroup\" \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$3.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,
@@ -1942,7 +2628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AdvancedFilterRuleComponent,
                         MatButtonToggleModule,
                         MatTooltipModule
-                    ], 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"] }]
+                    ], 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            {{texts().advancedFilters.addFilter}}\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            {{texts().advancedFilters.addGroup}}\r\n        </button>\r\n    } @else {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"texts().advancedFilters.addFilter\" \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]=\"texts().advancedFilters.addGroup\" \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]=\"texts().advancedFilters.deleteGroup\" \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"] }]
         }], propDecorators: { isRootNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRootNode", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], addGroup: [{ type: i0.Output, args: ["addGroup"] }], addFilter: [{ type: i0.Output, args: ["addFilter"] }], deleteGroup: [{ type: i0.Output, args: ["deleteGroup"] }], deleteFilter: [{ type: i0.Output, args: ["deleteFilter"] }] } });
 
 class ConfigureAdvancedFilterComponent {
@@ -1950,7 +2636,7 @@ class ConfigureAdvancedFilterComponent {
     advancedFilterService = inject(AdvancedFilterService);
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
     form = AdvancedFilterUtils.createAdvancedFilter(this.fb, this.data.advancedFilter);
     formChanges = toSignal(this.form.valueChanges);
@@ -1961,7 +2647,7 @@ class ConfigureAdvancedFilterComponent {
             return;
         }
         const advancedFilter = AdvancedFilterUtils.mapFormToAdvancedFilter(this.form);
-        const queryString = AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.data.config.columns, this.intl);
+        const queryString = AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.data.config.columns, this.texts());
         this.query.set(queryString);
     }, ...(ngDevMode ? [{ debugName: "mapFormToAdvancedFilterEffect" }] : []));
     getRootGroup() {
@@ -2001,7 +2687,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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.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" }] });
+    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>{{texts().advancedFilters.dialogTitle}} {{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>{{texts().advancedFilters.templateName}}</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>{{texts().advancedFilters.templateNameRequired}}</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>{{texts().advancedFilters.helpTitle}}</strong></p>\r\n        <p class=\"helper\">\r\n          <strong>{{texts().advancedFilters.group}} </strong>{{texts().advancedFilters.groupHelp}}<br>\r\n          <strong>{{texts().advancedFilters.filter}} </strong>{{texts().advancedFilters.ruleHelp}}\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\">{{texts().common.close}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{texts().common.save}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{texts().common.saveAndApply}}</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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.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,
@@ -2017,20 +2703,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatFormFieldModule,
                         MatInputModule,
                         AdvancedFilterGroupComponent
-                    ], 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"] }]
+                    ], template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n  <h2 mat-dialog-title>{{texts().advancedFilters.dialogTitle}} {{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>{{texts().advancedFilters.templateName}}</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>{{texts().advancedFilters.templateNameRequired}}</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>{{texts().advancedFilters.helpTitle}}</strong></p>\r\n        <p class=\"helper\">\r\n          <strong>{{texts().advancedFilters.group}} </strong>{{texts().advancedFilters.groupHelp}}<br>\r\n          <strong>{{texts().advancedFilters.filter}} </strong>{{texts().advancedFilters.ruleHelp}}\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\">{{texts().common.close}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{texts().common.save}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{texts().common.saveAndApply}}</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"] }]
         }] });
 
 class NgxPaginatedTable {
     columnConfigService = inject(ColumnConfigService);
     advancedFilterService = inject(AdvancedFilterService);
     dialog = inject(MatDialog);
+    dialogService = inject(NgxDialogService);
     datosPantallaService = inject(DatosPantallaService);
-    _changeDetectorRef = inject(ChangeDetectorRef);
     // 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();
+    texts = inject(NgxTexts).texts;
     isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
     endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
     filters = input(signal({
@@ -2155,14 +2840,6 @@ class NgxPaginatedTable {
         pageSize: 20,
         query: undefined
     }, ...(ngDevMode ? [{ debugName: "defaultFiltersForPaginatedFilterOptions" }] : []));
-    ngOnInit() {
-        // Suscribirse a los cambios de las etiquetas
-        this.intl.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._changeDetectorRef.markForCheck();
-        });
-    }
     onEscape() {
         if (this.overlayRef && this.isMyOverlayOnTop())
             this.exitFullscreen();
@@ -2176,8 +2853,6 @@ class NgxPaginatedTable {
             const timeout = this.timeoutsByKey[key];
             clearTimeout(timeout);
         });
-        this._destroy$.next();
-        this._destroy$.complete();
     }
     includeInColumnConfig(searchedColumn, allColumns) {
         return allColumns.some(column => searchedColumn.key == column.key);
@@ -2234,19 +2909,19 @@ class NgxPaginatedTable {
     }
     onDeleteClick(row, event) {
         event.stopPropagation();
-        const title = this.config()().deleteConfirm?.title?.(row) ?? this.intl.deleteConfirmTitle;
-        const body = this.config()().deleteConfirm?.body?.(row) ?? this.intl.deleteConfirmBody;
-        const template = this.config()().deleteConfirm?.templateRef?.();
-        const data = {
-            title: title,
-            body: !template ? body : undefined,
-            template: template,
-            row: row,
-            confirmButtonLabel: this.intl.confirmDeleteLabel
+        const texts = this.texts();
+        const header = {
+            title: this.config()().deleteConfirm?.title?.(row) ?? texts.table.deleteConfirmTitle,
+            confirmText: texts.table.confirmDelete,
+            cancelText: texts.common.cancel,
+            destructive: true,
         };
-        const dialogRef = this.dialog.open(NgxConfirmDialogComponent, { data: data });
-        dialogRef.afterClosed().subscribe((confirm) => {
-            if (confirm)
+        const template = this.config()().deleteConfirm?.templateRef?.();
+        const confirm$ = template
+            ? this.dialogService.template({ ...header, template, templateData: row })
+            : this.dialogService.confirm({ ...header, message: this.config()().deleteConfirm?.body?.(row) ?? texts.table.deleteConfirmBody });
+        confirm$.subscribe(confirm => {
+            if (confirm === true)
                 this.deleteClick.emit(row);
         });
     }
@@ -2386,14 +3061,15 @@ class NgxPaginatedTable {
     onAdvancedFilterDelete(event, advancedFiltersMenuTrigger, advancedFilter) {
         event.stopPropagation();
         advancedFiltersMenuTrigger.closeMenu();
-        const data = {
-            title: this.intl.deleteAdvancedFilterTitle,
-            body: this.intl.getDeleteAdvancedFilterMessage(advancedFilter.name),
-            confirmButtonLabel: this.intl.confirmDeleteLabel
-        };
-        const dialogRef = this.dialog.open(NgxConfirmDialogComponent, { data: data });
-        dialogRef.afterClosed().subscribe((confirm) => {
-            if (confirm) {
+        const texts = this.texts();
+        this.dialogService.confirm({
+            title: texts.advancedFilters.deleteTitle,
+            message: texts.advancedFilters.deleteMessage(advancedFilter.name),
+            confirmText: texts.table.confirmDelete,
+            cancelText: texts.common.cancel,
+            destructive: true,
+        }).subscribe(confirm => {
+            if (confirm === true) {
                 if (this.filters()().advancedFilterId == advancedFilter.groups[0].id)
                     this.onApplyTemplateClick();
                 this.advancedFilterService.deleteAdvancedFilter(this.config()().tableId, advancedFilter);
@@ -2412,7 +3088,7 @@ class NgxPaginatedTable {
         const advancedFilter = this.advancedFilterService.getAdvancedFilterById(tableId, advancedFilterId, false);
         if (!advancedFilter)
             return '';
-        return AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.config()().columns, this.intl);
+        return AdvancedFilterUtils.groupsToReadableHtml(advancedFilter.groups, this.config()().columns, this.texts());
     }
     rowIsExpanded(row) {
         return this.expandedItem() == row;
@@ -2581,7 +3257,7 @@ class NgxPaginatedTable {
         return topOverlay === this.overlayRef.hostElement;
     }
     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$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$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: 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.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" }] });
+    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?.() ?? texts().table.create\" \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]=\"texts().table.editColumns\" 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]=\"texts().advancedFilters.label\"\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>{{ texts().advancedFilters.new }}</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]=\"texts().advancedFilters.editTooltip(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]=\"texts().advancedFilters.deleteTooltip(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]=\"texts().table.selectionActions\"\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>{{ texts().table.deselectAll }}</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]=\"texts().table.deselectAll\"\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]=\"texts().table.export\" [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>{{ texts().table.exportExcel }}</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>{{ texts().table.exportPdf }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (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 ?? texts().common.search\" [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]=\"texts().advancedFilters.remove\" 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]=\"texts().table.dateRangeStart\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"texts().table.dateRangeEnd\"\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>{{ texts().table.actions }}</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) ?? texts().table.edit\" \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) ?? texts().table.delete\" \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() ? texts().common.loading : texts().common.noData }}</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>{{ texts().table.totalPerPage }}</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>{{ texts().table.totalGeneral }}</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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$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$3.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.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: i13.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: ["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: ["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,
@@ -2605,7 +3281,7 @@ 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                    @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"] }]
+                    ], 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?.() ?? texts().table.create\" \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]=\"texts().table.editColumns\" 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]=\"texts().advancedFilters.label\"\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>{{ texts().advancedFilters.new }}</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]=\"texts().advancedFilters.editTooltip(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]=\"texts().advancedFilters.deleteTooltip(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]=\"texts().table.selectionActions\"\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>{{ texts().table.deselectAll }}</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]=\"texts().table.deselectAll\"\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]=\"texts().table.export\" [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>{{ texts().table.exportExcel }}</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>{{ texts().table.exportPdf }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (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 ?? texts().common.search\" [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]=\"texts().advancedFilters.remove\" 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]=\"texts().table.dateRangeStart\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"texts().table.dateRangeEnd\"\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>{{ texts().table.actions }}</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) ?? texts().table.edit\" \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) ?? texts().table.delete\" \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() ? texts().common.loading : texts().common.noData }}</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>{{ texts().table.totalPerPage }}</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>{{ texts().table.totalGeneral }}</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']
@@ -2614,9 +3290,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class NgxBasicTable {
     columnConfigService = inject(ColumnConfigService);
     dialog = inject(MatDialog);
+    dialogService = inject(NgxDialogService);
     datosPantallaService = inject(DatosPantallaService);
     // Inyectar el servicio de internacionalización
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
     filters = input(signal({
         query: undefined,
@@ -2916,19 +3593,19 @@ class NgxBasicTable {
     }
     onDeleteClick(row, event) {
         event.stopPropagation();
-        const title = this.config()().deleteConfirm?.title?.(row) ?? this.intl.deleteConfirmTitle;
-        const body = this.config()().deleteConfirm?.body?.(row) ?? this.intl.deleteConfirmBody;
-        const template = this.config()().deleteConfirm?.templateRef?.();
-        const data = {
-            title: title,
-            body: !template ? body : undefined,
-            template: template,
-            row: row,
-            confirmButtonLabel: this.intl.confirmDeleteLabel
+        const texts = this.texts();
+        const header = {
+            title: this.config()().deleteConfirm?.title?.(row) ?? texts.table.deleteConfirmTitle,
+            confirmText: texts.table.confirmDelete,
+            cancelText: texts.common.cancel,
+            destructive: true,
         };
-        const dialogRef = this.dialog.open(NgxConfirmDialogComponent, { data: data });
-        dialogRef.afterClosed().subscribe((confirm) => {
-            if (confirm)
+        const template = this.config()().deleteConfirm?.templateRef?.();
+        const confirm$ = template
+            ? this.dialogService.template({ ...header, template, templateData: row })
+            : this.dialogService.confirm({ ...header, message: this.config()().deleteConfirm?.body?.(row) ?? texts.table.deleteConfirmBody });
+        confirm$.subscribe(confirm => {
+            if (confirm === true)
                 this.deleteClick.emit(row);
         });
     }
@@ -3165,7 +3842,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                    @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$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$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: 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.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"] }] });
+    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?.() ?? texts().table.create\" \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]=\"texts().table.editColumns\" 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]=\"texts().table.selectionActions\"\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>{{ texts().table.deselectAll }}</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]=\"texts().table.deselectAll\"\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]=\"texts().table.export\" [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>{{ texts().table.exportExcel }}</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>{{ texts().table.exportPdf }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (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 ?? texts().common.search\" [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]=\"texts().table.dateRangeStart\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"texts().table.dateRangeEnd\"\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>{{ texts().table.actions }}</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) ?? texts().table.edit\" \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) ?? texts().table.delete\" \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() ? texts().common.loading : texts().common.noData }}</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>{{ texts().table.totalPerPage }}</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>{{ texts().table.totalGeneral }}</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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$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$3.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.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: ["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: ["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,
@@ -3188,41 +3865,79 @@ 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                    @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"] }]
+                    ], 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?.() ?? texts().table.create\" \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]=\"texts().table.editColumns\" 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]=\"texts().table.selectionActions\"\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>{{ texts().table.deselectAll }}</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]=\"texts().table.deselectAll\"\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]=\"texts().table.export\" [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>{{ texts().table.exportExcel }}</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>{{ texts().table.exportPdf }}</span>\r\n                            </button>\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(config()().hideFullScreen?.() !== true) {\r\n                        <button matIconButton [matTooltip]=\"isFullScreen() ? texts().table.exitFullscreen : texts().table.enterFullscreen\" (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 ?? texts().common.search\" [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]=\"texts().table.dateRangeStart\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"texts().table.dateRangeEnd\"\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>{{ texts().table.actions }}</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) ?? texts().table.edit\" \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) ?? texts().table.delete\" \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() ? texts().common.loading : texts().common.noData }}</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>{{ texts().table.totalPerPage }}</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>{{ texts().table.totalGeneral }}</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']
             }] } });
 
+const DEFAULT_ICONS = {
+    info: 'info',
+    success: 'check_circle',
+    warning: 'warning',
+    error: 'error',
+};
 class NgxAlert {
+    _texts = inject(NgxTexts).texts;
+    /** Gravedad del mensaje: define color, icono por defecto y cómo se anuncia. */
     type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /** Título en negrita sobre el mensaje. */
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    /** Mensaje en texto plano. Para contenido con formato o enlaces, proyéctalo como contenido. */
     message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
-    iconName = computed(() => {
-        switch (this.type()) {
-            case 'warning': return 'warning';
-            case 'error': return 'error';
-            case 'success': return 'check_circle';
-            case 'info':
-            default: return 'info';
+    /** Estilo visual: standard (fondo + franja lateral), soft (solo fondo) u outlined (solo borde). */
+    appearance = input('standard', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Icono de Material Symbols. Por defecto, el del tipo (info, check_circle, warning, error). */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    /** Oculta el icono. */
+    hideIcon = input(false, ...(ngDevMode ? [{ debugName: "hideIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Muestra un botón para cerrar el aviso. Al pulsarlo se oculta y emite `dismissed`. */
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Etiqueta accesible del botón de cerrar. Por defecto, el texto `alert.dismiss` de la librería. */
+    dismissLabel = input(...(ngDevMode ? [undefined, { debugName: "dismissLabel" }] : []));
+    /**
+     * Cómo lo anuncia el lector de pantalla. assertive interrumpe (role="alert"), polite espera
+     * a que termine (role="status") y off no lo anuncia. Por defecto: assertive para error y
+     * warning, polite para info y success.
+     */
+    politeness = input(...(ngDevMode ? [undefined, { debugName: "politeness" }] : []));
+    /** Se emite cuando el usuario cierra el aviso con el botón de cerrar. */
+    dismissed = output();
+    isDismissed = signal(false, ...(ngDevMode ? [{ debugName: "isDismissed" }] : []));
+    resolvedIcon = computed(() => this.icon() || DEFAULT_ICONS[this.type()] || DEFAULT_ICONS.info, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : []));
+    resolvedDismissLabel = computed(() => {
+        return this.dismissLabel() ?? this._texts().alert.dismiss;
+    }, ...(ngDevMode ? [{ debugName: "resolvedDismissLabel" }] : []));
+    resolvedRole = computed(() => {
+        const politeness = this.politeness()
+            ?? (this.type() === 'error' || this.type() === 'warning' ? 'assertive' : 'polite');
+        switch (politeness) {
+            case 'assertive': return 'alert';
+            case 'polite': return 'status';
+            default: return null;
         }
-    }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "resolvedRole" }] : []));
+    dismiss() {
+        this.isDismissed.set(true);
+        this.dismissed.emit();
+    }
     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: i1$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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, politeness: { classPropertyName: "politeness", publicName: "politeness", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "isDismissed() ? null : resolvedRole()", "class.ngx-alert--dismissed": "isDismissed()" } }, ngImport: i0, template: "@if (!isDismissed()) {\n  <div class=\"alert\" [class]=\"'alert alert--' + type() + ' alert--' + appearance()\">\n    @if (!hideIcon()) {\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">{{ resolvedIcon() }}</mat-icon>\n    }\n\n    <div class=\"alert__content\">\n      @if (title()) {\n        <div class=\"alert__title\">{{ title() }}</div>\n      }\n\n      <div class=\"alert__description\">\n        @if (message()) {\n          <p class=\"alert__message\">{{ message() }}</p>\n        }\n        <ng-content />\n      </div>\n\n      <div class=\"alert__actions\">\n        <ng-content select=\"[alertActions]\" />\n      </div>\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"alert__dismiss\"\n        matIconButton\n        [attr.aria-label]=\"resolvedDismissLabel()\"\n        [matTooltip]=\"resolvedDismissLabel()\"\n        (click)=\"dismiss()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block}:host(.ngx-alert--dismissed){display:none}.alert{--_accent: var(--ngx-alert-info-color, #1a73e8);--_container: color-mix(in srgb, var(--_accent) 12%, var(--mat-sys-surface));--_icon: color-mix(in srgb, var(--_accent) 85%, var(--mat-sys-on-surface));display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--ngx-alert-radius, 12px);color:var(--mat-sys-on-surface)}.alert--success{--_accent: var(--ngx-alert-success-color, #1e8e3e)}.alert--warning{--_accent: var(--ngx-alert-warning-color, #e37400)}.alert--error{--_accent: var(--ngx-alert-error-color, var(--mat-sys-error))}.alert--standard{background-color:var(--_container);box-shadow:inset 4px 0 0 var(--_accent);padding-left:20px}.alert--soft{background-color:var(--_container)}.alert--outlined{background-color:transparent;border:1px solid color-mix(in srgb,var(--_accent) 55%,var(--mat-sys-surface))}.alert__icon{flex:none;margin-top:1px;color:var(--_icon)}.alert__content{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.alert__title{font:var(--mat-sys-title-small);color:var(--mat-sys-on-surface)}.alert__description{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);overflow-wrap:anywhere}.alert__description ::ng-deep>:first-child{margin-top:0}.alert__description ::ng-deep>:last-child{margin-bottom:0}.alert__description ::ng-deep a{color:var(--_icon)}.alert__message{margin:0}.alert__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.alert__actions:empty{display:none}.alert__dismiss{flex:none;margin:-8px -8px -8px 0;color:var(--mat-sys-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.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: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-alert', imports: [
-                        MatIconModule
-                    ], 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"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
+            args: [{ selector: 'ngx-alert', imports: [MatIconModule, MatButtonModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.role]': 'isDismissed() ? null : resolvedRole()',
+                        '[class.ngx-alert--dismissed]': 'isDismissed()',
+                    }, template: "@if (!isDismissed()) {\n  <div class=\"alert\" [class]=\"'alert alert--' + type() + ' alert--' + appearance()\">\n    @if (!hideIcon()) {\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">{{ resolvedIcon() }}</mat-icon>\n    }\n\n    <div class=\"alert__content\">\n      @if (title()) {\n        <div class=\"alert__title\">{{ title() }}</div>\n      }\n\n      <div class=\"alert__description\">\n        @if (message()) {\n          <p class=\"alert__message\">{{ message() }}</p>\n        }\n        <ng-content />\n      </div>\n\n      <div class=\"alert__actions\">\n        <ng-content select=\"[alertActions]\" />\n      </div>\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"alert__dismiss\"\n        matIconButton\n        [attr.aria-label]=\"resolvedDismissLabel()\"\n        [matTooltip]=\"resolvedDismissLabel()\"\n        (click)=\"dismiss()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block}:host(.ngx-alert--dismissed){display:none}.alert{--_accent: var(--ngx-alert-info-color, #1a73e8);--_container: color-mix(in srgb, var(--_accent) 12%, var(--mat-sys-surface));--_icon: color-mix(in srgb, var(--_accent) 85%, var(--mat-sys-on-surface));display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--ngx-alert-radius, 12px);color:var(--mat-sys-on-surface)}.alert--success{--_accent: var(--ngx-alert-success-color, #1e8e3e)}.alert--warning{--_accent: var(--ngx-alert-warning-color, #e37400)}.alert--error{--_accent: var(--ngx-alert-error-color, var(--mat-sys-error))}.alert--standard{background-color:var(--_container);box-shadow:inset 4px 0 0 var(--_accent);padding-left:20px}.alert--soft{background-color:var(--_container)}.alert--outlined{background-color:transparent;border:1px solid color-mix(in srgb,var(--_accent) 55%,var(--mat-sys-surface))}.alert__icon{flex:none;margin-top:1px;color:var(--_icon)}.alert__content{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.alert__title{font:var(--mat-sys-title-small);color:var(--mat-sys-on-surface)}.alert__description{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);overflow-wrap:anywhere}.alert__description ::ng-deep>:first-child{margin-top:0}.alert__description ::ng-deep>:last-child{margin-bottom:0}.alert__description ::ng-deep a{color:var(--_icon)}.alert__message{margin:0}.alert__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.alert__actions:empty{display:none}.alert__dismiss{flex:none;margin:-8px -8px -8px 0;color:var(--mat-sys-on-surface-variant)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], politeness: [{ type: i0.Input, args: [{ isSignal: true, alias: "politeness", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
 class NgxPaginatedSelectBottomSheetComponent {
     // ─── Dependencies ──────────────────────────────────────────────────────────
     _ref = inject((MatBottomSheetRef));
     _destroy = inject(DestroyRef);
     data = inject(MAT_BOTTOM_SHEET_DATA);
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     // ─── State ─────────────────────────────────────────────────────────────────
     /** Raw input value — updates on every keystroke, does NOT trigger the resource */
     query = signal(this.data.filters().query, ...(ngDevMode ? [{ debugName: "query" }] : []));
@@ -3502,7 +4217,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 (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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, bodyContainer)\"\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(bodyContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\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\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (sticky top of the scroll area) -->\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 list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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__list\">\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(bodyContainer)\">\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 (al seleccionar se voltea a un check, estilo Gmail) -->\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n            @if (selected) {\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n            } @else 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  </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(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!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 14px;display:flex;flex-direction:column;gap:14px;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__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.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.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.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) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,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{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.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__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.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 });
+    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\">\r\n\r\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 -->\r\n  <div class=\"ps-bs__handle\">\r\n    <div class=\"ps-bs__handle-bar\"></div>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\r\n    <div class=\"ps-bs__header-top\">\r\n      <div class=\"ps-bs__title-area\">\r\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\r\n        @if (data.multiple && selectedCount() > 0) {\r\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\r\n        }\r\n      </div>\r\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"texts().common.close\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Pill search -->\r\n    @if (data.showSearch) {\r\n      <div class=\"ps-bs__search\">\r\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\r\n        <input\r\n          class=\"ps-bs__search-input\"\r\n          #searchInput\r\n          type=\"text\"\r\n          [value]=\"query() ?? ''\"\r\n          [placeholder]=\"data.searchPlaceholder\"\r\n          (input)=\"onQueryInput($event, bodyContainer)\"\r\n        />\r\n        @if (searchInput.value.length > 0) {\r\n          <button\r\n            class=\"ps-bs__search-clear\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"texts().common.clearSearch\"\r\n            (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\r\n          >\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\r\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\r\n\r\n    <!-- Extra filters projection -->\r\n    @if (data.extraFiltersTemplate) {\r\n      <div class=\"ps-bs__extra-filters\">\r\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- Selected chips (custom lightweight chips) -->\r\n    @if (data.multiple && selectedItems().length > 0) {\r\n      <div class=\"ps-bs__selected-chips\">\r\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\r\n          <div class=\"ps-bs__chip\">\r\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\r\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"removeSelectedChip(item)\">\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Select all (sticky top of the scroll area) -->\r\n    @if (data.multiple && data.showSelectAll && options().length > 0) {\r\n      <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\r\n        <mat-checkbox\r\n          [checked]=\"allSelected()\"\r\n          [indeterminate]=\"someSelected()\"\r\n          (click)=\"$event.preventDefault()\"\r\n        />\r\n        <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\r\n      </div>\r\n    }\r\n\r\n    <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"ps-bs__list\">\r\n\r\n      <!-- Skeleton loading (only for the first page) -->\r\n      @if (isInitialLoading()) {\r\n        @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n          <div class=\"ps-bs__skeleton\">\r\n            <div class=\"ps-bs__skeleton-avatar\"></div>\r\n            <div class=\"ps-bs__skeleton-content\">\r\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\r\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      <!-- Error state -->\r\n      @if (hasError() && !isLoading() && options().length === 0) {\r\n        <div class=\"ps-bs__state ps-bs__error\">\r\n          <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\r\n            <mat-icon>error_outline</mat-icon>\r\n          </div>\r\n          <div class=\"ps-bs__state-title\">{{ texts().paginatedSelect.errorTitle }}</div>\r\n          <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.errorHint }}</div>\r\n          <button matButton=\"tonal\" (click)=\"retry()\">\r\n            <mat-icon>refresh</mat-icon>\r\n            {{ texts().paginatedSelect.retry }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Empty state -->\r\n      @if (!hasError() && options().length === 0 && !isLoading()) {\r\n        <div class=\"ps-bs__state ps-bs__empty\">\r\n          <div class=\"ps-bs__state-icon-wrap\">\r\n            <mat-icon>search_off</mat-icon>\r\n          </div>\r\n          <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\r\n          @if (query()) {\r\n            <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.noResultsHint }}</div>\r\n            <button matButton (click)=\"clearQuery(bodyContainer)\">\r\n              {{ texts().paginatedSelect.clearSearch }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Option rows -->\r\n      @for (item of options(); track item[data.config.valueKey]) {\r\n        @let disabled = data.config.disabled ? data.config.disabled(item) : false;\r\n        @let selected = isSelected(item);\r\n        @let avatarImg = getAvatarImage(item);\r\n\r\n        <div\r\n          class=\"ps-bs__option\"\r\n          [class.ps-bs__option--selected]=\"selected\"\r\n          [class.ps-bs__option--disabled]=\"disabled\"\r\n          matRipple\r\n          [matRippleDisabled]=\"disabled\"\r\n          (click)=\"toggleItem(item)\"\r\n          role=\"option\"\r\n          [attr.aria-selected]=\"selected\"\r\n          [attr.aria-disabled]=\"disabled\"\r\n        >\r\n          <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\r\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\r\n            @if (selected) {\r\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\r\n            } @else if (avatarImg) {\r\n              <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\r\n            } @else if (data.config.avatarText) {\r\n              {{ getAvatarText(item) }}\r\n            } @else if (data.config.avatarIcon) {\r\n              <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\r\n            } @else {\r\n              {{ getAvatarText(item) }}\r\n            }\r\n          </div>\r\n\r\n          <!-- Content -->\r\n          <div class=\"ps-bs__option-content\">\r\n            @if (data.optionTemplate) {\r\n              <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\r\n            } @else {\r\n              <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\r\n              @if (data.config.subtitle) {\r\n                <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\r\n              }\r\n            }\r\n          </div>\r\n\r\n          <!-- Check indicator -->\r\n          @if (data.multiple) {\r\n            <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\r\n          } @else if (selected) {\r\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Loading more (pagination) / end of list -->\r\n      @if (isLoadingMore()) {\r\n        <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\r\n          <span class=\"ps-bs__loading-more-dot\"></span>\r\n          <span class=\"ps-bs__loading-more-dot\"></span>\r\n          <span class=\"ps-bs__loading-more-dot\"></span>\r\n          <span class=\"ps-bs__loading-more-text\">{{ texts().paginatedSelect.loadingMore }}</span>\r\n        </div>\r\n      } @else if (allLoaded() && options().length > 0) {\r\n        <div class=\"ps-bs__list-end\">{{ texts().paginatedSelect.endOfList }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\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 -->\r\n  <div class=\"ps-bs__footer\">\r\n    <span class=\"ps-bs__footer-count\">\r\n      @if (data.multiple) {\r\n        {{ texts().paginatedSelect.selectedCount(selectedCount(), total()) }}\r\n      } @else {\r\n        {{ texts().paginatedSelect.resultsCount(total()) }}\r\n      }\r\n    </span>\r\n\r\n    @if (data.multiple) {\r\n      <div class=\"ps-bs__footer-actions\">\r\n        @if (selectedCount() > 0) {\r\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\r\n        }\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\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(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!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 14px;display:flex;flex-direction:column;gap:14px;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__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.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.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.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) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,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{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.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__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.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: i2$3.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,
@@ -3520,7 +4235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         MatTooltipModule,
                         MatBadgeModule,
-                    ], 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 (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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, bodyContainer)\"\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(bodyContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\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\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (sticky top of the scroll area) -->\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 list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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__list\">\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(bodyContainer)\">\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 (al seleccionar se voltea a un check, estilo Gmail) -->\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n            @if (selected) {\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n            } @else 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  </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(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!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 14px;display:flex;flex-direction:column;gap:14px;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__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.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.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.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) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,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{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.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__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.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"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\r\n\r\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 -->\r\n  <div class=\"ps-bs__handle\">\r\n    <div class=\"ps-bs__handle-bar\"></div>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\r\n    <div class=\"ps-bs__header-top\">\r\n      <div class=\"ps-bs__title-area\">\r\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\r\n        @if (data.multiple && selectedCount() > 0) {\r\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\r\n        }\r\n      </div>\r\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"texts().common.close\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Pill search -->\r\n    @if (data.showSearch) {\r\n      <div class=\"ps-bs__search\">\r\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\r\n        <input\r\n          class=\"ps-bs__search-input\"\r\n          #searchInput\r\n          type=\"text\"\r\n          [value]=\"query() ?? ''\"\r\n          [placeholder]=\"data.searchPlaceholder\"\r\n          (input)=\"onQueryInput($event, bodyContainer)\"\r\n        />\r\n        @if (searchInput.value.length > 0) {\r\n          <button\r\n            class=\"ps-bs__search-clear\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"texts().common.clearSearch\"\r\n            (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\r\n          >\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\r\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\r\n\r\n    <!-- Extra filters projection -->\r\n    @if (data.extraFiltersTemplate) {\r\n      <div class=\"ps-bs__extra-filters\">\r\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- Selected chips (custom lightweight chips) -->\r\n    @if (data.multiple && selectedItems().length > 0) {\r\n      <div class=\"ps-bs__selected-chips\">\r\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\r\n          <div class=\"ps-bs__chip\">\r\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\r\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"removeSelectedChip(item)\">\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Select all (sticky top of the scroll area) -->\r\n    @if (data.multiple && data.showSelectAll && options().length > 0) {\r\n      <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\r\n        <mat-checkbox\r\n          [checked]=\"allSelected()\"\r\n          [indeterminate]=\"someSelected()\"\r\n          (click)=\"$event.preventDefault()\"\r\n        />\r\n        <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\r\n      </div>\r\n    }\r\n\r\n    <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"ps-bs__list\">\r\n\r\n      <!-- Skeleton loading (only for the first page) -->\r\n      @if (isInitialLoading()) {\r\n        @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n          <div class=\"ps-bs__skeleton\">\r\n            <div class=\"ps-bs__skeleton-avatar\"></div>\r\n            <div class=\"ps-bs__skeleton-content\">\r\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\r\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      <!-- Error state -->\r\n      @if (hasError() && !isLoading() && options().length === 0) {\r\n        <div class=\"ps-bs__state ps-bs__error\">\r\n          <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\r\n            <mat-icon>error_outline</mat-icon>\r\n          </div>\r\n          <div class=\"ps-bs__state-title\">{{ texts().paginatedSelect.errorTitle }}</div>\r\n          <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.errorHint }}</div>\r\n          <button matButton=\"tonal\" (click)=\"retry()\">\r\n            <mat-icon>refresh</mat-icon>\r\n            {{ texts().paginatedSelect.retry }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <!-- Empty state -->\r\n      @if (!hasError() && options().length === 0 && !isLoading()) {\r\n        <div class=\"ps-bs__state ps-bs__empty\">\r\n          <div class=\"ps-bs__state-icon-wrap\">\r\n            <mat-icon>search_off</mat-icon>\r\n          </div>\r\n          <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\r\n          @if (query()) {\r\n            <div class=\"ps-bs__state-hint\">{{ texts().paginatedSelect.noResultsHint }}</div>\r\n            <button matButton (click)=\"clearQuery(bodyContainer)\">\r\n              {{ texts().paginatedSelect.clearSearch }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Option rows -->\r\n      @for (item of options(); track item[data.config.valueKey]) {\r\n        @let disabled = data.config.disabled ? data.config.disabled(item) : false;\r\n        @let selected = isSelected(item);\r\n        @let avatarImg = getAvatarImage(item);\r\n\r\n        <div\r\n          class=\"ps-bs__option\"\r\n          [class.ps-bs__option--selected]=\"selected\"\r\n          [class.ps-bs__option--disabled]=\"disabled\"\r\n          matRipple\r\n          [matRippleDisabled]=\"disabled\"\r\n          (click)=\"toggleItem(item)\"\r\n          role=\"option\"\r\n          [attr.aria-selected]=\"selected\"\r\n          [attr.aria-disabled]=\"disabled\"\r\n        >\r\n          <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\r\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\r\n            @if (selected) {\r\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\r\n            } @else if (avatarImg) {\r\n              <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\r\n            } @else if (data.config.avatarText) {\r\n              {{ getAvatarText(item) }}\r\n            } @else if (data.config.avatarIcon) {\r\n              <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\r\n            } @else {\r\n              {{ getAvatarText(item) }}\r\n            }\r\n          </div>\r\n\r\n          <!-- Content -->\r\n          <div class=\"ps-bs__option-content\">\r\n            @if (data.optionTemplate) {\r\n              <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\r\n            } @else {\r\n              <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\r\n              @if (data.config.subtitle) {\r\n                <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\r\n              }\r\n            }\r\n          </div>\r\n\r\n          <!-- Check indicator -->\r\n          @if (data.multiple) {\r\n            <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\r\n          } @else if (selected) {\r\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Loading more (pagination) / end of list -->\r\n      @if (isLoadingMore()) {\r\n        <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\r\n          <span class=\"ps-bs__loading-more-dot\"></span>\r\n          <span class=\"ps-bs__loading-more-dot\"></span>\r\n          <span class=\"ps-bs__loading-more-dot\"></span>\r\n          <span class=\"ps-bs__loading-more-text\">{{ texts().paginatedSelect.loadingMore }}</span>\r\n        </div>\r\n      } @else if (allLoaded() && options().length > 0) {\r\n        <div class=\"ps-bs__list-end\">{{ texts().paginatedSelect.endOfList }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\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 -->\r\n  <div class=\"ps-bs__footer\">\r\n    <span class=\"ps-bs__footer-count\">\r\n      @if (data.multiple) {\r\n        {{ texts().paginatedSelect.selectedCount(selectedCount(), total()) }}\r\n      } @else {\r\n        {{ texts().paginatedSelect.resultsCount(total()) }}\r\n      }\r\n    </span>\r\n\r\n    @if (data.multiple) {\r\n      <div class=\"ps-bs__footer-actions\">\r\n        @if (selectedCount() > 0) {\r\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\r\n        }\r\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\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(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!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 14px;display:flex;flex-direction:column;gap:14px;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__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.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.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.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) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,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{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.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__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.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 {
@@ -3532,7 +4247,7 @@ class NgxPaginatedSelect {
     _parentFormGroup = inject(FormGroupDirective, { optional: true });
     _parentForm = inject(NgForm, { optional: true });
     _changeDetectorRef = inject(ChangeDetectorRef);
-    intl = inject(NgxTablesIntl);
+    texts = inject(NgxTexts).texts;
     // ─── Inputs ────────────────────────────────────────────────────────────────
     /** Label that floats on the form field */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -3565,9 +4280,9 @@ 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 (defaults to intl) */
+    /** Placeholder for the search input inside the bottom sheet (defaults to the library texts) */
     searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : []));
-    /** Message when no results are found (defaults to intl) */
+    /** Message when no results are found (defaults to the library texts) */
     noResultsMessage = input(...(ngDevMode ? [undefined, { debugName: "noResultsMessage" }] : []));
     /** Label for the confirm button (multiple mode, defaults to intl) */
     confirmLabel = input(...(ngDevMode ? [undefined, { debugName: "confirmLabel" }] : []));
@@ -3592,7 +4307,7 @@ 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 (defaults to intl) */
+    /** Label for the select all toggle (defaults to the library texts) */
     selectAllLabel = input(...(ngDevMode ? [undefined, { debugName: "selectAllLabel" }] : []));
     // ─── Outputs ───────────────────────────────────────────────────────────────
     /** Emits the full T object (single) or T[] (multiple) when selection changes */
@@ -3645,12 +4360,12 @@ class NgxPaginatedSelect {
     isRequired() {
         return this._ngControl?.control?.hasValidator(Validators.required) ?? false;
     }
-    // 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" }] : []));
+    // Etiquetas efectivas (override por input o valor por defecto de NgxTexts)
+    effectiveSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this.texts().common.search, ...(ngDevMode ? [{ debugName: "effectiveSearchPlaceholder" }] : []));
+    effectiveNoResults = computed(() => this.noResultsMessage() ?? this.texts().select.noResults, ...(ngDevMode ? [{ debugName: "effectiveNoResults" }] : []));
+    effectiveConfirmLabel = computed(() => this.confirmLabel() ?? this.texts().paginatedSelect.confirm, ...(ngDevMode ? [{ debugName: "effectiveConfirmLabel" }] : []));
+    effectiveResetLabel = computed(() => this.resetLabel() ?? this.texts().paginatedSelect.reset, ...(ngDevMode ? [{ debugName: "effectiveResetLabel" }] : []));
+    effectiveSelectAllLabel = computed(() => this.selectAllLabel() ?? this.texts().paginatedSelect.selectAll, ...(ngDevMode ? [{ debugName: "effectiveSelectAllLabel" }] : []));
     constructor() {
         if (this._ngControl)
             this._ngControl.valueAccessor = this;
@@ -3837,7 +4552,7 @@ class NgxPaginatedSelect {
         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 }, 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      [formControl]=\"innerControl\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      [required]=\"isRequired()\"\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      [required]=\"isRequired()\"\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      [required]=\"isRequired()\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [formControl]=\"innerControl\"\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: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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$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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.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 });
+    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 -->\r\n@if (showChips()) {\r\n  <mat-form-field\r\n    appearance=\"outline\"\r\n    floatLabel=\"always\"\r\n    [subscriptSizing]=\"subscriptSizing()\"\r\n    class=\"ps-trigger\"\r\n    [class.ps-trigger--disabled]=\"isDisabled()\"\r\n    [class.ps-trigger--open]=\"_isOpen()\"\r\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\r\n    (click)=\"openBottomSheet($event)\"\r\n  >\r\n    <mat-label>{{ label() }}</mat-label>\r\n\r\n    <mat-chip-grid\r\n      #chipGrid\r\n      class=\"ps-trigger__chip-grid\"\r\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\r\n      [formControl]=\"innerControl\"\r\n      [errorStateMatcher]=\"errorStateMatcher\"\r\n      [required]=\"isRequired()\"\r\n    >\r\n      @for (item of displayedChips(); track item[config().valueKey]) {\r\n        <mat-chip-row\r\n          class=\"ps-trigger__chip\"\r\n          [value]=\"item[config().valueKey]\"\r\n          [disabled]=\"isDisabled()\"\r\n          (removed)=\"removeChip(item, $event)\"\r\n        >\r\n          {{ getLabel(item) }}\r\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n\r\n    @if (remainingChipsCount() > 0) {\r\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\r\n    }\r\n\r\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\r\n    <input\r\n      matInput\r\n      [matChipInputFor]=\"chipGrid\"\r\n      class=\"ps-trigger__kbd-input\"\r\n      [required]=\"isRequired()\"\r\n      readonly\r\n      role=\"combobox\"\r\n      [attr.aria-haspopup]=\"'dialog'\"\r\n      [attr.aria-expanded]=\"_isOpen()\"\r\n      [attr.aria-label]=\"label()\"\r\n      (keydown)=\"onTriggerKeydown($event)\"\r\n    />\r\n\r\n    <div matSuffix class=\"ps-trigger__suffix\">\r\n      @if (clearable() && hasSelection() && !isDisabled()) {\r\n        <button matIconButton matSuffix [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSelection($event)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n    </div>\r\n\r\n    @if (error()) {\r\n      <mat-error>{{ error() }}</mat-error>\r\n    }\r\n    @if (hint()) {\r\n      <mat-hint>{{ hint() }}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n}\r\n\r\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 -->\r\n@if (!showChips()) {\r\n  <mat-form-field\r\n    appearance=\"outline\"\r\n    floatLabel=\"always\"\r\n    [subscriptSizing]=\"subscriptSizing()\"\r\n    class=\"ps-trigger\"\r\n    [class.ps-trigger--disabled]=\"isDisabled()\"\r\n    [class.ps-trigger--open]=\"_isOpen()\"\r\n    (click)=\"openBottomSheet($event)\"\r\n  >\r\n    <mat-label>{{ label() }}</mat-label>\r\n\r\n    <input\r\n      matInput\r\n      class=\"ps-trigger__input\"\r\n      [required]=\"isRequired()\"\r\n      readonly\r\n      role=\"combobox\"\r\n      [attr.aria-haspopup]=\"'dialog'\"\r\n      [attr.aria-expanded]=\"_isOpen()\"\r\n      [formControl]=\"innerControl\"\r\n      [errorStateMatcher]=\"errorStateMatcher\"\r\n      (keydown)=\"onTriggerKeydown($event)\"\r\n    />\r\n\r\n    <div matSuffix class=\"ps-trigger__suffix\">\r\n      @if (clearable() && hasSelection() && !isDisabled()) {\r\n        <button matIconButton matSuffix [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSelection($event)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n    </div>\r\n\r\n    @if (error()) {\r\n      <mat-error>{{ error() }}</mat-error>\r\n    }\r\n    @if (hint()) {\r\n      <mat-hint>{{ hint() }}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n}\r\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: "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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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$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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.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,
@@ -3852,41 +4567,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatInputModule,
                         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    [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      [formControl]=\"innerControl\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      [required]=\"isRequired()\"\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      [required]=\"isRequired()\"\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      [required]=\"isRequired()\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [formControl]=\"innerControl\"\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"] }]
+                    ], 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 -->\r\n@if (showChips()) {\r\n  <mat-form-field\r\n    appearance=\"outline\"\r\n    floatLabel=\"always\"\r\n    [subscriptSizing]=\"subscriptSizing()\"\r\n    class=\"ps-trigger\"\r\n    [class.ps-trigger--disabled]=\"isDisabled()\"\r\n    [class.ps-trigger--open]=\"_isOpen()\"\r\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\r\n    (click)=\"openBottomSheet($event)\"\r\n  >\r\n    <mat-label>{{ label() }}</mat-label>\r\n\r\n    <mat-chip-grid\r\n      #chipGrid\r\n      class=\"ps-trigger__chip-grid\"\r\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\r\n      [formControl]=\"innerControl\"\r\n      [errorStateMatcher]=\"errorStateMatcher\"\r\n      [required]=\"isRequired()\"\r\n    >\r\n      @for (item of displayedChips(); track item[config().valueKey]) {\r\n        <mat-chip-row\r\n          class=\"ps-trigger__chip\"\r\n          [value]=\"item[config().valueKey]\"\r\n          [disabled]=\"isDisabled()\"\r\n          (removed)=\"removeChip(item, $event)\"\r\n        >\r\n          {{ getLabel(item) }}\r\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n\r\n    @if (remainingChipsCount() > 0) {\r\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\r\n    }\r\n\r\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\r\n    <input\r\n      matInput\r\n      [matChipInputFor]=\"chipGrid\"\r\n      class=\"ps-trigger__kbd-input\"\r\n      [required]=\"isRequired()\"\r\n      readonly\r\n      role=\"combobox\"\r\n      [attr.aria-haspopup]=\"'dialog'\"\r\n      [attr.aria-expanded]=\"_isOpen()\"\r\n      [attr.aria-label]=\"label()\"\r\n      (keydown)=\"onTriggerKeydown($event)\"\r\n    />\r\n\r\n    <div matSuffix class=\"ps-trigger__suffix\">\r\n      @if (clearable() && hasSelection() && !isDisabled()) {\r\n        <button matIconButton matSuffix [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSelection($event)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n    </div>\r\n\r\n    @if (error()) {\r\n      <mat-error>{{ error() }}</mat-error>\r\n    }\r\n    @if (hint()) {\r\n      <mat-hint>{{ hint() }}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n}\r\n\r\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 -->\r\n@if (!showChips()) {\r\n  <mat-form-field\r\n    appearance=\"outline\"\r\n    floatLabel=\"always\"\r\n    [subscriptSizing]=\"subscriptSizing()\"\r\n    class=\"ps-trigger\"\r\n    [class.ps-trigger--disabled]=\"isDisabled()\"\r\n    [class.ps-trigger--open]=\"_isOpen()\"\r\n    (click)=\"openBottomSheet($event)\"\r\n  >\r\n    <mat-label>{{ label() }}</mat-label>\r\n\r\n    <input\r\n      matInput\r\n      class=\"ps-trigger__input\"\r\n      [required]=\"isRequired()\"\r\n      readonly\r\n      role=\"combobox\"\r\n      [attr.aria-haspopup]=\"'dialog'\"\r\n      [attr.aria-expanded]=\"_isOpen()\"\r\n      [formControl]=\"innerControl\"\r\n      [errorStateMatcher]=\"errorStateMatcher\"\r\n      (keydown)=\"onTriggerKeydown($event)\"\r\n    />\r\n\r\n    <div matSuffix class=\"ps-trigger__suffix\">\r\n      @if (clearable() && hasSelection() && !isDisabled()) {\r\n        <button matIconButton matSuffix [attr.aria-label]=\"texts().common.clearSearch\" (click)=\"clearSelection($event)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n    </div>\r\n\r\n    @if (error()) {\r\n      <mat-error>{{ error() }}</mat-error>\r\n    }\r\n    @if (hint()) {\r\n      <mat-hint>{{ hint() }}</mat-hint>\r\n    }\r\n  </mat-form-field>\r\n}\r\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"] }] } });
 
+const UNITLESS_NUMBER = /^-?\d+(\.\d+)?$/;
+/**
+ * Convierte un tamaño a CSS: un número, o un texto que solo es un número (`height="56"`
+ * en un atributo estático), se interpreta como píxeles.
+ */
+function toCssSize(value) {
+    if (typeof value === 'number')
+        return `${value}px`;
+    const trimmed = value.trim();
+    return UNITLESS_NUMBER.test(trimmed) ? `${trimmed}px` : trimmed;
+}
+function toOptionalCssSize(value) {
+    return value === null || value === undefined || value === '' ? null : toCssSize(value);
+}
 class NgxSkeleton {
-    /** Shape variant of the skeleton: text (horizontal bars), circle, rect, or rounded rect. */
+    _texts = inject(NgxTexts).texts;
+    /** Forma: text (barras de texto), circle, rect o rounded (rectángulo redondeado). */
     variant = input('rect', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    /** Width of the skeleton element. Accepts any valid CSS value (px, %, rem, etc.). */
-    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
-    /** Height of the skeleton element. Accepts any valid CSS value (px, %, rem, etc.). */
-    height = input('1rem', ...(ngDevMode ? [{ debugName: "height" }] : []));
-    /** Number of lines to render. Only applies when variant is 'text'. */
-    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : []));
-    /** Vertical spacing between text lines. Accepts any valid CSS value. */
-    lineSpacing = input('0.5rem', ...(ngDevMode ? [{ debugName: "lineSpacing" }] : []));
-    /** Width of the last text line for a realistic paragraph effect. Accepts any valid CSS value. */
-    lastLineWidth = input('70%', ...(ngDevMode ? [{ debugName: "lastLineWidth" }] : []));
-    /** Type of loading animation: shimmer (sliding highlight), pulse (opacity), or none. */
+    /** Ancho. Cualquier valor CSS; un número se interpreta como px. Se ignora en `circle`. */
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width", transform: toCssSize }] : [{ transform: toCssSize }]));
+    /** Alto. Cualquier valor CSS; un número se interpreta como px. En `circle` también es el diámetro. */
+    height = input('1rem', ...(ngDevMode ? [{ debugName: "height", transform: toCssSize }] : [{ transform: toCssSize }]));
+    /** Número de líneas. Solo aplica con `variant="text"`. */
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Separación vertical entre líneas de texto. */
+    lineSpacing = input('0.5rem', ...(ngDevMode ? [{ debugName: "lineSpacing", transform: toCssSize }] : [{ transform: toCssSize }]));
+    /** Ancho de la última línea, para que el párrafo parezca real. Solo con varias líneas. */
+    lastLineWidth = input('70%', ...(ngDevMode ? [{ debugName: "lastLineWidth", transform: toCssSize }] : [{ transform: toCssSize }]));
+    /** Animación: shimmer (brillo que se desliza), pulse (opacidad) o none. */
     animation = input('shimmer', ...(ngDevMode ? [{ debugName: "animation" }] : []));
-    /** Duration of one full animation cycle. Accepts any valid CSS time value. */
-    animationDuration = input('1.5s', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
-    /** Overrides the default border-radius derived from the variant. */
-    borderRadius = input(null, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
-    /** Accessible label read by screen readers. */
-    ariaLabel = input('Cargando...', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    /** Whether the component should render multiple stacked lines. */
-    isMultiLine = computed(() => this.variant() === 'text' && this.lines() > 1, ...(ngDevMode ? [{ debugName: "isMultiLine" }] : []));
-    /** Index array used to iterate over text lines in the template. */
+    /**
+     * Duración de un ciclo de animación (cualquier tiempo CSS). Por defecto 1.5s, o el valor
+     * de la variable CSS `--ngx-skeleton-duration` si el consumidor la define.
+     */
+    animationDuration = input(...(ngDevMode ? [undefined, { debugName: "animationDuration" }] : []));
+    /** Sustituye el border-radius que corresponde a la variante. */
+    borderRadius = input(null, ...(ngDevMode ? [{ debugName: "borderRadius", transform: toOptionalCssSize }] : [{ transform: toOptionalCssSize }]));
+    /** Etiqueta accesible. Por defecto, el texto `skeleton.loading` de la librería. */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /**
+     * Oculta el skeleton a lectores de pantalla (sin role ni etiqueta). Úsalo cuando varios
+     * skeletons forman una misma pieza: márcalos todos como decorativos y anuncia la carga
+     * una sola vez en el contenedor (p. ej. con `aria-busy` o un skeleton sin `decorative`).
+     */
+    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    resolvedAriaLabel = computed(() => {
+        return this.ariaLabel() ?? this._texts().skeleton.loading;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
+    /** Una entrada por línea a pintar (siempre al menos una). */
     lineIndices = computed(() => {
-        const count = this.variant() === 'text' ? this.lines() : 1;
+        const count = this.variant() === 'text' ? Math.max(1, Math.floor(this.lines())) : 1;
         return Array.from({ length: count }, (_, i) => i);
     }, ...(ngDevMode ? [{ debugName: "lineIndices" }] : []));
-    /** Resolved border-radius based on variant with optional override. */
+    isMultiLine = computed(() => this.lineIndices().length > 1, ...(ngDevMode ? [{ debugName: "isMultiLine" }] : []));
+    /** border-radius de la variante, salvo que se indique `borderRadius`. */
     computedBorderRadius = computed(() => {
-        if (this.borderRadius() !== null)
-            return this.borderRadius();
+        const override = this.borderRadius();
+        if (override !== null)
+            return override;
         switch (this.variant()) {
             case 'text': return '4px';
             case 'circle': return '50%';
@@ -3895,23 +4637,21 @@ class NgxSkeleton {
             default: return '0';
         }
     }, ...(ngDevMode ? [{ debugName: "computedBorderRadius" }] : []));
-    /** For circle variant, width equals height to ensure a perfect circle. */
-    computedWidth = computed(() => {
-        if (this.variant() === 'circle')
-            return this.height();
-        return this.width();
-    }, ...(ngDevMode ? [{ debugName: "computedWidth" }] : []));
+    /** En `circle` el ancho es el alto, para que sea un círculo perfecto. */
+    computedWidth = computed(() => this.variant() === 'circle' ? this.height() : this.width(), ...(ngDevMode ? [{ debugName: "computedWidth" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxSkeleton, isStandalone: true, selector: "ngx-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, lineSpacing: { classPropertyName: "lineSpacing", publicName: "lineSpacing", isSignal: true, isRequired: false, transformFunction: null }, lastLineWidth: { classPropertyName: "lastLineWidth", publicName: "lastLineWidth", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-busy": "\"true\"" } }, ngImport: i0, template: "@if (isMultiLine()) {\n  <div class=\"ngx-skeleton-text-container\" [style.gap]=\"lineSpacing()\">\n    @for (i of lineIndices(); track i) {\n      <div\n        class=\"ngx-skeleton-bone\"\n        [class.ngx-skeleton-shimmer]=\"animation() === 'shimmer'\"\n        [class.ngx-skeleton-pulse]=\"animation() === 'pulse'\"\n        [style.width]=\"i === lineIndices().length - 1 ? lastLineWidth() : width()\"\n        [style.height]=\"height()\"\n        [style.border-radius]=\"computedBorderRadius()\"\n        [style.--ngx-skeleton-duration]=\"animationDuration()\"\n      ></div>\n    }\n  </div>\n} @else {\n  <div\n    class=\"ngx-skeleton-bone\"\n    [class.ngx-skeleton-shimmer]=\"animation() === 'shimmer'\"\n    [class.ngx-skeleton-pulse]=\"animation() === 'pulse'\"\n    [style.width]=\"computedWidth()\"\n    [style.height]=\"height()\"\n    [style.border-radius]=\"computedBorderRadius()\"\n    [style.--ngx-skeleton-duration]=\"animationDuration()\"\n  ></div>\n}\n", styles: [":host{display:block}.ngx-skeleton-text-container{display:flex;flex-direction:column}.ngx-skeleton-bone{background-color:var(--mat-sys-surface-dim, var(--mat-sys-surface-variant, #e0e0e0));position:relative;overflow:hidden}.ngx-skeleton-bone.ngx-skeleton-shimmer:after{content:\"\";position:absolute;inset:0 0 0 -100%;width:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 25%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.18) 55%,rgba(255,255,255,.08) 75%,transparent 100%);will-change:transform;animation:ngx-skeleton-shimmer var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}.ngx-skeleton-bone.ngx-skeleton-pulse{animation:ngx-skeleton-pulse var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}@keyframes ngx-skeleton-shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@keyframes ngx-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxSkeleton, isStandalone: true, selector: "ngx-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, lineSpacing: { classPropertyName: "lineSpacing", publicName: "lineSpacing", isSignal: true, isRequired: false, transformFunction: null }, lastLineWidth: { classPropertyName: "lastLineWidth", publicName: "lastLineWidth", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "decorative() ? null : \"status\"", "attr.aria-label": "decorative() ? null : resolvedAriaLabel()", "attr.aria-busy": "decorative() ? null : \"true\"", "attr.aria-hidden": "decorative() ? \"true\" : null", "style.--ngx-skeleton-duration": "animationDuration() ?? null" } }, ngImport: i0, template: "<div class=\"ngx-skeleton-lines\" [style.gap]=\"isMultiLine() ? lineSpacing() : null\">\n  @for (i of lineIndices(); track i; let last = $last) {\n    <div\n      class=\"ngx-skeleton-bone\"\n      [class.ngx-skeleton-shimmer]=\"animation() === 'shimmer'\"\n      [class.ngx-skeleton-pulse]=\"animation() === 'pulse'\"\n      [style.width]=\"isMultiLine() && last ? lastLineWidth() : computedWidth()\"\n      [style.height]=\"height()\"\n      [style.border-radius]=\"computedBorderRadius()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block}.ngx-skeleton-lines{display:flex;flex-direction:column}.ngx-skeleton-bone{position:relative;max-width:100%;overflow:hidden;background-color:var(--ngx-skeleton-color, var(--mat-sys-surface-container-highest))}.ngx-skeleton-bone.ngx-skeleton-shimmer:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,var(--ngx-skeleton-highlight, color-mix(in srgb, var(--mat-sys-surface) 60%, transparent)) 50%,transparent 100%);will-change:transform;animation:ngx-skeleton-shimmer var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}.ngx-skeleton-bone.ngx-skeleton-pulse{animation:ngx-skeleton-pulse var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}@keyframes ngx-skeleton-shimmer{to{transform:translate(100%)}}@keyframes ngx-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion: reduce){.ngx-skeleton-bone.ngx-skeleton-shimmer:after{animation:none;opacity:0}.ngx-skeleton-bone.ngx-skeleton-pulse{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxSkeleton, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-skeleton', host: {
-                        'role': 'status',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.aria-busy]': '"true"',
-                    }, template: "@if (isMultiLine()) {\n  <div class=\"ngx-skeleton-text-container\" [style.gap]=\"lineSpacing()\">\n    @for (i of lineIndices(); track i) {\n      <div\n        class=\"ngx-skeleton-bone\"\n        [class.ngx-skeleton-shimmer]=\"animation() === 'shimmer'\"\n        [class.ngx-skeleton-pulse]=\"animation() === 'pulse'\"\n        [style.width]=\"i === lineIndices().length - 1 ? lastLineWidth() : width()\"\n        [style.height]=\"height()\"\n        [style.border-radius]=\"computedBorderRadius()\"\n        [style.--ngx-skeleton-duration]=\"animationDuration()\"\n      ></div>\n    }\n  </div>\n} @else {\n  <div\n    class=\"ngx-skeleton-bone\"\n    [class.ngx-skeleton-shimmer]=\"animation() === 'shimmer'\"\n    [class.ngx-skeleton-pulse]=\"animation() === 'pulse'\"\n    [style.width]=\"computedWidth()\"\n    [style.height]=\"height()\"\n    [style.border-radius]=\"computedBorderRadius()\"\n    [style.--ngx-skeleton-duration]=\"animationDuration()\"\n  ></div>\n}\n", styles: [":host{display:block}.ngx-skeleton-text-container{display:flex;flex-direction:column}.ngx-skeleton-bone{background-color:var(--mat-sys-surface-dim, var(--mat-sys-surface-variant, #e0e0e0));position:relative;overflow:hidden}.ngx-skeleton-bone.ngx-skeleton-shimmer:after{content:\"\";position:absolute;inset:0 0 0 -100%;width:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 25%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.18) 55%,rgba(255,255,255,.08) 75%,transparent 100%);will-change:transform;animation:ngx-skeleton-shimmer var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}.ngx-skeleton-bone.ngx-skeleton-pulse{animation:ngx-skeleton-pulse var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}@keyframes ngx-skeleton-shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@keyframes ngx-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], lineSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineSpacing", required: false }] }], lastLineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLineWidth", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+            args: [{ selector: 'ngx-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.role]': 'decorative() ? null : "status"',
+                        '[attr.aria-label]': 'decorative() ? null : resolvedAriaLabel()',
+                        '[attr.aria-busy]': 'decorative() ? null : "true"',
+                        '[attr.aria-hidden]': 'decorative() ? "true" : null',
+                        '[style.--ngx-skeleton-duration]': 'animationDuration() ?? null',
+                    }, template: "<div class=\"ngx-skeleton-lines\" [style.gap]=\"isMultiLine() ? lineSpacing() : null\">\n  @for (i of lineIndices(); track i; let last = $last) {\n    <div\n      class=\"ngx-skeleton-bone\"\n      [class.ngx-skeleton-shimmer]=\"animation() === 'shimmer'\"\n      [class.ngx-skeleton-pulse]=\"animation() === 'pulse'\"\n      [style.width]=\"isMultiLine() && last ? lastLineWidth() : computedWidth()\"\n      [style.height]=\"height()\"\n      [style.border-radius]=\"computedBorderRadius()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block}.ngx-skeleton-lines{display:flex;flex-direction:column}.ngx-skeleton-bone{position:relative;max-width:100%;overflow:hidden;background-color:var(--ngx-skeleton-color, var(--mat-sys-surface-container-highest))}.ngx-skeleton-bone.ngx-skeleton-shimmer:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,var(--ngx-skeleton-highlight, color-mix(in srgb, var(--mat-sys-surface) 60%, transparent)) 50%,transparent 100%);will-change:transform;animation:ngx-skeleton-shimmer var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}.ngx-skeleton-bone.ngx-skeleton-pulse{animation:ngx-skeleton-pulse var(--ngx-skeleton-duration, 1.5s) infinite ease-in-out}@keyframes ngx-skeleton-shimmer{to{transform:translate(100%)}}@keyframes ngx-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion: reduce){.ngx-skeleton-bone.ngx-skeleton-shimmer:after{animation:none;opacity:0}.ngx-skeleton-bone.ngx-skeleton-pulse{animation:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], lineSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineSpacing", required: false }] }], lastLineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLineWidth", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
 
 let _uid = 0;
 class NgxFileInput {
@@ -3929,8 +4669,10 @@ class NgxFileInput {
     maxFiles = input(null, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
     /** Disables the component. */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Label text shown inside the drop zone. */
-    label = input('Arrastra archivos aquí', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Label text shown inside the drop zone. Por defecto, el texto `fileInput.dropLabel` de la librería. */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    texts = inject(NgxTexts).texts;
+    resolvedLabel = computed(() => this.label() ?? this.texts().fileInput.dropLabel, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
     /** Secondary hint text (formats, sizes…). */
     hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : []));
     /** Show the file preview list below the drop zone. */
@@ -4027,7 +4769,7 @@ class NgxFileInput {
         this.items.update(list => list.filter(i => i.id !== item.id));
         this.fileRemoved.emit(item);
         this._emitChange();
-        this.liveAnnouncement.set(`Archivo ${item.name} eliminado`);
+        this.liveAnnouncement.set(this.texts().fileInput.removed(item.name));
     }
     // ── Helpers ─────────────────────────────────────────────────────────────────
     /** Format bytes to human-readable string. */
@@ -4083,7 +4825,7 @@ class NgxFileInput {
                 const err = {
                     file: f,
                     code: 'MAX_FILES_EXCEEDED',
-                    message: `Máximo ${max} archivos permitidos`,
+                    message: this.texts().fileInput.maxFiles(max),
                 };
                 this.validationError.emit(err);
             }
@@ -4104,7 +4846,7 @@ class NgxFileInput {
         const validCount = newItems.filter(i => i.status === 'valid').length;
         if (validCount > 0) {
             this.filesSelected.emit(newItems.filter(i => i.status === 'valid'));
-            this.liveAnnouncement.set(`${validCount} archivo${validCount > 1 ? 's' : ''} añadido${validCount > 1 ? 's' : ''}`);
+            this.liveAnnouncement.set(this.texts().fileInput.added(validCount));
         }
     }
     _validateAndCreate(file) {
@@ -4112,7 +4854,7 @@ class NgxFileInput {
         // Type validation
         if (this.accept() !== '*' && !this._isTypeAllowed(file)) {
             item.status = 'error';
-            item.error = `Tipo no permitido: ${file.type || file.name.split('.').pop()}`;
+            item.error = this.texts().fileInput.typeNotAllowed(file.type || file.name.split('.').pop() || '');
             this.validationError.emit({
                 file,
                 code: 'TYPE_NOT_ALLOWED',
@@ -4124,7 +4866,7 @@ class NgxFileInput {
         const maxSz = this.maxSize();
         if (maxSz !== null && file.size > maxSz) {
             item.status = 'error';
-            item.error = `Excede el tamaño máximo (${this.formatSize(maxSz)})`;
+            item.error = this.texts().fileInput.tooLarge(this.formatSize(maxSz));
             this.validationError.emit({
                 file,
                 code: 'SIZE_EXCEEDED',
@@ -4196,7 +4938,7 @@ class NgxFileInput {
                 useExisting: forwardRef(() => NgxFileInput),
                 multi: true,
             },
-        ], 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 });
+        ], 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]=\"resolvedLabel()\"\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\">{{ resolvedLabel() }}</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\">{{ texts().fileInput.browse }}</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]=\"resolvedLabel()\"\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\">{{ resolvedLabel() }}</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      {{ resolvedLabel() }}\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]=\"texts().fileInput.remove(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: i2$3.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,
@@ -4212,164 +4954,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[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 -->\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"] }]
+                    }, 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]=\"resolvedLabel()\"\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\">{{ resolvedLabel() }}</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\">{{ texts().fileInput.browse }}</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]=\"resolvedLabel()\"\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\">{{ resolvedLabel() }}</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      {{ resolvedLabel() }}\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]=\"texts().fileInput.remove(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
-    _dialog = inject(MatDialog);
-    /**
-     *
-     * @param config
-     * @param dialogConfig
-     * @returns Observable<DialogResult>
-     *
-     * Opens a text dialog with the provided configuration.
-     */
-    openText(config, dialogConfig) {
-        return this._dialog.open(NgxDialog, {
-            ...dialogConfig,
-            data: {
-                ...config,
-                body: {
-                    type: DialogBodyType.TEXT,
-                    content: config.content
-                },
-            },
-            minWidth: dialogConfig?.minWidth ?? '400px',
-            autoFocus: dialogConfig?.autoFocus ?? false
-        }).afterClosed();
-    }
-    /**
-     *
-     * @param title
-     * @param message
-     * @param cancelText
-     * @param confirmText
-     * @param dialogConfig
-     * @returns Observable<DialogResult>
-     *
-     * Opens a confirmation dialog with cancel and confirm buttons.
-     */
-    confirm(config, dialogConfig) {
-        return this.openText({
-            title: config.title,
-            content: config.message,
-            subtitle: config.subtitle,
-            icon: config.icon,
-            iconColor: config.iconColor,
-            cancelText: config.cancelText ?? 'Cancelar',
-            confirmText: config.confirmText ?? 'Confirmar'
-        }, dialogConfig);
-    }
-    /**
-     *
-     * @param title
-     * @param message
-     * @param confirmText
-     * @param dialogConfig
-     * @returns Observable<DialogResult>
-     *
-     * Opens an informational dialog with a single confirm button.
-     */
-    info(config, dialogConfig) {
-        return this.openText({
-            title: config.title,
-            content: config.message,
-            subtitle: config.subtitle,
-            icon: config.icon,
-            iconColor: config.iconColor,
-            showCancel: false,
-            confirmText: config.confirmText ?? 'Aceptar',
-        }, dialogConfig);
-    }
-    /**
-     *
-     * @param config
-     * @param dialogConfig
-     * @returns Observable<DialogResult>
-     *
-     * Opens an HTML dialog with the provided configuration.
-     */
-    html(config, dialogConfig) {
-        return this._dialog.open(NgxDialog, {
-            ...dialogConfig,
-            data: {
-                ...config,
-                body: {
-                    type: DialogBodyType.HTML,
-                    content: config.html
-                },
-            },
-            minWidth: dialogConfig?.minWidth ?? '400px',
-            autoFocus: dialogConfig?.autoFocus ?? false
-        }).afterClosed();
-    }
-    /**
-     *
-     * @param config
-     * @return Observable<DialogResult>
-     *
-     * Opens a component dialog with the provided configuration.
-     */
-    component(config, dialogConfig) {
-        return this._dialog.open((NgxDialog), {
-            ...dialogConfig,
-            data: {
-                title: config.title,
-                subtitle: config.subtitle,
-                icon: config.icon,
-                iconColor: config.iconColor,
-                body: {
-                    type: DialogBodyType.COMPONENT,
-                    content: config.component,
-                    data: config.componentData
-                },
-                cancelText: config.cancelText,
-                confirmText: config.confirmText,
-                showCancel: config.showCancel,
-                showConfirm: config.showConfirm,
-            },
-            minWidth: dialogConfig?.minWidth ?? '400px',
-            autoFocus: dialogConfig?.autoFocus ?? false
-        }).afterClosed();
-    }
-    /**
-     *
-     * @param config
-     * @param dialogConfig
-     * @returns Observable<DialogResult>
-     *
-     * Opens a template dialog with the provided configuration.
-     */
-    template(config, dialogConfig) {
-        return this._dialog.open((NgxDialog), {
-            ...dialogConfig,
-            data: {
-                ...config,
-                body: {
-                    type: DialogBodyType.TEMPLATE,
-                    content: config.template,
-                    data: config.templateData
-                },
-            },
-            minWidth: dialogConfig?.minWidth ?? '400px',
-            autoFocus: dialogConfig?.autoFocus ?? false
-        }).afterClosed();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AdvancedFilterService, AdvancedFilterUtils, ColumnConfigService, DatosPantallaService, DialogBodyType, DynamicHostDirective, NGX_EIFFAGE_DEFAULT_TEXTS, NGX_EIFFAGE_TEXTS, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogContext, NgxDialogService, NgxFileInput, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedSelectBottomSheetComponent, NgxPaginatedTable, NgxSkeleton, NgxTablesIntl, NgxTexts, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption, provideNgxEiffageTexts };
 //# sourceMappingURL=ngx-eiffage-material.mjs.map