@kato-lee/components 1.1.3 → 2.0.0

package/fesm2022/kato-lee-components-fields.mjs

@@ -1,23 +1,21 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ViewChild, Input, EventEmitter, Self, Optional, Output, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i2$2 from '@angular/common';
+import { Pipe, Input, ViewChild, Component, EventEmitter, Output, Self, Optional, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i8 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
 import { ESCAPE } from '@kato-lee/cdk/keycodes';
-import * as i6 from '@kato-lee/material/core';
-import { MatOptionModule, MAT_DATE_LOCALE, MatNativeDateModule } from '@kato-lee/material/core';
+import { MatOptionModule, MatNativeDateModule, MAT_DATE_LOCALE } from '@kato-lee/material/core';
 import { takeUntil } from 'rxjs/operators';
 import { Subject, takeUntil as takeUntil$1, map, debounceTime, distinctUntilChanged, firstValueFrom } from 'rxjs';
-import * as i2$1 from '@kato-lee/material/form-field';
 import { MatFormFieldModule } from '@kato-lee/material/form-field';
 import * as i2 from '@kato-lee/material/tooltip';
 import { MatTooltipModule } from '@kato-lee/material/tooltip';
-import * as i5 from '@kato-lee/material/select';
+import * as i2$1 from '@kato-lee/material/select';
 import { MatSelectModule } from '@kato-lee/material/select';
 import * as i3$1 from '@kato-lee/material/button';
 import { MatButtonModule } from '@kato-lee/material/button';
-import * as i5$1 from '@kato-lee/material/input';
+import * as i5 from '@kato-lee/material/input';
 import { MatInputModule } from '@kato-lee/material/input';
 import * as i4 from '@kato-lee/material/icon';
 import { MatIconModule } from '@kato-lee/material/icon';
@@ -25,9 +23,9 @@ import * as i3 from '@kato-lee/material/menu';
 import { MatMenuModule } from '@kato-lee/material/menu';
 import * as i3$2 from '@kato-lee/material/datepicker';
 import { MatDatepickerModule } from '@kato-lee/material/datepicker';
-import * as i3$3 from '@kato-lee/material/progress-spinner';
+import * as i2$2 from '@kato-lee/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@kato-lee/material/progress-spinner';
-import * as i6$1 from '@kato-lee/material/autocomplete';
+import * as i5$1 from '@kato-lee/material/autocomplete';
 import { MatAutocompleteModule } from '@kato-lee/material/autocomplete';
 import * as i1$1 from '@angular/common/http';
 import * as i2$3 from '@kato-lee/components/toast';
@@ -41,10 +39,10 @@ class TakErrorEqualsPipe {
             return errors[array[0]] === error;
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, isStandalone: true, name: "errorEquals" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakErrorEqualsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TakErrorEqualsPipe, isStandalone: true, name: "errorEquals" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakErrorEqualsPipe, decorators: [{
             type: Pipe,
             args: [{ standalone: true, name: 'errorEquals' }]
         }] });
@@ -81,10 +79,10 @@ class TakErrorMsgPipe {
         else
             return resources[parameter];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, isStandalone: true, name: "errorMsg" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakErrorMsgPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TakErrorMsgPipe, isStandalone: true, name: "errorMsg" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakErrorMsgPipe, decorators: [{
             type: Pipe,
             args: [{ standalone: true, name: 'errorMsg' }]
         }] });
@@ -117,10 +115,10 @@ class TakErrorComponent {
     get email() {
         return this.control?.errors?.['email'];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakErrorComponent, isStandalone: true, selector: "tak-error", inputs: { control: "control", start: "start", end: "end", isDateField: "isDateField", isNumberField: "isNumberField", marginTop: "marginTop" }, viewQueries: [{ propertyName: "error", first: true, predicate: ["error"], descendants: true }], ngImport: i0, template: "<div class=\"tak-custom-error tak-fade-in--800ms\" #error [style.marginTop.px]=\"marginTop\">\r\n  @if (control !== undefined && isDateField && control.valid) {\r\n    <div>\r\n      {{ 'badDateMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: required) {\r\n    <div>\r\n      {{ 'requiredMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: pattern) {\r\n    <div>\r\n      {{\r\n        isNumberField\r\n          ? 'El campo solo debe contener caracteres numericos'\r\n          : ('patternMsg' | errorMsg)\r\n      }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: max) {\r\n    <div>\r\n      {{ 'maxMsg' | errorMsg: max.max }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: min) {\r\n    <div>\r\n      {{ 'minMsg' | errorMsg: min.min }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: maxlength) {\r\n    <div>\r\n      {{ 'maxLengthMsg' | errorMsg: maxlength.requiredLength }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: minlength) {\r\n    <div>\r\n      {{ 'minLengthMsg' | errorMsg: minlength.requiredLength }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: email) {\r\n    <div>\r\n      {{ 'EmailMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control === undefined) {\r\n    <div>\r\n      {{\r\n        start.hasError('required') && end.hasError('required')\r\n          ? ('requiredMsg' | errorMsg)\r\n          : ('DateRangeMsg' | errorMsg)\r\n      }}\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TakErrorEqualsPipe, name: "errorEquals" }, { kind: "pipe", type: TakErrorMsgPipe, name: "errorMsg" }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakErrorComponent, isStandalone: true, selector: "tak-error", inputs: { control: "control", start: "start", end: "end", isDateField: "isDateField", isNumberField: "isNumberField", marginTop: "marginTop" }, viewQueries: [{ propertyName: "error", first: true, predicate: ["error"], descendants: true }], ngImport: i0, template: "<div class=\"tak-custom-error tak-fade-in--800ms\" #error [style.marginTop.px]=\"marginTop\">\r\n  @if (control !== undefined && isDateField && control.valid) {\r\n    <div>\r\n      {{ 'badDateMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: required) {\r\n    <div>\r\n      {{ 'requiredMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: pattern) {\r\n    <div>\r\n      {{\r\n        isNumberField\r\n          ? 'El campo solo debe contener caracteres numericos'\r\n          : ('patternMsg' | errorMsg)\r\n      }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: max) {\r\n    <div>\r\n      {{ 'maxMsg' | errorMsg: max.max }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: min) {\r\n    <div>\r\n      {{ 'minMsg' | errorMsg: min.min }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: maxlength) {\r\n    <div>\r\n      {{ 'maxLengthMsg' | errorMsg: maxlength.requiredLength }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: minlength) {\r\n    <div>\r\n      {{ 'minLengthMsg' | errorMsg: minlength.requiredLength }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: email) {\r\n    <div>\r\n      {{ 'EmailMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control === undefined) {\r\n    <div>\r\n      {{\r\n        start.hasError('required') && end.hasError('required')\r\n          ? ('requiredMsg' | errorMsg)\r\n          : ('DateRangeMsg' | errorMsg)\r\n      }}\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: TakErrorEqualsPipe, name: "errorEquals" }, { kind: "pipe", type: TakErrorMsgPipe, name: "errorMsg" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakErrorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [FormsModule, CommonModule, TakErrorEqualsPipe, TakErrorMsgPipe, ReactiveFormsModule], selector: 'tak-error', template: "<div class=\"tak-custom-error tak-fade-in--800ms\" #error [style.marginTop.px]=\"marginTop\">\r\n  @if (control !== undefined && isDateField && control.valid) {\r\n    <div>\r\n      {{ 'badDateMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: required) {\r\n    <div>\r\n      {{ 'requiredMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: pattern) {\r\n    <div>\r\n      {{\r\n        isNumberField\r\n          ? 'El campo solo debe contener caracteres numericos'\r\n          : ('patternMsg' | errorMsg)\r\n      }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: max) {\r\n    <div>\r\n      {{ 'maxMsg' | errorMsg: max.max }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: min) {\r\n    <div>\r\n      {{ 'minMsg' | errorMsg: min.min }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: maxlength) {\r\n    <div>\r\n      {{ 'maxLengthMsg' | errorMsg: maxlength.requiredLength }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: minlength) {\r\n    <div>\r\n      {{ 'minLengthMsg' | errorMsg: minlength.requiredLength }}\r\n    </div>\r\n  }\r\n  @if (control !== undefined && control.errors | errorEquals: email) {\r\n    <div>\r\n      {{ 'EmailMsg' | errorMsg }}\r\n    </div>\r\n  }\r\n  @if (control === undefined) {\r\n    <div>\r\n      {{\r\n        start.hasError('required') && end.hasError('required')\r\n          ? ('requiredMsg' | errorMsg)\r\n          : ('DateRangeMsg' | errorMsg)\r\n      }}\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { error: [{
@@ -140,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Input
             }] } });
 
