@kato-lee/components 1.0.8 → 1.1.0

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

@@ -1,36 +1,36 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ViewChild, Input, EventEmitter, Self, Optional, Output, NgModule, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import { ESCAPE } from '@kato-lee/cdk/keycodes';
-import * as i10 from '@angular/common';
+import { Pipe, Component, ViewChild, Input, EventEmitter, Self, Optional, Output, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i2$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
-import * as i2 from '@kato-lee/material/form-field';
+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 { 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 i7 from '@kato-lee/material/select';
+import * as i2 from '@kato-lee/material/tooltip';
+import { MatTooltipModule } from '@kato-lee/material/tooltip';
+import * as i5 from '@kato-lee/material/select';
 import { MatSelectModule } from '@kato-lee/material/select';
-import * as i3 from '@kato-lee/material/button';
+import * as i3$1 from '@kato-lee/material/button';
 import { MatButtonModule } from '@kato-lee/material/button';
-import * as i4 from '@kato-lee/material/core';
-import { MatNativeDateModule, MatOptionModule, MAT_DATE_LOCALE } from '@kato-lee/material/core';
-import * as i6 from '@kato-lee/material/input';
+import * as i5$1 from '@kato-lee/material/input';
 import { MatInputModule } from '@kato-lee/material/input';
-import * as i5 from '@kato-lee/material/icon';
+import * as i4 from '@kato-lee/material/icon';
 import { MatIconModule } from '@kato-lee/material/icon';
-import * as i3$1 from '@kato-lee/material/datepicker';
-import { MatDatepickerModule } from '@kato-lee/material/datepicker';
-import * as i8 from '@kato-lee/material/tooltip';
-import { MatTooltipModule } from '@kato-lee/material/tooltip';
-import { takeUntil } from 'rxjs/operators';
-import { Subject, takeUntil as takeUntil$1, map, debounceTime, distinctUntilChanged, firstValueFrom } from 'rxjs';
-import * as i9 from '@kato-lee/material/menu';
+import * as i3 from '@kato-lee/material/menu';
 import { MatMenuModule } from '@kato-lee/material/menu';
-import * as i2$1 from '@kato-lee/material/progress-spinner';
+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 { MatProgressSpinnerModule } from '@kato-lee/material/progress-spinner';
-import * as i5$1 from '@kato-lee/material/autocomplete';
+import * as i6$1 from '@kato-lee/material/autocomplete';
 import { MatAutocompleteModule } from '@kato-lee/material/autocomplete';
 import * as i1$1 from '@angular/common/http';
-import * as i2$2 from '@kato-lee/components/toast';
+import * as i2$3 from '@kato-lee/components/toast';
 
 class TakErrorEqualsPipe {
     transform(errors, error, args) {
@@ -42,11 +42,11 @@ class TakErrorEqualsPipe {
         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, name: "errorEquals" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, isStandalone: true, name: "errorEquals" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'errorEquals' }]
+            args: [{ standalone: true, name: 'errorEquals' }]
         }] });
 
 const en = {
@@ -82,11 +82,11 @@ class TakErrorMsgPipe {
             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, name: "errorMsg" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, isStandalone: true, name: "errorMsg" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'errorMsg' }]
+            args: [{ standalone: true, name: 'errorMsg' }]
         }] });
 
 class TakErrorComponent {
@@ -118,11 +118,11 @@ class TakErrorComponent {
         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, 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: "pipe", type: TakErrorEqualsPipe, name: "errorEquals" }, { kind: "pipe", type: TakErrorMsgPipe, name: "errorMsg" }] }); }
+    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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorComponent, decorators: [{
             type: Component,
-            args: [{ 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" }]
+            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: [{
                 type: ViewChild,
                 args: ['error']
@@ -234,11 +234,24 @@ class TakSelectFieldComponent {
         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, 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></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: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.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: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        MatTooltipModule,
+                        MatMenuModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        TakErrorComponent,
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        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" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -380,11 +393,20 @@ class TakDateFieldComponent {
         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, selector: "tak-date-field", inputs: { appearance: "appearance", autocomplete: "autocomplete", color: "color", placeholder: "placeholder", notInput: "notInput", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, 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></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: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "directive", type: i6.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        TakErrorComponent,
+                        FormsModule,
+                        CommonModule,
+                        MatNativeDateModule,
+                        ReactiveFormsModule,
+                        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" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -594,11 +616,22 @@ class TakAutocompleteFieldComponent {
         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, 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></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: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3.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: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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: "pipe", type: i10.AsyncPipe, name: "async" }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakAutocompleteFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        CommonModule,
+                        TakErrorComponent,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        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" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -635,20 +668,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Output
             }] } });
 
-class TakErrorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakErrorModule, declarations: [TakErrorEqualsPipe, TakErrorMsgPipe, TakErrorComponent], imports: [FormsModule, CommonModule, ReactiveFormsModule], exports: [TakErrorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorModule, imports: [FormsModule, CommonModule, ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TakErrorEqualsPipe, TakErrorMsgPipe, TakErrorComponent],
-                    imports: [FormsModule, CommonModule, ReactiveFormsModule],
-                    exports: [TakErrorComponent],
-                }]
-        }] });
-
 class TakDateRangeFieldComponent {
     constructor() {
         this.autocomplete = 'off';
@@ -687,11 +706,20 @@ class TakDateRangeFieldComponent {
         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, selector: "tak-date-range-field", inputs: { autocomplete: "autocomplete", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", appearance: "appearance", color: "color", start: "start", end: "end", notInput: "notInput", disabled: "disabled" }, 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></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: "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: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }] }); }
