@kato-lee/components 1.0.3

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

@@ -0,0 +1,1486 @@
+import * as i0 from '@angular/core';
+import { Pipe, Component, ViewChild, Input, EventEmitter, Self, Optional, Output, NgModule } from '@angular/core';
+import { ESCAPE } from '@kato-lee/cdk/keycodes';
+import * as i10 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import * as i2 from '@kato-lee/material/form-field';
+import { MatFormFieldModule } from '@kato-lee/material/form-field';
+import * as i7 from '@kato-lee/material/select';
+import { MatSelectModule } from '@kato-lee/material/select';
+import * as i3 from '@kato-lee/material/button';
+import { MatButtonModule } from '@kato-lee/material/button';
+import * as i4 from '@kato-lee/material/core';
+import { MatOptionModule, MatNativeDateModule } from '@kato-lee/material/core';
+import * as i6 from '@kato-lee/material/input';
+import { MatInputModule } from '@kato-lee/material/input';
+import * as i5 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 } from 'rxjs';
+import * as i9 from '@kato-lee/material/menu';
+import { MatMenuModule } from '@kato-lee/material/menu';
+import * as i2$1 from '@kato-lee/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@kato-lee/material/progress-spinner';
+import * as i5$1 from '@kato-lee/material/autocomplete';
+import { MatAutocompleteModule } from '@kato-lee/material/autocomplete';
+
+class TakErrorEqualsPipe {
+    transform(errors, error, args) {
+        if (!errors)
+            return false;
+        const array = Object.keys(errors);
+        if (array && array.length > 0)
+            return errors[array[0]] === error;
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, name: "errorEquals" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorEqualsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'errorEquals' }]
+        }] });
+
+const en = {
+    minLengthMsg: (length) => `The field contains fewer than ${length} characters`,
+    maxLengthMsg: (length) => `The field contains more than ${length} characters`,
+    minMsg: (min) => `The number must be bigger than ${min}`,
+    maxMsg: (max) => `The number must be lower than ${max}`,
+    patternMsg: 'One or more characters not allowed',
+    requiredMsg: 'This field is required',
+    EmailMsg: 'This field must be an email',
+    badDateMsg: 'Insert a valid date',
+    DateRangeMsg: 'The range is not valid',
+};
+
+const es = {
+    minLengthMsg: (length) => `El campo contiene menos de ${length} caracteres`,
+    maxLengthMsg: (length) => `El campo contiene mas de ${length} caracteres`,
+    minMsg: (min) => `El numero debe ser mayor a ${min}`,
+    maxMsg: (max) => `El numero debe ser menor a ${max}`,
+    patternMsg: 'Uno o mas caracteres no permitidos',
+    requiredMsg: 'Este campo es requerido',
+    EmailMsg: 'Este campo debe ser un email',
+    badDateMsg: 'Inserte una fecha valida',
+    DateRangeMsg: 'El rango no es valido',
+};
+
+class TakErrorMsgPipe {
+    transform(parameter, aditionalValue) {
+        let resources = es;
+        if (aditionalValue)
+            return resources[parameter](aditionalValue);
+        else
+            return resources[parameter];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, name: "errorMsg" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorMsgPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'errorMsg' }]
+        }] });
+
+class TakErrorComponent {
+    constructor() {
+        this.isDateField = false;
+        this.isNumberField = false;
+        this.marginTop = -20;
+        this.hasPatternError = false;
+    }
+    get required() {
+        return this.control?.errors?.['required'];
+    }
+    get pattern() {
+        return this.control?.errors?.['pattern'];
+    }
+    get max() {
+        return this.control?.errors?.['max'];
+    }
+    get min() {
+        return this.control?.errors?.['min'];
+    }
+    get maxlength() {
+        return this.control?.errors?.['maxlength'];
+    }
+    get minlength() {
+        return this.control?.errors?.['minlength'];
+    }
+    get email() {
+        return this.control?.errors?.['email'];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakErrorComponent, 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" }] }); }
+}
+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" }]
+        }], propDecorators: { error: [{
+                type: ViewChild,
+                args: ['error']
+            }], control: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], end: [{
+                type: Input
+            }], isDateField: [{
+                type: Input
+            }], isNumberField: [{
+                type: Input
+            }], marginTop: [{
+                type: Input
+            }] } });
+
+const TAK_DEFAULT_APPEARANCE_FORM = 'standard';
+const TAK_PRESS_ESC_KEY = new KeyboardEvent('keydown', {
+    bubbles: true,
+    cancelable: true,
+    keyCode: ESCAPE,
+});
+
+class TakSelectFieldComponent {
+    constructor(_ngControl, _formGroupDirective, _cd) {
+        this._ngControl = _ngControl;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this.autocomplete = 'off';
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.color = 'primary';
+        this.suggestions = [];
+        this.disabled = false;
+        this.type = 'select';
+        this.tooltip = '';
+        this.icon = 'filter_list';
+        this.option = 'option';
+        this.extraInfo = '';
+        this.hasDefaultValue = false;
+        this.onSelect = new EventEmitter();
+        this.onChangeFn = (_) => { };
+        this.onTouchFn = (_) => { };
+        this.isInvalid = false;
+        this.isSubmitted = false;
+        this._unsubscribe$ = new Subject();
+        if (_ngControl)
+            this._ngControl.valueAccessor = this;
+        if (_formGroupDirective) {
+            _formGroupDirective.ngSubmit.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
+                this.isSubmitted = true;
+                _cd.markForCheck();
+            });
+        }
+    }
+    ngOnInit() {
+        if (this.suggestions.length && this.hasDefaultValue) {
+            this._ngControl.control?.setValue(this.suggestions[0]);
+        }
+        if (this.disabled)
+            this.control.disable();
+    }
+    writeValue(value) { }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    onChange(event) {
+        this.onChangeFn(event.target.value);
+        if (this.control.touched)
+            this._onValidate();
+    }
+    emit(el) {
+        if (el.isUserInput) {
+            this.onSelect.emit(el.source.value);
+            this.isInvalid = false;
+        }
+    }
+    justEmit(el) {
+        this.control.setValue(el);
+        this.onSelect.emit(el);
+        this.isInvalid = false;
+    }
+    onFocusOut() {
+        this._onValidate();
+    }
+    _onValidate() {
+        if (this.control.invalid)
+            this.isInvalid = true;
+        else
+            this.isInvalid = false;
+    }
+    ngOnDestroy() {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
+    }
+    get control() {
+        return this._ngControl?.control;
+    }
+    get directive() {
+        return this._formGroupDirective;
+    }
+    get isDisabled() {
+        return this._ngControl.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSelectFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakSelectFieldComponent, 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"] }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { autocomplete: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], suggestions: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], option: [{
+                type: Input
+            }], extraInfo: [{
+                type: Input
+            }], hasDefaultValue: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }] } });
+
+class TakDateFieldComponent {
+    constructor(_ngControl, _formGroupDirective, _cd) {
+        this._ngControl = _ngControl;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this._unsubscribe$ = new Subject();
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.autocomplete = 'off';
+        this.color = 'primary';
+        this.placeholder = '';
+        this.notInput = false;
+        this.disabled = false;
+        this.onChangeFn = (_) => { };
+        this.onTouchFn = (_) => { };
+        this._isSubmitted = false;
+        this._isInvalid = false;
+        this._required = false;
+        this._value = '';
+        if (_ngControl)
+            this._ngControl.valueAccessor = this;
+        if (_formGroupDirective) {
+            _formGroupDirective.ngSubmit.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
+                this._isSubmitted = true;
+                _cd.markForCheck();
+            });
+        }
+    }
+    ngOnInit() {
+        const form = this.control;
+        if (form?._rawValidators) {
+            form._rawValidators.map((r) => {
+                if (r.name.includes('required')) {
+                    this._required = true;
+                }
+            });
+        }
+        if (this.disabled)
+            this.control.disable();
+    }
+    ngAfterViewInit() {
+        const isValidDate = Date.parse(this.control.value);
+        if (isNaN(isValidDate))
+            this.control.setValue(null);
+        else
+            this.control.setValue(new Date(this.control.value));
+    }
+    writeValue(value) {
+        if (value === null)
+            this._isInvalid = false;
+        this._value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    onChange(event) {
+        this._value = event.target.value;
+        this.onChangeFn(event.target.value);
+        if (this.control.touched)
+            this._onValidate();
+    }
+    onFocusout() {
+        this.onTouchFn(true);
+        this._onValidate();
+    }
+    onCloseDatePicker() {
+        this.onTouchFn(true);
+        this._onValidate();
+    }
+    _onValidate() {
+        const isValidDate = Date.parse(this.control.value);
+        if (this.control.invalid ||
+            ([undefined, null, ''].indexOf(this.control.value) < 0 &&
+                this.control.valid &&
+                isNaN(isValidDate))) {
+            this._isInvalid = true;
+        }
+        else {
+            this._isInvalid = false;
+        }
+    }
+    ngOnDestroy() {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
+    }
+    get control() {
+        return this._ngControl?.control;
+    }
+    get directive() {
+        return this._formGroupDirective;
+    }
+    get isDisabled() {
+        return this._ngControl.disabled;
+    }
+    get isSubmitted() {
+        return this._isSubmitted;
+    }
+    get isInvalid() {
+        return this._isInvalid;
+    }
+    get required() {
+        return this._required;
+    }
+    get value() {
+        return this._value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakDateFieldComponent, 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"] }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { appearance: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], notInput: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class TakAutocompleteFieldComponent {
+    constructor(_ngControl, _formGroupDirective, _cd) {
+        this._ngControl = _ngControl;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this._unsubscribe$ = new Subject();
+        this.option = 'option';
+        this.extraInfo = '';
+        this.autocomplete = 'off';
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.color = 'primary';
+        this.hasClearButton = true;
+        this.suggestions = [];
+        this.disabled = false;
+        this.hasTitle = false;
+        this.isLoading = false;
+        this.isRemoteSearch = false;
+        this.debounceTimeForRemoteSearch = 500;
+        this.onSelect = new EventEmitter();
+        this.onSearch = new EventEmitter();
+        this.onChangeFn = (_) => { };
+        this.onTouchFn = (_) => { };
+        this._isSubmitted = false;
+        this._isInvalid = false;
+        this._required = false;
+        this._value = '';
+        this._notSuggestions = false;
+        this._lastValue = '';
+        if (_ngControl)
+            this._ngControl.valueAccessor = this;
+        if (_formGroupDirective) {
+            _formGroupDirective.ngSubmit.pipe(takeUntil$1(this._unsubscribe$)).subscribe(() => {
+                this._isSubmitted = true;
+                _cd.markForCheck();
+            });
+        }
+    }
+    ngOnInit() {
+        const form = this.control;
+        if (form?._rawValidators) {
+            form._rawValidators.map((r) => {
+                if (r.name.includes('required'))
+                    this._required = true;
+            });
+        }
+        this._filteredOptions = this.control.valueChanges.pipe(takeUntil$1(this._unsubscribe$), map(() => this._filter()));
+        if (this.isRemoteSearch) {
+            this.control.valueChanges
+                .pipe(takeUntil$1(this._unsubscribe$), debounceTime(this.debounceTimeForRemoteSearch))
+                .subscribe(() => {
+                if (this._lastValue !== `${this._value}` && `${this._value}` && !this.control.value) {
+                    this.onSearch.emit(`${this._value}`);
+                    this._setValue(`${this._value}`);
+                }
+                this._lastValue = `${this._value}`;
+            });
+        }
+        if (this.disabled)
+            this.control.disable();
+    }
+    _filter() {
+        const value = typeof `${this._value}` === 'string'
+            ? `${this._value}`.toLowerCase()
+            : `${this.control.value[this.option]}`.toLowerCase();
+        const option = this.suggestions.filter(res => `${res[this.option]}`.toLowerCase().includes(value));
+        if (!option.length)
+            this._notSuggestions = true;
+        else
+            this._notSuggestions = false;
+        return option;
+    }
+    writeValue(value) {
+        if (value === null)
+            this._isInvalid = false;
+        this._value = value || '';
+        this._isSubmitted = false;
+        this._cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    onChange(event) {
+        if (event.target.value !== `${this._value}`) {
+            this._value = event.target.value;
+            if (!this.isRemoteSearch)
+                this._setValue(`${this._value}`);
+            this.onChangeFn(this.suggestions.filter(sug => `${sug[this.option]}`.toLowerCase() === `${`${this._value}`}`.toLowerCase())[0] || null);
+            if (this.control.touched) {
+                this._onValidate();
+            }
+        }
+    }
+    _setValue(value) {
+        if (!this.isRemoteSearch) {
+            const suggestionsFiltered = value
+                ? this.suggestions.filter(el => `${el[this.option]}`.toLowerCase().trim() === value.toLowerCase().trim())
+                : [];
+            if (suggestionsFiltered.length) {
+                document.body.dispatchEvent(TAK_PRESS_ESC_KEY);
+            }
+            try {
+                this.control.setValue(suggestionsFiltered[0][this.option], {
+                    emitEvent: false,
+                });
+                this.onSelect.emit(suggestionsFiltered[0]);
+            }
+            catch (error) { }
+        }
+    }
+    emit(el) {
+        if (el && el.isUserInput)
+            this._isInvalid = false;
+    }
+    emitWithClick(suggestionOption) {
+        this.control.setValue(suggestionOption);
+        this._value = `${suggestionOption[this.option]}`;
+        this._isInvalid = false;
+    }
+    onFocusout() {
+        this.onTouchFn(true);
+        this._onValidate();
+    }
+    setValue(value) {
+        this.control.setValue(value);
+        this._value = `${value[this.option]}`;
+    }
+    onUpdateSuggestions(suggestions) {
+        this.suggestions = suggestions;
+        this._cd.markForCheck();
+        this.onChangeFn(this.suggestions.filter(sug => `${sug[this.option]}`.toLowerCase() === `${this._value}`.toLowerCase())[0] || null);
+    }
+    _onValidate() {
+        if (this.control.invalid)
+            this._isInvalid = true;
+        else
+            this._isInvalid = false;
+    }
+    onFocus() {
+        if (!`${this._value}`) {
+            this.control.setValue('');
+            this._value = '';
+        }
+    }
+    onClearControl() {
+        this.control.setValue('', { emitEvent: false });
+        this._value = '';
+    }
+    ngOnDestroy() {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
+    }
+    get control() {
+        return this._ngControl?.control;
+    }
+    get directive() {
+        return this._formGroupDirective;
+    }
+    get isDisabled() {
+        return this._ngControl.disabled;
+    }
+    get isSubmitted() {
+        return this._isSubmitted;
+    }
+    get isInvalid() {
+        return this._isInvalid;
+    }
+    get required() {
+        return this._required;
+    }
+    get value() {
+        return `${this._value}`;
+    }
+    get filteredOptions() {
+        return this._filteredOptions;
+    }
+    get notSuggestions() {
+        return this._notSuggestions;
+    }
+    get lastValue() {
+        return this._lastValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakAutocompleteFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakAutocompleteFieldComponent, 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" }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { option: [{
+                type: Input
+            }], extraInfo: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], hasClearButton: [{
+                type: Input
+            }], suggestions: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hasTitle: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isRemoteSearch: [{
+                type: Input
+            }], debounceTimeForRemoteSearch: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }], onSearch: [{
+                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';
+        this.startPlaceholder = 'Inicio';
+        this.endPlaceholder = 'Fin';
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.color = 'primary';
+        this.notInput = false;
+        this.disabled = false;
+        this._required = false;
+    }
+    ngOnInit() {
+        const start = this.start;
+        const end = this.end;
+        if (start?._rawValidators) {
+            start._rawValidators.map((r) => {
+                if (r.name.includes('required'))
+                    this._required = true;
+            });
+        }
+        if (end?._rawValidators) {
+            end._rawValidators.map((r) => {
+                if (r.name.includes('required'))
+                    this._required = true;
+            });
+        }
+        if (this.disabled) {
+            this.start.disable();
+            this.end.disable();
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    get isDisabled() {
+        return this.start.disabled || this.end.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakDateRangeFieldComponent, 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"] }] }); }
+}
+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" }]
+        }], propDecorators: { autocomplete: [{
+                type: Input
+            }], startPlaceholder: [{
+                type: Input
+            }], endPlaceholder: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], end: [{
+                type: Input
+            }], notInput: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class TakMoneyFieldComponent {
+    constructor(_ngControl, _formGroupDirective, _cd) {
+        this._ngControl = _ngControl;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this.autocomplete = 'off';
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.floatLabel = 'auto';
+        this.color = 'primary';
+        this.actionIcon = 'search';
+        this.defaultFilterStyle = true;
+        this.hasActionButton = false;
+        this.hasClearButton = true;
+        this.countCaracters = false;
+        this.placeholder = '';
+        this.disabled = false;
+        this.onExecuteAction = new EventEmitter();
+        this.onKeyUp = new EventEmitter();
+        this.onChangeFn = (_) => { };
+        this.onTouchFn = (_) => { };
+        this._isSubmitted = false;
+        this._isInvalid = false;
+        this._required = false;
+        this._value = '';
+        if (_ngControl)
+            this._ngControl.valueAccessor = this;
+        if (_formGroupDirective) {
+            this._subscription = _formGroupDirective.ngSubmit.subscribe(() => {
+                this._isSubmitted = true;
+                _cd.markForCheck();
+            });
+        }
+    }
+    ngOnInit() {
+        const form = this.control;
+        if (form?._rawValidators) {
+            form._rawValidators.forEach((r) => {
+                if (r.name.includes('required'))
+                    this._required = true;
+            });
+        }
+        this.control.addValidators(Validators.pattern(/^[0-9.,-]+$/));
+        if (['', null, undefined, '-'].indexOf(this.control.value) < 0)
+            this._addCurrencyMask();
+        if (this.disabled)
+            this.control.disable();
+    }
+    writeValue(value) {
+        if (value === null) {
+            this._isInvalid = false;
+        }
+        this._value = value;
+        this._isSubmitted = false;
+        this._cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    onChange(event) {
+        this._value = event.target.value;
+        this.onChangeFn(event.target.value);
+        this._addCurrencyMask();
+        if (this.control.touched)
+            this._onValidate();
+    }
+    _addCurrencyMask() {
+        const valueFormatted = this.control.value
+            .toString()
+            .replace(/,/g, '')
+            .replace(/ /g, '')
+            .replace('$', '');
+        if (['', null, undefined, '-'].indexOf(valueFormatted) < 0 && !isNaN(Number(valueFormatted))) {
+            const value = '$ ' + Intl.NumberFormat('en-US').format(Number(valueFormatted));
+            this.control.setValue(+valueFormatted);
+            this._value = value;
+        }
+        else if (['-'].indexOf(valueFormatted) >= 0)
+            this.control.setValue('-');
+        else
+            this.control.setValue(null);
+    }
+    onFocusOut() {
+        this.onTouchFn(true);
+        //this._executeIfIsMoneyField();
+        this._onValidate();
+    }
+    _onValidate() {
+        if (this.control.invalid)
+            this._isInvalid = true;
+        else
+            this._isInvalid = false;
+    }
+    onKeyDown(event) {
+        const pattern = /[0-9.-]/i.test(event.key);
+        const validKeyCodes = [8, 46, 37, 39, 9, 17, 16, 67, 86, 109, 189];
+        return pattern || validKeyCodes.indexOf(event.keyCode) >= 0;
+    }
+    onClearControl() {
+        if (['', null, undefined].indexOf(this.control.value) >= 0) {
+            this.control.setValue('', { emitEvent: false });
+        }
+        else {
+            this.control.setValue('');
+        }
+        this._value = '';
+    }
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    get control() {
+        return this._ngControl.control;
+    }
+    get directive() {
+        return this._formGroupDirective;
+    }
+    get isDisabled() {
+        return this._ngControl.disabled;
+    }
+    get isSubmitted() {
+        return this._isSubmitted;
+    }
+    get isInvalid() {
+        return this._isInvalid;
+    }
+    get required() {
+        return this._required;
+    }
+    get value() {
+        return this._value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakMoneyFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakMoneyFieldComponent, 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"] }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { autocomplete: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], floatLabel: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], actionIcon: [{
+                type: Input
+            }], defaultFilterStyle: [{
+                type: Input
+            }], hasActionButton: [{
+                type: Input
+            }], hasClearButton: [{
+                type: Input
+            }], countCaracters: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onExecuteAction: [{
+                type: Output
+            }], onKeyUp: [{
+                type: Output
+            }] } });
+
+class TakGeneralFieldComponent {
+    constructor(_ngControl, _formGroupDirective, _cd) {
+        this._ngControl = _ngControl;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this.autocomplete = 'off';
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.type = 'text';
+        this.floatLabel = 'never';
+        this.color = 'primary';
+        this.actionIcon = 'search';
+        this.defaultFilterStyle = true;
+        this.hasActionButton = false;
+        this.hasClearButton = false;
+        this.countCaracters = false;
+        this.placeholder = '';
+        this.disabled = false;
+        this.onExecuteAction = new EventEmitter();
+        this.onKeyUp = new EventEmitter();
+        this.onChangeFn = (_) => { };
+        this.onTouchFn = (_) => { };
+        this._isSubmitted = false;
+        this._isInvalid = false;
+        this._required = false;
+        this._value = '';
+        this._decrypted = false;
+        if (_ngControl)
+            this._ngControl.valueAccessor = this;
+        if (_formGroupDirective) {
+            this._subscription = _formGroupDirective.ngSubmit.subscribe(() => {
+                this._isSubmitted = true;
+                _cd.markForCheck();
+            });
+        }
+    }
+    ngOnInit() {
+        const form = this.control;
+        if (this.type === 'filter' && this.defaultFilterStyle) {
+            this.control.removeValidators(Validators.required);
+            this.appearance = 'legacy';
+            this.floatLabel = 'never';
+            if (!this.placeholder)
+                this.placeholder = 'Buscar';
+            this.hasClearButton = true;
+            this._cd.markForCheck();
+        }
+        if (form?._rawValidators) {
+            form._rawValidators.forEach((r) => {
+                if (r.name.includes('required'))
+                    this._required = true;
+            });
+        }
+        if (this.disabled)
+            this.control.disable();
+    }
+    writeValue(value) {
+        if (value === null)
+            this._isInvalid = false;
+        this._value = value;
+        this._isSubmitted = false;
+        this._cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    onChange(event) {
+        this._value = event.target.value;
+        this.onChangeFn(event.target.value);
+        if (!this.control.value && this.type === 'password')
+            this._decrypted = false;
+        if (this.control.touched)
+            this._onValidate();
+        if (this.type === 'filter')
+            this.onKeyUp.emit(this.control.value);
+    }
+    showPassword() {
+        if (this.type === 'password') {
+            if (this._decrypted)
+                this._decrypted = false;
+            else
+                this._decrypted = true;
+        }
+    }
+    onFocusOut() {
+        this.onTouchFn(true);
+        this._onValidate();
+    }
+    _onValidate() {
+        if (this.control.invalid)
+            this._isInvalid = true;
+        else
+            this._isInvalid = false;
+    }
+    onClearControl() {
+        if (['', null, undefined].indexOf(this.control.value) >= 0) {
+            this.control.setValue('', { emitEvent: false });
+        }
+        else
+            this.control.setValue('');
+        this._value = '';
+    }
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    get control() {
+        return this._ngControl.control;
+    }
+    get directive() {
+        return this._formGroupDirective;
+    }
+    get decrypted() {
+        return this._decrypted;
+    }
+    get isDisabled() {
+        return this._ngControl.disabled;
+    }
+    get isSubmitted() {
+        return this._isSubmitted;
+    }
+    get isInvalid() {
+        return this._isInvalid;
+    }
+    get required() {
+        return this._required;
+    }
+    get value() {
+        return this._value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakGeneralFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakGeneralFieldComponent, 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"] }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { autocomplete: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], floatLabel: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], actionIcon: [{
+                type: Input
+            }], defaultFilterStyle: [{
+                type: Input
+            }], hasActionButton: [{
+                type: Input
+            }], hasClearButton: [{
+                type: Input
+            }], countCaracters: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onExecuteAction: [{
+                type: Output
+            }], onKeyUp: [{
+                type: Output
+            }] } });
+
+class TakNumberFieldComponent {
+    constructor(_ngControl, _formGroupDirective, _cd) {
+        this._ngControl = _ngControl;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this.autocomplete = 'off';
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.floatLabel = 'auto';
+        this.color = 'primary';
+        this.actionIcon = 'search';
+        this.hasActionButton = false;
+        this.hasClearButton = false;
+        this.countCaracters = false;
+        this.placeholder = '';
+        this.disabled = false;
+        this.onExecuteAction = new EventEmitter();
+        this.onKeyUp = new EventEmitter();
+        this.onChangeFn = (_) => { };
+        this.onTouchFn = (_) => { };
+        this._isSubmitted = false;
+        this._isInvalid = false;
+        this._required = false;
+        this._value = '';
+        if (_ngControl)
+            this._ngControl.valueAccessor = this;
+        if (_formGroupDirective) {
+            this._subscription = _formGroupDirective.ngSubmit.subscribe(() => {
+                this._isSubmitted = true;
+                _cd.markForCheck();
+            });
+        }
+    }
+    ngOnInit() {
+        const form = this.control;
+        if (form?._rawValidators) {
+            form._rawValidators.forEach((r) => {
+                if (r.name.includes('required'))
+                    this._required = true;
+            });
+        }
+        if (this.min)
+            this.control.addValidators(Validators.min(this.min));
+        if (this.max)
+            this.control.addValidators(Validators.max(this.max));
+        if (this.disabled)
+            this.control.disable();
+    }
+    writeValue(value) {
+        if (value === null)
+            this._isInvalid = false;
+        this._value = value;
+        this._isSubmitted = false;
+        this._cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    onChange(event) {
+        this._value = event.target.value;
+        this.onChangeFn(['', null, undefined].indexOf(event.target.value) < 0 ? +event.target.value : null);
+        if (this.control.touched)
+            this._onValidate();
+    }
+    onFocusOut() {
+        this.onTouchFn(true);
+        this._onValidate();
+    }
+    _onValidate() {
+        if (this.control.invalid)
+            this._isInvalid = true;
+        else
+            this._isInvalid = false;
+    }
+    onClearControl() {
+        if (['', null, undefined].indexOf(this.control.value) >= 0) {
+            this.control.setValue('', { emitEvent: false });
+        }
+        else
+            this.control.setValue('');
+        this._value = '';
+    }
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    get control() {
+        return this._ngControl.control;
+    }
+    get directive() {
+        return this._formGroupDirective;
+    }
+    get isDisabled() {
+        return this._ngControl.disabled;
+    }
+    get isSubmitted() {
+        return this._isSubmitted;
+    }
+    get isInvalid() {
+        return this._isInvalid;
+    }
+    get required() {
+        return this._required;
+    }
+    get value() {
+        return this._value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakNumberFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakNumberFieldComponent, 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"] }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { autocomplete: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], floatLabel: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], actionIcon: [{
+                type: Input
+            }], hasActionButton: [{
+                type: Input
+            }], hasClearButton: [{
+                type: Input
+            }], countCaracters: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onExecuteAction: [{
+                type: Output
+            }], onKeyUp: [{
+                type: Output
+            }] } });
+
+class TakTextareaComponent {
+    constructor(_ngControl, _formGroupDirective, _cd) {
+        this._ngControl = _ngControl;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this.autocomplete = 'off';
+        this.appearance = TAK_DEFAULT_APPEARANCE_FORM;
+        this.floatLabel = 'auto';
+        this.color = 'primary';
+        this.actionIcon = 'search';
+        this.defaultFilterStyle = true;
+        this.hasActionButton = false;
+        this.hasClearButton = false;
+        this.countCaracters = false;
+        this.isTextArea = false;
+        this.placeholder = '';
+        this.heightInPx = 60;
+        this.disabled = false;
+        this.onExecuteAction = new EventEmitter();
+        this.onKeyUp = new EventEmitter();
+        this.onChangeFn = (_) => { };
+        this.onTouchFn = (_) => { };
+        this._isSubmitted = false;
+        this._isInvalid = false;
+        this._required = false;
+        this._value = '';
+        this._decrypted = false;
+        if (_ngControl)
+            this._ngControl.valueAccessor = this;
+        if (_formGroupDirective) {
+            this._subscription = _formGroupDirective.ngSubmit.subscribe(() => {
+                this._isSubmitted = true;
+                _cd.markForCheck();
+            });
+        }
+    }
+    ngOnInit() {
+        const form = this.control;
+        if (form?._rawValidators) {
+            form._rawValidators.forEach((r) => {
+                if (r.name.includes('required'))
+                    this._required = true;
+            });
+        }
+        if (this.disabled)
+            this.control.disable();
+    }
+    writeValue(value) {
+        if (value === null) {
+            this._isInvalid = false;
+        }
+        this._value = value;
+        this._isSubmitted = false;
+        this._cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    onChange(event) {
+        this._value = event.target.value;
+        this.onChangeFn(event.target.value);
+        if (this.control.touched)
+            this._onValidate();
+    }
+    onFocusOut() {
+        this.onTouchFn(true);
+        this._onValidate();
+    }
+    _onValidate() {
+        if (this.control.invalid)
+            this._isInvalid = true;
+        else
+            this._isInvalid = false;
+    }
+    onClearControl() {
+        if (['', null, undefined].indexOf(this.control.value) >= 0) {
+            this.control.setValue('', { emitEvent: false });
+        }
+        else {
+            this.control.setValue('');
+        }
+        this._value = '';
+    }
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    get control() {
+        return this._ngControl.control;
+    }
+    get directive() {
+        return this._formGroupDirective;
+    }
+    get decrypted() {
+        return this._decrypted;
+    }
+    get isDisabled() {
+        return this._ngControl.disabled;
+    }
+    get isSubmitted() {
+        return this._isSubmitted;
+    }
+    get isInvalid() {
+        return this._isInvalid;
+    }
+    get required() {
+        return this._required;
+    }
+    get value() {
+        return this._value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakTextareaComponent, 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"] }] }); }
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { autocomplete: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], floatLabel: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], actionIcon: [{
+                type: Input
+            }], defaultFilterStyle: [{
+                type: Input
+            }], hasActionButton: [{
+                type: Input
+            }], hasClearButton: [{
+                type: Input
+            }], countCaracters: [{
+                type: Input
+            }], isTextArea: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], heightInPx: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onExecuteAction: [{
+                type: Output
+            }], onKeyUp: [{
+                type: Output
+            }] } });
+
+const components = [
+    TakSelectFieldComponent,
+    TakDateFieldComponent,
+    TakAutocompleteFieldComponent,
+    TakDateRangeFieldComponent,
+    TakGeneralFieldComponent,
+    TakMoneyFieldComponent,
+    TakTextareaComponent,
+    TakNumberFieldComponent,
+];
+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,
+            TakDateFieldComponent,
+            TakAutocompleteFieldComponent,
+            TakDateRangeFieldComponent,
+            TakGeneralFieldComponent,
+            TakMoneyFieldComponent,
+            TakTextareaComponent,
+            TakNumberFieldComponent], imports: [FormsModule,
+            CommonModule,
+            ReactiveFormsModule,
+            MatProgressSpinnerModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatDatepickerModule,
+            MatAutocompleteModule,
+            TakErrorModule,
+            MatIconModule,
+            MatInputModule,
+            MatOptionModule,
+            MatSelectModule,
+            MatTooltipModule,
+            MatMenuModule], exports: [ReactiveFormsModule,
+            MatAutocompleteModule,
+            FormsModule,
+            MatNativeDateModule, TakSelectFieldComponent,
+            TakDateFieldComponent,
+            TakAutocompleteFieldComponent,
+            TakDateRangeFieldComponent,
+            TakGeneralFieldComponent,
+            TakMoneyFieldComponent,
+            TakTextareaComponent,
+            TakNumberFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, imports: [FormsModule,
+            CommonModule,
+            ReactiveFormsModule,
+            MatProgressSpinnerModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatDatepickerModule,
+            MatAutocompleteModule,
+            TakErrorModule,
+            MatIconModule,
+            MatInputModule,
+            MatOptionModule,
+            MatSelectModule,
+            MatTooltipModule,
+            MatMenuModule, ReactiveFormsModule,
+            MatAutocompleteModule,
+            FormsModule,
+            MatNativeDateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFieldsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: components,
+                    imports: [
+                        FormsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatProgressSpinnerModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatDatepickerModule,
+                        MatAutocompleteModule,
+                        TakErrorModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        MatMenuModule,
+                    ],
+                    exports: [
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        FormsModule,
+                        MatNativeDateModule,
+                        ...components,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of @kato-lee/components/fields
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TAK_DEFAULT_APPEARANCE_FORM, TAK_PRESS_ESC_KEY, TakAutocompleteFieldComponent, TakDateFieldComponent, TakDateRangeFieldComponent, TakErrorComponent, TakErrorEqualsPipe, TakErrorMsgPipe, TakFieldsModule, TakGeneralFieldComponent, TakMoneyFieldComponent, TakNumberFieldComponent, TakSelectFieldComponent, TakTextareaComponent };
+//# sourceMappingURL=kato-lee-components-fields.mjs.map