-const TAK_DEFAULT_APPEARANCE_FORM = 'standard';
+const TAK_DEFAULT_APPEARANCE_FORM = 'fill';
 const TAK_PRESS_ESC_KEY = new KeyboardEvent('keydown', {
     bubbles: true,
     cancelable: true,
@@ -233,10 +231,10 @@ class TakSelectFieldComponent {
     get isDisabled() {
         return this._ngControl.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSelectFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakSelectFieldComponent, isStandalone: true, selector: "tak-select-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", color: "color", suggestions: "suggestions", disabled: "disabled", type: "type", tooltip: "tooltip", icon: "icon", option: "option", extraInfo: "extraInfo", hasDefaultValue: "hasDefaultValue" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "@if (type === 'select') {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n      <mat-label><ng-content /></mat-label>\r\n      <mat-select [formControl]=\"control\" (focusout)=\"onFocusOut()\">\r\n        @for (suggestion of suggestions; track suggestion) {\r\n          <mat-option\r\n            [value]=\"suggestion\"\r\n            (onSelectionChange)=\"emit($event)\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n          >\r\n            {{ suggestion[option] }}\r\n            @if (extraInfo) {\r\n              <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div [matTooltip]=\"tooltip\">\r\n    @if (type === 'menu') {\r\n      <span>\r\n        <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\" [disabled]=\"isDisabled\">\r\n          <mat-icon>{{ icon }}</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (item of suggestions; track item) {\r\n            <a tak-menu-item (click)=\"justEmit(item)\">\r\n              {{ item[option] }}\r\n            </a>\r\n          }\r\n        </mat-menu>\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakSelectFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakSelectFieldComponent, isStandalone: true, selector: "tak-select-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", color: "color", suggestions: "suggestions", disabled: "disabled", type: "type", tooltip: "tooltip", icon: "icon", option: "option", extraInfo: "extraInfo", hasDefaultValue: "hasDefaultValue" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "@if (type === 'select') {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n      <mat-label><ng-content /></mat-label>\r\n      <mat-select [formControl]=\"control\" (focusout)=\"onFocusOut()\">\r\n        @for (suggestion of suggestions; track suggestion) {\r\n          <mat-option\r\n            [value]=\"suggestion\"\r\n            (onSelectionChange)=\"emit($event)\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n          >\r\n            {{ suggestion[option] }}\r\n            @if (extraInfo) {\r\n              <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div [matTooltip]=\"tooltip\">\r\n    @if (type === 'menu') {\r\n      <span>\r\n        <button\r\n          mat-icon-button\r\n          color=\"no-theme\"\r\n          type=\"button\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          [disabled]=\"isDisabled\"\r\n        >\r\n          <mat-icon>{{ icon }}</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (item of suggestions; track item) {\r\n            <a tak-menu-item (click)=\"justEmit(item)\">\r\n              {{ item[option] }}\r\n            </a>\r\n          }\r\n        </mat-menu>\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.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: MatSelectModule }, { 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: "component", type: i2$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: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         MatTooltipModule,
@@ -251,7 +249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatInputModule,
-                    ], selector: 'tak-select-field', template: "@if (type === 'select') {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n      <mat-label><ng-content /></mat-label>\r\n      <mat-select [formControl]=\"control\" (focusout)=\"onFocusOut()\">\r\n        @for (suggestion of suggestions; track suggestion) {\r\n          <mat-option\r\n            [value]=\"suggestion\"\r\n            (onSelectionChange)=\"emit($event)\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n          >\r\n            {{ suggestion[option] }}\r\n            @if (extraInfo) {\r\n              <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div [matTooltip]=\"tooltip\">\r\n    @if (type === 'menu') {\r\n      <span>\r\n        <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\" [disabled]=\"isDisabled\">\r\n          <mat-icon>{{ icon }}</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (item of suggestions; track item) {\r\n            <a tak-menu-item (click)=\"justEmit(item)\">\r\n              {{ item[option] }}\r\n            </a>\r\n          }\r\n        </mat-menu>\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n" }]
+                    ], selector: 'tak-select-field', template: "@if (type === 'select') {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n      <mat-label><ng-content /></mat-label>\r\n      <mat-select [formControl]=\"control\" (focusout)=\"onFocusOut()\">\r\n        @for (suggestion of suggestions; track suggestion) {\r\n          <mat-option\r\n            [value]=\"suggestion\"\r\n            (onSelectionChange)=\"emit($event)\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n          >\r\n            {{ suggestion[option] }}\r\n            @if (extraInfo) {\r\n              <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n    </mat-form-field>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div [matTooltip]=\"tooltip\">\r\n    @if (type === 'menu') {\r\n      <span>\r\n        <button\r\n          mat-icon-button\r\n          color=\"no-theme\"\r\n          type=\"button\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          [disabled]=\"isDisabled\"\r\n        >\r\n          <mat-icon>{{ icon }}</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (item of suggestions; track item) {\r\n            <a tak-menu-item (click)=\"justEmit(item)\">\r\n              {{ item[option] }}\r\n            </a>\r\n          }\r\n        </mat-menu>\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -392,10 +390,10 @@ class TakDateFieldComponent {
     get value() {
         return this._value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakDateFieldComponent, isStandalone: true, selector: "tak-date-field", inputs: { appearance: "appearance", autocomplete: "autocomplete", color: "color", placeholder: "placeholder", notInput: "notInput", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], ngImport: i0, template: "@if (!notInput) {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field\r\n      [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n      [appearance]=\"appearance\"\r\n      [color]=\"color\"\r\n    >\r\n      <mat-label>\r\n        <ng-content />{{ ' ' }}\r\n        @if (required) {\r\n          <span class=\"tak-field__danger-x\">*</span>\r\n        }\r\n      </mat-label>\r\n      <input\r\n        matInput\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [matDatepicker]=\"picker\"\r\n        [value]=\"value\"\r\n        (keyup)=\"onChange($event)\"\r\n        (dateChange)=\"onChange($event)\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"isDisabled\"\r\n        (focusout)=\"onFocusout()\"\r\n      />\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n    </mat-form-field>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\" [isDateField]=\"true\"> </tak-error>\r\n    }\r\n  </div>\r\n}\r\n@if (notInput) {\r\n  <div>\r\n    <div\r\n      class=\"tak__date-not-input__picker-container\"\r\n      [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    >\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n    </div>\r\n    <div class=\"tak__date-not-input__field-container\">\r\n      <mat-form-field [color]=\"color\">\r\n        <input\r\n          matInput\r\n          [min]=\"minDate\"\r\n          [max]=\"maxDate\"\r\n          autocomplete=\"off\"\r\n          [matDatepicker]=\"picker\"\r\n          [value]=\"value\"\r\n          (keyup)=\"onChange($event)\"\r\n          (dateChange)=\"onChange($event)\"\r\n          [disabled]=\"isDisabled\"\r\n          (focusout)=\"onFocusout()\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\" [isDateField]=\"true\" [marginTop]=\"-60\"> </tak-error>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakDateFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakDateFieldComponent, isStandalone: true, selector: "tak-date-field", inputs: { appearance: "appearance", autocomplete: "autocomplete", color: "color", placeholder: "placeholder", notInput: "notInput", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], ngImport: i0, template: "@if (!notInput) {\r\n<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }} @if (required) {\r\n      <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      matInput\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [matDatepicker]=\"picker\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (dateChange)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      (focusout)=\"onFocusout()\"\r\n    />\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n  </mat-form-field>\r\n  @if (isInvalid || (isSubmitted && control.invalid)) {\r\n  <tak-error [control]=\"control\" [isDateField]=\"true\" />\r\n  }\r\n</div>\r\n} @if (notInput) {\r\n<div>\r\n  <div\r\n    class=\"tak__date-not-input__picker-container\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n  >\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n  </div>\r\n  <div class=\"tak__date-not-input__field-container\">\r\n    <mat-form-field [color]=\"color\">\r\n      <input\r\n        matInput\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        autocomplete=\"off\"\r\n        [matDatepicker]=\"picker\"\r\n        [value]=\"value\"\r\n        (keyup)=\"onChange($event)\"\r\n        (dateChange)=\"onChange($event)\"\r\n        [disabled]=\"isDisabled\"\r\n        (focusout)=\"onFocusout()\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakDateFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         TakErrorComponent,
@@ -406,7 +404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatFormFieldModule,
                         MatDatepickerModule,
                         MatInputModule,
-                    ], providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], selector: 'tak-date-field', template: "@if (!notInput) {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field\r\n      [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n      [appearance]=\"appearance\"\r\n      [color]=\"color\"\r\n    >\r\n      <mat-label>\r\n        <ng-content />{{ ' ' }}\r\n        @if (required) {\r\n          <span class=\"tak-field__danger-x\">*</span>\r\n        }\r\n      </mat-label>\r\n      <input\r\n        matInput\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [matDatepicker]=\"picker\"\r\n        [value]=\"value\"\r\n        (keyup)=\"onChange($event)\"\r\n        (dateChange)=\"onChange($event)\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"isDisabled\"\r\n        (focusout)=\"onFocusout()\"\r\n      />\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n    </mat-form-field>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\" [isDateField]=\"true\"> </tak-error>\r\n    }\r\n  </div>\r\n}\r\n@if (notInput) {\r\n  <div>\r\n    <div\r\n      class=\"tak__date-not-input__picker-container\"\r\n      [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    >\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n    </div>\r\n    <div class=\"tak__date-not-input__field-container\">\r\n      <mat-form-field [color]=\"color\">\r\n        <input\r\n          matInput\r\n          [min]=\"minDate\"\r\n          [max]=\"maxDate\"\r\n          autocomplete=\"off\"\r\n          [matDatepicker]=\"picker\"\r\n          [value]=\"value\"\r\n          (keyup)=\"onChange($event)\"\r\n          (dateChange)=\"onChange($event)\"\r\n          [disabled]=\"isDisabled\"\r\n          (focusout)=\"onFocusout()\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\" [isDateField]=\"true\" [marginTop]=\"-60\"> </tak-error>\r\n    }\r\n  </div>\r\n}\r\n" }]
+                    ], providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], selector: 'tak-date-field', template: "@if (!notInput) {\r\n<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }} @if (required) {\r\n      <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      matInput\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [matDatepicker]=\"picker\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (dateChange)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      (focusout)=\"onFocusout()\"\r\n    />\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n  </mat-form-field>\r\n  @if (isInvalid || (isSubmitted && control.invalid)) {\r\n  <tak-error [control]=\"control\" [isDateField]=\"true\" />\r\n  }\r\n</div>\r\n} @if (notInput) {\r\n<div>\r\n  <div\r\n    class=\"tak__date-not-input__picker-container\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n  >\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker (closed)=\"onCloseDatePicker()\" #picker></mat-datepicker>\r\n  </div>\r\n  <div class=\"tak__date-not-input__field-container\">\r\n    <mat-form-field [color]=\"color\">\r\n      <input\r\n        matInput\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n        autocomplete=\"off\"\r\n        [matDatepicker]=\"picker\"\r\n        [value]=\"value\"\r\n        (keyup)=\"onChange($event)\"\r\n        (dateChange)=\"onChange($event)\"\r\n        [disabled]=\"isDisabled\"\r\n        (focusout)=\"onFocusout()\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -615,10 +613,10 @@ class TakAutocompleteFieldComponent {
     get lastValue() {
         return this._lastValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakAutocompleteFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakAutocompleteFieldComponent, isStandalone: true, selector: "tak-autocomplete-field", inputs: { option: "option", extraInfo: "extraInfo", autocomplete: "autocomplete", appearance: "appearance", color: "color", hasClearButton: "hasClearButton", suggestions: "suggestions", disabled: "disabled", hasTitle: "hasTitle", isLoading: "isLoading", isRemoteSearch: "isRemoteSearch", debounceTimeForRemoteSearch: "debounceTimeForRemoteSearch" }, outputs: { onSelect: "onSelect", onSearch: "onSearch" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [matAutocomplete]=\"auto\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      (focus)=\"onFocus()\"\r\n      (focusout)=\"onFocusout()\"\r\n    />\r\n    @if (isRemoteSearch && isLoading) {\r\n      <button matSuffix mat-icon-button type=\"button\">\r\n        <mat-spinner [diameter]=\"15\" mode=\"indeterminate\"></mat-spinner>\r\n      </button>\r\n    }\r\n    @if ((control.value || value) && hasClearButton && !disabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (suggestion of filteredOptions | async; track suggestion) {\r\n        <mat-option\r\n          [value]=\"suggestion[option]\"\r\n          [class.tak-option-extra]=\"extraInfo\"\r\n          (onSelectionChange)=\"emit($event)\"\r\n          (click)=\"emitWithClick(suggestion)\"\r\n          title=\"{{ suggestion[option] }} {{ extraInfo ? '(' + suggestion[extraInfo] + ')' : '' }}\"\r\n        >\r\n          <span>{{ suggestion[option] }}</span>\r\n          @if (extraInfo) {\r\n            <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n          }\r\n        </mat-option>\r\n      }\r\n      @if (notSuggestions && control.invalid) {\r\n        <mat-option>\r\n          <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  @if (isInvalid || (isSubmitted && control.invalid)) {\r\n    <tak-error [control]=\"control\"></tak-error>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakAutocompleteFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakAutocompleteFieldComponent, isStandalone: true, selector: "tak-autocomplete-field", inputs: { option: "option", extraInfo: "extraInfo", autocomplete: "autocomplete", appearance: "appearance", color: "color", hasClearButton: "hasClearButton", suggestions: "suggestions", disabled: "disabled", hasTitle: "hasTitle", isLoading: "isLoading", isRemoteSearch: "isRemoteSearch", debounceTimeForRemoteSearch: "debounceTimeForRemoteSearch" }, outputs: { onSelect: "onSelect", onSearch: "onSearch" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [matAutocomplete]=\"auto\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      (focus)=\"onFocus()\"\r\n      (focusout)=\"onFocusout()\"\r\n    />\r\n    @if (isRemoteSearch && isLoading) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\">\r\n        <mat-spinner [diameter]=\"15\" mode=\"indeterminate\"></mat-spinner>\r\n      </button>\r\n    }\r\n    @if ((control.value || value) && hasClearButton && !disabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (suggestion of filteredOptions | async; track suggestion) {\r\n        <mat-option\r\n          [value]=\"suggestion[option]\"\r\n          [class.tak-option-extra]=\"extraInfo\"\r\n          (onSelectionChange)=\"emit($event)\"\r\n          (click)=\"emitWithClick(suggestion)\"\r\n          title=\"{{ suggestion[option] }} {{ extraInfo ? '(' + suggestion[extraInfo] + ')' : '' }}\"\r\n        >\r\n          <span>{{ suggestion[option] }}</span>\r\n          @if (extraInfo) {\r\n            <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n          }\r\n        </mat-option>\r\n      }\r\n      @if (notSuggestions && control.invalid) {\r\n        <mat-option>\r\n          <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  @if (isInvalid || (isSubmitted && control.invalid)) {\r\n    <tak-error [control]=\"control\"></tak-error>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "pipe", type: i8.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakAutocompleteFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakAutocompleteFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         FormsModule,
@@ -631,7 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatAutocompleteModule,
                         MatIconModule,
                         MatInputModule,
-                    ], selector: 'tak-autocomplete-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [matAutocomplete]=\"auto\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      (focus)=\"onFocus()\"\r\n      (focusout)=\"onFocusout()\"\r\n    />\r\n    @if (isRemoteSearch && isLoading) {\r\n      <button matSuffix mat-icon-button type=\"button\">\r\n        <mat-spinner [diameter]=\"15\" mode=\"indeterminate\"></mat-spinner>\r\n      </button>\r\n    }\r\n    @if ((control.value || value) && hasClearButton && !disabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (suggestion of filteredOptions | async; track suggestion) {\r\n        <mat-option\r\n          [value]=\"suggestion[option]\"\r\n          [class.tak-option-extra]=\"extraInfo\"\r\n          (onSelectionChange)=\"emit($event)\"\r\n          (click)=\"emitWithClick(suggestion)\"\r\n          title=\"{{ suggestion[option] }} {{ extraInfo ? '(' + suggestion[extraInfo] + ')' : '' }}\"\r\n        >\r\n          <span>{{ suggestion[option] }}</span>\r\n          @if (extraInfo) {\r\n            <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n          }\r\n        </mat-option>\r\n      }\r\n      @if (notSuggestions && control.invalid) {\r\n        <mat-option>\r\n          <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  @if (isInvalid || (isSubmitted && control.invalid)) {\r\n    <tak-error [control]=\"control\"></tak-error>\r\n  }\r\n</div>\r\n" }]
+                    ], selector: 'tak-autocomplete-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [matAutocomplete]=\"auto\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      (focus)=\"onFocus()\"\r\n      (focusout)=\"onFocusout()\"\r\n    />\r\n    @if (isRemoteSearch && isLoading) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\">\r\n        <mat-spinner [diameter]=\"15\" mode=\"indeterminate\"></mat-spinner>\r\n      </button>\r\n    }\r\n    @if ((control.value || value) && hasClearButton && !disabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (suggestion of filteredOptions | async; track suggestion) {\r\n        <mat-option\r\n          [value]=\"suggestion[option]\"\r\n          [class.tak-option-extra]=\"extraInfo\"\r\n          (onSelectionChange)=\"emit($event)\"\r\n          (click)=\"emitWithClick(suggestion)\"\r\n          title=\"{{ suggestion[option] }} {{ extraInfo ? '(' + suggestion[extraInfo] + ')' : '' }}\"\r\n        >\r\n          <span>{{ suggestion[option] }}</span>\r\n          @if (extraInfo) {\r\n            <span class=\"tak-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n          }\r\n        </mat-option>\r\n      }\r\n      @if (notSuggestions && control.invalid) {\r\n        <mat-option>\r\n          <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  @if (isInvalid || (isSubmitted && control.invalid)) {\r\n    <tak-error [control]=\"control\"></tak-error>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -705,10 +703,10 @@ class TakDateRangeFieldComponent {
     get isDisabled() {
         return this.start.disabled || this.end.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakDateRangeFieldComponent, isStandalone: true, selector: "tak-date-range-field", inputs: { autocomplete: "autocomplete", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", appearance: "appearance", color: "color", start: "start", end: "end", notInput: "notInput", disabled: "disabled" }, providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], ngImport: i0, template: "@if (!notInput) {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n      <mat-label>\r\n        <ng-content />\r\n      </mat-label>\r\n      <mat-date-range-input [rangePicker]=\"picker\">\r\n        <input\r\n          matStartDate\r\n          [placeholder]=\"startPlaceholder\"\r\n          [formControl]=\"start\"\r\n          [autocomplete]=\"autocomplete\"\r\n        />\r\n        <input matEndDate [placeholder]=\"endPlaceholder\" [formControl]=\"end\" />\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker></mat-date-range-picker>\r\n    </mat-form-field>\r\n    @if ((start.invalid || end.invalid) && (start.touched || end.touched)) {\r\n      <tak-error [start]=\"start\" [end]=\"end\"> </tak-error>\r\n    }\r\n  </div>\r\n}\r\n@if (notInput) {\r\n  <div>\r\n    <div\r\n      class=\"tak__date-not-input__picker-container\"\r\n      [class.mat-form-field-invalid]=\"\r\n        (start.invalid || end.invalid) && (start.touched || end.touched)\r\n      \"\r\n    >\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker [disabled]=\"isDisabled\"></mat-date-range-picker>\r\n    </div>\r\n    <div class=\"tak__date-not-input__field-container\">\r\n      <mat-form-field [color]=\"color\">\r\n        <mat-date-range-input [rangePicker]=\"picker\">\r\n          <input matStartDate [formControl]=\"start\" />\r\n          <input matEndDate [formControl]=\"end\" />\r\n        </mat-date-range-input>\r\n      </mat-form-field>\r\n    </div>\r\n    @if ((start.invalid || end.invalid) && (start.touched || end.touched)) {\r\n      <tak-error [start]=\"start\" [end]=\"end\" [marginTop]=\"-60\"></tak-error>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatInputModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakDateRangeFieldComponent, isStandalone: true, selector: "tak-date-range-field", inputs: { autocomplete: "autocomplete", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", appearance: "appearance", color: "color", start: "start", end: "end", notInput: "notInput", disabled: "disabled" }, providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], ngImport: i0, template: "@if (!notInput) {\r\n<div class=\"tak-form-container\">\r\n  <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n    <mat-label>\r\n      <ng-content />\r\n    </mat-label>\r\n    <mat-date-range-input [rangePicker]=\"picker\">\r\n      <input\r\n        matStartDate\r\n        [placeholder]=\"startPlaceholder\"\r\n        [formControl]=\"start\"\r\n        [autocomplete]=\"autocomplete\"\r\n      />\r\n      <input matEndDate [placeholder]=\"endPlaceholder\" [formControl]=\"end\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  @if ((start.invalid || end.invalid) && (start.touched || end.touched)) {\r\n  <tak-error [start]=\"start\" [end]=\"end\"> </tak-error>\r\n  }\r\n</div>\r\n} @if (notInput) {\r\n<div>\r\n  <div\r\n    class=\"tak__date-not-input__picker-container\"\r\n    [class.mat-form-field-invalid]=\"\r\n        (start.invalid || end.invalid) && (start.touched || end.touched)\r\n      \"\r\n  >\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [disabled]=\"isDisabled\"></mat-date-range-picker>\r\n  </div>\r\n  <div class=\"tak__date-not-input__field-container\">\r\n    <mat-form-field [color]=\"color\">\r\n      <mat-date-range-input [rangePicker]=\"picker\">\r\n        <input matStartDate [formControl]=\"start\" />\r\n        <input matEndDate [formControl]=\"end\" />\r\n      </mat-date-range-input>\r\n    </mat-form-field>\r\n  </div>\r\n  @if ((start.invalid || end.invalid) && (start.touched || end.touched) && !notInput) {\r\n  <tak-error [start]=\"start\" [end]=\"end\" [marginTop]=\"-60\"></tak-error>\r\n  }\r\n</div>\r\n}\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatInputModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         TakErrorComponent,
@@ -719,7 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatFormFieldModule,
                         MatDatepickerModule,
                         MatInputModule,
-                    ], providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], selector: 'tak-date-range-field', template: "@if (!notInput) {\r\n  <div class=\"tak-form-container\">\r\n    <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n      <mat-label>\r\n        <ng-content />\r\n      </mat-label>\r\n      <mat-date-range-input [rangePicker]=\"picker\">\r\n        <input\r\n          matStartDate\r\n          [placeholder]=\"startPlaceholder\"\r\n          [formControl]=\"start\"\r\n          [autocomplete]=\"autocomplete\"\r\n        />\r\n        <input matEndDate [placeholder]=\"endPlaceholder\" [formControl]=\"end\" />\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker></mat-date-range-picker>\r\n    </mat-form-field>\r\n    @if ((start.invalid || end.invalid) && (start.touched || end.touched)) {\r\n      <tak-error [start]=\"start\" [end]=\"end\"> </tak-error>\r\n    }\r\n  </div>\r\n}\r\n@if (notInput) {\r\n  <div>\r\n    <div\r\n      class=\"tak__date-not-input__picker-container\"\r\n      [class.mat-form-field-invalid]=\"\r\n        (start.invalid || end.invalid) && (start.touched || end.touched)\r\n      \"\r\n    >\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker [disabled]=\"isDisabled\"></mat-date-range-picker>\r\n    </div>\r\n    <div class=\"tak__date-not-input__field-container\">\r\n      <mat-form-field [color]=\"color\">\r\n        <mat-date-range-input [rangePicker]=\"picker\">\r\n          <input matStartDate [formControl]=\"start\" />\r\n          <input matEndDate [formControl]=\"end\" />\r\n        </mat-date-range-input>\r\n      </mat-form-field>\r\n    </div>\r\n    @if ((start.invalid || end.invalid) && (start.touched || end.touched)) {\r\n      <tak-error [start]=\"start\" [end]=\"end\" [marginTop]=\"-60\"></tak-error>\r\n    }\r\n  </div>\r\n}\r\n" }]
+                    ], providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], selector: 'tak-date-range-field', template: "@if (!notInput) {\r\n<div class=\"tak-form-container\">\r\n  <mat-form-field [appearance]=\"appearance\" [color]=\"color\">\r\n    <mat-label>\r\n      <ng-content />\r\n    </mat-label>\r\n    <mat-date-range-input [rangePicker]=\"picker\">\r\n      <input\r\n        matStartDate\r\n        [placeholder]=\"startPlaceholder\"\r\n        [formControl]=\"start\"\r\n        [autocomplete]=\"autocomplete\"\r\n      />\r\n      <input matEndDate [placeholder]=\"endPlaceholder\" [formControl]=\"end\" />\r\n    </mat-date-range-input>\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n  @if ((start.invalid || end.invalid) && (start.touched || end.touched)) {\r\n  <tak-error [start]=\"start\" [end]=\"end\"> </tak-error>\r\n  }\r\n</div>\r\n} @if (notInput) {\r\n<div>\r\n  <div\r\n    class=\"tak__date-not-input__picker-container\"\r\n    [class.mat-form-field-invalid]=\"\r\n        (start.invalid || end.invalid) && (start.touched || end.touched)\r\n      \"\r\n  >\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-date-range-picker #picker [disabled]=\"isDisabled\"></mat-date-range-picker>\r\n  </div>\r\n  <div class=\"tak__date-not-input__field-container\">\r\n    <mat-form-field [color]=\"color\">\r\n      <mat-date-range-input [rangePicker]=\"picker\">\r\n        <input matStartDate [formControl]=\"start\" />\r\n        <input matEndDate [formControl]=\"end\" />\r\n      </mat-date-range-input>\r\n    </mat-form-field>\r\n  </div>\r\n  @if ((start.invalid || end.invalid) && (start.touched || end.touched) && !notInput) {\r\n  <tak-error [start]=\"start\" [end]=\"end\" [marginTop]=\"-60\"></tak-error>\r\n  }\r\n</div>\r\n}\r\n" }]
         }], propDecorators: { autocomplete: [{
                 type: Input
             }], startPlaceholder: [{
@@ -874,10 +872,10 @@ class TakMoneyFieldComponent {
     get value() {
         return this._value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakMoneyFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakMoneyFieldComponent, isStandalone: true, selector: "tak-money-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", defaultFilterStyle: "defaultFilterStyle", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      class=\"money-input\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakMoneyFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakMoneyFieldComponent, isStandalone: true, selector: "tak-money-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", defaultFilterStyle: "defaultFilterStyle", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      class=\"money-input\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button\r\n        matSuffix\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakMoneyFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakMoneyFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         TakErrorComponent,
@@ -888,7 +886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatInputModule,
-                    ], selector: 'tak-money-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      class=\"money-input\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], selector: 'tak-money-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      class=\"money-input\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button\r\n        matSuffix\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -935,7 +933,7 @@ class TakGeneralFieldComponent {
         this.autocomplete = 'off';
         this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
         this.type = 'text';
-        this.floatLabel = 'never';
+        this.floatLabel = 'auto';
         this.color = 'primary';
         this.actionIcon = 'search';
         this.defaultFilterStyle = true;
@@ -966,10 +964,8 @@ class TakGeneralFieldComponent {
         const form = this.control;
         if (this.type === 'filter' && this.defaultFilterStyle) {
             this.control.removeValidators(Validators.required);
-            this.appearance = 'legacy';
-            this.floatLabel = 'never';
-            if (!this.placeholder)
-                this.placeholder = 'Buscar';
+            this.appearance = 'fill';
+            this.floatLabel = 'auto';
             this.hasClearButton = true;
             this._cd.markForCheck();
         }
@@ -1059,10 +1055,10 @@ class TakGeneralFieldComponent {
     get value() {
         return this._value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakGeneralFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakGeneralFieldComponent, isStandalone: true, selector: "tak-general-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", type: "type", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", defaultFilterStyle: "defaultFilterStyle", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      [type]=\"type === 'password' && !decrypted ? 'password' : 'text'\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && type === 'password' && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"showPassword()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{\r\n          decrypted ? 'visibility_off' : 'visibility'\r\n        }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakGeneralFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakGeneralFieldComponent, isStandalone: true, selector: "tak-general-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", type: "type", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", defaultFilterStyle: "defaultFilterStyle", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      [type]=\"type === 'password' && !decrypted ? 'password' : 'text'\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button\r\n        matSuffix\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && type === 'password' && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"showPassword()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{\r\n          decrypted ? 'visibility_off' : 'visibility'\r\n        }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakGeneralFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakGeneralFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         TakErrorComponent,
@@ -1073,7 +1069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatInputModule,
-                    ], selector: 'tak-general-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      [type]=\"type === 'password' && !decrypted ? 'password' : 'text'\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && type === 'password' && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"showPassword()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{\r\n          decrypted ? 'visibility_off' : 'visibility'\r\n        }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], selector: 'tak-general-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      [type]=\"type === 'password' && !decrypted ? 'password' : 'text'\"\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button\r\n        matSuffix\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && type === 'password' && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"showPassword()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{\r\n          decrypted ? 'visibility_off' : 'visibility'\r\n        }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1223,10 +1219,10 @@ class TakNumberFieldComponent {
     get value() {
         return this._value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakNumberFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakNumberFieldComponent, isStandalone: true, selector: "tak-number-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", placeholder: "placeholder", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakNumberFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakNumberFieldComponent, isStandalone: true, selector: "tak-number-field", inputs: { autocomplete: "autocomplete", appearance: "appearance", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", placeholder: "placeholder", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button\r\n        matSuffix\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakNumberFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakNumberFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         TakErrorComponent,
@@ -1237,7 +1233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatInputModule,
-                    ], selector: 'tak-number-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button type=\"button\" (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], selector: 'tak-number-field', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      [min]=\"min\"\r\n      [max]=\"max\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      (keyup)=\"onChange($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    />\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button matSuffix mat-icon-button color=\"no-theme\" type=\"button\" (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton && !isDisabled) {\r\n      <button\r\n        matSuffix\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1392,10 +1388,10 @@ class TakTextareaComponent {
     get value() {
         return this._value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakTextareaComponent, isStandalone: true, selector: "tak-textarea", inputs: { autocomplete: "autocomplete", appearance: "appearance", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", defaultFilterStyle: "defaultFilterStyle", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", isTextArea: "isTextArea", placeholder: "placeholder", heightInPx: "heightInPx", minLength: "minLength", maxLength: "maxLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <textarea\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      [style.height.px]=\"heightInPx\"\r\n      [placeholder]=\"placeholder\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    ></textarea>\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button mat-icon-button type=\"button\" matSuffix (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton) {\r\n      <button mat-icon-button type=\"button\" matSuffix (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakTextareaComponent, isStandalone: true, selector: "tak-textarea", inputs: { autocomplete: "autocomplete", appearance: "appearance", floatLabel: "floatLabel", color: "color", actionIcon: "actionIcon", defaultFilterStyle: "defaultFilterStyle", hasActionButton: "hasActionButton", hasClearButton: "hasClearButton", countCaracters: "countCaracters", isTextArea: "isTextArea", placeholder: "placeholder", heightInPx: "heightInPx", minLength: "minLength", maxLength: "maxLength", disabled: "disabled" }, outputs: { onExecuteAction: "onExecuteAction", onKeyUp: "onKeyUp" }, ngImport: i0, template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <textarea\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      [style.height.px]=\"heightInPx\"\r\n      [placeholder]=\"placeholder\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    ></textarea>\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button mat-icon-button color=\"no-theme\" type=\"button\" matSuffix (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton) {\r\n      <button\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        matSuffix\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakTextareaComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         TakErrorComponent,
@@ -1406,7 +1402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatInputModule,
-                    ], selector: 'tak-textarea', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <textarea\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      [style.height.px]=\"heightInPx\"\r\n      [placeholder]=\"placeholder\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    ></textarea>\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button mat-icon-button type=\"button\" matSuffix (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton) {\r\n      <button mat-icon-button type=\"button\" matSuffix (click)=\"onExecuteAction.emit(control.value)\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], selector: 'tak-textarea', template: "<div class=\"tak-form-container\">\r\n  <mat-form-field\r\n    [floatLabel]=\"floatLabel\"\r\n    [class.mat-form-field-invalid]=\"isInvalid || (isSubmitted && control.invalid)\"\r\n    [appearance]=\"appearance\"\r\n    [color]=\"color\"\r\n  >\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (required) {\r\n        <span class=\"tak-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <textarea\r\n      matInput\r\n      [autocomplete]=\"autocomplete\"\r\n      [value]=\"value\"\r\n      [style.height.px]=\"heightInPx\"\r\n      [placeholder]=\"placeholder\"\r\n      (keyup)=\"onChange($event)\"\r\n      (change)=\"onChange($event)\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.minLength]=\"minLength\"\r\n      [attr.maxLength]=\"maxLength\"\r\n      (focusout)=\"onFocusOut()\"\r\n    ></textarea>\r\n    @if (control.value && hasClearButton && !isDisabled) {\r\n      <button mat-icon-button color=\"no-theme\" type=\"button\" matSuffix (click)=\"onClearControl()\">\r\n        <mat-icon class=\"tak-suffix-icon-button\">close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (control.value && hasActionButton) {\r\n      <button\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        type=\"button\"\r\n        matSuffix\r\n        (click)=\"onExecuteAction.emit(control.value)\"\r\n      >\r\n        <mat-icon class=\"tak-suffix-icon-button\">{{ actionIcon }}</mat-icon>\r\n      </button>\r\n    }\r\n    @if (countCaracters) {\r\n      <mat-hint align=\"end\" class=\"tak-hint\">\r\n        {{ control.value?.length || 0 }}/{{ maxLength }}\r\n      </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <div [style.maxWidth]=\"countCaracters ? '80%' : '100%'\">\r\n    @if (isInvalid || (isSubmitted && control.invalid)) {\r\n      <tak-error [control]=\"control\"></tak-error>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1583,10 +1579,10 @@ class TakRemoteAutocompleteFieldComponent {
     get notSuggestions() {
         return this._notSuggestions;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakRemoteAutocompleteFieldComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i2$3.TakToast }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakRemoteAutocompleteFieldComponent, isStandalone: true, selector: "tak-remote-autocomplete-field", inputs: { remoteUrl: "remoteUrl", params: "params", option: "option", extraInfo: "extraInfo", justOneLoad: "justOneLoad" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "@if (!justOneLoad || (justOneLoad && wasLoaded)) {\r\n  <mat-form-field appearance=\"standard\">\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (isRequired) {\r\n        <span class=\"gcm-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input matInput [formControl]=\"autocomplete\" [matAutocomplete]=\"auto\" />\r\n\r\n    @if (isLoading || (autocomplete.value === null && isLoadingItem)) {\r\n      <mat-spinner\r\n        mat-icon-button\r\n        [diameter]=\"15\"\r\n        mode=\"indeterminate\"\r\n        class=\"spinner-loading\"\r\n      ></mat-spinner>\r\n    }\r\n    <!---->\r\n\r\n    @if (autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"reset()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (justOneLoad && !autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"refresh()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @if (!justOneLoad) {\r\n        @for (suggestion of suggestions; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      } @else {\r\n        @for (suggestion of filteredOptions | async; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n}\r\n", styles: ["mat-spinner.spinner-loading{display:inline;margin-left:-10px}mat-spinner.spinner-loading>svg{margin-top:-5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakRemoteAutocompleteFieldComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i2$3.TakToast }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TakRemoteAutocompleteFieldComponent, isStandalone: true, selector: "tak-remote-autocomplete-field", inputs: { remoteUrl: "remoteUrl", params: "params", option: "option", extraInfo: "extraInfo", justOneLoad: "justOneLoad" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "@if (!justOneLoad || (justOneLoad && wasLoaded)) {\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (isRequired) {\r\n        <span class=\"gcm-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input matInput [formControl]=\"autocomplete\" [matAutocomplete]=\"auto\" />\r\n\r\n    @if (isLoading || (autocomplete.value === null && isLoadingItem)) {\r\n      <mat-spinner\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        [diameter]=\"15\"\r\n        mode=\"indeterminate\"\r\n        class=\"spinner-loading\"\r\n      ></mat-spinner>\r\n    }\r\n    <!---->\r\n\r\n    @if (autocomplete.value) {\r\n      <button mat-icon-button color=\"no-theme\" matSuffix (click)=\"reset()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (justOneLoad && !autocomplete.value) {\r\n      <button mat-icon-button color=\"no-theme\" matSuffix (click)=\"refresh()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @if (!justOneLoad) {\r\n        @for (suggestion of suggestions; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      } @else {\r\n        @for (suggestion of filteredOptions | async; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n}\r\n", styles: ["mat-spinner.spinner-loading{display:inline;margin-left:-10px}mat-spinner.spinner-loading>svg{margin-top:-5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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.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: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakRemoteAutocompleteFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakRemoteAutocompleteFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         FormsModule,
@@ -1599,7 +1595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatIconModule,
                         MatButtonModule,
                         CommonModule,
-                    ], selector: 'tak-remote-autocomplete-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!justOneLoad || (justOneLoad && wasLoaded)) {\r\n  <mat-form-field appearance=\"standard\">\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (isRequired) {\r\n        <span class=\"gcm-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input matInput [formControl]=\"autocomplete\" [matAutocomplete]=\"auto\" />\r\n\r\n    @if (isLoading || (autocomplete.value === null && isLoadingItem)) {\r\n      <mat-spinner\r\n        mat-icon-button\r\n        [diameter]=\"15\"\r\n        mode=\"indeterminate\"\r\n        class=\"spinner-loading\"\r\n      ></mat-spinner>\r\n    }\r\n    <!---->\r\n\r\n    @if (autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"reset()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (justOneLoad && !autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"refresh()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @if (!justOneLoad) {\r\n        @for (suggestion of suggestions; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      } @else {\r\n        @for (suggestion of filteredOptions | async; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n}\r\n", styles: ["mat-spinner.spinner-loading{display:inline;margin-left:-10px}mat-spinner.spinner-loading>svg{margin-top:-5px}\n"] }]
+                    ], selector: 'tak-remote-autocomplete-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!justOneLoad || (justOneLoad && wasLoaded)) {\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label>\r\n      <ng-content />{{ ' ' }}\r\n      @if (isRequired) {\r\n        <span class=\"gcm-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input matInput [formControl]=\"autocomplete\" [matAutocomplete]=\"auto\" />\r\n\r\n    @if (isLoading || (autocomplete.value === null && isLoadingItem)) {\r\n      <mat-spinner\r\n        mat-icon-button\r\n        color=\"no-theme\"\r\n        [diameter]=\"15\"\r\n        mode=\"indeterminate\"\r\n        class=\"spinner-loading\"\r\n      ></mat-spinner>\r\n    }\r\n    <!---->\r\n\r\n    @if (autocomplete.value) {\r\n      <button mat-icon-button color=\"no-theme\" matSuffix (click)=\"reset()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (justOneLoad && !autocomplete.value) {\r\n      <button mat-icon-button color=\"no-theme\" matSuffix (click)=\"refresh()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @if (!justOneLoad) {\r\n        @for (suggestion of suggestions; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      } @else {\r\n        @for (suggestion of filteredOptions | async; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n}\r\n", styles: ["mat-spinner.spinner-loading{display:inline;margin-left:-10px}mat-spinner.spinner-loading>svg{margin-top:-5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.TakToast }], propDecorators: { remoteUrl: [{
                 type: Input
             }], params: [{
@@ -1626,8 +1622,8 @@ const components = [
 ];
 /** @deprecated Use standalone */
 class TakFieldsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, imports: [TakSelectFieldComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakFieldsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TakFieldsModule, imports: [TakSelectFieldComponent,
             TakDateFieldComponent,
             TakAutocompleteFieldComponent,
             TakDateRangeFieldComponent,
@@ -1650,7 +1646,7 @@ class TakFieldsModule {
             TakMoneyFieldComponent,
             TakTextareaComponent,
             TakNumberFieldComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], imports: [components, ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakFieldsModule, providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }], imports: [components, ReactiveFormsModule,
             MatAutocompleteModule,
             FormsModule,
             MatNativeDateModule,
@@ -1659,7 +1655,7 @@ class TakFieldsModule {
             FormsModule,
             MatNativeDateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TakFieldsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [