ngx-eiffage-material 0.0.31 → 0.0.33

package/fesm2022/ngx-eiffage-material.mjs

@@ -1,26 +1,26 @@
 import * as i0 from '@angular/core';
-import { input, Component, inject, ChangeDetectorRef, signal, viewChild, afterRenderEffect, effect, untracked, forwardRef, output, computed, ViewEncapsulation, ViewContainerRef, Directive, Injectable, Pipe, InjectionToken, HostListener, Optional } from '@angular/core';
+import { input, Component, inject, ChangeDetectorRef, signal, viewChild, afterRenderEffect, effect, untracked, forwardRef, output, computed, ViewEncapsulation, ViewContainerRef, Directive, Injectable, Pipe, InjectionToken, Optional, HostListener } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$1 from '@angular/material/icon';
+import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i3 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators, FormArray, FormGroup, FormBuilder } from '@angular/forms';
-import * as i3$2 from '@angular/common';
+import * as i3$1 from '@angular/common';
 import { CommonModule, DatePipe, LowerCasePipe } from '@angular/common';
 import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i2$1 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i7$1 from '@angular/material/progress-bar';
+import * as i8 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i7$2 from '@angular/material/tooltip';
+import * as i7$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i4 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/select';
+import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA, MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { Subject, debounceTime, distinctUntilChanged, takeUntil, fromEvent, startWith, map } from 'rxjs';
@@ -38,7 +38,7 @@ import * as i13 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i4$2 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i3$4 from '@angular/material/sort';
+import * as i3$3 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
 import * as i2$3 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
@@ -50,7 +50,7 @@ import { utils, writeFileXLSX } from 'xlsx';
 import { v4 } from 'uuid';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import moment from 'moment';
