mapa-library-ui 1.0.1 → 1.1.0

package/fesm2022/mapa-library-ui-src-lib-components-form.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, DestroyRef, Self, Directive, SecurityContext, Pipe, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, DestroyRef, Self, Directive, ChangeDetectionStrategy, SecurityContext, Pipe, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import * as i4 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -17,8 +17,11 @@ import * as i3$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i3$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i5 from '@angular/cdk/text-field';
-import * as i4$1 from '@angular/material/checkbox';
+import * as i5$1 from '@angular/cdk/text-field';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import * as i3$3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i7 from '@angular/material/select';
 import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
@@ -33,10 +36,10 @@ class ButtonComponent {
     onClick() {
         this.clicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ButtonComponent, isStandalone: true, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ButtonComponent, isStandalone: true, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-button', standalone: true, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
         }], propDecorators: { color: [{
@@ -103,6 +106,10 @@ const MAPA_UI_DEFAULT_TEXTS = {
             return `Mostrando ${startIndex + 1} - ${endIndex} de ${length} ${itemLabel}`;
         },
     },
+    table: {
+        emptyTitle: "Nao foram encontrados resultados",
+        emptySubtitle: "",
+    },
     validation: {
         cnpj: "CNPJ inválido",
         cpf: "CPF inválido",
@@ -137,6 +144,10 @@ function mergeMapaUiTexts(customTexts) {
             ...MAPA_UI_DEFAULT_TEXTS.paginator,
             ...(customTexts?.paginator ?? {}),
         },
+        table: {
+            ...MAPA_UI_DEFAULT_TEXTS.table,
+            ...(customTexts?.table ?? {}),
+        },
         validation: {
             ...MAPA_UI_DEFAULT_TEXTS.validation,
             ...(customTexts?.validation ?? {}),
@@ -172,10 +183,10 @@ class MapaI18nService {
     resolveText(value, context) {
         return typeof value === "function" ? value(context) : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -246,10 +257,10 @@ class ValidationMessageResolverService {
                 return errors[errorKey];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ValidationMessageResolverService, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ValidationMessageResolverService, providedIn: "root" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ValidationMessageResolverService, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ValidationMessageResolverService, providedIn: "root" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ValidationMessageResolverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ValidationMessageResolverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -263,10 +274,10 @@ class MapaFormErrorsComponent {
     get message() {
         return this.validationMessageResolver.resolveFirstError(this.control, this.errors);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaFormErrorsComponent, deps: [{ token: ValidationMessageResolverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaFormErrorsComponent, isStandalone: true, selector: "mapa-form-errors", inputs: { control: "control", errors: "errors" }, ngImport: i0, template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaFormErrorsComponent, deps: [{ token: ValidationMessageResolverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MapaFormErrorsComponent, isStandalone: true, selector: "mapa-form-errors", inputs: { control: "control", errors: "errors" }, ngImport: i0, template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaFormErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaFormErrorsComponent, decorators: [{
             type: Component,
             args: [{ selector: "mapa-form-errors", imports: [CommonModule, MatFormFieldModule], template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n" }]
         }], ctorParameters: () => [{ type: ValidationMessageResolverService }], propDecorators: { control: [{
@@ -343,10 +354,10 @@ class MatInputAutosizeDirective {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.changeHiddenText(this.inputElement.value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MatInputAutosizeDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatInput, self: true }, { token: i2.NgModel, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: MatInputAutosizeDirective, isStandalone: true, selector: "[matInputAutosize]", inputs: { matInputAutosizeMaxWidth: "matInputAutosizeMaxWidth", matInputAutosizeMinWidth: "matInputAutosizeMinWidth", matInputAutosizeFontStyle: "matInputAutosizeFontStyle" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatInputAutosizeDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatInput, self: true }, { token: i2.NgModel, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: MatInputAutosizeDirective, isStandalone: true, selector: "[matInputAutosize]", inputs: { matInputAutosizeMaxWidth: "matInputAutosizeMaxWidth", matInputAutosizeMinWidth: "matInputAutosizeMinWidth", matInputAutosizeFontStyle: "matInputAutosizeFontStyle" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MatInputAutosizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatInputAutosizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matInputAutosize]',
@@ -379,10 +390,10 @@ class MapaInputComponent {
     suffixEmit() {
         this.suffix.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaInputComponent, isStandalone: true, selector: "mapa-input", inputs: { formControl: "formControl", element: "element", type: "type" }, outputs: { suffix: "suffix" }, providers: [provideNgxMask()], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n  {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n  <mat-form-field\n    class=\"mapa-input\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <mat-icon\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n      matSuffix\n      >close</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [".mapa-input__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: 8px;--mat-form-field-outlined-outline-width: 2px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{padding:unset}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MapaInputComponent, isStandalone: true, selector: "mapa-input", inputs: { formControl: "formControl", element: "element", type: "type" }, outputs: { suffix: "suffix" }, providers: [provideNgxMask()], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n  {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n  <mat-form-field\n    class=\"mapa-input\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <mat-icon\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n      matSuffix\n      >close</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [".mapa-input__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: 8px;--mat-form-field-outlined-outline-width: 2px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{padding:unset}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-input', imports: [
                         CommonModule,
@@ -427,10 +438,10 @@ class RadioButtonComponent {
         this.selectedOption = optionValue;
         this.optionSelected.emit(this.selectedOption);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: RadioButtonComponent, isStandalone: true, selector: "mapa-radio-button", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-radio-button__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-radio-button\">\n  <mat-radio-group [formControl]=\"formControl\" [value]=\"selectedOption\" (change)=\"onChange($event.value)\">\n    <mat-radio-button\n      *ngFor=\"let option of options\"\n      [value]=\"option\"\n      >\n      {{ option.value }}\n    </mat-radio-button>\n  </mat-radio-group>\n</section>\n", styles: [".mapa-radio-button{--mat-radio-selected-focus-icon-color: #ea561d;--mat-radio-selected-hover-icon-color: #ea561d;--mat-radio-selected-icon-color: #ea561d;--mat-radio-selected-pressed-icon-color: #ea561d;--mat-mdc-radio-ripple-color: #ea561d;--mat-mdc-radio-checked-ripple-color: #ea561d;color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-radio-button__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button{margin-right:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-form-field{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio{padding:0;flex-shrink:0}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__background,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__outer-circle,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__inner-circle{height:12px;width:12px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-mdc-radio-touch-target{height:24px;width:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-radio-ripple{border-radius:50%;inset:-6px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-label{display:inline-flex;align-items:center;margin:0;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: RadioButtonComponent, isStandalone: true, selector: "mapa-radio-button", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-radio-button__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-radio-button\">\n  <mat-radio-group [formControl]=\"formControl\" [value]=\"selectedOption\" (change)=\"onChange($event.value)\">\n    <mat-radio-button\n      *ngFor=\"let option of options\"\n      [value]=\"option\"\n      >\n      {{ option.value }}\n    </mat-radio-button>\n  </mat-radio-group>\n</section>\n", styles: [".mapa-radio-button{--mat-radio-selected-focus-icon-color: #ea561d;--mat-radio-selected-hover-icon-color: #ea561d;--mat-radio-selected-icon-color: #ea561d;--mat-radio-selected-pressed-icon-color: #ea561d;--mat-mdc-radio-ripple-color: #ea561d;--mat-mdc-radio-checked-ripple-color: #ea561d;color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-radio-button__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button{margin-right:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-form-field{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio{padding:0;flex-shrink:0}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__background,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__outer-circle,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__inner-circle{height:12px;width:12px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-mdc-radio-touch-target{height:24px;width:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-radio-ripple{border-radius:50%;inset:-6px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-label{display:inline-flex;align-items:center;margin:0;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-radio-button', imports: [CommonModule, ReactiveFormsModule, MatRadioModule], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-radio-button__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-radio-button\">\n  <mat-radio-group [formControl]=\"formControl\" [value]=\"selectedOption\" (change)=\"onChange($event.value)\">\n    <mat-radio-button\n      *ngFor=\"let option of options\"\n      [value]=\"option\"\n      >\n      {{ option.value }}\n    </mat-radio-button>\n  </mat-radio-group>\n</section>\n", styles: [".mapa-radio-button{--mat-radio-selected-focus-icon-color: #ea561d;--mat-radio-selected-hover-icon-color: #ea561d;--mat-radio-selected-icon-color: #ea561d;--mat-radio-selected-pressed-icon-color: #ea561d;--mat-mdc-radio-ripple-color: #ea561d;--mat-mdc-radio-checked-ripple-color: #ea561d;color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-radio-button__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button{margin-right:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-form-field{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio{padding:0;flex-shrink:0}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__background,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__outer-circle,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__inner-circle{height:12px;width:12px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-mdc-radio-touch-target{height:24px;width:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-radio-ripple{border-radius:50%;inset:-6px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-label{display:inline-flex;align-items:center;margin:0;min-height:24px}\n"] }]
         }], propDecorators: { formControl: [{
@@ -462,10 +473,10 @@ class SlideToggleComponent {
         this.selectedOption = optionValue;
         this.optionSelected.emit(this.selectedOption);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlideToggleComponent, isStandalone: true, selector: "mapa-slide-toggle", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl.value ? element.status[1].label :\n    element.status[0].label ) :( formControl.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: SlideToggleComponent, isStandalone: true, selector: "mapa-slide-toggle", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl.value ? element.status[1].label :\n    element.status[0].label ) :( formControl.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SlideToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-slide-toggle', imports: [CommonModule, ReactiveFormsModule, MatSlideToggleModule], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl.value ? element.status[1].label :\n    element.status[0].label ) :( formControl.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}\n"] }]
         }], propDecorators: { formControl: [{
@@ -481,10 +492,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  */
 
 class MapaTextareaComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaTextareaComponent, isStandalone: true, selector: "mapa-textarea", inputs: { formControl: "formControl", element: "element" }, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-textarea__label\">\n  {{ element.label }}\n</label>\n<mat-form-field\n  class=\"mapa-textarea\"\n  appearance=\"outline\"\n  subscriptSizing=\"dynamic\"\n>\n  <textarea\n    *ngIf=\"element.autosize\"\n    class=\"mapa-textarea__control mapa-textarea__control--autosize\"\n    matInput\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"element.autosizeMinRow\"\n    [cdkAutosizeMaxRows]=\"element.autosizeMaxRow\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\n  <textarea\n    class=\"mapa-textarea__control mapa-textarea__control--manual\"\n    matInput\n    *ngIf=\"!element.autosize\"\n    [maxlength]=\"element.maxLength\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\n  <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n  <mat-error>\n    <mapa-form-errors\n      [control]=\"formControl\"\n      [errors]=\"element.errors\"\n    ></mapa-form-errors>\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:block}.mapa-textarea{margin-bottom:16px}.mapa-textarea__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-textarea .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .mapa-textarea .mapa-textarea__control{box-sizing:border-box;display:block;margin:0;width:100%}:host ::ng-deep .mapa-textarea .mapa-textarea__control--manual{min-height:99px;resize:vertical!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px;min-height:128px;height:auto!important;align-items:stretch!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-textarea .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-flex{display:flex;align-items:stretch;flex-direction:column;height:auto!important;min-height:128px;padding:12px 16px!important}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-infix{display:flex;align-items:stretch;padding:unset!important;border-top:unset!important;height:auto!important;min-height:104px!important;width:100%}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MapaTextareaComponent, isStandalone: true, selector: "mapa-textarea", inputs: { formControl: "formControl", element: "element" }, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-textarea__label\">\n  {{ element.label }}\n</label>\n<mat-form-field\n  class=\"mapa-textarea\"\n  appearance=\"outline\"\n  subscriptSizing=\"dynamic\"\n>\n  <textarea\n    *ngIf=\"element.autosize\"\n    class=\"mapa-textarea__control mapa-textarea__control--autosize\"\n    matInput\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"element.autosizeMinRow\"\n    [cdkAutosizeMaxRows]=\"element.autosizeMaxRow\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\n  <textarea\n    class=\"mapa-textarea__control mapa-textarea__control--manual\"\n    matInput\n    *ngIf=\"!element.autosize\"\n    [maxlength]=\"element.maxLength\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\n  <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n  <mat-error>\n    <mapa-form-errors\n      [control]=\"formControl\"\n      [errors]=\"element.errors\"\n    ></mapa-form-errors>\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:block}.mapa-textarea{margin-bottom:16px}.mapa-textarea__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-textarea .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .mapa-textarea .mapa-textarea__control{box-sizing:border-box;display:block;margin:0;width:100%}:host ::ng-deep .mapa-textarea .mapa-textarea__control--manual{min-height:99px;resize:vertical!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px;min-height:128px;height:auto!important;align-items:stretch!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-textarea .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-flex{display:flex;align-items:stretch;flex-direction:column;height:auto!important;min-height:128px;padding:12px 16px!important}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-infix{display:flex;align-items:stretch;padding:unset!important;border-top:unset!important;height:auto!important;min-height:104px!important;width:100%}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-textarea', imports: [
                         CommonModule,
@@ -504,6 +515,346 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Public API Surface of mapa-library-ui textarea
  */
 
+const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+function isValidDate(date) {
+    return !Number.isNaN(date.getTime());
+}
+function formatDateAsDayMonthYear(date) {
+    const day = `${date.getDate()}`.padStart(2, "0");
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const year = `${date.getFullYear()}`;
+    return `${day}/${month}/${year}`;
+}
+function parseDateValue(value) {
+    if (value instanceof Date) {
+        return isValidDate(value) ? new Date(value.getTime()) : null;
+    }
+    if (typeof value === "number") {
+        const parsedDate = new Date(value);
+        return isValidDate(parsedDate) ? parsedDate : null;
+    }
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+        return null;
+    }
+    const dayMonthYearMatch = DAY_MONTH_YEAR_PATTERN.exec(trimmedValue);
+    if (dayMonthYearMatch) {
+        const [, dayValue, monthValue, yearValue] = dayMonthYearMatch;
+        const day = Number(dayValue);
+        const month = Number(monthValue);
+        const year = Number(yearValue);
+        const parsedDate = new Date(year, month - 1, day);
+        if (parsedDate.getFullYear() === year &&
+            parsedDate.getMonth() === month - 1 &&
+            parsedDate.getDate() === day) {
+            return parsedDate;
+        }
+        return null;
+    }
+    const parsedDate = new Date(trimmedValue);
+    return isValidDate(parsedDate) ? parsedDate : null;
+}
+function isDateValue(value) {
+    return parseDateValue(value) !== null;
+}
+function getRelativeDateRange(daysBack) {
+    const endDate = new Date();
+    endDate.setHours(23, 59, 59, 999);
+    const startDate = new Date();
+    startDate.setHours(0, 0, 0, 0);
+    startDate.setDate(startDate.getDate() - daysBack);
+    return { startDate, endDate };
+}
+
+const MAPA_DATEPICKER_FORMATS = {
+    parse: {
+        dateInput: "DD/MM/YYYY",
+    },
+    display: {
+        dateInput: "DD/MM/YYYY",
+        monthYearLabel: "MMM YYYY",
+        dateA11yLabel: "LL",
+        monthYearA11yLabel: "MMMM YYYY",
+    },
+};
+class MapaDatepicker {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.destroyRef = inject(DestroyRef);
+        this.formDatepicker = new FormGroup({
+            date: new FormControl(null),
+        });
+    }
+    ngOnInit() {
+        this.formControl = this.formGroup.get(this.element.key);
+        this.syncDatepickerControl(this.formControl.value);
+        this.formControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.syncDatepickerControl(value);
+        });
+        this.formDatepicker.controls.date.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.updateExternalControl(value);
+        });
+    }
+    get minDate() {
+        return parseDateValue(this.element.minDate);
+    }
+    get maxDate() {
+        return parseDateValue(this.element.maxDate);
+    }
+    hasValue() {
+        return !!this.formControl?.value;
+    }
+    cleanDatepicker() {
+        this.formDatepicker.patchValue({ date: null }, { emitEvent: false });
+        if (this.formControl.value === "") {
+            return;
+        }
+        this.formControl.patchValue("");
+        this.cdr.markForCheck();
+    }
+    syncDatepickerControl(value) {
+        const nextDate = parseDateValue(value);
+        const currentDate = this.formDatepicker.controls.date.value;
+        if (this.areDatesEqual(currentDate, nextDate)) {
+            return;
+        }
+        this.formDatepicker.patchValue({ date: nextDate }, { emitEvent: false });
+        this.cdr.markForCheck();
+    }
+    updateExternalControl(value) {
+        if (!value) {
+            if (this.formControl.value !== "") {
+                this.formControl.patchValue("");
+                this.cdr.markForCheck();
+            }
+            return;
+        }
+        const formattedDate = formatDateAsDayMonthYear(value);
+        if (this.formControl.value === formattedDate) {
+            return;
+        }
+        this.formControl.patchValue(formattedDate);
+        this.cdr.markForCheck();
+    }
+    closePicker(picker) {
+        picker.close();
+    }
+    areDatesEqual(first, second) {
+        if (first === second) {
+            return true;
+        }
+        if (!first || !second) {
+            return false;
+        }
+        return first.getTime() === second.getTime();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDatepicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker", inputs: { formGroup: "formGroup", element: "element" }, providers: [
+            provideNgxMask(),
+            provideNativeDateAdapter(MAPA_DATEPICKER_FORMATS),
+        ], ngImport: i0, template: "@if (element && formGroup) {\n  <section class=\"mapa-datepicker\" [formGroup]=\"formGroup\">\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\">\n        {{ element.label }}\n      </label>\n    }\n\n    <section class=\"mapa-datepicker__field\" [formGroup]=\"formGroup\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          [formControlName]=\"element.key\"\n          [placeholder]=\"element.placeholder || element.label || ''\"\n          [mask]=\"element.mask\"\n          [readonly]=\"element.readonly\"\n        />\n        <mat-icon *ngIf=\"hasValue()\" matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker touchUi=\"true\" #picker></mat-datepicker>\n        @if (element.hint) {\n          <mat-hint>{{ element.hint }}</mat-hint>\n        }\n        <mat-error>\n          <mapa-form-errors\n            [control]=\"formControl\"\n            [errors]=\"element.errors\"\n          ></mapa-form-errors>\n        </mat-error>\n      </mat-form-field>\n    </section>\n\n    <section class=\"mapa-datepicker--hidden\">\n      <mat-form-field [formGroup]=\"formDatepicker\">\n        <input\n          matInput\n          formControlName=\"date\"\n          [min]=\"minDate\"\n          [max]=\"maxDate\"\n          [matDatepicker]=\"picker\"\n          (dateChange)=\"closePicker(picker)\"\n        />\n      </mat-form-field>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDatepicker, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-datepicker", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgxMaskDirective,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MapaFormErrorsComponent,
+                    ], providers: [
+                        provideNgxMask(),
+                        provideNativeDateAdapter(MAPA_DATEPICKER_FORMATS),
+                    ], standalone: true, template: "@if (element && formGroup) {\n  <section class=\"mapa-datepicker\" [formGroup]=\"formGroup\">\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\">\n        {{ element.label }}\n      </label>\n    }\n\n    <section class=\"mapa-datepicker__field\" [formGroup]=\"formGroup\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          [formControlName]=\"element.key\"\n          [placeholder]=\"element.placeholder || element.label || ''\"\n          [mask]=\"element.mask\"\n          [readonly]=\"element.readonly\"\n        />\n        <mat-icon *ngIf=\"hasValue()\" matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker touchUi=\"true\" #picker></mat-datepicker>\n        @if (element.hint) {\n          <mat-hint>{{ element.hint }}</mat-hint>\n        }\n        <mat-error>\n          <mapa-form-errors\n            [control]=\"formControl\"\n            [errors]=\"element.errors\"\n          ></mapa-form-errors>\n        </mat-error>\n      </mat-form-field>\n    </section>\n\n    <section class=\"mapa-datepicker--hidden\">\n      <mat-form-field [formGroup]=\"formDatepicker\">\n        <input\n          matInput\n          formControlName=\"date\"\n          [min]=\"minDate\"\n          [max]=\"maxDate\"\n          [matDatepicker]=\"picker\"\n          (dateChange)=\"closePicker(picker)\"\n        />\n      </mat-form-field>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker--hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui datepicker (single)
+ */
+
+const MAPA_DATEPICKER_RANGE_FORMATS = {
+    parse: {
+        dateInput: "DD/MM/YYYY",
+    },
+    display: {
+        dateInput: "DD/MM/YYYY",
+        monthYearLabel: "MMM YYYY",
+        dateA11yLabel: "LL",
+        monthYearA11yLabel: "MMMM YYYY",
+    },
+};
+class MapaDatepickerRange {
+    constructor(i18n, cdr) {
+        this.i18n = i18n;
+        this.cdr = cdr;
+        this.destroyRef = inject(DestroyRef);
+        this.defaultDaysBack = 60;
+        this.emptyValue = {
+            startDate: null,
+            endDate: null,
+        };
+        this.formDatepicker = new FormGroup({
+            startDate: new FormControl(null),
+            endDate: new FormControl(null),
+        });
+        this.formDisplay = new FormGroup({
+            startDate: new FormControl(null),
+            endDate: new FormControl(null),
+        });
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    ngOnInit() {
+        if (!this.element?.key) {
+            throw new Error("mapa-datepicker-range requires element.key to resolve the target control.");
+        }
+        this.rangeControl = this.formGroup.get(this.element.key);
+        if (!this.rangeControl) {
+            throw new Error(`mapa-datepicker-range could not find control '${this.element.key}' in formGroup.`);
+        }
+        this.syncFromExternal(this.rangeControl.value);
+        this.rangeControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.syncFromExternal(value);
+        });
+        this.formDisplay.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.updateExternalFromDisplay(value);
+        });
+        this.formDatepicker.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.updateExternalFromDatepicker(value);
+        });
+    }
+    get startDatePlaceholder() {
+        return this.texts.datepicker.startDatePlaceholder;
+    }
+    get endDatePlaceholder() {
+        return this.texts.datepicker.endDatePlaceholder;
+    }
+    syncFromExternal(value) {
+        const nextValue = value ?? this.emptyValue;
+        const displayValue = {
+            startDate: nextValue.startDate,
+            endDate: nextValue.endDate,
+        };
+        const datepickerValue = {
+            startDate: parseDateValue(nextValue.startDate),
+            endDate: parseDateValue(nextValue.endDate),
+        };
+        const currentDisplay = this.formDisplay.getRawValue();
+        if (currentDisplay.startDate !== displayValue.startDate ||
+            currentDisplay.endDate !== displayValue.endDate) {
+            this.formDisplay.patchValue(displayValue, { emitEvent: false });
+        }
+        const currentDatepicker = this.formDatepicker.getRawValue();
+        if (!this.areDatesEqual(currentDatepicker.startDate, datepickerValue.startDate) ||
+            !this.areDatesEqual(currentDatepicker.endDate, datepickerValue.endDate)) {
+            this.formDatepicker.patchValue(datepickerValue, { emitEvent: false });
+        }
+        this.cdr.markForCheck();
+    }
+    updateExternalFromDisplay(value) {
+        const nextValue = {
+            startDate: value.startDate ?? null,
+            endDate: value.endDate ?? null,
+        };
+        this.patchExternalValue(nextValue);
+        const nextDatepickerValue = {
+            startDate: parseDateValue(nextValue.startDate),
+            endDate: parseDateValue(nextValue.endDate),
+        };
+        this.formDatepicker.patchValue(nextDatepickerValue, { emitEvent: false });
+        this.cdr.markForCheck();
+    }
+    updateExternalFromDatepicker(value) {
+        if (!value.startDate || !value.endDate) {
+            return;
+        }
+        const nextValue = {
+            startDate: formatDateAsDayMonthYear(value.startDate),
+            endDate: formatDateAsDayMonthYear(value.endDate),
+        };
+        this.patchExternalValue(nextValue);
+        this.formDisplay.patchValue(nextValue, { emitEvent: false });
+        this.cdr.markForCheck();
+    }
+    patchExternalValue(nextValue) {
+        const currentValue = this.rangeControl.value;
+        if (currentValue?.startDate === nextValue.startDate &&
+            currentValue?.endDate === nextValue.endDate) {
+            return;
+        }
+        this.rangeControl.patchValue(nextValue);
+    }
+    areDatesEqual(first, second) {
+        if (first === second) {
+            return true;
+        }
+        if (!first || !second) {
+            return false;
+        }
+        return first.getTime() === second.getTime();
+    }
+    cleanDatepicker() {
+        const defaultRange = getRelativeDateRange(this.defaultDaysBack);
+        const nextValue = {
+            startDate: formatDateAsDayMonthYear(defaultRange.startDate),
+            endDate: formatDateAsDayMonthYear(defaultRange.endDate),
+        };
+        this.formDatepicker.patchValue(defaultRange, { emitEvent: false });
+        this.formDisplay.patchValue(nextValue, { emitEvent: false });
+        this.patchExternalValue(nextValue);
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDatepickerRange, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapaDatepickerRange, isStandalone: true, selector: "mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, providers: [
+            provideNgxMask(),
+            provideNativeDateAdapter(MAPA_DATEPICKER_RANGE_FORMATS),
+        ], ngImport: i0, template: "@if (element.label) {\n  <div class=\"mapa-datepicker-range__label\">\n    {{ element.label }}\n  </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__start-date\"\n  >\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n  </mat-form-field>\n  <div class=\"mapa-datepicker-range__divider\">&ndash;</div>\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__end-date\"\n  >\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n    <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input matStartDate formControlName=\"startDate\" />\n      <input matEndDate formControlName=\"endDate\" />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDatepickerRange, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-datepicker-range", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgxMaskDirective,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                    ], providers: [
+                        provideNgxMask(),
+                        provideNativeDateAdapter(MAPA_DATEPICKER_RANGE_FORMATS),
+                    ], standalone: true, template: "@if (element.label) {\n  <div class=\"mapa-datepicker-range__label\">\n    {{ element.label }}\n  </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__start-date\"\n  >\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n  </mat-form-field>\n  <div class=\"mapa-datepicker-range__divider\">&ndash;</div>\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__end-date\"\n  >\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n    <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input matStartDate formControlName=\"startDate\" />\n      <input matEndDate formControlName=\"endDate\" />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa--hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui datepicker-range
+ */
+
 function sanitizeHtmlContent(sanitizer, value) {
     return sanitizer.sanitize(SecurityContext.HTML, value ?? "") ?? "";
 }
@@ -514,10 +865,10 @@ class HtmlSanitizerService {
     sanitize(value) {
         return sanitizeHtmlContent(this.sanitizer, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: HtmlSanitizerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -531,10 +882,10 @@ class SafeHtmlPipe {
     transform(value) {
         return this.htmlSanitizer.sanitize(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: "safeHtml",
@@ -687,8 +1038,8 @@ class MapaDropdownComponent {
         this.formControl.setValue(null);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDropdownComponent, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapaDropdownComponent, isStandalone: true, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, outputs: { openedChange: "openedChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDropdownComponent, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapaDropdownComponent, isStandalone: true, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, outputs: { openedChange: "openedChange" }, providers: [
             {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
@@ -697,9 +1048,9 @@ class MapaDropdownComponent {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                 useValue: { appearance: "outline" },
             },
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (element) {\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\">\n      {{ element.label }}\n    </label>\n  }\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n        (openedChange)=\"triggerOpenedChange($event)\"\n      >\n        @if (element.search) {\n          <mat-option class=\"mapa-dropdown__search\">\n            @if (element.search.formControl) {\n              <ngx-mat-select-search\n                [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n                [formControl]=\"element.search.formControl\"\n                [placeholderLabel]=\"element.search.placeholder || ''\"\n                i18n-placeholderLabel\n                [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n              ></ngx-mat-select-search>\n            }\n          </mat-option>\n        }\n        @if (element.multiple) {\n          <mat-option class=\"mapa-dropdown__option--select-all\">\n            <mat-checkbox\n              class=\"mat-option\"\n              [indeterminate]=\"isIndeterminate\"\n              [checked]=\"isChecked\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleSelectAll($event)\"\n            >\n              {{ selectAllLabel }}\n            </mat-checkbox>\n          </mat-option>\n        }\n        @if (isOptionsGroup) {\n          @if (filteredGroups | async; as groups) {\n            @for (group of groups; track group.label) {\n              <mat-optgroup [label]=\"group.label\">\n                @for (option of group.options; track option.key) {\n                  <mat-option\n                    [value]=\"option\"\n                    [ngClass]=\"[\n                      'mapa-dropdown__option--children-level-' + option.childrenLevel,\n                    ]\"\n                  >\n                    <span [innerHTML]=\"option.value | safeHtml\"></span>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            }\n          }\n        } @else {\n          @if (filteredOptions | async; as options) {\n            @for (option of options; track option.key) {\n              <mat-option\n                [value]=\"option\"\n                [ngClass]=\"[\n                  'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n                    option.childrenLevel,\n                ]\"\n              >\n                <span\n                  class=\"mapa-dropdown__option-value\"\n                  [innerHTML]=\"option.value | safeHtml\"\n                ></span>\n              </mat-option>\n            }\n          }\n        }\n\n        @for (option of selectedOptions; track option.key) {\n          <mat-option\n            hidden\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option--children-level-' + option.childrenLevel,\n            ]\"\n          >\n            <span [innerHTML]=\"option.value | safeHtml\"></span>\n          </mat-option>\n        }\n      </mat-select>\n      @if (element.hint) {\n        <mat-hint>{{ element.hint }}</mat-hint>\n      }\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </mat-error>\n      @if (hasValue() && !formControl.disabled && element.clearValue) {\n        <mat-icon\n          (click)=\"clearValue($event)\"\n          class=\"mapa-input--close\"\n          >close</mat-icon\n        >\n      }\n    </mat-form-field>\n    @if (element.actionButton) {\n      <div class=\"mapa-form--action\">\n        <mapa-button\n          color=\"basic\"\n          (click)=\"element.actionButton.action.emit(true)\"\n        >\n          {{ element.actionButton.label }}\n        </mapa-button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (element) {\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\">\n      {{ element.label }}\n    </label>\n  }\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n        (openedChange)=\"triggerOpenedChange($event)\"\n      >\n        @if (element.search) {\n          <mat-option class=\"mapa-dropdown__search\">\n            @if (element.search.formControl) {\n              <ngx-mat-select-search\n                [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n                [formControl]=\"element.search.formControl\"\n                [placeholderLabel]=\"element.search.placeholder || ''\"\n                i18n-placeholderLabel\n                [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n              ></ngx-mat-select-search>\n            }\n          </mat-option>\n        }\n        @if (element.multiple) {\n          <mat-option class=\"mapa-dropdown__option--select-all\">\n            <mat-checkbox\n              class=\"mat-option\"\n              [indeterminate]=\"isIndeterminate\"\n              [checked]=\"isChecked\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleSelectAll($event)\"\n            >\n              {{ selectAllLabel }}\n            </mat-checkbox>\n          </mat-option>\n        }\n        @if (isOptionsGroup) {\n          @if (filteredGroups | async; as groups) {\n            @for (group of groups; track group.label) {\n              <mat-optgroup [label]=\"group.label\">\n                @for (option of group.options; track option.key) {\n                  <mat-option\n                    [value]=\"option\"\n                    [ngClass]=\"[\n                      'mapa-dropdown__option--children-level-' + option.childrenLevel,\n                    ]\"\n                  >\n                    <span [innerHTML]=\"option.value | safeHtml\"></span>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            }\n          }\n        } @else {\n          @if (filteredOptions | async; as options) {\n            @for (option of options; track option.key) {\n              <mat-option\n                [value]=\"option\"\n                [ngClass]=\"[\n                  'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n                    option.childrenLevel,\n                ]\"\n              >\n                <span\n                  class=\"mapa-dropdown__option-value\"\n                  [innerHTML]=\"option.value | safeHtml\"\n                ></span>\n              </mat-option>\n            }\n          }\n        }\n\n        @for (option of selectedOptions; track option.key) {\n          <mat-option\n            hidden\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option--children-level-' + option.childrenLevel,\n            ]\"\n          >\n            <span [innerHTML]=\"option.value | safeHtml\"></span>\n          </mat-option>\n        }\n      </mat-select>\n      @if (element.hint) {\n        <mat-hint>{{ element.hint }}</mat-hint>\n      }\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </mat-error>\n      @if (hasValue() && !formControl.disabled && element.clearValue) {\n        <mat-icon\n          (click)=\"clearValue($event)\"\n          class=\"mapa-input--close\"\n          >close</mat-icon\n        >\n      }\n    </mat-form-field>\n    @if (element.actionButton) {\n      <div class=\"mapa-form--action\">\n        <mapa-button\n          color=\"basic\"\n          (click)=\"element.actionButton.action.emit(true)\"\n        >\n          {{ element.actionButton.label }}\n        </mapa-button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: "mapa-dropdown", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -801,10 +1152,10 @@ class MapaDropdownTreeComponent {
     triggerOpenedChange(event) {
         this.openedChange.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDropdownTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaDropdownTreeComponent, isStandalone: true, selector: "mapa-dropdown-tree", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, usesOnChanges: true, ngImport: i0, template: "<section *ngIf=\"elementOption && formControl\">\n  <mapa-dropdown\n    [formControl]=\"formControl\"\n    [element]=\"elementOption\"\n    (openedChange)=\"triggerOpenedChange($event)\"\n  ></mapa-dropdown>\n</section>\n", styles: [":host ::ng-deep .mapa-dropdown-tree{min-width:235px;max-width:none;width:100%!important;margin-bottom:24px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown-tree__hint{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#77838f;margin-bottom:16px}:host ::ng-deep .mapa-dropdown-tree__toggle-all .checklist-leaf-node{padding:16px 0}:host ::ng-deep .mapa-dropdown-tree__label,:host ::ng-deep .mapa-dropdown-tree__checkbox{display:block;font-style:normal;font-weight:400;line-height:16px;width:100%;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label div,:host ::ng-deep .mapa-dropdown-tree__checkbox div{width:100%}:host ::ng-deep .mapa-dropdown-tree__label--checked,:host ::ng-deep .mapa-dropdown-tree__checkbox--checked{background:#0000001f}:host ::ng-deep .mapa-dropdown-tree__checkbox{font-size:16px;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);padding:0!important;font-size:12px!important;font-weight:600!important;margin-bottom:16px;text-transform:uppercase}:host ::ng-deep .mapa-dropdown-tree__dropdown{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;width:100%;border:2px solid #a7aaad;border-radius:8px;padding:10px 12px;margin-bottom:8px}:host ::ng-deep .mapa-dropdown-tree__dropdown--value{flex-grow:1;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:300px}:host ::ng-deep .mapa-dropdown-tree__button{background:#fff;border-top:1px solid #dcdcde!important;color:#ea561d;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px;padding:9px;text-align:left!important;width:100%}:host ::ng-deep .mapa-dropdown-tree__button .mdc-button__label{color:#ea561d!important;padding:4px 8px}:host ::ng-deep .mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:flex-start;background:#f6f7f7;width:100%;padding:10px 0 16px 16px!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-input-element{padding:4px 0}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field{width:94%}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-text-field-wrapper{background:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-infix{border-top:unset!important;min-height:unset!important;padding:.7em 0 .5em}:host ::ng-deep .mapa-dropdown-tree__clean{background:#fff;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}:host ::ng-deep .mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}:host ::ng-deep .mapa-dropdown-tree--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-infix{border-top:unset!important;padding:unset!important;min-height:unset!important;position:relative}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown-tree [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown-tree .mdc-label{color:#77838f!important;font-size:16px!important;font-style:normal;font-weight:400}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-panel{width:100%;max-width:none!important;overflow:hidden}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-content{padding-bottom:unset!important;padding-top:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree{display:flex;gap:8px;flex-direction:column;max-height:260px;padding-bottom:24px;overflow-y:auto}::ng-deep .mapa-overlay-dropdown-tree .mat-tree-node{color:#50575e!important}::ng-deep .mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}::ng-deep .mapa-overlay-dropdown-tree .tree-toggle{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-focus-indicator{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node{min-height:28px!important;padding:4px 0;flex:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node:hover{background:#0000000a}::ng-deep .mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-autocomplete-panel .mat-mdc-option{padding:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-clear{top:-3px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDropdownTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MapaDropdownTreeComponent, isStandalone: true, selector: "mapa-dropdown-tree", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, usesOnChanges: true, ngImport: i0, template: "<section *ngIf=\"elementOption && formControl\">\n  <mapa-dropdown\n    [formControl]=\"formControl\"\n    [element]=\"elementOption\"\n    (openedChange)=\"triggerOpenedChange($event)\"\n  ></mapa-dropdown>\n</section>\n", styles: [":host ::ng-deep .mapa-dropdown-tree{min-width:235px;max-width:none;width:100%!important;margin-bottom:24px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown-tree__hint{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#77838f;margin-bottom:16px}:host ::ng-deep .mapa-dropdown-tree__toggle-all .checklist-leaf-node{padding:16px 0}:host ::ng-deep .mapa-dropdown-tree__label,:host ::ng-deep .mapa-dropdown-tree__checkbox{display:block;font-style:normal;font-weight:400;line-height:16px;width:100%;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label div,:host ::ng-deep .mapa-dropdown-tree__checkbox div{width:100%}:host ::ng-deep .mapa-dropdown-tree__label--checked,:host ::ng-deep .mapa-dropdown-tree__checkbox--checked{background:#0000001f}:host ::ng-deep .mapa-dropdown-tree__checkbox{font-size:16px;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);padding:0!important;font-size:12px!important;font-weight:600!important;margin-bottom:16px;text-transform:uppercase}:host ::ng-deep .mapa-dropdown-tree__dropdown{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;width:100%;border:2px solid #a7aaad;border-radius:8px;padding:10px 12px;margin-bottom:8px}:host ::ng-deep .mapa-dropdown-tree__dropdown--value{flex-grow:1;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:300px}:host ::ng-deep .mapa-dropdown-tree__button{background:#fff;border-top:1px solid #dcdcde!important;color:#ea561d;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px;padding:9px;text-align:left!important;width:100%}:host ::ng-deep .mapa-dropdown-tree__button .mdc-button__label{color:#ea561d!important;padding:4px 8px}:host ::ng-deep .mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:flex-start;background:#f6f7f7;width:100%;padding:10px 0 16px 16px!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-input-element{padding:4px 0}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field{width:94%}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-text-field-wrapper{background:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-infix{border-top:unset!important;min-height:unset!important;padding:.7em 0 .5em}:host ::ng-deep .mapa-dropdown-tree__clean{background:#fff;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}:host ::ng-deep .mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}:host ::ng-deep .mapa-dropdown-tree--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-infix{border-top:unset!important;padding:unset!important;min-height:unset!important;position:relative}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown-tree [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown-tree .mdc-label{color:#77838f!important;font-size:16px!important;font-style:normal;font-weight:400}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-panel{width:100%;max-width:none!important;overflow:hidden}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-content{padding-bottom:unset!important;padding-top:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree{display:flex;gap:8px;flex-direction:column;max-height:260px;padding-bottom:24px;overflow-y:auto}::ng-deep .mapa-overlay-dropdown-tree .mat-tree-node{color:#50575e!important}::ng-deep .mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}::ng-deep .mapa-overlay-dropdown-tree .tree-toggle{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-focus-indicator{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node{min-height:28px!important;padding:4px 0;flex:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node:hover{background:#0000000a}::ng-deep .mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-autocomplete-panel .mat-mdc-option{padding:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-clear{top:-3px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaDropdownTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDropdownTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-dropdown-tree', imports: [CommonModule, MapaDropdownComponent], standalone: true, template: "<section *ngIf=\"elementOption && formControl\">\n  <mapa-dropdown\n    [formControl]=\"formControl\"\n    [element]=\"elementOption\"\n    (openedChange)=\"triggerOpenedChange($event)\"\n  ></mapa-dropdown>\n</section>\n", styles: [":host ::ng-deep .mapa-dropdown-tree{min-width:235px;max-width:none;width:100%!important;margin-bottom:24px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown-tree__hint{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#77838f;margin-bottom:16px}:host ::ng-deep .mapa-dropdown-tree__toggle-all .checklist-leaf-node{padding:16px 0}:host ::ng-deep .mapa-dropdown-tree__label,:host ::ng-deep .mapa-dropdown-tree__checkbox{display:block;font-style:normal;font-weight:400;line-height:16px;width:100%;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label div,:host ::ng-deep .mapa-dropdown-tree__checkbox div{width:100%}:host ::ng-deep .mapa-dropdown-tree__label--checked,:host ::ng-deep .mapa-dropdown-tree__checkbox--checked{background:#0000001f}:host ::ng-deep .mapa-dropdown-tree__checkbox{font-size:16px;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);padding:0!important;font-size:12px!important;font-weight:600!important;margin-bottom:16px;text-transform:uppercase}:host ::ng-deep .mapa-dropdown-tree__dropdown{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;width:100%;border:2px solid #a7aaad;border-radius:8px;padding:10px 12px;margin-bottom:8px}:host ::ng-deep .mapa-dropdown-tree__dropdown--value{flex-grow:1;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:300px}:host ::ng-deep .mapa-dropdown-tree__button{background:#fff;border-top:1px solid #dcdcde!important;color:#ea561d;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px;padding:9px;text-align:left!important;width:100%}:host ::ng-deep .mapa-dropdown-tree__button .mdc-button__label{color:#ea561d!important;padding:4px 8px}:host ::ng-deep .mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:flex-start;background:#f6f7f7;width:100%;padding:10px 0 16px 16px!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-input-element{padding:4px 0}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field{width:94%}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-text-field-wrapper{background:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-infix{border-top:unset!important;min-height:unset!important;padding:.7em 0 .5em}:host ::ng-deep .mapa-dropdown-tree__clean{background:#fff;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}:host ::ng-deep .mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}:host ::ng-deep .mapa-dropdown-tree--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-infix{border-top:unset!important;padding:unset!important;min-height:unset!important;position:relative}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown-tree [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown-tree .mdc-label{color:#77838f!important;font-size:16px!important;font-style:normal;font-weight:400}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-panel{width:100%;max-width:none!important;overflow:hidden}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-content{padding-bottom:unset!important;padding-top:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree{display:flex;gap:8px;flex-direction:column;max-height:260px;padding-bottom:24px;overflow-y:auto}::ng-deep .mapa-overlay-dropdown-tree .mat-tree-node{color:#50575e!important}::ng-deep .mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}::ng-deep .mapa-overlay-dropdown-tree .tree-toggle{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-focus-indicator{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node{min-height:28px!important;padding:4px 0;flex:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node:hover{background:#0000000a}::ng-deep .mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-autocomplete-panel .mat-mdc-option{padding:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-clear{top:-3px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mdc-checkbox__background{border-color:#c3c4c7!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
@@ -839,20 +1190,22 @@ class MapaFormComponent {
     triggerOpenedChange(element, event) {
         element.openedChange?.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapaFormComponent, isStandalone: true, selector: "mapa-form", inputs: { formGroup: "formGroup", elements: "elements" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%}:host ::ng-deep .mapa-form__element--type{width:100%}:host ::ng-deep .mapa-form mapa-input .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-dropdown .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaDropdownTreeComponent, selector: "mapa-dropdown-tree", inputs: ["formGroup", "element"], outputs: ["openedChange"] }, { kind: "component", type: RadioButtonComponent, selector: "mapa-radio-button", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: MapaTextareaComponent, selector: "mapa-textarea", inputs: ["formControl", "element"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapaFormComponent, isStandalone: true, selector: "mapa-form", inputs: { formGroup: "formGroup", elements: "elements" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"datepicker-range\") {\n            <mapa-datepicker-range\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker-range>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%}:host ::ng-deep .mapa-form__element--type{width:100%}:host ::ng-deep .mapa-form mapa-input .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-dropdown .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker-range .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaDatepicker, selector: "mapa-datepicker", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaDatepickerRange, selector: "mapa-datepicker-range", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaDropdownTreeComponent, selector: "mapa-dropdown-tree", inputs: ["formGroup", "element"], outputs: ["openedChange"] }, { kind: "component", type: RadioButtonComponent, selector: "mapa-radio-button", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: MapaTextareaComponent, selector: "mapa-textarea", inputs: ["formControl", "element"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaFormComponent, decorators: [{
             type: Component,
             args: [{ selector: "mapa-form", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
+                        MapaDatepicker,
+                        MapaDatepickerRange,
                         MapaInputComponent,
                         MapaDropdownComponent,
                         MapaDropdownTreeComponent,
                         RadioButtonComponent,
                         SlideToggleComponent,
                         MapaTextareaComponent,
-                    ], standalone: true, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%}:host ::ng-deep .mapa-form__element--type{width:100%}:host ::ng-deep .mapa-form mapa-input .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-dropdown .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"] }]
+                    ], standalone: true, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"datepicker-range\") {\n            <mapa-datepicker-range\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker-range>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%}:host ::ng-deep .mapa-form__element--type{width:100%}:host ::ng-deep .mapa-form mapa-input .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-dropdown .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker-range .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], elements: [{