ngx-eiffage-material 0.2.0 → 0.4.0

package/fesm2022/ngx-eiffage-material.mjs

@@ -1,29 +1,27 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, makeEnvironmentProviders, isSignal, signal, inject, computed, input, booleanAttribute, numberAttribute, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, afterRenderEffect, effect, untracked, forwardRef, output, ViewContainerRef, Directive, Pipe, PLATFORM_ID, HostListener, DestroyRef, ViewEncapsulation } 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 i2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Subject, fromEvent, startWith, map, catchError, of, merge, skip, debounceTime, distinctUntilChanged } from 'rxjs';
+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 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, NgTemplateOutlet, DatePipe, isPlatformBrowser, LowerCasePipe } from '@angular/common';
-import * as i2$2 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i2$3 from '@angular/material/form-field';
+import * as i3$1 from '@angular/forms';
+import { NgControl, FormGroupDirective, NgForm, Validators, FormControl, ReactiveFormsModule, FormArray, FormGroup, FormBuilder, FormsModule } from '@angular/forms';
+import * as i2$1 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 i2$1 from '@angular/material/icon';
+import * as i2$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/select';
+import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+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 i14 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -35,6 +33,8 @@ 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 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$1 from '@angular/material/table';
@@ -471,14 +471,19 @@ const NGX_EIFFAGE_DEFAULT_TEXTS = {
         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`,
+        maxFiles: max => plural(max, 'Solo se permite 1 archivo', `Máximo ${max} archivos permitidos`),
         typeNotAllowed: type => `Tipo no permitido: ${type}`,
         tooLarge: maxSize => `Excede el tamaño máximo (${maxSize})`,
     },
     inputFile: {
         label: 'Seleccionar archivo',
-        dropping: 'Arrastrar archivos aquí',
+        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…',
@@ -725,195 +730,318 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     }, 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 y ngx-file-input (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';
+}
+function fileKind(file) {
+    const type = file.type.toLowerCase();
+    if (type.startsWith('image/'))
+        return 'image';
+    if (type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf'))
+        return 'pdf';
+    if (type.startsWith('video/'))
+        return 'video';
+    if (type.startsWith('audio/'))
+        return 'audio';
+    return 'generic';
+}
+
+/**
+ * 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 {
-    // dependencies injection
+    // 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);
-    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
-    onChangeCb;
-    onTouchCb;
+    _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" }] : []));
-    /**
-     * 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" }] : []));
-    /** Sin uso: la plantilla nunca lo ha pintado (pendiente de revisar en ngx-input-file). */
+    /** Texto del campo vacío. Por defecto, el texto `inputFile.placeholder` de la librería. */
     placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
-    texts = inject(NgxTexts).texts;
-    resolvedLabel = computed(() => this.label() ?? this.texts().inputFile.label, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    accept = input([], ...(ngDevMode ? [{ debugName: "accept" }] : []));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /** 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" }] : []));
-    isDropping = signal(false, ...(ngDevMode ? [{ debugName: "isDropping" }] : []));
-    inputFileRef = viewChild('inputFileRef', ...(ngDevMode ? [{ debugName: "inputFileRef" }] : []));
-    internalControl = new FormControl([]);
-    /** Estado deshabilitado que llega desde setDisabledState() (reactive forms). */
+    /** 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" }] : []));
-    /** Estado deshabilitado efectivo: input `disabled` o el del FormControl padre. */
+    /** 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() {
-        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 });
-            }
-        });
+        if (this._ngControl)
+            this._ngControl.valueAccessor = this;
+        inject(DestroyRef).onDestroy(() => this._controlSub?.unsubscribe());
     }
-    checkErrors() {
-        const control = this.control();
-        if (control?.invalid) {
-            this.internalControl.setErrors(control.errors);
-        }
-        else {
-            this.internalControl.setErrors(null);
-        }
-        this._cdr.markForCheck();
+    ngAfterViewInit() {
+        // formControlName asigna su control después de registerOnChange: aquí ya está
+        if (this._ngControl?.control)
+            this._bindControl(this._ngControl.control);
     }
-    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();
-        }
+    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));
     }
-    onContainerClick() {
-        if (!this.isDisabled()) {
-            this.markAsTouched();
-            this.checkErrors();
-            this._cdr.markForCheck();
-            this.onTouchCb?.();
-            this.inputFileRef()?.nativeElement.click();
+    // ── 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();
         }
     }
-    onInputchange(event) {
-        const target = event.target;
-        const files = target.files;
-        this.attachFiles(files);
-        target.value = '';
+    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) {
-        event.preventDefault();
-        this.isDropping.set(false);
+        // 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.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();
-        }
+        if (!this.isDisabled())
+            this._addFiles(event.dataTransfer?.files);
     }
+    // ── ControlValueAccessor ────────────────────────────────────────────────────
     writeValue(files) {
-        this.value.set(files ?? []);
+        this.files.set(Array.isArray(files) ? files : []);
+        this._rejected.set([]);
     }
     registerOnChange(fn) {
-        this.onChangeCb = 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.onTouchCb = fn;
+        this._onTouched = 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();
+    // ── Privado ─────────────────────────────────────────────────────────────────
+    _control() {
+        return this._ngControl?.control ?? null;
     }
-    getAccept() {
-        return this.accept().join();
+    /** 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();
     }
-    bytesToMegaBytes(bytes) {
-        return (bytes / 1024 / 1024).toFixed(1);
+    _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();
     }
-    markAsTouched() {
-        this.control()?.markAsTouched();
-        this.internalControl.markAsTouched();
+    _markTouched() {
+        this._onTouched();
+        this._chipGrid()?.updateErrorState();
+        this._cdr.markForCheck();
     }
-    markAsDirty() {
-        this.control()?.markAsDirty();
-        this.internalControl.markAsDirty();
+    _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 }, 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>{{ resolvedLabel() }}</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]=\"texts().inputFile.remove(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() ? texts().inputFile.dropping : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.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 }] });
+    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: [
-                        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>{{ resolvedLabel() }}</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]=\"texts().inputFile.remove(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() ? texts().inputFile.dropping : 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 }] }] } });
+            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
@@ -1142,7 +1270,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: "\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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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,
@@ -1253,7 +1381,7 @@ class NgxDialog {
         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", 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$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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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,
@@ -1269,6 +1397,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ], 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);
@@ -1837,6 +1970,92 @@ 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));
@@ -1934,7 +2153,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>{{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$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,
@@ -1958,7 +2177,6 @@ class PaginatedSearchableSelectComponent {
     // inject() resuelve tambien los providers a nivel de componente/ruta, por lo que
     // el override sigue siendo posible.
     texts = inject(NgxTexts).texts;
-    control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
     endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
     filters = input(signal({
         pageNumber: 1,
@@ -1985,7 +2203,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();
@@ -1993,13 +2212,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 }) => {
@@ -2038,6 +2300,8 @@ class PaginatedSearchableSelectComponent {
             clearTimeout(this.queryTimeout);
     }
     openedChange(open) {
+        if (!open)
+            this._onTouched();
         if (!open)
             return;
         const searcher = this.searcher();
@@ -2077,6 +2341,7 @@ class PaginatedSearchableSelectComponent {
         return selectPlaceholder.toLowerCase();
     }
     onOptionChange(event) {
+        this._onChange(event.value);
         this.optionChange.emit(event.value);
     }
     optionsSelectedForView() {
@@ -2097,7 +2362,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() || 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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.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,
@@ -2110,15 +2375,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() || 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"] }]
-        }], 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.
     texts = inject(NgxTexts).texts;
-    control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input((option) => {
         if (isFilterOption(option))
@@ -2138,20 +2402,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)
@@ -2186,6 +2496,7 @@ class SearchableSelectComponent {
         return includeNoSensible(label, query);
     }
     onOptionChange(event) {
+        this._onChange(event.value);
         this.optionChange.emit(event.value);
     }
     numberOfResults() {
@@ -2198,7 +2509,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() || 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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.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,
@@ -2210,8 +2521,8 @@ 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() || 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"] }]
-        }], 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" }] : []));
@@ -2268,7 +2579,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]=\"texts().advancedFilters.deleteFilter\" \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]=\"texts().advancedFilters.field\"\r\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n    [error]=\"texts().advancedFilters.required\"\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]=\"texts().advancedFilters.condition\"\r\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n    [error]=\"texts().advancedFilters.required\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n    <mat-form-field>\r\n        <mat-label>{{texts().advancedFilters.value}}</mat-label>\r\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n        <mat-error>{{texts().advancedFilters.required}}</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]=\"texts().advancedFilters.value\"\r\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n            [error]=\"texts().advancedFilters.required\"\r\n        />\r\n    } @else {\r\n        <ngx-searchable-select\r\n            [control]=\"getValue()\"\r\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n            [selectLabel]=\"texts().advancedFilters.value\"\r\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n            [error]=\"texts().advancedFilters.required\"\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>{{texts().advancedFilters.value}}</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>{{texts().advancedFilters.required}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:14px}.deleteButton{margin-bottom:20px}mat-form-field,ngx-searchable-select,ngx-paginated-searchable-select{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.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,
@@ -2283,7 +2594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatTooltipModule,
                         SearchableSelectComponent,
                         PaginatedSearchableSelectComponent
-                    ], template: "<button \r\n    matIconButton \r\n    [matTooltip]=\"texts().advancedFilters.deleteFilter\" \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]=\"texts().advancedFilters.field\"\r\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n    [error]=\"texts().advancedFilters.required\"\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]=\"texts().advancedFilters.condition\"\r\n    [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n    [error]=\"texts().advancedFilters.required\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n    <mat-form-field>\r\n        <mat-label>{{texts().advancedFilters.value}}</mat-label>\r\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n        <mat-error>{{texts().advancedFilters.required}}</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]=\"texts().advancedFilters.value\"\r\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n            [error]=\"texts().advancedFilters.required\"\r\n        />\r\n    } @else {\r\n        <ngx-searchable-select\r\n            [control]=\"getValue()\"\r\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n            [selectLabel]=\"texts().advancedFilters.value\"\r\n            [selectPlaceholder]=\"texts().advancedFilters.selectOption\"\r\n            [error]=\"texts().advancedFilters.required\"\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>{{texts().advancedFilters.value}}</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>{{texts().advancedFilters.required}}</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 {
@@ -2314,7 +2625,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            {{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$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,
@@ -2388,7 +2699,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>{{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.ɵ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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.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,
@@ -2411,6 +2722,7 @@ class NgxPaginatedTable {
     columnConfigService = inject(ColumnConfigService);
     advancedFilterService = inject(AdvancedFilterService);
     dialog = inject(MatDialog);
+    dialogService = inject(NgxDialogService);
     datosPantallaService = inject(DatosPantallaService);
     // Inyectar el servicio de internacionalización.
     // inject() resuelve tambien los providers a nivel de componente/ruta, por lo que
@@ -2609,19 +2921,19 @@ class NgxPaginatedTable {
     }
     onDeleteClick(row, event) {
         event.stopPropagation();
-        const title = this.config()().deleteConfirm?.title?.(row) ?? this.texts().table.deleteConfirmTitle;
-        const body = this.config()().deleteConfirm?.body?.(row) ?? this.texts().table.deleteConfirmBody;
-        const template = this.config()().deleteConfirm?.templateRef?.();
-        const data = {
-            title: title,
-            body: !template ? body : undefined,
-            template: template,
-            row: row,
-            confirmButtonLabel: this.texts().table.confirmDelete
+        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);
         });
     }
@@ -2761,14 +3073,15 @@ class NgxPaginatedTable {
     onAdvancedFilterDelete(event, advancedFiltersMenuTrigger, advancedFilter) {
         event.stopPropagation();
         advancedFiltersMenuTrigger.closeMenu();
-        const data = {
-            title: this.texts().advancedFilters.deleteTitle,
-            body: this.texts().advancedFilters.deleteMessage(advancedFilter.name),
-            confirmButtonLabel: this.texts().table.confirmDelete
-        };
-        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);
@@ -2956,7 +3269,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?.() ?? 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$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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$3.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: ["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,
@@ -2989,6 +3302,7 @@ 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
     texts = inject(NgxTexts).texts;
@@ -3291,19 +3605,19 @@ class NgxBasicTable {
     }
     onDeleteClick(row, event) {
         event.stopPropagation();
-        const title = this.config()().deleteConfirm?.title?.(row) ?? this.texts().table.deleteConfirmTitle;
-        const body = this.config()().deleteConfirm?.body?.(row) ?? this.texts().table.deleteConfirmBody;
-        const template = this.config()().deleteConfirm?.templateRef?.();
-        const data = {
-            title: title,
-            body: !template ? body : undefined,
-            template: template,
-            row: row,
-            confirmButtonLabel: this.texts().table.confirmDelete
+        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);
         });
     }
@@ -3540,7 +3854,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?.() ?? 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$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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$3.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,
@@ -3620,7 +3934,7 @@ class NgxAlert {
         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 }, 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$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: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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,
@@ -3915,7 +4229,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\">\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$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,
@@ -4250,7 +4564,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 -->\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.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$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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,
@@ -4351,395 +4665,306 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     }, 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;
+let nextId = 0;
+/**
+ * Zona para soltar o seleccionar ficheros, con lista de ficheros y previsualización de imágenes.
+ * Se usa con `formControlName` / `[formControl]` / `ngModel` (valor: los `File[]` válidos) o con `[(files)]`.
+ */
 class NgxFileInput {
-    _platform = inject(PLATFORM_ID);
-    _inputId = `ngx-fi-${++_uid}`;
-    _nativeInput = viewChild('nativeInput', ...(ngDevMode ? [{ debugName: "_nativeInput" }] : []));
+    // Se registra como value accessor a mano para poder leer el control (obligatorio y error), como ngx-input-file
+    _ngControl = inject(NgControl, { self: true, optional: true });
+    _parentForm = inject(FormGroupDirective, { optional: true }) ?? inject(NgForm, { optional: true });
+    _host = inject(ElementRef);
+    _locale = inject(LOCALE_ID);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _nativeInput = viewChild.required('nativeInput');
+    texts = inject(NgxTexts).texts;
     // ── Inputs ──────────────────────────────────────────────────────────────────
-    /** Accepted MIME types or extensions (e.g. `'image/*,.pdf'`). */
+    /** Tipos admitidos: extensiones (`.pdf`), MIME (`application/pdf`) o comodines (`image/*`). `'*'` = cualquiera. */
     accept = input('*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
-    /** Allow selecting multiple files. */
+    /** Admite varios ficheros: cada selección se añade a la anterior. */
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Maximum file size in bytes per file. `null` means no limit. */
+    /** Tamaño máximo por fichero, en bytes. `null` = sin límite. */
     maxSize = input(null, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
-    /** Maximum number of files when `multiple` is true. `null` means no limit. */
+    /** Número máximo de ficheros válidos (con `multiple`). `null` = sin límite. */
     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. Por defecto, el texto `fileInput.dropLabel` de la librería. */
+    /** Texto principal. 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…). */
+    /** Texto secundario (formatos, tamaños…). */
     hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : []));
-    /** Show the file preview list below the drop zone. */
+    /** 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" }] : []));
+    /** Muestra la lista de ficheros (con miniatura de las imágenes). */
     showPreview = input(true, ...(ngDevMode ? [{ debugName: "showPreview", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Visual variant: `'default'` (large zone), `'compact'` (horizontal), or `'button'`. */
+    /** `'default'` (zona grande), `'compact'` (barra horizontal) o `'button'` (solo un botón). */
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Ficheros válidos seleccionados. Admite `[(files)]` para usarlo sin formularios. */
+    files = model([], ...(ngDevMode ? [{ debugName: "files" }] : []));
     // ── Outputs ─────────────────────────────────────────────────────────────────
-    /** Emits when valid files are added. */
+    /** Ficheros válidos añadidos en una selección o al soltar. */
     filesSelected = output();
-    /** Emits when a file is removed from the list. */
+    /** Fichero quitado de la lista (válido o rechazado). */
     fileRemoved = output();
-    /** Emits for each file that fails validation. */
+    /** Un fichero rechazado (tipo, tamaño o número). */
     validationError = output();
-    // ── Internal state ──────────────────────────────────────────────────────────
-    /** All file items (valid + invalid). */
-    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    /** Whether the user is dragging files over the drop zone. */
-    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
-    /** Brief flash after a successful drop. */
-    showDropConfirm = signal(false, ...(ngDevMode ? [{ debugName: "showDropConfirm" }] : []));
-    /** Announcement text for screen readers. */
-    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
-    /** Unique id for the hidden file input. */
-    inputId = this._inputId;
-    /** Disabled state coming from `setDisabledState()` (reactive forms). */
+    // ── Estado ──────────────────────────────────────────────────────────────────
+    id = `ngx-fi-${nextId++}`;
+    _entries = signal([], ...(ngDevMode ? [{ debugName: "_entries" }] : []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : []));
-    /**
-     * Effective disabled state: the `disabled` input OR the state pushed by the
-     * parent FormControl through `setDisabledState()`.
-     */
+    /** Deshabilitado por el input `disabled` o por el control del formulario. */
     isDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    /** Derived: valid files only (used as FormControl value). */
-    validFiles = computed(() => this.items().filter(i => i.status === 'valid').map(i => i.file), ...(ngDevMode ? [{ debugName: "validFiles" }] : []));
-    // ── ControlValueAccessor ────────────────────────────────────────────────────
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    showDropConfirm = signal(false, ...(ngDevMode ? [{ debugName: "showDropConfirm" }] : []));
+    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : []));
+    isRequired = signal(false, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    showError = signal(false, ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    resolvedLabel = computed(() => this.label() ?? this.texts().fileInput.dropLabel, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : []));
+    acceptAttr = computed(() => parseAccept(this.accept()).join(','), ...(ngDevMode ? [{ debugName: "acceptAttr" }] : []));
+    describedBy = computed(() => [this.hint() ? `${this.id}-hint` : '', this.showError() && this.error() ? `${this.id}-error` : ''].filter(Boolean).join(' ') || null, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    /** Lo que pinta la lista: icono, color, tamaño legible y mensaje de error ya traducido. */
+    views = computed(() => this._entries().map(({ item, code }) => ({
+        item,
+        icon: fileIcon(item.file),
+        kind: fileKind(item.file),
+        size: formatFileSize(item.size, this._locale),
+        error: code ? this._message(item.file, code) : null,
+    })), ...(ngDevMode ? [{ debugName: "views" }] : []));
     _onChange = () => { };
     _onTouched = () => { };
-    writeValue(files) {
-        if (!files || files.length === 0) {
-            this.items.set([]);
+    _controlSub;
+    _confirmTimer;
+    constructor() {
+        if (this._ngControl)
+            this._ngControl.valueAccessor = this;
+        // [files] o [(files)] desde fuera: reconstruye la lista si no coincide con los válidos actuales
+        effect(() => {
+            const files = this.files();
+            untracked(() => {
+                const valid = this._validFiles();
+                if (files.length !== valid.length || files.some((file, i) => file !== valid[i]))
+                    this._resetFrom(files);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this._controlSub?.unsubscribe();
+            clearTimeout(this._confirmTimer);
+            this._entries().forEach(({ item }) => this._revokePreview(item));
+        });
+    }
+    ngAfterViewInit() {
+        // formControlName asigna su control después de registerOnChange: aquí ya está
+        if (this._ngControl?.control)
+            this._bindControl(this._ngControl.control);
+    }
+    ngDoCheck() {
+        // resetForm quita el «enviado» sin emitir evento: se recalcula en cada comprobación
+        this._syncFormState();
+    }
+    // ── API pública ─────────────────────────────────────────────────────────────
+    /** Abre el selector de ficheros del sistema (no hace nada si está deshabilitado). */
+    openFilePicker() {
+        if (!this.isDisabled())
+            this._nativeInput().nativeElement.click();
+    }
+    /** Quita un fichero de la lista, válido o rechazado. */
+    removeFile(item) {
+        const entry = this._entries().find(e => e.item.id === item.id);
+        if (!entry)
             return;
-        }
-        this.items.set(files.map(f => this._toFileItem(f)));
-        this._generatePreviews(this.items());
+        this._revokePreview(item);
+        this._entries.update(list => list.filter(e => e !== entry));
+        this.fileRemoved.emit(item);
+        this.announcement.set(this.texts().fileInput.removed(item.name));
+        if (!entry.code)
+            this._commit();
     }
-    registerOnChange(fn) {
-        this._onChange = fn;
+    // ── Eventos de la plantilla ─────────────────────────────────────────────────
+    onZoneKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openFilePicker();
+        }
     }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+    onZoneBlur() {
+        // 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();
     }
-    setDisabledState(isDisabled) {
-        this._cvaDisabled.set(isDisabled);
+    onNativeChange(event) {
+        const input = event.target;
+        this._addFiles(Array.from(input.files ?? []));
+        input.value = '';
     }
-    // ── Drag & Drop ─────────────────────────────────────────────────────────────
     onDragOver(event) {
+        // Siempre: si no, el navegador abre el fichero al soltarlo
         event.preventDefault();
-        event.stopPropagation();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = this.isDisabled() ? 'none' : 'copy';
         if (!this.isDisabled())
             this.isDragOver.set(true);
     }
     onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
+        // 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.isDragOver.set(false);
     }
     onDrop(event) {
         event.preventDefault();
-        event.stopPropagation();
         this.isDragOver.set(false);
         if (this.isDisabled())
             return;
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            this._processFiles(Array.from(files));
-            this._flashDropConfirm();
-        }
+        const files = Array.from(event.dataTransfer?.files ?? []);
+        if (!files.length)
+            return;
+        this._addFiles(files);
+        this._flashDropConfirm();
     }
-    // ── File input ──────────────────────────────────────────────────────────────
-    onFileInputChange(event) {
-        const input = event.target;
-        if (input.files && input.files.length > 0) {
-            this._processFiles(Array.from(input.files));
-        }
-        input.value = '';
+    // ── ControlValueAccessor ────────────────────────────────────────────────────
+    writeValue(files) {
+        this.files.set(Array.isArray(files) ? files : []);
     }
-    openFilePicker() {
-        if (this.isDisabled())
-            return;
-        this._onTouched();
-        this._nativeInput()?.nativeElement.click();
+    registerOnChange(fn) {
+        this._onChange = fn;
+        if (this._ngControl?.control)
+            this._bindControl(this._ngControl.control);
     }
-    // ── Remove ──────────────────────────────────────────────────────────────────
-    removeFile(item) {
-        this.items.update(list => list.filter(i => i.id !== item.id));
-        this.fileRemoved.emit(item);
-        this._emitChange();
-        this.liveAnnouncement.set(this.texts().fileInput.removed(item.name));
-    }
-    // ── Helpers ─────────────────────────────────────────────────────────────────
-    /** Format bytes to human-readable string. */
-    formatSize(bytes) {
-        if (bytes < 1024)
-            return `${bytes} B`;
-        if (bytes < 1024 * 1024)
-            return `${(bytes / 1024).toFixed(1)} KB`;
-        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    }
-    /** Get a Material icon name based on MIME type. */
-    getFileIcon(type) {
-        if (type.startsWith('image/'))
-            return 'image';
-        if (type === 'application/pdf')
-            return 'picture_as_pdf';
-        if (type.startsWith('video/'))
-            return 'videocam';
-        if (type.startsWith('audio/'))
-            return 'audiotrack';
-        if (type.includes('spreadsheet') || type.includes('excel'))
-            return 'table_chart';
-        if (type.includes('document') || type.includes('word'))
-            return 'description';
-        if (type.includes('zip') || type.includes('compressed'))
-            return 'folder_zip';
-        return 'insert_drive_file';
-    }
-    /** Get an accent color class based on MIME type. */
-    getFileColorClass(type) {
-        if (type.startsWith('image/'))
-            return 'ngx-fi-icon--image';
-        if (type === 'application/pdf')
-            return 'ngx-fi-icon--pdf';
-        if (type.startsWith('video/'))
-            return 'ngx-fi-icon--video';
-        if (type.startsWith('audio/'))
-            return 'ngx-fi-icon--audio';
-        return 'ngx-fi-icon--generic';
-    }
-    // ── Private ─────────────────────────────────────────────────────────────────
-    _processFiles(files) {
-        this._onTouched();
-        let incoming = files;
-        const currentCount = this.items().length;
-        const max = this.maxFiles();
-        // Max files check
-        if (this.multiple() && max !== null && currentCount + incoming.length > max) {
-            const allowed = Math.max(0, max - currentCount);
-            const rejected = incoming.slice(allowed);
-            incoming = incoming.slice(0, allowed);
-            for (const f of rejected) {
-                const err = {
-                    file: f,
-                    code: 'MAX_FILES_EXCEEDED',
-                    message: this.texts().fileInput.maxFiles(max),
-                };
-                this.validationError.emit(err);
-            }
-        }
-        // Single mode replaces current
-        if (!this.multiple()) {
-            incoming = incoming.slice(0, 1);
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
+    // ── Privado ─────────────────────────────────────────────────────────────────
+    _validFiles() {
+        return this._entries().filter(e => !e.code).map(e => e.item.file);
+    }
+    _addFiles(incoming) {
+        const patterns = parseAccept(this.accept());
+        const maxSize = this.maxSize();
+        const max = this.multiple() ? this.maxFiles() : 1;
+        const current = this.multiple() ? this._entries() : [];
+        let validCount = current.filter(e => !e.code).length;
+        const added = [];
+        for (const file of this.multiple() ? incoming : incoming.slice(0, 1)) {
+            // Repetidos (ya en la lista o dos veces en la misma tanda): se ignoran
+            if ([...current, ...added].some(e => isSameFile(e.item.file, file)))
+                continue;
+            let code;
+            if (!matchesAccept(file, patterns))
+                code = 'TYPE_NOT_ALLOWED';
+            else if (maxSize != null && file.size > maxSize)
+                code = 'SIZE_EXCEEDED';
+            else if (max != null && validCount >= max)
+                code = 'MAX_FILES_EXCEEDED';
+            else
+                validCount++;
+            added.push({ item: this._toItem(file, code), code });
         }
-        const newItems = incoming.map(f => this._validateAndCreate(f));
-        if (this.multiple()) {
-            this.items.update(list => [...list, ...newItems]);
+        if (!added.length)
+            return;
+        if (!this.multiple())
+            this._entries().forEach(({ item }) => this._revokePreview(item));
+        this._entries.set([...current, ...added]);
+        const rejected = added.filter(e => e.code);
+        for (const { item, code } of rejected)
+            this.validationError.emit({ file: item.file, code: code, message: item.error });
+        const valid = added.filter(e => !e.code).map(e => e.item);
+        if (valid.length) {
+            this.filesSelected.emit(valid);
+            this.announcement.set(this.texts().fileInput.added(valid.length));
         }
         else {
-            this.items.set(newItems);
-        }
-        this._generatePreviews(newItems);
-        this._emitChange();
-        const validCount = newItems.filter(i => i.status === 'valid').length;
-        if (validCount > 0) {
-            this.filesSelected.emit(newItems.filter(i => i.status === 'valid'));
-            this.liveAnnouncement.set(this.texts().fileInput.added(validCount));
+            this.announcement.set(rejected.map(e => `${e.item.name}: ${e.item.error}`).join('. '));
         }
-    }
-    _validateAndCreate(file) {
-        const item = this._toFileItem(file);
-        // Type validation
-        if (this.accept() !== '*' && !this._isTypeAllowed(file)) {
-            item.status = 'error';
-            item.error = this.texts().fileInput.typeNotAllowed(file.type || file.name.split('.').pop() || '');
-            this.validationError.emit({
-                file,
-                code: 'TYPE_NOT_ALLOWED',
-                message: item.error,
-            });
-            return item;
-        }
-        // Size validation
-        const maxSz = this.maxSize();
-        if (maxSz !== null && file.size > maxSz) {
-            item.status = 'error';
-            item.error = this.texts().fileInput.tooLarge(this.formatSize(maxSz));
-            this.validationError.emit({
-                file,
-                code: 'SIZE_EXCEEDED',
-                message: item.error,
-            });
-            return item;
-        }
-        return item;
-    }
-    _toFileItem(file) {
-        return {
+        this._commit();
+    }
+    /** Publica los ficheros válidos: model, formulario y estado de tocado. */
+    _commit() {
+        const files = this._validFiles();
+        this.files.set(files);
+        this._onChange(files);
+        this._markTouched();
+    }
+    /** Lista nueva a partir de un valor externo (writeValue o [files]); los rechazados se descartan. */
+    _resetFrom(files) {
+        const previous = this._entries();
+        previous.filter(e => !files.includes(e.item.file)).forEach(({ item }) => this._revokePreview(item));
+        this._entries.set(files.map(file => previous.find(e => e.item.file === file && !e.code) ?? { item: this._toItem(file) }));
+    }
+    _toItem(file, code) {
+        const item = {
             file,
-            id: this._generateId(),
+            id: `${this.id}-file-${nextId++}`,
             name: file.name,
             size: file.size,
             type: file.type,
-            status: 'valid',
+            status: code ? 'error' : 'valid',
         };
+        if (code)
+            item.error = this._message(file, code);
+        // URL temporal en vez de leer la imagen entera a base64; se libera al quitarla
+        else if (this._isBrowser && file.type.startsWith('image/'))
+            item.preview = URL.createObjectURL(file);
+        return item;
     }
-    _isTypeAllowed(file) {
-        const accept = this.accept();
-        const parts = accept.split(',').map(p => p.trim().toLowerCase());
-        const fileType = file.type.toLowerCase();
-        const fileName = file.name.toLowerCase();
-        return parts.some(pattern => {
-            // Extension pattern like .pdf
-            if (pattern.startsWith('.')) {
-                return fileName.endsWith(pattern);
-            }
-            // Wildcard MIME like image/*
-            if (pattern.endsWith('/*')) {
-                const prefix = pattern.slice(0, -2);
-                return fileType.startsWith(prefix + '/');
-            }
-            // Exact MIME
-            return fileType === pattern;
-        });
-    }
-    _generatePreviews(items) {
-        if (!isPlatformBrowser(this._platform))
-            return;
-        for (const item of items) {
-            if (item.file.type.startsWith('image/') && item.status === 'valid') {
-                const reader = new FileReader();
-                reader.onload = () => {
-                    this.items.update(list => list.map(i => i.id === item.id ? { ...i, preview: reader.result } : i));
-                };
-                reader.readAsDataURL(item.file);
+    _revokePreview(item) {
+        if (item.preview?.startsWith('blob:'))
+            URL.revokeObjectURL(item.preview);
+    }
+    _message(file, code) {
+        const texts = this.texts().fileInput;
+        switch (code) {
+            case 'TYPE_NOT_ALLOWED': {
+                // La extensión («.exe») se entiende mejor que el MIME («application/x-msdownload»)
+                const dot = file.name.lastIndexOf('.');
+                return texts.typeNotAllowed(dot > 0 ? file.name.slice(dot).toLowerCase() : file.type || file.name);
             }
+            case 'SIZE_EXCEEDED':
+                return texts.tooLarge(formatFileSize(this.maxSize() ?? 0, this._locale));
+            case 'MAX_FILES_EXCEEDED':
+                return texts.maxFiles(this.maxFiles() ?? 1);
         }
     }
-    _emitChange() {
-        this._onChange(this.validFiles());
+    _bindControl(control) {
+        this._controlSub?.unsubscribe();
+        const submit$ = this._parentForm?.ngSubmit ?? EMPTY;
+        this._controlSub = merge(control.events, submit$).subscribe(() => this._syncFormState());
+        this._syncFormState();
+    }
+    _syncFormState() {
+        const control = this._ngControl?.control;
+        // Signals con el mismo valor no repintan: se puede llamar en cada ngDoCheck
+        this.isRequired.set(control?.hasValidator(Validators.required) ?? false);
+        this.showError.set(!!control && control.invalid && (control.touched || !!this._parentForm?.submitted));
+    }
+    _markTouched() {
+        this._onTouched();
+        this._syncFormState();
     }
     _flashDropConfirm() {
         this.showDropConfirm.set(true);
-        setTimeout(() => this.showDropConfirm.set(false), 450);
-    }
-    _generateId() {
-        if (isPlatformBrowser(this._platform) && typeof crypto !== 'undefined' && crypto.randomUUID) {
-            return crypto.randomUUID();
-        }
-        return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+        clearTimeout(this._confirmTimer);
+        this._confirmTimer = setTimeout(() => this.showDropConfirm.set(false), 450);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxFileInput, isStandalone: true, selector: "ngx-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, host: { properties: { "class.ngx-fi--disabled": "isDisabled()", "class.ngx-fi--default": "variant() === 'default'", "class.ngx-fi--compact": "variant() === 'compact'", "class.ngx-fi--button": "variant() === 'button'" }, classAttribute: "ngx-file-input" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NgxFileInput),
-                multi: true,
-            },
-        ], 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$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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxFileInput, isStandalone: true, selector: "ngx-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesSelected: "filesSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.ngx-fi--default": "variant() === 'default'", "class.ngx-fi--compact": "variant() === 'compact'", "class.ngx-fi--button": "variant() === 'button'", "class.ngx-fi--disabled": "isDisabled()", "class.ngx-fi--dragover": "isDragOver()", "class.ngx-fi--invalid": "showError()" }, classAttribute: "ngx-file-input" }, viewQueries: [{ propertyName: "_nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Input nativo oculto: lo abre la zona o el bot\u00F3n -->\n<input\n  #nativeInput\n  class=\"ngx-fi__native\"\n  type=\"file\"\n  hidden\n  tabindex=\"-1\"\n  [accept]=\"acceptAttr()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"isDisabled()\"\n  (change)=\"onNativeChange($event)\"\n  (cancel)=\"onZoneBlur()\" />\n\n@switch (variant()) {\n  @case ('button') {\n    <button\n      matButton=\"filled\"\n      type=\"button\"\n      class=\"ngx-fi__button\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (click)=\"openFilePicker()\"\n      (blur)=\"onZoneBlur()\">\n      <mat-icon>attach_file</mat-icon>\n      {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n    </button>\n    @if (hint()) {\n      <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n    }\n  }\n\n  @default {\n    <!-- Zona de arrastre: es un bot\u00F3n (abre el selector) con la etiqueta como nombre accesible -->\n    <div\n      class=\"ngx-fi__zone\"\n      [class.ngx-fi__zone--compact]=\"variant() === 'compact'\"\n      role=\"button\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (click)=\"openFilePicker()\"\n      (keydown)=\"onZoneKeydown($event)\"\n      (blur)=\"onZoneBlur()\">\n      <mat-icon class=\"ngx-fi__zone-icon\" aria-hidden=\"true\">cloud_upload</mat-icon>\n\n      <span class=\"ngx-fi__zone-text\">\n        <span class=\"ngx-fi__label\">\n          {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n        </span>\n        @if (hint()) {\n          <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n        }\n        @if (variant() === 'default') {\n          <span class=\"ngx-fi__browse\">{{ texts().fileInput.browse }}</span>\n        }\n      </span>\n\n      @if (showDropConfirm()) {\n        <span class=\"ngx-fi__confirm\" aria-hidden=\"true\"><mat-icon>check_circle</mat-icon></span>\n      }\n    </div>\n  }\n}\n\n@if (showError() && error()) {\n  <span class=\"ngx-fi__error\" [id]=\"id + '-error'\">{{ error() }}</span>\n}\n\n@if (showPreview() && views().length) {\n  <ul class=\"ngx-fi__list\">\n    @for (view of views(); track view.item.id) {\n      <li class=\"ngx-fi__item\" [class.ngx-fi__item--error]=\"view.error\">\n        <span class=\"ngx-fi__thumb\" [attr.data-kind]=\"view.kind\">\n          @if (view.item.preview) {\n            <img [src]=\"view.item.preview\" alt=\"\" />\n          } @else {\n            <mat-icon aria-hidden=\"true\">{{ view.icon }}</mat-icon>\n          }\n        </span>\n\n        <span class=\"ngx-fi__info\">\n          <span class=\"ngx-fi__name\" [title]=\"view.item.name\">{{ view.item.name }}</span>\n          <span class=\"ngx-fi__meta\">\n            {{ view.size }}\n            @if (view.error) {\n              <span class=\"ngx-fi__item-error\"><mat-icon aria-hidden=\"true\">error</mat-icon>{{ view.error }}</span>\n            }\n          </span>\n        </span>\n\n        <button\n          matIconButton\n          type=\"button\"\n          class=\"ngx-fi__remove\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"texts().fileInput.remove(view.item.name)\"\n          [matTooltip]=\"texts().fileInput.remove(view.item.name)\"\n          (click)=\"removeFile(view.item)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n<!-- Regi\u00F3n viva fija: a\u00F1adidos, quitados y rechazados -->\n<div class=\"ngx-fi__live\" aria-live=\"polite\">{{ announcement() }}</div>\n", styles: [":host{--ngx-file-input-image-color: var(--mat-sys-primary);--ngx-file-input-pdf-color: var(--mat-sys-error);--ngx-file-input-video-color: var(--mat-sys-tertiary);--ngx-file-input-audio-color: var(--mat-sys-secondary);--ngx-file-input-generic-color: var(--mat-sys-on-surface-variant);display:flex;flex-direction:column;gap:8px}:host(.ngx-fi--button){display:inline-flex;align-items:flex-start}.ngx-fi__zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;padding:32px 24px;border:2px dashed var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-large, 16px);background:var(--mat-sys-surface-container-low);color:var(--mat-sys-on-surface);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:border-color .15s,background-color .15s}.ngx-fi__zone:hover{border-color:var(--mat-sys-outline);background:var(--mat-sys-surface-container)}.ngx-fi__zone:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.ngx-fi__zone--compact{flex-direction:row;justify-content:flex-start;gap:16px;min-height:0;padding:16px 20px;border-radius:var(--mat-sys-corner-medium, 12px);text-align:start}.ngx-fi__zone--compact .ngx-fi__zone-icon{width:32px;height:32px;font-size:32px}.ngx-fi__zone--compact .ngx-fi__zone-text{align-items:flex-start}.ngx-fi__zone-icon{flex:none;width:48px;height:48px;font-size:48px;color:var(--mat-sys-on-surface-variant);transition:transform .15s,color .15s}.ngx-fi__zone-text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.ngx-fi__label{font:var(--mat-sys-title-medium)}.ngx-fi__required{margin-inline-start:2px}.ngx-fi__hint{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__browse{margin-top:4px;font:var(--mat-sys-label-large);color:var(--mat-sys-primary)}:host(.ngx-fi--dragover) .ngx-fi__zone{border-style:solid;border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,var(--mat-sys-surface-container-low))}:host(.ngx-fi--dragover) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-primary);transform:scale(1.1)}:host(.ngx-fi--dragover) .ngx-fi__button{outline:2px dashed var(--mat-sys-primary);outline-offset:3px}:host(.ngx-fi--invalid) .ngx-fi__zone{border-color:var(--mat-sys-error)}:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__label,:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-error)}:host(.ngx-fi--disabled) .ngx-fi__zone{cursor:default;border-color:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent);background:transparent;color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__zone-icon,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__hint,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__browse{color:inherit}.ngx-fi__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent);pointer-events:none;animation:ngx-fi-flash .45s ease-out forwards}.ngx-fi__confirm mat-icon{width:56px;height:56px;font-size:56px;color:var(--mat-sys-primary)}.ngx-fi__error{padding-inline:4px;font:var(--mat-sys-body-small);color:var(--mat-sys-error)}.ngx-fi__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}:host(.ngx-fi--button) .ngx-fi__list{align-self:stretch}.ngx-fi__item{display:flex;align-items:center;gap:12px;padding:8px 4px 8px 8px;border:1px solid var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-medium, 12px);background:var(--mat-sys-surface-container-lowest);animation:ngx-fi-enter .2s ease-out both}.ngx-fi__item--error{border-color:color-mix(in srgb,var(--mat-sys-error) 40%,transparent);background:color-mix(in srgb,var(--mat-sys-error) 6%,var(--mat-sys-surface-container-lowest))}.ngx-fi__thumb{--ngx-fi-kind-color: var(--ngx-file-input-generic-color);flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--mat-sys-corner-small, 8px);background:color-mix(in srgb,var(--ngx-fi-kind-color) 12%,var(--mat-sys-surface));overflow:hidden}.ngx-fi__thumb[data-kind=image]{--ngx-fi-kind-color: var(--ngx-file-input-image-color)}.ngx-fi__thumb[data-kind=pdf]{--ngx-fi-kind-color: var(--ngx-file-input-pdf-color)}.ngx-fi__thumb[data-kind=video]{--ngx-fi-kind-color: var(--ngx-file-input-video-color)}.ngx-fi__thumb[data-kind=audio]{--ngx-fi-kind-color: var(--ngx-file-input-audio-color)}.ngx-fi__thumb mat-icon{color:var(--ngx-fi-kind-color)}.ngx-fi__thumb img{width:100%;height:100%;object-fit:cover}.ngx-fi__info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ngx-fi__name{overflow:hidden;font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface);text-overflow:ellipsis;white-space:nowrap}.ngx-fi__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__item-error{display:inline-flex;align-items:center;gap:4px;color:var(--mat-sys-error)}.ngx-fi__item-error mat-icon{width:16px;height:16px;font-size:16px}.ngx-fi__remove{flex:none}.ngx-fi__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@keyframes ngx-fi-enter{0%{opacity:0;transform:translateY(-4px)}}@keyframes ngx-fi-flash{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ngx-fi__item,.ngx-fi__confirm{animation:none}.ngx-fi__zone,.ngx-fi__zone-icon{transition:none}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxFileInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-file-input', imports: [MatButtonModule, MatIconModule, MatTooltipModule], encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NgxFileInput),
-                            multi: true,
-                        },
-                    ], host: {
-                        'class': 'ngx-file-input',
-                        '[class.ngx-fi--disabled]': 'isDisabled()',
+            args: [{ selector: 'ngx-file-input', imports: [MatButtonModule, MatIconModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ngx-file-input',
                         '[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]=\"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"] }] } });
-
-/**
- * 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.ngx-fi--disabled]': 'isDisabled()',
+                        '[class.ngx-fi--dragover]': 'isDragOver()',
+                        '[class.ngx-fi--invalid]': 'showError()',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
+                        '(drop)': 'onDrop($event)',
+                    }, template: "<!-- Input nativo oculto: lo abre la zona o el bot\u00F3n -->\n<input\n  #nativeInput\n  class=\"ngx-fi__native\"\n  type=\"file\"\n  hidden\n  tabindex=\"-1\"\n  [accept]=\"acceptAttr()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"isDisabled()\"\n  (change)=\"onNativeChange($event)\"\n  (cancel)=\"onZoneBlur()\" />\n\n@switch (variant()) {\n  @case ('button') {\n    <button\n      matButton=\"filled\"\n      type=\"button\"\n      class=\"ngx-fi__button\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (click)=\"openFilePicker()\"\n      (blur)=\"onZoneBlur()\">\n      <mat-icon>attach_file</mat-icon>\n      {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n    </button>\n    @if (hint()) {\n      <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n    }\n  }\n\n  @default {\n    <!-- Zona de arrastre: es un bot\u00F3n (abre el selector) con la etiqueta como nombre accesible -->\n    <div\n      class=\"ngx-fi__zone\"\n      [class.ngx-fi__zone--compact]=\"variant() === 'compact'\"\n      role=\"button\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (click)=\"openFilePicker()\"\n      (keydown)=\"onZoneKeydown($event)\"\n      (blur)=\"onZoneBlur()\">\n      <mat-icon class=\"ngx-fi__zone-icon\" aria-hidden=\"true\">cloud_upload</mat-icon>\n\n      <span class=\"ngx-fi__zone-text\">\n        <span class=\"ngx-fi__label\">\n          {{ resolvedLabel() }}@if (isRequired()) {<span class=\"ngx-fi__required\" aria-hidden=\"true\">*</span>}\n        </span>\n        @if (hint()) {\n          <span class=\"ngx-fi__hint\" [id]=\"id + '-hint'\">{{ hint() }}</span>\n        }\n        @if (variant() === 'default') {\n          <span class=\"ngx-fi__browse\">{{ texts().fileInput.browse }}</span>\n        }\n      </span>\n\n      @if (showDropConfirm()) {\n        <span class=\"ngx-fi__confirm\" aria-hidden=\"true\"><mat-icon>check_circle</mat-icon></span>\n      }\n    </div>\n  }\n}\n\n@if (showError() && error()) {\n  <span class=\"ngx-fi__error\" [id]=\"id + '-error'\">{{ error() }}</span>\n}\n\n@if (showPreview() && views().length) {\n  <ul class=\"ngx-fi__list\">\n    @for (view of views(); track view.item.id) {\n      <li class=\"ngx-fi__item\" [class.ngx-fi__item--error]=\"view.error\">\n        <span class=\"ngx-fi__thumb\" [attr.data-kind]=\"view.kind\">\n          @if (view.item.preview) {\n            <img [src]=\"view.item.preview\" alt=\"\" />\n          } @else {\n            <mat-icon aria-hidden=\"true\">{{ view.icon }}</mat-icon>\n          }\n        </span>\n\n        <span class=\"ngx-fi__info\">\n          <span class=\"ngx-fi__name\" [title]=\"view.item.name\">{{ view.item.name }}</span>\n          <span class=\"ngx-fi__meta\">\n            {{ view.size }}\n            @if (view.error) {\n              <span class=\"ngx-fi__item-error\"><mat-icon aria-hidden=\"true\">error</mat-icon>{{ view.error }}</span>\n            }\n          </span>\n        </span>\n\n        <button\n          matIconButton\n          type=\"button\"\n          class=\"ngx-fi__remove\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"texts().fileInput.remove(view.item.name)\"\n          [matTooltip]=\"texts().fileInput.remove(view.item.name)\"\n          (click)=\"removeFile(view.item)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n<!-- Regi\u00F3n viva fija: a\u00F1adidos, quitados y rechazados -->\n<div class=\"ngx-fi__live\" aria-live=\"polite\">{{ announcement() }}</div>\n", styles: [":host{--ngx-file-input-image-color: var(--mat-sys-primary);--ngx-file-input-pdf-color: var(--mat-sys-error);--ngx-file-input-video-color: var(--mat-sys-tertiary);--ngx-file-input-audio-color: var(--mat-sys-secondary);--ngx-file-input-generic-color: var(--mat-sys-on-surface-variant);display:flex;flex-direction:column;gap:8px}:host(.ngx-fi--button){display:inline-flex;align-items:flex-start}.ngx-fi__zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:180px;padding:32px 24px;border:2px dashed var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-large, 16px);background:var(--mat-sys-surface-container-low);color:var(--mat-sys-on-surface);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:border-color .15s,background-color .15s}.ngx-fi__zone:hover{border-color:var(--mat-sys-outline);background:var(--mat-sys-surface-container)}.ngx-fi__zone:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.ngx-fi__zone--compact{flex-direction:row;justify-content:flex-start;gap:16px;min-height:0;padding:16px 20px;border-radius:var(--mat-sys-corner-medium, 12px);text-align:start}.ngx-fi__zone--compact .ngx-fi__zone-icon{width:32px;height:32px;font-size:32px}.ngx-fi__zone--compact .ngx-fi__zone-text{align-items:flex-start}.ngx-fi__zone-icon{flex:none;width:48px;height:48px;font-size:48px;color:var(--mat-sys-on-surface-variant);transition:transform .15s,color .15s}.ngx-fi__zone-text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.ngx-fi__label{font:var(--mat-sys-title-medium)}.ngx-fi__required{margin-inline-start:2px}.ngx-fi__hint{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__browse{margin-top:4px;font:var(--mat-sys-label-large);color:var(--mat-sys-primary)}:host(.ngx-fi--dragover) .ngx-fi__zone{border-style:solid;border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,var(--mat-sys-surface-container-low))}:host(.ngx-fi--dragover) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-primary);transform:scale(1.1)}:host(.ngx-fi--dragover) .ngx-fi__button{outline:2px dashed var(--mat-sys-primary);outline-offset:3px}:host(.ngx-fi--invalid) .ngx-fi__zone{border-color:var(--mat-sys-error)}:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__label,:host(.ngx-fi--invalid) .ngx-fi__zone .ngx-fi__zone-icon{color:var(--mat-sys-error)}:host(.ngx-fi--disabled) .ngx-fi__zone{cursor:default;border-color:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent);background:transparent;color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__zone-icon,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__hint,:host(.ngx-fi--disabled) .ngx-fi__zone .ngx-fi__browse{color:inherit}.ngx-fi__confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent);pointer-events:none;animation:ngx-fi-flash .45s ease-out forwards}.ngx-fi__confirm mat-icon{width:56px;height:56px;font-size:56px;color:var(--mat-sys-primary)}.ngx-fi__error{padding-inline:4px;font:var(--mat-sys-body-small);color:var(--mat-sys-error)}.ngx-fi__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}:host(.ngx-fi--button) .ngx-fi__list{align-self:stretch}.ngx-fi__item{display:flex;align-items:center;gap:12px;padding:8px 4px 8px 8px;border:1px solid var(--mat-sys-outline-variant);border-radius:var(--mat-sys-corner-medium, 12px);background:var(--mat-sys-surface-container-lowest);animation:ngx-fi-enter .2s ease-out both}.ngx-fi__item--error{border-color:color-mix(in srgb,var(--mat-sys-error) 40%,transparent);background:color-mix(in srgb,var(--mat-sys-error) 6%,var(--mat-sys-surface-container-lowest))}.ngx-fi__thumb{--ngx-fi-kind-color: var(--ngx-file-input-generic-color);flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--mat-sys-corner-small, 8px);background:color-mix(in srgb,var(--ngx-fi-kind-color) 12%,var(--mat-sys-surface));overflow:hidden}.ngx-fi__thumb[data-kind=image]{--ngx-fi-kind-color: var(--ngx-file-input-image-color)}.ngx-fi__thumb[data-kind=pdf]{--ngx-fi-kind-color: var(--ngx-file-input-pdf-color)}.ngx-fi__thumb[data-kind=video]{--ngx-fi-kind-color: var(--ngx-file-input-video-color)}.ngx-fi__thumb[data-kind=audio]{--ngx-fi-kind-color: var(--ngx-file-input-audio-color)}.ngx-fi__thumb mat-icon{color:var(--ngx-fi-kind-color)}.ngx-fi__thumb img{width:100%;height:100%;object-fit:cover}.ngx-fi__info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.ngx-fi__name{overflow:hidden;font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface);text-overflow:ellipsis;white-space:nowrap}.ngx-fi__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.ngx-fi__item-error{display:inline-flex;align-items:center;gap:4px;color:var(--mat-sys-error)}.ngx-fi__item-error mat-icon{width:16px;height:16px;font-size:16px}.ngx-fi__remove{flex:none}.ngx-fi__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@keyframes ngx-fi-enter{0%{opacity:0;transform:translateY(-4px)}}@keyframes ngx-fi-flash{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ngx-fi__item,.ngx-fi__confirm{animation:none}.ngx-fi__zone,.ngx-fi__zone-icon{transition:none}}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
 
 /**
  * Generated bundle index. Do not edit.