-import * as i3$3 from '@angular/material/slide-toggle';
+import * as i3$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i4$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -219,7 +219,7 @@ class NgxInputFile {
                 useExisting: forwardRef(() => NgxInputFile),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\"\r\n  (click)=\"onContainerClick()\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDropping()\"\r\n>\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <mat-chip-grid \r\n    #chipGrid \r\n    [formControl]=\"internalControl\"\r\n    class=\"chips-grid\"\r\n  >\r\n    @for(file of value(); track file.name + $index) {\r\n      <mat-chip-row\r\n        (removed)=\"onDeleteFileClick(file)\"\r\n        class=\"chip-item\"\r\n        [title]=\"file.name\"\r\n      >\r\n        <div class=\"chip-content\">\r\n          <span class=\"chip-label\">\r\n            ({{ bytesToMegaBytes(file.size) }} MB) {{ file.name }}\r\n          </span>\r\n        </div>\r\n        <button matChipRemove [attr.aria-label]=\"'Eliminar ' + file.name\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input \r\n    #inputFileRef\r\n    type=\"file\"\r\n    [accept]=\"getAccept()\" \r\n    [multiple]=\"multiple()\" \r\n    (change)=\"onInputchange($event)\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    style=\"display: none\"\r\n  />  \r\n  <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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 }] });
+        ], viewQueries: [{ propertyName: "inputFileRef", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\"\r\n  (click)=\"onContainerClick()\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [class.dragover]=\"isDropping()\"\r\n>\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <mat-chip-grid \r\n    #chipGrid \r\n    [formControl]=\"internalControl\"\r\n    class=\"chips-grid\"\r\n  >\r\n    @for(file of value(); track file.name + $index) {\r\n      <mat-chip-row\r\n        (removed)=\"onDeleteFileClick(file)\"\r\n        class=\"chip-item\"\r\n        [title]=\"file.name\"\r\n      >\r\n        <div class=\"chip-content\">\r\n          <span class=\"chip-label\">\r\n            ({{ bytesToMegaBytes(file.size) }} MB) {{ file.name }}\r\n          </span>\r\n        </div>\r\n        <button matChipRemove [attr.aria-label]=\"'Eliminar ' + file.name\">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  </mat-chip-grid>\r\n  <input \r\n    #inputFileRef\r\n    type=\"file\"\r\n    [accept]=\"getAccept()\" \r\n    [multiple]=\"multiple()\" \r\n    (change)=\"onInputchange($event)\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    style=\"display: none\"\r\n  />  \r\n  <mat-hint>{{ isDropping() ? 'Arrastrar archivos aqu\u00ED' : hint() }}</mat-hint>\r\n  <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}.chips-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%}.chip-item{max-width:100%!important;box-sizing:border-box!important}.chip-item ::ng-deep .mdc-evolution-chip__cell{display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__action--primary{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__text-label{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-item ::ng-deep .mdc-evolution-chip__cell--trailing{display:flex!important;align-items:center!important}.chip-content{overflow:hidden!important;max-width:100%!important;display:flex!important;align-items:center!important}.chip-label{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;line-height:1.5!important}[matChipRemove]{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:center!important}[matChipRemove] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.dragover ::ng-deep .mat-mdc-text-field-wrapper{border-color:var(--mat-sys-primary);border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxInputFile, decorators: [{
             type: Component,
@@ -332,7 +332,7 @@ class NgxBasicSelect {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select \n        #matSelect\n        [formControl]=\"control()\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(!isLoading()) {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input \n                    matInput\n                    #searchInput \n                    type=\"text\"\n                    (keydown)=\"$event.stopPropagation()\"\n                />\n                <button matIconButton (click)=\"onClearInputClick(); searchInput.value = ''\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            @for(option of options(); track option[basicSelectConfig().valueKey]) {\n                <mat-option \n                    [value]=\"option[basicSelectConfig().valueKey]\" \n                    [disabled]=\"basicSelectConfig().disabled ? basicSelectConfig().disabled?.(option) : false\"\n                    [style]=\"{ display: includeInFilter(option, searchInput.value) ? 'flex' : 'none' }\"\n                >   \n                    {{ basicSelectConfig().displayedLabel(option) }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? control().value?.length : control().value)) {\n        <mat-icon matSuffix (click)=\"onClearClick(); $event.stopPropagation()\">close</mat-icon>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:#fff;z-index:10;border-bottom:1px solid var(--accent-3)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}button{position:absolute;right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select \n        #matSelect\n        [formControl]=\"control()\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(!isLoading()) {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input \n                    matInput\n                    #searchInput \n                    type=\"text\"\n                    (keydown)=\"$event.stopPropagation()\"\n                />\n                <button matIconButton (click)=\"onClearInputClick(); searchInput.value = ''\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            @for(option of options(); track option[basicSelectConfig().valueKey]) {\n                <mat-option \n                    [value]=\"option[basicSelectConfig().valueKey]\" \n                    [disabled]=\"basicSelectConfig().disabled ? basicSelectConfig().disabled?.(option) : false\"\n                    [style]=\"{ display: includeInFilter(option, searchInput.value) ? 'flex' : 'none' }\"\n                >   \n                    {{ basicSelectConfig().displayedLabel(option) }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? control().value?.length : control().value)) {\n        <mat-icon matSuffix (click)=\"onClearClick(); $event.stopPropagation()\">close</mat-icon>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:#fff;z-index:10;border-bottom:1px solid var(--accent-3)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}button{position:absolute;right:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, decorators: [{
             type: Component,
@@ -468,7 +468,7 @@ class PaginatedSelectBottomSheetComponent {
         this._bottomSheetRef.dismiss(this.selectedsOptions());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSelectBottomSheetComponent, isStandalone: true, selector: "paginated-select-bottom-sheet", viewQueries: [{ propertyName: "selectionList", first: true, predicate: ["selectionList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bottomSheetContainer\">\r\n    <div class=\"header\">\r\n        @if(_data.title) {\r\n            <div class=\"title\">\r\n                {{ _data.title }}\r\n            </div>\r\n        }\r\n        @if(!_data.hideFilter) {\r\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\r\n                <mat-icon matPrefix>search</mat-icon>\r\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" [value]=\"queryInput()\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\r\n                @if(searchInput.value.length > 0) {\r\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                }\r\n            </mat-form-field>\r\n        \r\n            <mat-chip-listbox [multiple]=\"false\">\r\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\r\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\r\n                }\r\n            </mat-chip-listbox>\r\n        }\r\n\r\n        @if(_data.extraFiltersTemplate) {\r\n            <br />\r\n            <ng-container *ngTemplateOutlet=\"_data.extraFiltersTemplate;\"></ng-container>\r\n        }\r\n    </div>\r\n    <div>\r\n        @if(isLoading()) {\r\n            <mat-progress-bar mode=\"indeterminate\" />\r\n        }\r\n    </div>\r\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\r\n        <mat-selection-list #selectionList [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\r\n            @if(options().length === 0 && !isLoading()) {\r\n                <div class=\"no-results\">\r\n                    <mat-icon>search_off</mat-icon>\r\n                    <p>{{ _data.noResultsMessage }}</p>\r\n                </div>\r\n            }\r\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\r\n                <mat-list-option \r\n                    [value]=\"option[_data.config.valueKey]\"\r\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\r\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\r\n                >\r\n                    @if(_data.optionTemplate) {\r\n                        <ng-container *ngTemplateOutlet=\"_data.optionTemplate; context: { $implicit: option }\"></ng-container>\r\n                    } @else {\r\n                        {{_data.config.displayedLabel(option)}}\r\n                    }\r\n                </mat-list-option>\r\n                @if(!last) {\r\n                    <mat-divider />\r\n                }\r\n            }\r\n        </mat-selection-list>\r\n    </div> \r\n\r\n\r\n    <div class=\"footer\">\r\n        @if(_data.multiple) {\r\n            <div class=\"length\">\r\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\r\n            </div>\r\n            <div class=\"actions\">\r\n                @if(selectedsOptions().length > 0) {\r\n                    <button matButton (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\r\n                }\r\n                <button matButton=\"filled\" color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\r\n            </div>\r\n        } @else {\r\n            <div class=\"length\">\r\n                {{ total() }} {{ _data.itemsLabel }}\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .optionsContainer .no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#666;text-align:center}.bottomSheetContainer .optionsContainer .no-results mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.bottomSheetContainer .optionsContainer .no-results p{margin:0;font-size:16px}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--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)}:root{--mat-list-list-item-one-line-container-height: auto;--mat-list-list-item-two-line-container-height: auto;--mat-list-list-item-three-line-container-height: auto}@media (max-width: 960px){:host{min-width:auto}}\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: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i9.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSelectBottomSheetComponent, isStandalone: true, selector: "paginated-select-bottom-sheet", viewQueries: [{ propertyName: "selectionList", first: true, predicate: ["selectionList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bottomSheetContainer\">\r\n    <div class=\"header\">\r\n        @if(_data.title) {\r\n            <div class=\"title\">\r\n                {{ _data.title }}\r\n            </div>\r\n        }\r\n        @if(!_data.hideFilter) {\r\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\r\n                <mat-icon matPrefix>search</mat-icon>\r\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" [value]=\"queryInput()\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\r\n                @if(searchInput.value.length > 0) {\r\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                }\r\n            </mat-form-field>\r\n        \r\n            <mat-chip-listbox [multiple]=\"false\">\r\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\r\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\r\n                }\r\n            </mat-chip-listbox>\r\n        }\r\n\r\n        @if(_data.extraFiltersTemplate) {\r\n            <br />\r\n            <ng-container *ngTemplateOutlet=\"_data.extraFiltersTemplate;\"></ng-container>\r\n        }\r\n    </div>\r\n    <div>\r\n        @if(isLoading()) {\r\n            <mat-progress-bar mode=\"indeterminate\" />\r\n        }\r\n    </div>\r\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\r\n        <mat-selection-list #selectionList [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\r\n            @if(options().length === 0 && !isLoading()) {\r\n                <div class=\"no-results\">\r\n                    <mat-icon>search_off</mat-icon>\r\n                    <p>{{ _data.noResultsMessage }}</p>\r\n                </div>\r\n            }\r\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\r\n                <mat-list-option \r\n                    [value]=\"option[_data.config.valueKey]\"\r\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\r\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\r\n                >\r\n                    @if(_data.optionTemplate) {\r\n                        <ng-container *ngTemplateOutlet=\"_data.optionTemplate; context: { $implicit: option }\"></ng-container>\r\n                    } @else {\r\n                        {{_data.config.displayedLabel(option)}}\r\n                    }\r\n                </mat-list-option>\r\n                @if(!last) {\r\n                    <mat-divider />\r\n                }\r\n            }\r\n        </mat-selection-list>\r\n    </div> \r\n\r\n\r\n    <div class=\"footer\">\r\n        @if(_data.multiple) {\r\n            <div class=\"length\">\r\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\r\n            </div>\r\n            <div class=\"actions\">\r\n                @if(selectedsOptions().length > 0) {\r\n                    <button matButton (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\r\n                }\r\n                <button matButton=\"filled\" color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\r\n            </div>\r\n        } @else {\r\n            <div class=\"length\">\r\n                {{ total() }} {{ _data.itemsLabel }}\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .optionsContainer .no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#666;text-align:center}.bottomSheetContainer .optionsContainer .no-results mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.bottomSheetContainer .optionsContainer .no-results p{margin:0;font-size:16px}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--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)}:root{--mat-list-list-item-one-line-container-height: auto;--mat-list-list-item-two-line-container-height: auto;--mat-list-list-item-three-line-container-height: auto}@media (max-width: 960px){:host{min-width:auto}}\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: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i9.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSelectBottomSheetComponent, decorators: [{
             type: Component,
@@ -614,7 +614,7 @@ class NgxPaginatedSelect {
         this._cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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 }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, multipleItemsLabel: { classPropertyName: "multipleItemsLabel", publicName: "multipleItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", 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 }, hideChips: { classPropertyName: "hideChips", publicName: "hideChips", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", valueChange: "valueChange" }, viewQueries: [{ propertyName: "extraFiltersTemplate", first: true, predicate: ["extraFiltersTemplate"], descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(hideChips()) {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-select \r\n            #matSelect\r\n            [formControl]=\"control()\"\r\n            [multiple]=\"multiple()\"\r\n            class=\"clickable-input\"\r\n            (openedChange)=\"preventOpening($event)\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-option [value]=\"item[config().valueKey]\">\r\n                    {{ config().displayedLabel(item) }}\r\n                </mat-option>\r\n            }\r\n        </mat-select>\r\n        <div matSuffix>\r\n            @if(clearable() && control()?.value) {\r\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            }\r\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        </div>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n} @else {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-chip-grid \r\n            #chipGrid \r\n            class=\"chips-grid\" \r\n            [formControl]=\"control()\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-chip-row\r\n                    (removed)=\"onChipRemoved(item)\"\r\n                    class=\"chip-item\"\r\n                >\r\n                    {{ config().displayedLabel(item) }}\r\n                    <button matChipRemove>\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\r\n        <input \r\n            matInput\r\n            [matChipInputFor]=\"chipGrid\"\r\n            style=\"display: none\"\r\n        />\r\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n<ng-template #extraFiltersTemplate>\r\n    <ng-content select=\"[extra-filters]\" />\r\n</ng-template>", styles: [":host{display:block;height:100%}mat-form-field{width:100%;cursor:pointer}:host ::ng-deep mat-select .mat-mdc-select-arrow-wrapper{display:none}.clickable-input{cursor:pointer!important;pointer-events:none}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}mat-form-field{--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)}\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: MatBottomSheetModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.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: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", 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 }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, multipleItemsLabel: { classPropertyName: "multipleItemsLabel", publicName: "multipleItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", 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 }, hideChips: { classPropertyName: "hideChips", publicName: "hideChips", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", valueChange: "valueChange" }, viewQueries: [{ propertyName: "extraFiltersTemplate", first: true, predicate: ["extraFiltersTemplate"], descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(hideChips()) {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-select \r\n            #matSelect\r\n            [formControl]=\"control()\"\r\n            [multiple]=\"multiple()\"\r\n            class=\"clickable-input\"\r\n            (openedChange)=\"preventOpening($event)\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-option [value]=\"item[config().valueKey]\">\r\n                    {{ config().displayedLabel(item) }}\r\n                </mat-option>\r\n            }\r\n        </mat-select>\r\n        <div matSuffix>\r\n            @if(clearable() && control()?.value) {\r\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            }\r\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        </div>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n} @else {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-chip-grid \r\n            #chipGrid \r\n            class=\"chips-grid\" \r\n            [formControl]=\"control()\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-chip-row\r\n                    (removed)=\"onChipRemoved(item)\"\r\n                    class=\"chip-item\"\r\n                >\r\n                    {{ config().displayedLabel(item) }}\r\n                    <button matChipRemove>\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\r\n        <input \r\n            matInput\r\n            [matChipInputFor]=\"chipGrid\"\r\n            style=\"display: none\"\r\n        />\r\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n<ng-template #extraFiltersTemplate>\r\n    <ng-content select=\"[extra-filters]\" />\r\n</ng-template>", styles: [":host{display:block;height:100%}mat-form-field{width:100%;cursor:pointer}:host ::ng-deep mat-select .mat-mdc-select-arrow-wrapper{display:none}.clickable-input{cursor:pointer!important;pointer-events:none}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}mat-form-field{--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)}\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: MatBottomSheetModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
             type: Component,
@@ -698,7 +698,7 @@ class NgxDialog {
         this._dialogRef.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", ngImport: i0, template: "<h2 mat-dialog-title class=\"title\">\r\n    {{ title }}\r\n    @if(icon) {\r\n        <mat-icon \r\n            [style.color]=\"iconColor\"\r\n            class=\"icon\"\r\n        >\r\n            {{ icon }}\r\n        </mat-icon>\r\n    }\r\n</h2>\r\n<mat-dialog-content>\r\n    @if(subtitle) {\r\n        <p class=\"subtitle\">{{ subtitle }}</p>\r\n        <mat-divider />\r\n    }\r\n\r\n    <div class=\"content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p>{{ body.content }}</p>\r\n            }\r\n            @case (DialogBodyType.HTML) {\r\n                <div [innerHTML]=\"body.content\"></div>\r\n            }\r\n            @case (DialogBodyType.COMPONENT) {\r\n                <ng-container \r\n                    ngxDynamicHost \r\n                    [component]=\"$any(body.content)\"\r\n                    [data]=\"body.data\"\r\n                />\r\n            }\r\n            @case (DialogBodyType.TEMPLATE) {\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"$any(body.content)\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n    @if(showCancel) {\r\n        <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n            {{ cancelText }}\r\n        </button>\r\n    }\r\n    @if(showConfirm) {\r\n        <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n            {{ confirmText }}\r\n        </button>\r\n    }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxDialog, isStandalone: true, selector: "ngx-dialog", ngImport: i0, template: "<h2 mat-dialog-title class=\"title\">\r\n    {{ title }}\r\n    @if(icon) {\r\n        <mat-icon \r\n            [style.color]=\"iconColor\"\r\n            class=\"icon\"\r\n        >\r\n            {{ icon }}\r\n        </mat-icon>\r\n    }\r\n</h2>\r\n<mat-dialog-content>\r\n    @if(subtitle) {\r\n        <p class=\"subtitle\">{{ subtitle }}</p>\r\n        <mat-divider />\r\n    }\r\n\r\n    <div class=\"content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p>{{ body.content }}</p>\r\n            }\r\n            @case (DialogBodyType.HTML) {\r\n                <div [innerHTML]=\"body.content\"></div>\r\n            }\r\n            @case (DialogBodyType.COMPONENT) {\r\n                <ng-container \r\n                    ngxDynamicHost \r\n                    [component]=\"$any(body.content)\"\r\n                    [data]=\"body.data\"\r\n                />\r\n            }\r\n            @case (DialogBodyType.TEMPLATE) {\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"$any(body.content)\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n    @if(showCancel) {\r\n        <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n            {{ cancelText }}\r\n        </button>\r\n    }\r\n    @if(showConfirm) {\r\n        <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n            {{ confirmText }}\r\n        </button>\r\n    }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicHostDirective, selector: "[ngxDynamicHost]", inputs: ["component", "data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxDialog, decorators: [{
             type: Component,
@@ -714,19 +714,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ], template: "<h2 mat-dialog-title class=\"title\">\r\n    {{ title }}\r\n    @if(icon) {\r\n        <mat-icon \r\n            [style.color]=\"iconColor\"\r\n            class=\"icon\"\r\n        >\r\n            {{ icon }}\r\n        </mat-icon>\r\n    }\r\n</h2>\r\n<mat-dialog-content>\r\n    @if(subtitle) {\r\n        <p class=\"subtitle\">{{ subtitle }}</p>\r\n        <mat-divider />\r\n    }\r\n\r\n    <div class=\"content\">\r\n        @switch (body.type) {\r\n            @case (DialogBodyType.TEXT) {\r\n                <p>{{ body.content }}</p>\r\n            }\r\n            @case (DialogBodyType.HTML) {\r\n                <div [innerHTML]=\"body.content\"></div>\r\n            }\r\n            @case (DialogBodyType.COMPONENT) {\r\n                <ng-container \r\n                    ngxDynamicHost \r\n                    [component]=\"$any(body.content)\"\r\n                    [data]=\"body.data\"\r\n                />\r\n            }\r\n            @case (DialogBodyType.TEMPLATE) {\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"$any(body.content)\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: body.data }\"\r\n                />\r\n            }\r\n        }\r\n    </div>\r\n\r\n</mat-dialog-content>\r\n<mat-dialog-actions align=\"end\" class=\"matDialogActionsCustomGap\">\r\n    @if(showCancel) {\r\n        <button matButton=\"outlined\" (click)=\"onCancelClick()\">\r\n            {{ cancelText }}\r\n        </button>\r\n    }\r\n    @if(showConfirm) {\r\n        <button matButton=\"filled\" (click)=\"onConfirmClick()\">\r\n            {{ confirmText }}\r\n        </button>\r\n    }\r\n</mat-dialog-actions>\r\n", styles: [":host{display:block}h2{display:flex;align-items:center;font-weight:600;padding:8px 16px;gap:8px}mat-icon{min-width:28px;min-height:28px;font-size:28px}.subtitle{font-weight:400;font-size:14px;color:#0009;margin-top:-4px}.matDialogActionsCustomGap{gap:.25rem}\n"] }]
         }] });
 
-class NgxPaginatedTableIntl {
+class NgxTablesIntl {
     /**
      * Stream que emite cuando las etiquetas cambian.
      * Los componentes deben reaccionar a estos cambios.
      */
     changes = new Subject();
+    // ========================================
+    // === NGX-PAGINATED-TABLE ===
+    // ========================================
     // === Botones de acciones ===
     /** Etiqueta del botón de crear/nuevo */
     createButtonLabel = 'Nuevo';
     /** Tooltip del botón de editar */
     editTooltip = 'Editar';
     /** Tooltip del botón de eliminar */
-    deleteTooltip = 'Elminar';
+    deleteTooltip = 'Eliminar';
     /** Etiqueta del botón de confirmar eliminación */
     confirmDeleteLabel = 'Eliminar';
     // === Búsqueda y filtros ===
@@ -735,7 +738,7 @@ class NgxPaginatedTableIntl {
     /** Tooltip del botón de limpiar búsqueda */
     clearSearchTooltip = 'Limpiar búsqueda';
     /** Tooltip del botón de editar columnas */
-    editColumnsTooltip = 'Visualizar y ordernar columnas';
+    editColumnsTooltip = 'Visualizar y ordenar columnas';
     /** Etiqueta para filtros avanzados */
     advancedFiltersLabel = 'Filtros avanzados';
     /** Etiqueta para nuevo filtro avanzado */
@@ -773,7 +776,7 @@ class NgxPaginatedTableIntl {
     exitFullscreenTooltip = 'Salir del modo de pantalla completa';
     // === Mensajes ===
     /** Mensaje cuando no hay datos */
-    noDataMessage = 'No se han encontrado resultados... ';
+    noDataMessage = 'No se han encontrado resultados...';
     /** Mensaje mientras se cargan los datos */
     loadingMessage = 'Cargando...';
     /** Título del diálogo de confirmación de eliminación por defecto */
@@ -802,46 +805,6 @@ class NgxPaginatedTableIntl {
     totalPerPageLabel = 'Total parcial (por página)';
     /** Etiqueta para total general */
     totalGeneralLabel = 'Total (todos los registros)';
-    /**
-     * Función para obtener el mensaje de confirmación de eliminación
-     * @param itemName Nombre del elemento a eliminar (opcional)
-     */
-    getDeleteConfirmMessage(itemName) {
-        if (itemName) {
-            return `Vas a eliminar '${itemName}'. ¿Estas seguro?`;
-        }
-        return this.deleteConfirmBody;
-    }
-    /**
-     * Función para obtener el mensaje de eliminación de filtro avanzado
-     * @param filterName Nombre del filtro
-     */
-    getDeleteAdvancedFilterMessage(filterName) {
-        return `Vas a eliminar la plantilla de filtro avanzado '${filterName}'. ¿Estas seguro?`;
-    }
-    /**
-     * Función para obtener el tooltip de editar filtro avanzado con nombre
-     * @param filterName Nombre del filtro
-     */
-    getEditAdvancedFilterTooltip(filterName) {
-        return `Editar '${filterName}'`;
-    }
-    /**
-     * Función para obtener el tooltip de eliminar filtro avanzado con nombre
-     * @param filterName Nombre del filtro
-     */
-    getDeleteAdvancedFilterTooltip(filterName) {
-        return `Eliminar '${filterName}'`;
-    }
-    /**
-     * Función para obtener el label de elementos seleccionados
-     * @param count Número de elementos seleccionados
-     */
-    getSelectedItemsLabel(count) {
-        return count === 1
-            ? `${count} elemento seleccionado`
-            : `${count} elementos seleccionados`;
-    }
     // === Diálogos ===
     /** Botón de cancelar en diálogos */
     cancelButtonLabel = 'Cancelar';
@@ -882,9 +845,9 @@ class NgxPaginatedTableIntl {
     /** Título de ayuda de filtros avanzados */
     advancedFiltersHelpTitle = 'Uso de filtros avanzados';
     /** Texto de ayuda sobre grupos */
-    advancedFiltersGroupHelp = 'Un conjunto de filtros que se evalúan juntos. Todos los filtros dentro de un grupo usan el mismo conector ("Y" u "O"). Cada rectangula representa un grupo y dentro de ellos puede haber filtros u otros grupos';
+    advancedFiltersGroupHelp = 'Un conjunto de filtros que se evalúan juntos. Todos los filtros dentro de un grupo usan el mismo conector (“Y” u “O”). Cada rectángulo representa un grupo y dentro de ellos puede haber filtros u otros grupos';
     /** Texto de ayuda sobre filtros */
-    advancedFiltersRuleHelp = 'Una regla individual que compara un campo con un valor (por ejemplo: "Precio > 100")';
+    advancedFiltersRuleHelp = 'Una regla individual que compara un campo con un valor (por ejemplo: “Precio > 100”)';
     /** Label de grupo en ayuda */
     groupLabel = 'Grupo:';
     /** Label de filtro en ayuda */
@@ -933,10 +896,70 @@ class NgxPaginatedTableIntl {
     operatorLessOrEquals = 'Menor o igual que';
     /** Operador contiene */
     operatorLike = 'Contiene';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTableIntl, providedIn: 'root' });
+    // ========================================
+    // === NGX-SEARCHABLE-SELECT ===
+    // ========================================
+    /** Mensaje cuando no hay resultados en select */
+    noResultsMessage = 'No se han encontrado resultados...';
+    // ========================================
+    // === NGX-PAGINATED-SEARCHABLE-SELECT ===
+    // ========================================
+    /** Etiqueta del botón de ver más resultados */
+    showMoreLabel = 'Ver más';
+    // ========================================
+    // === FUNCIONES AUXILIARES ===
+    // ========================================
+    /**
+     * Función para obtener el mensaje de confirmación de eliminación
+     * @param itemName Nombre del elemento a eliminar (opcional)
+     */
+    getDeleteConfirmMessage(itemName) {
+        if (itemName) {
+            return `Vas a eliminar '${itemName}'. ¿Estas seguro?`;
+        }
+        return this.deleteConfirmBody;
+    }
+    /**
+     * Función para obtener el mensaje de eliminación de filtro avanzado
+     * @param filterName Nombre del filtro
+     */
+    getDeleteAdvancedFilterMessage(filterName) {
+        return `Vas a eliminar la plantilla de filtro avanzado '${filterName}'. ¿Estas seguro?`;
+    }
+    /**
+     * Función para obtener el tooltip de editar filtro avanzado con nombre
+     * @param filterName Nombre del filtro
+     */
+    getEditAdvancedFilterTooltip(filterName) {
+        return `Editar '${filterName}'`;
+    }
+    /**
+     * Función para obtener el tooltip de eliminar filtro avanzado con nombre
+     * @param filterName Nombre del filtro
+     */
+    getDeleteAdvancedFilterTooltip(filterName) {
+        return `Eliminar '${filterName}'`;
+    }
+    /**
+     * Función para obtener el label de elementos seleccionados
+     * @param count Número de elementos seleccionados
+     */
+    getSelectedItemsLabel(count) {
+        return count === 1
+            ? `${count} elemento seleccionado`
+            : `${count} elementos seleccionados`;
+    }
+    /**
+     * Función para obtener el texto de quitar selección en selects
+     * @param optionName Nombre de la opción (opcional)
+     */
+    getRemoveOptionText(optionName) {
+        return `-- Quitar ${optionName} --`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTablesIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTablesIntl, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTableIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxTablesIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -944,9 +967,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class NgxConfirmDialogComponent {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
-    intl = inject(NgxPaginatedTableIntl);
+    intl = inject(NgxTablesIntl);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxConfirmDialogComponent, isStandalone: true, selector: "ngx-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content>\r\n    @if(data.body) {\r\n        <p>{{data.body}}</p>\r\n    }\r\n    \r\n    @if (data.template) {\r\n        <ng-container *ngTemplateOutlet=\"data.template; context: { $implicit: data.row }\"></ng-container>\r\n    }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"false\">{{ data.denyButtonLabel ?? intl.cancelButtonLabel }}</button>\r\n    <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? intl.confirmButtonLabel }}</button>\r\n</mat-dialog-actions>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxConfirmDialogComponent, isStandalone: true, selector: "ngx-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\r\n<mat-dialog-content>\r\n    @if(data.body) {\r\n        <p>{{data.body}}</p>\r\n    }\r\n    \r\n    @if (data.template) {\r\n        <ng-container *ngTemplateOutlet=\"data.template; context: { $implicit: data.row }\"></ng-container>\r\n    }\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"false\">{{ data.denyButtonLabel ?? intl.cancelButtonLabel }}</button>\r\n    <button matButton [mat-dialog-close]=\"true\">{{ data.confirmButtonLabel ?? intl.confirmButtonLabel }}</button>\r\n</mat-dialog-actions>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxConfirmDialogComponent, decorators: [{
             type: Component,
@@ -1473,7 +1496,7 @@ class ConfigureTableColumnsComponent {
     columnConfigService = inject(ColumnConfigService);
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
-    intl = inject(NgxPaginatedTableIntl);
+    intl = inject(NgxTablesIntl);
     columns = signal(this.data.columns, ...(ngDevMode ? [{ debugName: "columns" }] : []));
     isConfirmDisabled = computed(() => {
         const allDisabled = this.columns().every(column => !column.show);
@@ -1566,7 +1589,7 @@ class ConfigureTableColumnsComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureTableColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigureTableColumnsComponent, isStandalone: true, selector: "lib-configure-table-columns", ngImport: i0, template: "<h2 mat-dialog-title>{{intl.configureColumnsTitle}} {{data.tableName| lowercase}}</h2>\r\n<mat-dialog-content>\r\n\r\n    <div class=\"columnsList\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n        @for (column of columns(); track $index;  let first = $first; let last = $last;) {\r\n            <div \r\n                class=\"columnContainer\" \r\n                cdkDrag \r\n                [class.pinned]=\"$index == animationIndex()\"\r\n                [style]=\"{ transition: `background-color ${animationTime}ms ease` }\">\r\n\r\n                <div class=\"labelContainer\">\r\n                    <mat-icon>drag_indicator</mat-icon>\r\n                    <p class=\"label\">\r\n                        {{data.columnsLabels[column.key] ?? ''}}\r\n                        @if(hasFilterAndDisabled(column)) {\r\n                            <span> {{intl.hasFiltersAppliedText}}</span>\r\n                        }\r\n                    </p>\r\n                </div>\r\n\r\n                <div class=\"actions\">\r\n                    <button \r\n                        matIconButton\r\n                        [matTooltip]=\"column.isSticky ? intl.unpinColumnTooltip : intl.pinColumnTooltip\"\r\n                        (click)=\"onPinClick(column, $index)\">\r\n                        <mat-icon>{{column.isSticky ? 'keep_off' : 'keep'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <button [matTooltip]=\"intl.moveUpTooltip\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n                    <button [matTooltip]=\"intl.moveDownTooltip\" matIconButton [disabled]=\"$last\" (click)=\"onDownClick($index)\"><mat-icon>keyboard_arrow_down</mat-icon></button>\r\n                    <mat-slide-toggle [checked]=\"column.show\" (toggleChange)=\"onToggleChange(column)\"></mat-slide-toggle>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <p class=\"note\"><span>{{intl.noteLabel}}</span> {{intl.hideColumnWithFiltersNote}}</p>\r\n    \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n  <button matButton (click)=\"onResetClick()\">{{intl.resetColumnsButtonLabel}}</button>\r\n  <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{intl.confirmButtonLabel}}</button>\r\n</mat-dialog-actions>", styles: [".columnsList{display:flex;flex-direction:column;cursor:grab}.columnContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface);padding:4px 10px}p{margin:0}.label span{font:var(--mat-sys-label-small);color:var(--mat-sys-error);font-weight:400;font-style:italic}.labelContainer,.actions{display:flex;flex-direction:row;align-items:center;gap:10px}.note{margin-top:20px;font-style:italic;font:var(--mat-sys-body-small);font-weight:300;width:100%;text-align:center}.note span{font-weight:500}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer:last-child{border:none}.columnsList.cdk-drop-list-dragging .columnContainer:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer.pinned{background-color:#ffeb3b4d;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigureTableColumnsComponent, isStandalone: true, selector: "lib-configure-table-columns", ngImport: i0, template: "<h2 mat-dialog-title>{{intl.configureColumnsTitle}} {{data.tableName| lowercase}}</h2>\r\n<mat-dialog-content>\r\n\r\n    <div class=\"columnsList\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n        @for (column of columns(); track $index;  let first = $first; let last = $last;) {\r\n            <div \r\n                class=\"columnContainer\" \r\n                cdkDrag \r\n                [class.pinned]=\"$index == animationIndex()\"\r\n                [style]=\"{ transition: `background-color ${animationTime}ms ease` }\">\r\n\r\n                <div class=\"labelContainer\">\r\n                    <mat-icon>drag_indicator</mat-icon>\r\n                    <p class=\"label\">\r\n                        {{data.columnsLabels[column.key] ?? ''}}\r\n                        @if(hasFilterAndDisabled(column)) {\r\n                            <span> {{intl.hasFiltersAppliedText}}</span>\r\n                        }\r\n                    </p>\r\n                </div>\r\n\r\n                <div class=\"actions\">\r\n                    <button \r\n                        matIconButton\r\n                        [matTooltip]=\"column.isSticky ? intl.unpinColumnTooltip : intl.pinColumnTooltip\"\r\n                        (click)=\"onPinClick(column, $index)\">\r\n                        <mat-icon>{{column.isSticky ? 'keep_off' : 'keep'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <button [matTooltip]=\"intl.moveUpTooltip\" matIconButton [disabled]=\"$first\" (click)=\"onUpClick($index)\"><mat-icon>keyboard_arrow_up</mat-icon></button>\r\n                    <button [matTooltip]=\"intl.moveDownTooltip\" matIconButton [disabled]=\"$last\" (click)=\"onDownClick($index)\"><mat-icon>keyboard_arrow_down</mat-icon></button>\r\n                    <mat-slide-toggle [checked]=\"column.show\" (toggleChange)=\"onToggleChange(column)\"></mat-slide-toggle>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <p class=\"note\"><span>{{intl.noteLabel}}</span> {{intl.hideColumnWithFiltersNote}}</p>\r\n    \r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n  <button matButton (click)=\"onResetClick()\">{{intl.resetColumnsButtonLabel}}</button>\r\n  <button matButton [disabled]=\"isConfirmDisabled()\" (click)=\"onConfirmClick()\">{{intl.confirmButtonLabel}}</button>\r\n</mat-dialog-actions>", styles: [".columnsList{display:flex;flex-direction:column;cursor:grab}.columnContainer{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface);padding:4px 10px}p{margin:0}.label span{font:var(--mat-sys-label-small);color:var(--mat-sys-error);font-weight:400;font-style:italic}.labelContainer,.actions{display:flex;flex-direction:row;align-items:center;gap:10px}.note{margin-top:20px;font-style:italic;font:var(--mat-sys-body-small);font-weight:300;width:100%;text-align:center}.note span{font-weight:500}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer:last-child{border:none}.columnsList.cdk-drop-list-dragging .columnContainer:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.columnContainer.pinned{background-color:#ffeb3b4d;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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$1.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,
@@ -1586,6 +1609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }] });
 
 class PaginatedSearchableSelectComponent {
+    // Inyectar el servicio de internacionalización (opcional para permitir override)
+    intl;
     control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
     endpoint = input.required(...(ngDevMode ? [{ debugName: "endpoint" }] : []));
     filters = input(signal({
@@ -1606,7 +1631,7 @@ class PaginatedSearchableSelectComponent {
         throw new Error("Si el option no es de tipo FilterOption, es necesario especeficar el input optionLabel");
     }, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    searchInputPlaceholder = input('Buscar...', ...(ngDevMode ? [{ debugName: "searchInputPlaceholder" }] : []));
+    searchInputPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchInputPlaceholder" }] : []));
     selectLabel = input(...(ngDevMode ? [undefined, { debugName: "selectLabel" }] : []));
     selectPlaceholder = input('', ...(ngDevMode ? [{ debugName: "selectPlaceholder" }] : []));
     clearableOptionLabel = input(...(ngDevMode ? [undefined, { debugName: "clearableOptionLabel" }] : []));
@@ -1621,6 +1646,9 @@ class PaginatedSearchableSelectComponent {
     innerControl = signal(new FormControl(undefined), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
     queryTimeout = undefined;
     debounceTime = 300;
+    constructor(intl) {
+        this.intl = intl ?? inject(NgxTablesIntl);
+    }
     selectedEffect = effect(() => {
         const selected = this.selected();
         const control = this.control();
@@ -1724,8 +1752,8 @@ 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() }}</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>-- Quitar {{ 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\">No se han encontrado resultados...</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                    Ver m\u00E1s\r\n            </button>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.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: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, deps: [{ token: NgxTablesIntl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSearchableSelectComponent, isStandalone: true, selector: "ngx-paginated-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{ selectLabel() }}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\"\r\n        [compareWith]=\"compareWith()\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\"\r\n                [value]=\"filters()().query ?? ''\" \r\n                (input)=\"onQueryChange()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\" />\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option [value]=\"option\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Es MUY importante que estos vayan los ultimos (al final de todas las opciones). -->\r\n        @for (option of optionsSelectedForView(); track $index) {\r\n            <mat-option [value]=\"option\" class=\"hideOption\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Si es multiple, como no esta el option de resetear, si filtran y no hay opciones, y luego cierran el select el desplegable no se abre y queda inutilizado, por eso, ponemos esta opcion dummy, que siempre esta oculta, y no hace nada, pero ya hace que haya un item, y el desplegable se abra -->\r\n        @if(multiple()) {\r\n            <mat-option class=\"hideOption\" dummyOption></mat-option>\r\n        }\r\n\r\n        @if (total() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n\r\n        @if((filters()().pageNumber * filters()().pageSize) < total() && !dataResource.isLoading()) {\r\n            <button matButton=\"text\" class=\"showMore\" (click)=\"onMoreClick()\">\r\n                {{ intl.showMoreLabel }}\r\n            </button>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSearchableSelectComponent, decorators: [{
             type: Component,
@@ -1738,10 +1766,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() }}</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>-- Quitar {{ 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\">No se han encontrado resultados...</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                    Ver m\u00E1s\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        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\"\r\n        [compareWith]=\"compareWith()\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\"\r\n                [value]=\"filters()().query ?? ''\" \r\n                (input)=\"onQueryChange()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\" />\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option [value]=\"option\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Es MUY importante que estos vayan los ultimos (al final de todas las opciones). -->\r\n        @for (option of optionsSelectedForView(); track $index) {\r\n            <mat-option [value]=\"option\" class=\"hideOption\">\r\n                    {{ optionLabel()(option) }}\r\n            </mat-option>\r\n        }\r\n\r\n        <!-- Si es multiple, como no esta el option de resetear, si filtran y no hay opciones, y luego cierran el select el desplegable no se abre y queda inutilizado, por eso, ponemos esta opcion dummy, que siempre esta oculta, y no hace nada, pero ya hace que haya un item, y el desplegable se abra -->\r\n        @if(multiple()) {\r\n            <mat-option class=\"hideOption\" dummyOption></mat-option>\r\n        }\r\n\r\n        @if (total() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n\r\n        @if((filters()().pageNumber * filters()().pageSize) < total() && !dataResource.isLoading()) {\r\n            <button matButton=\"text\" class=\"showMore\" (click)=\"onMoreClick()\">\r\n                {{ intl.showMoreLabel }}\r\n            </button>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{ error() }}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}mat-progress-bar{position:sticky;top:48px;z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}.showMore{width:calc(100% - 32px);margin:4px 16px 0}\n"] }]
+        }], ctorParameters: () => [{ type: NgxTablesIntl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], selectPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPlaceholder", required: false }] }], clearableOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableOptionLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], searcher: [{ type: i0.ViewChild, args: ['htmlSearcher', { isSignal: true }] }] } });
 
 class SearchableSelectComponent {
+    // Inyectar el servicio de internacionalización (opcional para permitir override)
+    intl;
     control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input((option) => {
@@ -1755,7 +1787,7 @@ class SearchableSelectComponent {
         throw new Error("Si el option no es de tipo FilterOption, es necesario especeficar el input optionValue");
     }, ...(ngDevMode ? [{ debugName: "optionValue" }] : []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    searchInputPlaceholder = input('Buscar...', ...(ngDevMode ? [{ debugName: "searchInputPlaceholder" }] : []));
+    searchInputPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchInputPlaceholder" }] : []));
     selectLabel = input(...(ngDevMode ? [undefined, { debugName: "selectLabel" }] : []));
     selectPlaceholder = input('', ...(ngDevMode ? [{ debugName: "selectPlaceholder" }] : []));
     clearableOptionLabel = input(...(ngDevMode ? [undefined, { debugName: "clearableOptionLabel" }] : []));
@@ -1768,6 +1800,9 @@ class SearchableSelectComponent {
     optionChange = output();
     searcher = viewChild('htmlSearcher', ...(ngDevMode ? [{ debugName: "searcher" }] : []));
     innerControl = signal(new FormControl(undefined), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
+    constructor(intl) {
+        this.intl = intl ?? inject(NgxTablesIntl);
+    }
     selectedEffect = effect(() => {
         const selected = this.selected();
         const control = this.control();
@@ -1821,8 +1856,8 @@ 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()}}</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>-- Quitar {{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\">No se han encontrado resultados...</p>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchableSelectComponent, deps: [{ token: NgxTablesIntl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SearchableSelectComponent, isStandalone: true, selector: "ngx-searchable-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchInputPlaceholder: { classPropertyName: "searchInputPlaceholder", publicName: "searchInputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearableOptionLabel: { classPropertyName: "clearableOptionLabel", publicName: "clearableOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionChange: "optionChange" }, viewQueries: [{ propertyName: "searcher", first: true, predicate: ["htmlSearcher"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (selectLabel()) {\r\n        <mat-label>{{selectLabel()}}</mat-label>\r\n    }\r\n\r\n    <mat-select\r\n        [formControl]=\"innerControl()\"\r\n        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option \r\n                [value]=\"optionValue()(option)\"\r\n                [class.hideOption]=\"!showOption(option)\">\r\n                    {{optionLabel()(option)}}\r\n            </mat-option>\r\n        }\r\n\r\n        @if (numberOfResults() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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,
@@ -1834,14 +1869,16 @@ 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()}}</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>-- Quitar {{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\">No se han encontrado resultados...</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        [multiple]=\"multiple()\"\r\n        (openedChange)=\"openedChange($event)\" \r\n        [placeholder]=\"selectPlaceholder()\"\r\n        panelClass=\"searchableSelectPanelClass\"\r\n        (selectionChange)=\"onOptionChange($event)\">\r\n\r\n        <div class=\"searcherContainer\">\r\n            <mat-icon class=\"searchIcon\">search</mat-icon>\r\n\r\n            @if (htmlSearcher.value.length == 0) {\r\n                <span>{{ searchInputPlaceholder() || intl.searchPlaceholder }}</span>                \r\n            }\r\n\r\n            <input \r\n                #htmlSearcher \r\n                type=\"text\" \r\n                matInput \r\n                (keydown)=\"$event.stopPropagation()\">\r\n\r\n            @if (htmlSearcher.value.length > 0) {\r\n                <button mat-icon-button (click)=\"cleanQuery()\"><mat-icon>close</mat-icon></button>\r\n            }\r\n        </div>\r\n\r\n        @if(clearable() && !multiple()) {\r\n            <mat-option>{{ intl.getRemoveOptionText(getClearableOptionName()) }}</mat-option>\r\n        }\r\n        \r\n        @for (option of options(); track $index) {\r\n            <mat-option \r\n                [value]=\"optionValue()(option)\"\r\n                [class.hideOption]=\"!showOption(option)\">\r\n                    {{optionLabel()(option)}}\r\n            </mat-option>\r\n        }\r\n\r\n        @if (numberOfResults() == 0) {\r\n            <p class=\"withoutResults\">{{ intl.noResultsMessage }}</p>\r\n        }\r\n    </mat-select>\r\n\r\n    <mat-error>{{error()}}</mat-error>\r\n</mat-form-field>", styles: [":host{display:inline-flex}mat-form-field{width:100%}.searcherContainer{height:48px;position:sticky;top:0;left:0;right:0;background:var(--mat-sys-surface-container);z-index:10}.searcherContainer input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center;color:#888}.searcherContainer span{line-height:48px;position:absolute;left:48px;color:#888}.searcherContainer button{position:absolute;height:48px;width:48px;top:0;right:0;display:flex;align-items:center;justify-content:center}.hideOption{display:none}.withoutResults{color:#888;text-align:center;padding:0 16px;width:calc(100% - 32px)}\n"] }]
+        }], ctorParameters: () => [{ type: NgxTablesIntl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchInputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputPlaceholder", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], selectPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPlaceholder", required: false }] }], clearableOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableOptionLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], optionChange: [{ type: i0.Output, args: ["optionChange"] }], searcher: [{ type: i0.ViewChild, args: ['htmlSearcher', { isSignal: true }] }] } });
 
 class AdvancedFilterRuleComponent {
     rule = input.required(...(ngDevMode ? [{ debugName: "rule" }] : []));
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
     deleteFilter = output();
-    intl = inject(NgxPaginatedTableIntl);
+    intl = inject(NgxTablesIntl);
     columns = computed(() => this.config().columns.filter(column => column.filterType != undefined), ...(ngDevMode ? [{ debugName: "columns" }] : []));
     operatorByFilterType = OPERATOR_BY_FILTER_TYPE;
     filterOperatorLabel = computed(() => ({
@@ -1892,7 +1929,7 @@ class AdvancedFilterRuleComponent {
     operatorOptionLabel = (filterOperator) => this.filterOperatorLabel()[filterOperator];
     operatorOptionValue = (filterOperator) => filterOperator;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterRuleComponent, isStandalone: true, selector: "lib-advanced-filter-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteFilter: "deleteFilter" }, ngImport: i0, template: "<button \r\n    matIconButton \r\n    [matTooltip]=\"intl.deleteFilterTooltip\" \r\n    (click)=\"deleteFilter.emit(getRuleId())\"\r\n    class=\"deleteButton\"\r\n    type=\"button\">\r\n    <mat-icon>delete</mat-icon>\r\n</button>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getKey()\"\r\n    [options]=\"columns()\"\r\n    [optionLabel]=\"keyOptionLabel\"\r\n    [optionValue]=\"keyOptionValue\"\r\n    (optionChange)=\"onKeyChange($event)\"\r\n    [selectLabel]=\"intl.fieldLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getOperator()\"\r\n    [options]=\"getOperatorsOption(getKey().value)\"\r\n    [optionLabel]=\"operatorOptionLabel\"\r\n    [optionValue]=\"operatorOptionValue\"\r\n    [selectLabel]=\"intl.conditionLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\r\n    @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\r\n        <ngx-paginated-searchable-select \r\n            [control]=\"getValue()\"\r\n            [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\r\n            [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    } @else {\r\n        <ngx-searchable-select\r\n            [control]=\"getValue()\"\r\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    }\r\n}\r\n\r\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input\r\n            [formControl]=\"getValue()\"\r\n            matInput \r\n            [matDatepicker]=\"picker\">\r\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:14px}.deleteButton{margin-bottom:20px}mat-form-field,ngx-searchable-select,ngx-paginated-searchable-select{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.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: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterRuleComponent, isStandalone: true, selector: "lib-advanced-filter-rule", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { deleteFilter: "deleteFilter" }, ngImport: i0, template: "<button \r\n    matIconButton \r\n    [matTooltip]=\"intl.deleteFilterTooltip\" \r\n    (click)=\"deleteFilter.emit(getRuleId())\"\r\n    class=\"deleteButton\"\r\n    type=\"button\">\r\n    <mat-icon>delete</mat-icon>\r\n</button>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getKey()\"\r\n    [options]=\"columns()\"\r\n    [optionLabel]=\"keyOptionLabel\"\r\n    [optionValue]=\"keyOptionValue\"\r\n    (optionChange)=\"onKeyChange($event)\"\r\n    [selectLabel]=\"intl.fieldLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n<ngx-searchable-select\r\n    [control]=\"getOperator()\"\r\n    [options]=\"getOperatorsOption(getKey().value)\"\r\n    [optionLabel]=\"operatorOptionLabel\"\r\n    [optionValue]=\"operatorOptionValue\"\r\n    [selectLabel]=\"intl.conditionLabel\"\r\n    [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n    [error]=\"intl.requiredFieldError\"\r\n/>\r\n\r\n@if (getFilterType(getKey().value) == 'text' || getFilterType(getKey().value) == 'number') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input [formControl]=\"getValue()\" [type]=\"getFilterType(getKey().value) ?? 'text'\" matInput>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n@if (getFilterType(getKey().value) == 'option' || getFilterType(getKey().value) == 'option-multiple') {\r\n    @if(getColumnSelected(getKey().value)?.endpointForPaginatedFilterOptions) {\r\n        <ngx-paginated-searchable-select \r\n            [control]=\"getValue()\"\r\n            [endpoint]=\"getColumnSelected(getKey().value)!.endpointForPaginatedFilterOptions!\"\r\n            [filters]=\"getColumnSelected(getKey().value)!.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    } @else {\r\n        <ngx-searchable-select\r\n            [control]=\"getValue()\"\r\n            [options]=\"getColumnSelected(getKey().value)?.filterOptions ?? []\"\r\n            [selectLabel]=\"intl.valueLabel\"\r\n            [selectPlaceholder]=\"intl.selectOptionPlaceholder\"\r\n            [error]=\"intl.requiredFieldError\"\r\n        />\r\n    }\r\n}\r\n\r\n@if(getFilterType(getKey().value) == 'date' || getFilterType(getKey().value) == 'date-range') {\r\n    <mat-form-field>\r\n        <mat-label>{{intl.valueLabel}}</mat-label>\r\n        <input\r\n            [formControl]=\"getValue()\"\r\n            matInput \r\n            [matDatepicker]=\"picker\">\r\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n        <mat-error>{{intl.requiredFieldError}}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:14px}.deleteButton{margin-bottom:20px}mat-form-field,ngx-searchable-select,ngx-paginated-searchable-select{flex:1}@media (max-width: 900px){:host{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterRuleComponent, decorators: [{
             type: Component,
@@ -1919,7 +1956,7 @@ class AdvancedFilterGroupComponent {
     deleteGroup = output();
     deleteFilter = output();
     datosPantallaService = inject(DatosPantallaService);
-    intl = inject(NgxPaginatedTableIntl);
+    intl = inject(NgxTablesIntl);
     isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
     optionsFilterConnector = computed(() => [
         { value: 'AND', label: this.intl.connectorAnd },
@@ -1938,7 +1975,7 @@ class AdvancedFilterGroupComponent {
         return this.group().get('filters').controls;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterGroupComponent, isStandalone: true, selector: "lib-advanced-filter-group", inputs: { isRootNode: { classPropertyName: "isRootNode", publicName: "isRootNode", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addGroup: "addGroup", addFilter: "addFilter", deleteGroup: "deleteGroup", deleteFilter: "deleteFilter" }, ngImport: i0, template: "<div class=\"grupo\" [formGroup]=\"group()\">\r\n    \r\n    <mat-button-toggle-group [formControl]=\"getConnector()\">\r\n        @for (option of optionsFilterConnector(); track option.value) {\r\n            <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\r\n        }\r\n    </mat-button-toggle-group>\r\n\r\n    @if (isDesktop()) {\r\n        <button \r\n            matButton=\"outlined\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n            {{intl.addFilterButtonLabel}}\r\n        </button>\r\n\r\n        <button \r\n            matButton=\"outlined\"\r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n            {{intl.addGroupButtonLabel}}\r\n        </button>\r\n    } @else {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addFilterButtonLabel\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n        </button>\r\n\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addGroupButtonLabel\" \r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n        </button>\r\n    }\r\n    \r\n\r\n    @if(!isRootNode()) {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.deleteGroupTooltip\" \r\n            (click)=\"deleteGroup.emit(getGroupId())\"\r\n            class=\"deleteGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>delete</mat-icon>\r\n        </button>\r\n    }\r\n\r\n    @for (group of getFilters(); track $index) {\r\n        @if(isFilterGroupForm(group)) {\r\n            <lib-advanced-filter-group \r\n                [group]=\"group\"\r\n                [config]=\"config()\"\r\n                [isRootNode]=\"false\"\r\n                (addGroup)=\"addGroup.emit($event)\"\r\n                (addFilter)=\"addFilter.emit($event)\"\r\n                (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        } @else {\r\n            <lib-advanced-filter-rule \r\n                [rule]=\"group\"\r\n                [config]=\"config()\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        }\r\n    }\r\n\r\n</div>", styles: [":host{display:block}.grupo{border-radius:4px;border:1px solid var(--mat-sys-outline);padding:40px 34px 10px 20px;position:relative;min-height:60px;display:flex;flex-direction:column;margin-top:24px;gap:8px}mat-button-toggle-group{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:var(--mat-sys-surface)}.addFilterButton{position:absolute;top:-20px;left:10px;background-color:var(--mat-sys-surface)}.addGroupButton{position:absolute;top:-20px;right:10px;background-color:var(--mat-sys-surface)}.deleteGroupButton{position:absolute;top:50%;right:-20px;transform:translateY(-50%);background-color:var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: AdvancedFilterRuleComponent, selector: "lib-advanced-filter-rule", inputs: ["rule", "config"], outputs: ["deleteFilter"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AdvancedFilterGroupComponent, isStandalone: true, selector: "lib-advanced-filter-group", inputs: { isRootNode: { classPropertyName: "isRootNode", publicName: "isRootNode", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addGroup: "addGroup", addFilter: "addFilter", deleteGroup: "deleteGroup", deleteFilter: "deleteFilter" }, ngImport: i0, template: "<div class=\"grupo\" [formGroup]=\"group()\">\r\n    \r\n    <mat-button-toggle-group [formControl]=\"getConnector()\">\r\n        @for (option of optionsFilterConnector(); track option.value) {\r\n            <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\r\n        }\r\n    </mat-button-toggle-group>\r\n\r\n    @if (isDesktop()) {\r\n        <button \r\n            matButton=\"outlined\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n            {{intl.addFilterButtonLabel}}\r\n        </button>\r\n\r\n        <button \r\n            matButton=\"outlined\"\r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n            {{intl.addGroupButtonLabel}}\r\n        </button>\r\n    } @else {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addFilterButtonLabel\" \r\n            (click)=\"addFilter.emit(getGroupId())\"\r\n            class=\"addFilterButton\"\r\n            type=\"button\">\r\n            <mat-icon>add</mat-icon>\r\n        </button>\r\n\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.addGroupButtonLabel\" \r\n            (click)=\"addGroup.emit(getGroupId())\"\r\n            class=\"addGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>data_array</mat-icon>\r\n        </button>\r\n    }\r\n    \r\n\r\n    @if(!isRootNode()) {\r\n        <button \r\n            matIconButton \r\n            [matTooltip]=\"intl.deleteGroupTooltip\" \r\n            (click)=\"deleteGroup.emit(getGroupId())\"\r\n            class=\"deleteGroupButton\"\r\n            type=\"button\">\r\n            <mat-icon>delete</mat-icon>\r\n        </button>\r\n    }\r\n\r\n    @for (group of getFilters(); track $index) {\r\n        @if(isFilterGroupForm(group)) {\r\n            <lib-advanced-filter-group \r\n                [group]=\"group\"\r\n                [config]=\"config()\"\r\n                [isRootNode]=\"false\"\r\n                (addGroup)=\"addGroup.emit($event)\"\r\n                (addFilter)=\"addFilter.emit($event)\"\r\n                (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        } @else {\r\n            <lib-advanced-filter-rule \r\n                [rule]=\"group\"\r\n                [config]=\"config()\"\r\n                (deleteFilter)=\"deleteFilter.emit($event)\"\r\n            />\r\n        }\r\n    }\r\n\r\n</div>", styles: [":host{display:block}.grupo{border-radius:4px;border:1px solid var(--mat-sys-outline);padding:40px 34px 10px 20px;position:relative;min-height:60px;display:flex;flex-direction:column;margin-top:24px;gap:8px}mat-button-toggle-group{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:var(--mat-sys-surface)}.addFilterButton{position:absolute;top:-20px;left:10px;background-color:var(--mat-sys-surface)}.addGroupButton{position:absolute;top:-20px;right:10px;background-color:var(--mat-sys-surface)}.deleteGroupButton{position:absolute;top:50%;right:-20px;transform:translateY(-50%);background-color:var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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$1.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,
@@ -1961,7 +1998,7 @@ class ConfigureAdvancedFilterComponent {
     advancedFilterService = inject(AdvancedFilterService);
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
-    intl = inject(NgxPaginatedTableIntl);
+    intl = inject(NgxTablesIntl);
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
     form = AdvancedFilterUtils.createAdvancedFilter(this.fb, this.data.advancedFilter);
     formChanges = toSignal(this.form.valueChanges);
@@ -2012,7 +2049,7 @@ class ConfigureAdvancedFilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfigureAdvancedFilterComponent, isStandalone: true, selector: "lib-configure-advanced-filter", ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit('save_and_apply')\">\r\n\r\n  <h2 mat-dialog-title>{{intl.advancedFiltersDialogTitle}} {{data.config.title() | lowercase}}</h2>\r\n  <mat-dialog-content>\r\n\r\n      <p class=\"advancedFilterResult\" [innerHTML]=\"query()\" [style.visibility]=\"query() ? 'visible': 'hidden'\"></p>\r\n\r\n      <mat-form-field>\r\n          <mat-label>{{intl.templateNameLabel}}</mat-label>\r\n          <input matInput formControlName=\"name\" [maxlength]=\"16\">\r\n          <mat-hint>{{form.get('name')?.value.length ?? 0}}/16</mat-hint>\r\n          <mat-error>{{intl.templateNameRequiredError}}</mat-error>\r\n      </mat-form-field>\r\n\r\n      <lib-advanced-filter-group \r\n        [group]=\"getRootGroup()\"\r\n        [config]=\"data.config\"\r\n        [isRootNode]=\"true\"\r\n        (addGroup)=\"addGroup($event)\"\r\n        (addFilter)=\"addFilter($event)\"\r\n        (deleteGroup)=\"deleteGroup($event)\"\r\n        (deleteFilter)=\"deleteFilter($event)\"\r\n      />\r\n\r\n      <div class=\"helperContainer\">\r\n        <p class=\"helperTitle\"><strong>{{intl.advancedFiltersHelpTitle}}</strong></p>\r\n        <p class=\"helper\">\r\n          <strong>{{intl.groupLabel}} </strong>{{intl.advancedFiltersGroupHelp}}<br>\r\n          <strong>{{intl.filterLabel}} </strong>{{intl.advancedFiltersRuleHelp}}\r\n        </p>\r\n      </div>\r\n      \r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{intl.saveButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{intl.saveAndApplyButtonLabel}}</button>\r\n  </mat-dialog-actions>\r\n\r\n\r\n</form>", styles: [":host{display:block}mat-dialog-content{display:flex;flex-direction:column;gap:12px}.helperContainer{margin-top:30px}.helperTitle,.helper{font:var(--mat-sys-body-small);font-weight:300;margin:0}.helper{margin-top:4px;padding-left:20px}.advancedFilterResult{align-self:center;text-align:center;font:var(--mat-sys-body-large);padding:8px;border-radius:4px;background-color:var(--warning);color:var(--on-warning)}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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>{{intl.advancedFiltersDialogTitle}} {{data.config.title() | lowercase}}</h2>\r\n  <mat-dialog-content>\r\n\r\n      <p class=\"advancedFilterResult\" [innerHTML]=\"query()\" [style.visibility]=\"query() ? 'visible': 'hidden'\"></p>\r\n\r\n      <mat-form-field>\r\n          <mat-label>{{intl.templateNameLabel}}</mat-label>\r\n          <input matInput formControlName=\"name\" [maxlength]=\"16\">\r\n          <mat-hint>{{form.get('name')?.value.length ?? 0}}/16</mat-hint>\r\n          <mat-error>{{intl.templateNameRequiredError}}</mat-error>\r\n      </mat-form-field>\r\n\r\n      <lib-advanced-filter-group \r\n        [group]=\"getRootGroup()\"\r\n        [config]=\"data.config\"\r\n        [isRootNode]=\"true\"\r\n        (addGroup)=\"addGroup($event)\"\r\n        (addFilter)=\"addFilter($event)\"\r\n        (deleteGroup)=\"deleteGroup($event)\"\r\n        (deleteFilter)=\"deleteFilter($event)\"\r\n      />\r\n\r\n      <div class=\"helperContainer\">\r\n        <p class=\"helperTitle\"><strong>{{intl.advancedFiltersHelpTitle}}</strong></p>\r\n        <p class=\"helper\">\r\n          <strong>{{intl.groupLabel}} </strong>{{intl.advancedFiltersGroupHelp}}<br>\r\n          <strong>{{intl.filterLabel}} </strong>{{intl.advancedFiltersRuleHelp}}\r\n        </p>\r\n      </div>\r\n      \r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button matButton [mat-dialog-close]=\"undefined\">{{intl.closeButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save')\">{{intl.saveButtonLabel}}</button>\r\n    <button matButton [disabled]=\"form.invalid\" type=\"button\" (click)=\"onSubmit('save_and_apply')\">{{intl.saveAndApplyButtonLabel}}</button>\r\n  </mat-dialog-actions>\r\n\r\n\r\n</form>", styles: [":host{display:block}mat-dialog-content{display:flex;flex-direction:column;gap:12px}.helperContainer{margin-top:30px}.helperTitle,.helper{font:var(--mat-sys-body-small);font-weight:300;margin:0}.helper{margin-top:4px;padding-left:20px}.advancedFilterResult{align-self:center;text-align:center;font:var(--mat-sys-body-large);padding:8px;border-radius:4px;background-color:var(--warning);color:var(--on-warning)}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: AdvancedFilterGroupComponent, selector: "lib-advanced-filter-group", inputs: ["isRootNode", "group", "config"], outputs: ["addGroup", "addFilter", "deleteGroup", "deleteFilter"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigureAdvancedFilterComponent, decorators: [{
             type: Component,
@@ -2158,7 +2195,7 @@ class NgxPaginatedTable {
         query: undefined
     }, ...(ngDevMode ? [{ debugName: "defaultFiltersForPaginatedFilterOptions" }] : []));
     constructor(intl) {
-        this.intl = intl ?? new NgxPaginatedTableIntl();
+        this.intl = intl ?? new NgxTablesIntl();
     }
     ngOnInit() {
         // Suscribirse a los cambios de las etiquetas
@@ -2576,8 +2613,8 @@ class NgxPaginatedTable {
         const topOverlay = overlays[overlays.length - 1];
         return topOverlay === this.overlayRef.hostElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, deps: [{ token: NgxPaginatedTableIntl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedTable, isStandalone: true, selector: "ngx-paginated-table", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(config()().showAdvancedFilters) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"intl.advancedFiltersLabel\"\r\n                            [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n                            #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n                            <mat-icon>filter_alt</mat-icon>\r\n                        </button>\r\n\r\n                        <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"onNewAdvancedFiltersClick()\">\r\n                                <mat-icon>filter_alt</mat-icon>\r\n                                <span>{{ intl.newAdvancedFilterLabel }}</span>\r\n                            </button>\r\n\r\n                            @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n                                @if (first) {\r\n                                    <mat-divider />\r\n                                }\r\n\r\n                                <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n                                    <div class=\"templateContainer\">                            \r\n                                        <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n                                        <div class=\"buttonTemplateContainer\">\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getEditAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n                                                <mat-icon>edit</mat-icon>\r\n                                            </button>\r\n\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getDeleteAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n                                                <mat-icon>delete</mat-icon>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            }\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                        <button mat-menu-item  (click)=\"exportToCsvCurrentPage()\">\r\n                            <mat-icon>csv</mat-icon>\r\n                            <span>{{ intl.exportToExcelLabel }}</span>\r\n                        </button>\r\n\r\n                        <button mat-menu-item  (click)=\"exportToPdfCurrentPage()\">\r\n                            <mat-icon>picture_as_pdf</mat-icon>\r\n                            <span>{{ intl.exportToPdfLabel }}</span>\r\n                        </button>\r\n                    </mat-menu>\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(config()().showQueryFilter) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        @if(filters()().advancedFilterId) {\r\n            <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n                <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n                <button matIconButton [matTooltip]=\"intl.removeAdvancedFilterTooltip\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"data()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <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></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td \r\n                            mat-footer-cell \r\n                            *matFooterCellDef \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n                                    } @else {\r\n                                        {{ column.getTotalGeneral() }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }\r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.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: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, deps: [{ token: NgxTablesIntl, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedTable, isStandalone: true, selector: "ngx-paginated-table", inputs: { endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(config()().showAdvancedFilters) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"intl.advancedFiltersLabel\"\r\n                            [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n                            #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n                            <mat-icon>filter_alt</mat-icon>\r\n                        </button>\r\n\r\n                        <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"onNewAdvancedFiltersClick()\">\r\n                                <mat-icon>filter_alt</mat-icon>\r\n                                <span>{{ intl.newAdvancedFilterLabel }}</span>\r\n                            </button>\r\n\r\n                            @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n                                @if (first) {\r\n                                    <mat-divider />\r\n                                }\r\n\r\n                                <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n                                    <div class=\"templateContainer\">                            \r\n                                        <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n                                        <div class=\"buttonTemplateContainer\">\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getEditAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n                                                <mat-icon>edit</mat-icon>\r\n                                            </button>\r\n\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getDeleteAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n                                                <mat-icon>delete</mat-icon>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            }\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                        <button mat-menu-item  (click)=\"exportToCsvCurrentPage()\">\r\n                            <mat-icon>csv</mat-icon>\r\n                            <span>{{ intl.exportToExcelLabel }}</span>\r\n                        </button>\r\n\r\n                        <button mat-menu-item  (click)=\"exportToPdfCurrentPage()\">\r\n                            <mat-icon>picture_as_pdf</mat-icon>\r\n                            <span>{{ intl.exportToPdfLabel }}</span>\r\n                        </button>\r\n                    </mat-menu>\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(config()().showQueryFilter) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        @if(filters()().advancedFilterId) {\r\n            <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n                <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n                <button matIconButton [matTooltip]=\"intl.removeAdvancedFilterTooltip\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"data()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <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></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td \r\n                            mat-footer-cell \r\n                            *matFooterCellDef \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n                                    } @else {\r\n                                        {{ column.getTotalGeneral() }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }\r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "pipe", type: OnlyUpperFirstCharacterPipe, name: "ngxOnlyUpperFirstCharacter" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedTable, decorators: [{
             type: Component,
@@ -2602,7 +2639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         PaginatedSearchableSelectComponent,
                         SearchableSelectComponent
                     ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(config()().showAdvancedFilters) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"intl.advancedFiltersLabel\"\r\n                            [matMenuTriggerFor]=\"advancedFiltersMenu\" \r\n                            #advancedFiltersMenuTrigger=\"matMenuTrigger\">\r\n\r\n                            <mat-icon>filter_alt</mat-icon>\r\n                        </button>\r\n\r\n                        <mat-menu #advancedFiltersMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                            <button mat-menu-item  (click)=\"onNewAdvancedFiltersClick()\">\r\n                                <mat-icon>filter_alt</mat-icon>\r\n                                <span>{{ intl.newAdvancedFilterLabel }}</span>\r\n                            </button>\r\n\r\n                            @for (advancedFilter of advancedFilters(); track $index; let first = $first) {\r\n                                @if (first) {\r\n                                    <mat-divider />\r\n                                }\r\n\r\n                                <div mat-menu-item (click)=\"onApplyTemplateClick(advancedFilter)\">\r\n                                    <div class=\"templateContainer\">                            \r\n                                        <span>{{advancedFilter.name | ngxOnlyUpperFirstCharacter}}</span>\r\n\r\n                                        <div class=\"buttonTemplateContainer\">\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getEditAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterUpdate($event, advancedFilter, advancedFiltersMenuTrigger)\">\r\n                                                <mat-icon>edit</mat-icon>\r\n                                            </button>\r\n\r\n                                            <button\r\n                                                matIconButton \r\n                                                [matTooltip]=\"intl.getDeleteAdvancedFilterTooltip(advancedFilter.name | ngxOnlyUpperFirstCharacter)\"\r\n                                                (click)=\"onAdvancedFilterDelete($event, advancedFiltersMenuTrigger, advancedFilter)\">\r\n                                                <mat-icon>delete</mat-icon>\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            }\r\n                        </mat-menu>\r\n                    }\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                        <button mat-menu-item  (click)=\"exportToCsvCurrentPage()\">\r\n                            <mat-icon>csv</mat-icon>\r\n                            <span>{{ intl.exportToExcelLabel }}</span>\r\n                        </button>\r\n\r\n                        <button mat-menu-item  (click)=\"exportToPdfCurrentPage()\">\r\n                            <mat-icon>picture_as_pdf</mat-icon>\r\n                            <span>{{ intl.exportToPdfLabel }}</span>\r\n                        </button>\r\n                    </mat-menu>\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(config()().showQueryFilter) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        @if(filters()().advancedFilterId) {\r\n            <div class=\"advancedFiltersApplied\" (click)=\"onSelectedAdvancedFilterUpdate($event)\">\r\n                <p [innerHTML]=\"getAdvancedFilterLabel()\"></p>\r\n                <button matIconButton [matTooltip]=\"intl.removeAdvancedFilterTooltip\" class=\"\" (click)=\"onQuitAdvancedFilter($event)\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n        }\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"dataResource.isLoading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"data()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <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></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!column.isSortable\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td \r\n                            mat-footer-cell \r\n                            *matFooterCellDef \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral && column.getTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(column.getTotalGeneral(), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(column.getTotalGeneral()) }}\r\n                                    } @else {\r\n                                        {{ column.getTotalGeneral() }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }\r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ dataResource.isLoading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator [length]=\"total()\" [pageSize]=\"filters()().pageSize\" [pageIndex]=\"filters()().pageNumber - 1\" (page)=\"onPageChange($event)\"/>\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.templateContainer{display:flex;align-items:center;justify-content:space-between;gap:60px}.buttonTemplateContainer{display:flex;flex-wrap:nowrap}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
-        }], ctorParameters: () => [{ type: NgxPaginatedTableIntl, decorators: [{
+        }], ctorParameters: () => [{ type: NgxTablesIntl, decorators: [{
                     type: Optional
                 }] }], propDecorators: { endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }], onEscape: [{
                 type: HostListener,
@@ -2613,6 +2650,8 @@ class NgxBasicTable {
     columnConfigService = inject(ColumnConfigService);
     dialog = inject(MatDialog);
     datosPantallaService = inject(DatosPantallaService);
+    // Inyectar el servicio de internacionalización
+    intl = inject(NgxTablesIntl);
     isDesktop = computed(() => this.datosPantallaService.pantalla()?.tipo == 'escritorio', ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
     filters = input(signal({
         query: undefined,
@@ -2911,15 +2950,15 @@ class NgxBasicTable {
     }
     onDeleteClick(row, event) {
         event.stopPropagation();
-        const title = this.config()().deleteConfirm?.title?.(row) ?? 'Eliminar';
-        const body = this.config()().deleteConfirm?.body?.(row) ?? 'Vas a eliminar el registro seleccionado. ¿Estas seguro?';
+        const title = this.config()().deleteConfirm?.title?.(row) ?? this.intl.deleteConfirmTitle;
+        const body = this.config()().deleteConfirm?.body?.(row) ?? this.intl.deleteConfirmBody;
         const template = this.config()().deleteConfirm?.templateRef?.();
         const data = {
             title: title,
             body: !template ? body : undefined,
             template: template,
             row: row,
-            confirmButtonLabel: 'Eliminar'
+            confirmButtonLabel: this.intl.confirmDeleteLabel
         };
         const dialogRef = this.dialog.open(NgxConfirmDialogComponent, { data: data });
         dialogRef.afterClosed().subscribe((confirm) => {
@@ -3156,7 +3195,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?.() ?? 'Nuevo'\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton matTooltip=\"Visualizar y ordenar columnas\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                matTooltip=\"Operaciones sobre los registros seleccionados\"\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>Desmarcar todos los registros</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=\"Desmarcar todos los registros\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    <button matIconButton matTooltip=\"Exportar datos\" [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>Exportar a XLSX</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>Exportar a PDF</span>\r\n                        </button>\r\n                    </mat-menu>\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? 'Salir del modo de pantalla completa': 'Pantalla completa'\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? 'Buscar...'\" [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=\"Desde\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                placeholder=\"Hasta\"\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>Acciones</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) ?? 'Editar'\" \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) ?? 'Elminar'\" \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() ? 'Cargando...' : 'No se han encontrado resultados...' }}</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>Total parcial (por p\u00E1gina)</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>Total (todos los registros)</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);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.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: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicTable, isStandalone: true, selector: "ngx-basic-table", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: true, isRequired: false, transformFunction: null }, moreFilters: { classPropertyName: "moreFilters", publicName: "moreFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createClick: "createClick", updateClick: "updateClick", deleteClick: "deleteClick", rowActionClick: "rowActionClick", expandedItemChange: "expandedItemChange", selectionActionEvent: "selectionActionEvent" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "contenedorDefecto" }, viewQueries: [{ propertyName: "tableContentTemplate", first: true, predicate: ["tableContent"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                        <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                            <mat-icon>csv</mat-icon>\r\n                            <span>{{ intl.exportToExcelLabel }}</span>\r\n                        </button>\r\n\r\n                        <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                            <mat-icon>picture_as_pdf</mat-icon>\r\n                            <span>{{ intl.exportToPdfLabel }}</span>\r\n                        </button>\r\n                    </mat-menu>\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicCellHostDirective, selector: "[ngxDynamicCellHost]", inputs: ["component", "row", "key"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SearchableSelectComponent, selector: "ngx-searchable-select", inputs: ["control", "options", "optionLabel", "optionValue", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }, { kind: "component", type: PaginatedSearchableSelectComponent, selector: "ngx-paginated-searchable-select", inputs: ["control", "endpoint", "filters", "optionLabel", "compareWith", "multiple", "searchInputPlaceholder", "selectLabel", "selectPlaceholder", "clearableOptionLabel", "subscriptSizing", "clearable", "error", "selected", "disabled"], outputs: ["optionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicTable, decorators: [{
             type: Component,
@@ -3179,12 +3218,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         SearchableSelectComponent,
                         PaginatedSearchableSelectComponent
-                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? 'Nuevo'\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton matTooltip=\"Visualizar y ordenar columnas\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                matTooltip=\"Operaciones sobre los registros seleccionados\"\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>Desmarcar todos los registros</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=\"Desmarcar todos los registros\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    <button matIconButton matTooltip=\"Exportar datos\" [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>Exportar a XLSX</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>Exportar a PDF</span>\r\n                        </button>\r\n                    </mat-menu>\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? 'Salir del modo de pantalla completa': 'Pantalla completa'\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? 'Buscar...'\" [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=\"Desde\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                placeholder=\"Hasta\"\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>Acciones</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) ?? 'Editar'\" \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) ?? 'Elminar'\" \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() ? 'Cargando...' : 'No se han encontrado resultados...' }}</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>Total parcial (por p\u00E1gina)</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>Total (todos los registros)</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);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
+                    ], host: { class: 'contenedorDefecto' }, template: "@if(!isFullScreen()) {\r\n    <ng-container *ngTemplateOutlet=\"tableContentTemplate()\"></ng-container>\r\n}\r\n\r\n<ng-template #tableContent>\r\n    <div class=\"tableContainer\" [class.inFullScreenMode]=\"isFullScreen()\">\r\n        <div class=\"headerContainer\">\r\n            <div class=\"titleAndButtonContainer\">\r\n                <p class=\"title\">{{ config()().title() }}</p>\r\n                <div class=\"buttonContainer\">\r\n                    @if(config()().create && (!config()().create?.show || config()().create?.show())) {\r\n                        <button \r\n                            matIconButton \r\n                            [matTooltip]=\"config()().create?.tooltip?.() ?? intl.createButtonLabel\" \r\n                            [disabled]=\"config()().create?.disabled?.()\" \r\n                            class=\"newButtonIcon\"\r\n                            (click)=\"onNewClick()\">\r\n                            <mat-icon>add_circle</mat-icon>\r\n                        </button>\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.editColumnsTooltip\" class=\"editColumnsButtonIcon\" (click)=\"onEditColumns()\">\r\n                        <mat-icon>table_edit</mat-icon>\r\n                    </button>\r\n\r\n                    @if(selection().length > 0) {\r\n                        @if(getRowSelectionAction().length > 0) {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.selectionActionsTooltip\"\r\n                                [matMenuTriggerFor]=\"selectedRecordsMenu\">\r\n                                <mat-icon>event_list</mat-icon>\r\n                            </button>\r\n\r\n                            <mat-menu #selectedRecordsMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                                <button mat-menu-item  (click)=\"uncheckAllSelection()\">\r\n                                    <mat-icon>deselect</mat-icon>\r\n                                    <span>{{ intl.deselectAllLabel }}</span>\r\n                                </button>\r\n\r\n                                @for (action of getRowSelectionAction(); track $index) {\r\n                                    <button mat-menu-item  (click)=\"onRowSelectionActionClick(action.id)\">\r\n                                        <mat-icon>{{action.icon}}</mat-icon>\r\n                                        <span>{{action.label(selection(), selection().length)}}</span>\r\n                                    </button>\r\n                                }\r\n                            </mat-menu>\r\n                        } @else {\r\n                            <button \r\n                                matIconButton \r\n                                [matTooltip]=\"intl.deselectAllLabel\"\r\n                                (click)=\"uncheckAllSelection()\">\r\n                                <mat-icon>deselect</mat-icon>\r\n                            </button>\r\n                        }\r\n                    }\r\n\r\n                    <button matIconButton [matTooltip]=\"intl.exportTooltip\" [matMenuTriggerFor]=\"exportMenu\">\r\n                        <mat-icon>download</mat-icon>\r\n                    </button>\r\n                    <mat-menu #exportMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\r\n                        <button mat-menu-item  (click)=\"exportToCsv()\">\r\n                            <mat-icon>csv</mat-icon>\r\n                            <span>{{ intl.exportToExcelLabel }}</span>\r\n                        </button>\r\n\r\n                        <button mat-menu-item  (click)=\"exportToPdf()\">\r\n                            <mat-icon>picture_as_pdf</mat-icon>\r\n                            <span>{{ intl.exportToPdfLabel }}</span>\r\n                        </button>\r\n                    </mat-menu>\r\n\r\n                    <button matIconButton [matTooltip]=\"isFullScreen() ? intl.exitFullscreenTooltip : intl.enterFullscreenTooltip\" (click)=\"onToggleFullScreen()\">\r\n                        <mat-icon>{{isFullScreen() ? 'fullscreen_exit': 'fullscreen'}}</mat-icon>\r\n                    </button>\r\n\r\n                    <ng-content select=\"[icon-buttons]\"></ng-content>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"filterContainer\">\r\n                <div class=\"moreFiltersContainer\">\r\n                    <ng-content select=\"[more-filters]\"></ng-content>\r\n                </div>\r\n\r\n                @if(showQueryFilter()) {\r\n                    <mat-form-field subscriptSizing=\"dynamic\">\r\n                        <mat-icon matPrefix>search</mat-icon>\r\n                        <input #queryElement matInput [placeholder]=\"config()().queryFilterPlaceholder ?? intl.searchPlaceholder\" [value]=\"filters()().query ?? ''\" (input)=\"onQueryChange(queryElement)\">\r\n                        <button matIconButton matSuffix (click)=\"onQueryReset(queryElement)\" [style.visibility]=\"queryElement.value ? 'visible': 'hidden'\">\r\n                            <mat-icon>close</mat-icon>\r\n                        </button>\r\n                    </mat-form-field>\r\n                }\r\n            </div>\r\n\r\n            <ng-content select=\"[extra-header-content]\"></ng-content>\r\n        </div>\r\n\r\n        <mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"loading() ? 'visible': 'hidden'\"/>\r\n\r\n        <div class=\"tableOverflow\" [style.max-height]=\"config()().maxHeight && !isFullScreen() ? config()().maxHeight : null\">\r\n            <table\r\n                mat-table \r\n                matSort\r\n                [multiTemplateDataRows]=\"config()().expandableDetail\"\r\n                [dataSource]=\"dataSource()\" \r\n                [matSortActive]=\"filters()().sortBy?.key ?? ''\" \r\n                [matSortDirection]=\"filters()().sortBy?.direction ?? ''\"\r\n                (matSortChange)=\"onSortChange($event)\">\r\n\r\n                @if(config()().enableRowSelection) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaSelection\"></th>\r\n                        </ng-container>\r\n                    } \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfRowSelectionColumn\" [sticky]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>\r\n                            <mat-checkbox \r\n                                class=\"headerCheckbox\"\r\n                                (change)=\"$event ? toggleAllPageRowSelection() : null\"\r\n                                [checked]=\"selection().length > 0 && isAllPageRowSelected()\"\r\n                                [indeterminate]=\"selection().length > 0 && !isAllPageRowSelected()\">\r\n                            </mat-checkbox>\r\n                        </th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaSelection\">\r\n                            <mat-checkbox\r\n                                (change)=\"$event ? toggleRowSelection(row) : null\"\r\n                                [checked]=\"isRowSelected(row)\">\r\n                            </mat-checkbox>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef class=\"celdaSelection\"></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfRowSelectionColumn}`\" [sticky]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @for (column of config()().columns; track $index) {\r\n                    <ng-container \r\n                        [matColumnDef]=\"getKeyAsString(column.key)\" \r\n                        [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"column.sortType === undefined\" class=\"columnLabel\">\r\n                            <p class=\"headerTitle\">\r\n                                @if(stickyColumnKey() == column.key && isDesktop()) {\r\n                                    <mat-icon>keep</mat-icon>\r\n                                }\r\n                                {{ column.label }}\r\n                            </p>\r\n                        </th>\r\n\r\n                        <td \r\n                            mat-cell \r\n                            *matCellDef=\"let row\" \r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.style\"\r\n                            class=\"celdaDatos\">\r\n\r\n                            @if(column.component) {\r\n                                <ng-container \r\n                                    ngxDynamicCellHost\r\n                                    [component]=\"column.component\"\r\n                                    [row]=\"row\"\r\n                                    [key]=\"column.key\" />\r\n                            } @else if(column.templateRef) {\r\n                                <ng-container \r\n                                    *ngTemplateOutlet=\"column.templateRef(); \r\n                                    context: { $implicit: row }\" />\r\n                            } @else if(column.valueGetter) {\r\n                                {{ column.valueGetter(row) }}\r\n                            } @else {\r\n                                {{ applyColumnPipes(row[column.key], column.pipes) ?? '-' }}\r\n                            }\r\n                        </td>\r\n                        \r\n                        <td\r\n                            mat-footer-cell \r\n                            *matFooterCellDef\r\n                            [class.columnSticky]=\"stickyColumnKey() == column.key && isDesktop()\"\r\n                            [style]=\"column.footerStyle\">\r\n\r\n                            @if(column.showTotalPerPage) {\r\n                                @if(column.pipes) {\r\n                                    {{ applyColumnPipes(getTotalPerPageOfColum(column.key), column.pipes) }}\r\n                                } @else if(column.totalFooterFormatter) {\r\n                                    {{ column.totalFooterFormatter(getTotalPerPageOfColum(column.key)) }}\r\n                                } @else {\r\n                                    {{ getTotalPerPageOfColum(column.key) }}\r\n                                }\r\n                            }\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${generalFooterKeyPrefix}${getKeyAsString(column.key)}`\"\r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef [style]=\"column.footerStyle\">\r\n                                @if(column.showTotalGeneral) {\r\n                                    @if(column.pipes) {\r\n                                        {{ applyColumnPipes(getTotalOfColum(column.key), column.pipes) }}\r\n                                    } @else if(column.totalFooterFormatter) {\r\n                                        {{ column.totalFooterFormatter(getTotalOfColum(column.key)) }}\r\n                                    } @else {\r\n                                        {{ getTotalOfColum(column.key) }}\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showFiltersRow()) {\r\n                    @for (column of config()().columns; track $index) {\r\n                        <ng-container \r\n                            [matColumnDef]=\"`${filterKeyPrefix}${getKeyAsString(column.key)}`\" \r\n                            [sticky]=\"stickyColumnKey() == column.key && isDesktop()\">\r\n\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                                @if (column.filterType == 'text' || column.filterType == 'number') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"inputQueryColumn\">\r\n                                        <input [type]=\"column.filterType\" matInput [placeholder]=\"column.label\" [value]=\"getValueOfColumnFilter(column.key) ?? ''\" (input)=\"onTextFilterColumnChange(column, $event)\">\r\n                                        <mat-icon matSuffix>{{ column.filterType == 'text' ? 'search' : 'numbers'}}</mat-icon>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if (column.filterType == 'option' || column.filterType == 'option-multiple') {\r\n                                    @if(column.endpointForPaginatedFilterOptions) {\r\n                                        <ngx-paginated-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getPaginatedSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [endpoint]=\"column.endpointForPaginatedFilterOptions\"\r\n                                            [filters]=\"column.filtersForEndpointPaginatedFilterOptions ?? defaultFiltersForPaginatedFilterOptions\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onPaginatedOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    } @else {\r\n                                        <ngx-searchable-select\r\n                                            class=\"selectColumn\"\r\n                                            [selected]=\"getSearchableSelectValueOfColumnFilter(column.key)\"\r\n                                            [options]=\"column.filterOptions ?? []\"\r\n                                            [multiple]=\"column.filterType == 'option-multiple'\"\r\n                                            subscriptSizing=\"dynamic\"\r\n                                            [selectPlaceholder]=\"column.label\"\r\n                                            (optionChange)=\"onOptionFilterColumnChange(column, $event)\"\r\n                                            clearableOptionLabel=\"filtro\"\r\n                                        />\r\n                                    }                                    \r\n                                }\r\n                                \r\n                                @if(column.filterType == 'date') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <input \r\n                                            matInput \r\n                                            [matDatepicker]=\"picker\" \r\n                                            [placeholder]=\"column.label\"\r\n                                            [value]=\"getValueOfColumnFilter(column.key)\"\r\n                                            (dateChange)=\"onDateFilterChange(column, $event.value)\">\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #picker></mat-datepicker>\r\n                                    </mat-form-field>\r\n                                }\r\n\r\n                                @if(column.filterType == 'date-range') {\r\n                                    <mat-form-field subscriptSizing=\"dynamic\" class=\"dateColumn\">\r\n                                        <mat-date-range-input [rangePicker]=\"picker\" #dateRangeInput>\r\n                                            <input \r\n                                                matStartDate \r\n                                                [placeholder]=\"intl.dateRangeStartPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'start')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                            <input \r\n                                                matEndDate \r\n                                                [placeholder]=\"intl.dateRangeEndPlaceholder\"\r\n                                                [value]=\"getDateRangeValueOfColumnFilter(column.key, 'end')\"\r\n                                                (dateChange)=\"onDateRangeFilterChange(column, dateRangeInput.value)\">\r\n                                        </mat-date-range-input>\r\n                                        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                                        <mat-date-range-picker #picker></mat-date-range-picker>\r\n                                    </mat-form-field>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(showActionsColumn()) {\r\n                    @if(showFiltersRow()) {\r\n                        <ng-container [matColumnDef]=\"`${filterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <th mat-header-cell *matHeaderCellDef class=\"celdaAcciones\"></th>\r\n                        </ng-container>\r\n                    }            \r\n\r\n                    <ng-container [matColumnDef]=\"nameOfActionsColumn\" [stickyEnd]=\"isDesktop()\">\r\n                        <th mat-header-cell *matHeaderCellDef>{{ intl.actionsLabel }}</th>\r\n                        <td mat-cell *matCellDef=\"let row\" (click)=\"$event.stopPropagation()\" class=\"celdaAcciones\">\r\n                            <div class=\"contenedorCeldaAcciones\">\r\n                                @if(config()().expandableDetail) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        (click)=\"expandableToggle(row)\">\r\n                                        <mat-icon>{{ rowIsExpanded(row) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\r\n                                    </button>\r\n                                }\r\n\r\n                                @for (rowAction of config()().rowActions; track $index) {\r\n                                    @if(!rowAction.show || rowAction.show(row)) {\r\n                                        <button \r\n                                            matIconButton \r\n                                            [matTooltip]=\"rowAction.tooltip(row)\" \r\n                                            [disabled]=\"rowAction.disabled?.(row)\" \r\n                                            [class]=\"rowAction.iconColor ? `rowActionIconColor${rowAction.iconColor}` : ''\"\r\n                                            (click)=\"onRowActionClick(row, rowAction, $event)\">\r\n                                            <mat-icon>{{rowAction.icon}}</mat-icon>\r\n                                        </button>\r\n                                    }                    \r\n                                }\r\n\r\n                                @if(config()().update && !config()().clickOnRowForUpdate && (!config()().update?.show || config()().update?.show(row))) {\r\n                                    <button \r\n                                        matIconButton\r\n                                        [matTooltip]=\"config()().update?.tooltip?.(row) ?? intl.editTooltip\" \r\n                                        [disabled]=\"config()().update?.disabled?.(row)\" \r\n                                        class=\"editButtonIcon\"\r\n                                        (click)=\"onUpdateClick(row, $event)\">\r\n                                        <mat-icon>edit_square</mat-icon>\r\n                                    </button>\r\n                                }\r\n                                \r\n                                @if(config()().delete && (!config()().delete?.show || config()().delete?.show(row))) {\r\n                                    <button \r\n                                        matIconButton \r\n                                        [matTooltip]=\"config()().delete?.tooltip?.(row) ?? intl.deleteTooltip\" \r\n                                        [disabled]=\"config()().delete?.disabled?.(row)\" \r\n                                        class=\"deleteButtonIcon\"\r\n                                        (click)=\"onDeleteClick(row, $event)\">\r\n                                        <mat-icon>delete</mat-icon>\r\n                                    </button>\r\n                                }\r\n                            </div>\r\n                        </td>\r\n                        <td mat-footer-cell *matFooterCellDef></td>\r\n                    </ng-container>\r\n\r\n                    @if(showTotalGeneralFooter()) {\r\n                        <ng-container [matColumnDef]=\"`${generalFooterKeyPrefix}${nameOfActionsColumn}`\" [stickyEnd]=\"isDesktop()\">\r\n                            <td mat-footer-cell *matFooterCellDef></td>\r\n                        </ng-container>\r\n                    }\r\n                }\r\n\r\n                @if(config()().expandableDetail) {\r\n                    <ng-container [matColumnDef]=\"expandableColumnDef\">\r\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"keys().length\">\r\n                            <div \r\n                                class=\"detailWrapper\"\r\n                                [class.detailWrapperExpanded]=\"rowIsExpanded(row)\">\r\n                                <div class=\"columnDetail\">\r\n                                    @if(config()().expandableDetailTemplateRef) {\r\n                                        <ng-container \r\n                                            *ngTemplateOutlet=\"config()().expandableDetailTemplateRef!(); \r\n                                            context: { $implicit: row }\" />\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </td>\r\n                    </ng-container>\r\n                }\r\n                \r\n                <tr mat-header-row *matHeaderRowDef=\"keys(); sticky: true\" class=\"tableHeader\"></tr>\r\n                \r\n                @if(showFiltersRow()) {\r\n                    <tr mat-header-row *matHeaderRowDef=\"keysWithFilter(); sticky: true\" class=\"filtersByColumn\"></tr>\r\n                }\r\n                \r\n                <tr mat-row *matRowDef=\"let row; columns: keys();\" \r\n                    (click)=\"onRowClick(row)\" \r\n                    [class.rowClickEnable]=\"isRowEnabled(row)\"\r\n                    [class.expandableRow]=\"config()().expandableDetail\">\r\n                </tr>\r\n                \r\n                @if(config()().expandableDetail) {\r\n                    <tr mat-row *matRowDef=\"let row; columns: [expandableColumnDef]\" class=\"rowDetail\"></tr>\r\n                }\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalPerPageFooter() ? keys() : []\" \r\n                    class=\"totalPerPageFooter\"\r\n                    [class.hideFooter]=\"!showTotalPerPageFooter()\">\r\n                </tr>\r\n\r\n                <tr mat-footer-row \r\n                    *matFooterRowDef=\"showTotalGeneralFooter() ? keysWithGeneralFooter() : []\" \r\n                    class=\"totalFooter\"\r\n                    [class.hideFooter]=\"!showTotalGeneralFooter()\">\r\n                </tr>\r\n\r\n                <tr class=\"mat-row\" *matNoDataRow>\r\n                    <td class=\"noData\" [colSpan]=\"keys().length\">{{ loading() ? intl.loadingMessage : intl.noDataMessage }}</td>\r\n                </tr>\r\n            </table>\r\n        </div>\r\n\r\n        <div class=\"paginatorContainer\">\r\n            <div class=\"footerLegend\">\r\n                @if(showTotalPerPageFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare\"></div>\r\n                        <p>{{ intl.totalPerPageLabel }}</p>    \r\n                    </div>\r\n                }\r\n\r\n                @if(showTotalGeneralFooter()) {\r\n                    <div class=\"legendItem\">\r\n                        <div class=\"legendSquare totalGeneral\"></div>\r\n                        <p>{{ intl.totalGeneralLabel }}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <mat-paginator />\r\n        </div>\r\n\r\n        <ng-content select=\"[end-container]\"></ng-content>\r\n    </div>\r\n</ng-template>", styles: [".tableContainer{display:flex;flex-direction:column;padding:14px;gap:10px;--mat-table-background-color: transparent;--mat-table-header-headline-color: var(--mat-sys-on-primary)}.inFullScreenMode{height:calc(100vh - 28px);width:calc(100vw - 28px);max-width:calc(100% - 28px);background:var(--mat-sys-surface)}.title{font:var(--mat-sys-title-large);margin:0;position:relative}.headerContainer{display:flex;justify-content:space-between;gap:10px;flex-direction:column}.titleAndButtonContainer{display:flex;justify-content:space-between;align-items:center;gap:20px}.buttonContainer{display:flex;gap:10px;align-items:center}.filterContainer{display:flex;flex-direction:row;align-items:center;gap:20px;justify-content:space-between}.moreFiltersContainer{display:flex;gap:20px}.editButtonIcon{--mat-icon-button-icon-color: var(--warning)}.deleteButtonIcon{--mat-icon-button-icon-color: var(--mat-sys-error)}.rowActionIconColorYellow{--mat-icon-button-icon-color: rgb(211, 211, 7)}.rowActionIconColorOrange{--mat-icon-button-icon-color: orange}.rowActionIconColorPink{--mat-icon-button-icon-color: pink}.rowActionIconColorPurple{--mat-icon-button-icon-color: purple}.rowActionIconColorGreen{--mat-icon-button-icon-color: var(--success)}.rowActionIconColorBlue{--mat-icon-button-icon-color: var(--information)}.rowActionIconColorBrown{--mat-icon-button-icon-color: brown}.rowActionIconColorSky{--mat-icon-button-icon-color: rgb(0, 247, 255)}.noData{padding:24px}.tableOverflow{overflow:auto;border-radius:10px}.columnLabel{text-wrap:nowrap}.headerTitle{display:flex;align-items:center;gap:4px}.headerTitle mat-icon{font-size:12px;width:12px;height:12px}.tableHeader{background-color:var(--mat-sys-primary)!important}.filtersByColumn{background-color:var(--mat-sys-surface)!important}.filtersByColumn th{padding:0}.celdaDatos{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.celdaAcciones,.celdaSelection{cursor:default!important;background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.columnSticky{background-color:var(--mat-sys-surface)!important;transition:background-color .1s}.contenedorCeldaAcciones{display:flex;align-items:center;cursor:default!important}.rowClickEnable{cursor:pointer;transition:background-color .1s}.rowClickEnable:hover,.rowClickEnable:hover>.celdaAcciones,.rowClickEnable:hover>.celdaSelection,.rowClickEnable:hover>.celdaDatos,.rowClickEnable:hover>.columnSticky{background-color:var(--mat-sys-surface-container)!important}.inputQueryColumn,.selectColumn,.dateColumn{--mat-form-field-outlined-focus-outline-color: transparent;--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent}.advancedFiltersApplied{display:flex;flex-direction:row;justify-content:space-between;gap:20px;border-radius:10px;background-color:var(--warning);color:var(--on-warning);align-items:center;margin-top:10px;padding:5px 5px 5px 15px;cursor:pointer;transition:background-color .3s}.advancedFiltersApplied:hover:not(:has(button:hover)){background-color:color-mix(in srgb,var(--warning) 80%,transparent)}.advancedFiltersApplied p{margin:0}.rowDetail{height:0}.expandableRow td{border-bottom-width:0}.detailWrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.detailWrapperExpanded{grid-template-rows:1fr}.columnDetail{display:flex;flex-direction:column;min-height:0}.totalPerPageFooter{font-weight:700}.totalFooter{font-weight:700;background-color:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface)}.hideFooter{display:none}.paginatorContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;margin-top:10px}.footerLegend{display:flex;flex-direction:row;gap:30px}.footerLegend p{margin:0;font:var(--mat-sys-label-medium)}.legendItem{display:flex;flex-direction:row;align-items:center;gap:6px}.legendSquare{width:24px;height:14px;border-radius:4px;border:2px solid var(--mat-sys-on-surface)}.totalGeneral{background-color:var(--mat-sys-surface-container-highest)}.headerCheckbox{--mat-checkbox-selected-checkmark-color: var(--mat-sys-primary);--mat-checkbox-selected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-selected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-icon-color: var(--mat-sys-on-primary);--mat-checkbox-selected-pressed-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-focus-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-icon-color: var(--mat-sys-on-primary);--mat-checkbox-unselected-pressed-state-layer-color: var(--mat-sys-on-primary)}@media (max-width: 1200px){.filterContainer{flex-direction:column;align-items:normal}.moreFiltersContainer{flex-direction:column}}@media (max-width: 900px){.footerLegend{flex-direction:column;gap:6px}}@media (max-width: 700px){.paginatorContainer{flex-direction:column;align-items:flex-end}}@media (max-width: 600px){.titleAndButtonContainer{flex-direction:column;align-items:normal}}\n"] }]
         }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], queryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryFilter", required: false }] }], moreFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreFilters", required: false }] }], createClick: [{ type: i0.Output, args: ["createClick"] }], updateClick: [{ type: i0.Output, args: ["updateClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], rowActionClick: [{ type: i0.Output, args: ["rowActionClick"] }], expandedItemChange: [{ type: i0.Output, args: ["expandedItemChange"] }], selectionActionEvent: [{ type: i0.Output, args: ["selectionActionEvent"] }], tableContentTemplate: [{ type: i0.ViewChild, args: ['tableContent', { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
 
+class NgxAlert {
+    type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+    iconName = computed(() => {
+        switch (this.type()) {
+            case 'warning': return 'warning';
+            case 'error': return 'error';
+            case 'success': return 'check_circle';
+            case 'info':
+            default: return 'info';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxAlert, isStandalone: true, selector: "ngx-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert\" [class]=\"type()\">\n  <div class=\"icon-wrapper\">\n    <mat-icon>{{ iconName() }}</mat-icon>\n  </div>\n  <div class=\"content\">\n    @if (title()) {\n      <div class=\"title\">{{ title() }}</div>\n    }\n    <div class=\"description\">\n      @if (message()) {\n        {{ message() }}\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.alert{display:flex;gap:16px;padding:16px;border-left-width:4px;border-left-style:solid;border-radius:4px;box-shadow:0 1px 2px #0000001a;margin-bottom:24px}.alert .icon-wrapper{display:flex;align-items:flex-start;padding-top:2px}.alert .content{display:flex;flex-direction:column;gap:4px;flex:1}.alert .content .title{font-weight:600;font-size:16px}.alert .content .description{margin:0;font-size:14px;line-height:1.5}.alert.warning{background-color:#fff8e1;border-left-color:#ffc107}.alert.warning .icon-wrapper mat-icon{color:#ffb300}.alert.warning .content .title{color:#4e342e}.alert.warning .content .description{color:#5d4037}.alert.error{background-color:#ffebee;border-left-color:#f44336}.alert.error .icon-wrapper mat-icon{color:#d32f2f}.alert.error .content .title{color:#b71c1c}.alert.error .content .description{color:#c62828}.alert.info{background-color:#e3f2fd;border-left-color:#2196f3}.alert.info .icon-wrapper mat-icon{color:#1976d2}.alert.info .content .title{color:#0d47a1}.alert.info .content .description{color:#1565c0}.alert.success{background-color:#e8f5e9;border-left-color:#4caf50}.alert.success .icon-wrapper mat-icon{color:#2e7d32}.alert.success .content .title{color:#1b5e20}.alert.success .content .description{color:#2e7d32}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-alert', imports: [
+                        MatIconModule
+                    ], template: "<div class=\"alert\" [class]=\"type()\">\n  <div class=\"icon-wrapper\">\n    <mat-icon>{{ iconName() }}</mat-icon>\n  </div>\n  <div class=\"content\">\n    @if (title()) {\n      <div class=\"title\">{{ title() }}</div>\n    }\n    <div class=\"description\">\n      @if (message()) {\n        {{ message() }}\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.alert{display:flex;gap:16px;padding:16px;border-left-width:4px;border-left-style:solid;border-radius:4px;box-shadow:0 1px 2px #0000001a;margin-bottom:24px}.alert .icon-wrapper{display:flex;align-items:flex-start;padding-top:2px}.alert .content{display:flex;flex-direction:column;gap:4px;flex:1}.alert .content .title{font-weight:600;font-size:16px}.alert .content .description{margin:0;font-size:14px;line-height:1.5}.alert.warning{background-color:#fff8e1;border-left-color:#ffc107}.alert.warning .icon-wrapper mat-icon{color:#ffb300}.alert.warning .content .title{color:#4e342e}.alert.warning .content .description{color:#5d4037}.alert.error{background-color:#ffebee;border-left-color:#f44336}.alert.error .icon-wrapper mat-icon{color:#d32f2f}.alert.error .content .title{color:#b71c1c}.alert.error .content .description{color:#c62828}.alert.info{background-color:#e3f2fd;border-left-color:#2196f3}.alert.info .icon-wrapper mat-icon{color:#1976d2}.alert.info .content .title{color:#0d47a1}.alert.info .content .description{color:#1565c0}.alert.success{background-color:#e8f5e9;border-left-color:#4caf50}.alert.success .icon-wrapper mat-icon{color:#2e7d32}.alert.success .content .title{color:#1b5e20}.alert.success .content .description{color:#2e7d32}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
+
 class NgxDialogService {
     // dependencies injection
     _dialog = inject(MatDialog);
@@ -3341,5 +3403,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DynamicHostDirective, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogService, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedTable, NgxPaginatedTableIntl, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption };
+export { DynamicHostDirective, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogService, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedTable, NgxTablesIntl, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption };
 //# sourceMappingURL=ngx-eiffage-material.mjs.map