+    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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateRangeFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        TakErrorComponent,
+                        FormsModule,
+                        CommonModule,
+                        MatNativeDateModule,
+                        ReactiveFormsModule,
+                        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" }]
         }], propDecorators: { autocomplete: [{
                 type: Input
             }], startPlaceholder: [{
@@ -847,11 +875,20 @@ class TakMoneyFieldComponent {
         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, 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></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: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3.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: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakMoneyFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        TakErrorComponent,
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        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" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1023,11 +1060,20 @@ class TakGeneralFieldComponent {
         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, 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></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: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3.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: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakGeneralFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        TakErrorComponent,
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        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" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1178,11 +1224,20 @@ class TakNumberFieldComponent {
         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, 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></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: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3.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: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakNumberFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        TakErrorComponent,
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        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" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1338,11 +1393,20 @@ class TakTextareaComponent {
         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, 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></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: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i3.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: "component", type: TakErrorComponent, selector: "tak-error", inputs: ["control", "start", "end", "isDateField", "isNumberField", "marginTop"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakTextareaComponent, decorators: [{
             type: Component,
-            args: [{ 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></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" }]
+            args: [{ standalone: true, imports: [
+                        TakErrorComponent,
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        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" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1519,8 +1583,8 @@ 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$2.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></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: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: i10.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakRemoteAutocompleteFieldComponent, decorators: [{
             type: Component,
@@ -1535,8 +1599,8 @@ 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></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"] }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$2.TakToast }], propDecorators: { remoteUrl: [{
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.TakToast }], propDecorators: { remoteUrl: [{
                 type: Input
             }], params: [{
                 type: Input
@@ -1560,31 +1624,20 @@ const components = [
     TakTextareaComponent,
     TakNumberFieldComponent,
 ];
+/** @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, declarations: [TakSelectFieldComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, imports: [TakSelectFieldComponent,
             TakDateFieldComponent,
             TakAutocompleteFieldComponent,
             TakDateRangeFieldComponent,
             TakGeneralFieldComponent,
             TakMoneyFieldComponent,
             TakTextareaComponent,
-            TakNumberFieldComponent], imports: [FormsModule,
-            CommonModule,
-            MatNativeDateModule,
-            ReactiveFormsModule,
-            MatProgressSpinnerModule,
-            MatFormFieldModule,
-            MatButtonModule,
-            MatDatepickerModule,
+            TakNumberFieldComponent, ReactiveFormsModule,
             MatAutocompleteModule,
-            TakErrorModule,
-            MatIconModule,
-            MatInputModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatTooltipModule,
-            MatMenuModule,
+            FormsModule,
+            MatNativeDateModule,
             TakRemoteAutocompleteFieldComponent], exports: [ReactiveFormsModule,
             MatAutocompleteModule,
             FormsModule,
@@ -1597,22 +1650,10 @@ 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: [FormsModule,
-            CommonModule,
-            MatNativeDateModule,
-            ReactiveFormsModule,
-            MatProgressSpinnerModule,
-            MatFormFieldModule,
-            MatButtonModule,
-            MatDatepickerModule,
+    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,
             MatAutocompleteModule,
-            TakErrorModule,
-            MatIconModule,
-            MatInputModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatTooltipModule,
-            MatMenuModule,
+            FormsModule,
+            MatNativeDateModule,
             TakRemoteAutocompleteFieldComponent, ReactiveFormsModule,
             MatAutocompleteModule,
             FormsModule,
@@ -1621,24 +1662,12 @@ class TakFieldsModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: components,
                     imports: [
-                        FormsModule,
-                        CommonModule,
-                        MatNativeDateModule,
+                        ...components,
                         ReactiveFormsModule,
-                        MatProgressSpinnerModule,
-                        MatFormFieldModule,
-                        MatButtonModule,
-                        MatDatepickerModule,
                         MatAutocompleteModule,
-                        TakErrorModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatOptionModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        MatMenuModule,
+                        FormsModule,
+                        MatNativeDateModule,
                         TakRemoteAutocompleteFieldComponent,
                     ],
                     exports: [