mapa-library-ui 1.6.2 → 1.7.0

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

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, DestroyRef, Self, Directive, forwardRef, ChangeDetectionStrategy, SecurityContext, Pipe, ViewChild } from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, DestroyRef, Self, Directive, forwardRef, ChangeDetectionStrategy, SecurityContext, Pipe, ChangeDetectorRef, HostListener, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, 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 i5 from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { getMapaUiTexts, getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
-import { fromEvent, ReplaySubject } from 'rxjs';
+import { fromEvent, merge } from 'rxjs';
 import * as i3$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i3$2 from '@angular/material/slide-toggle';
@@ -22,13 +21,9 @@ import * as i5$1 from '@angular/cdk/text-field';
 import { provideNativeDateAdapter, DateAdapter } 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';
-import * as i8 from 'ngx-mat-select-search';
-import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import * as i1$2 from '@angular/platform-browser';
+import { getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/platform-browser';
 
 class ButtonComponent {
     constructor() {
@@ -56,8 +51,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
  */
 
 const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
+function formatPaginatorRange(page, pageSize, length) {
+    if (length === 0 || pageSize === 0) {
+        return `0 de ${length}`;
+    }
+    const safeLength = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    const endIndex = startIndex < safeLength
+        ? Math.min(startIndex + pageSize, safeLength)
+        : startIndex + pageSize;
+    return `${startIndex + 1} - ${endIndex} de ${safeLength}`;
+}
+function formatPaginatorShowingRange(page, pageSize, length) {
+    if (length === 0 || pageSize === 0) {
+        return "Mostrando 0 - 0 de 0 item";
+    }
+    const safeLength = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    const endIndex = startIndex < safeLength
+        ? Math.min(startIndex + pageSize, safeLength)
+        : startIndex + pageSize;
+    const itemLabel = safeLength === 1 ? "item" : "itens";
+    return `Mostrando ${startIndex + 1} - ${endIndex} de ${safeLength} ${itemLabel}`;
+}
+const DEFAULT_MAPA_UI_TEXTS = {
+    common: {
+        selectAll: "Selecionar todos",
+    },
+    filters: {
+        clear: "Limpar filtros",
+        submit: "Filtrar",
+    },
+    datepicker: {
+        startDatePlaceholder: "Data inicial",
+        endDatePlaceholder: "Data final",
+    },
+    capability: {
+        groupAverageTitle: "Média geral do grupo",
+        individualAverageTitle: "Média geral do indivíduo",
+        conceptTitle: "Conceito",
+        resultTitle: "Resultado",
+        positiveIndicatorsTitle: "Indicadores positivos",
+        negativeIndicatorsTitle: "Indicadores negativos",
+        riskIndicatorsTitle: "Indicadores de risco",
+        precipitationRiskTitle: "Risco de acidente por precipitação",
+        negligenceRiskTitle: "Risco de acidente por negligência",
+        negativeDirectionLabel: "Direção Negativa |",
+        positiveDirectionLabel: "Direção Positiva |",
+    },
+    paginator: {
+        itemsPerPage: "Itens por página",
+        nextPage: "Próxima página",
+        previousPage: "Página anterior",
+        rangeLabel: formatPaginatorRange,
+        showingRangeLabel: formatPaginatorShowingRange,
+    },
+    warning: {
+        lowReliabilityTitle: "Nível baixo de confiabilidade no(s) teste(s):",
+        expirationLimitTitle: "O prazo de validade do(s) teste(s) está no limite:",
+    },
+    table: {
+        emptyTitle: "Não foram encontrados resultados",
+        emptySubtitle: "",
+    },
+    validation: {
+        cnpj: "CNPJ inválido",
+        cpf: "CPF inválido",
+        email: "E-mail inválido",
+        max: (context) => `O valor máximo permitido é ${context?.max ?? ""}`.trim(),
+        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        min: (context) => `O valor mínimo permitido é ${context?.min ?? ""}`.trim(),
+        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        pattern: "Formato inválido",
+        required: "Campo obrigatório",
+    },
+};
 function getDefaultTexts() {
-    return getMapaUiTexts("pt-BR");
+    return DEFAULT_MAPA_UI_TEXTS;
 }
 function mergeMapaUiTexts(customTexts) {
     const defaults = getDefaultTexts();
@@ -272,7 +342,7 @@ class MatInputAutosizeDirective {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.changeHiddenText(this.inputElement.value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MatInputAutosizeDirective, deps: [{ token: i0.ElementRef }, { token: i5.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.21", type: MatInputAutosizeDirective, isStandalone: true, selector: "[matInputAutosize]", inputs: { matInputAutosizeMaxWidth: "matInputAutosizeMaxWidth", matInputAutosizeMinWidth: "matInputAutosizeMinWidth", matInputAutosizeFontStyle: "matInputAutosizeFontStyle" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MatInputAutosizeDirective, decorators: [{
@@ -281,7 +351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     selector: '[matInputAutosize]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatInput, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i5.MatInput, decorators: [{
                     type: Self
                 }] }, { type: i2.NgModel, decorators: [{
                     type: Optional
@@ -330,7 +400,7 @@ class MapaInputComponent {
                 useExisting: forwardRef(() => MapaInputComponent),
                 multi: true,
             },
-        ], 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-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}: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;height:48px}: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"] }] }); }
+        ], 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    [class.mapa-input--autosize]=\"element.autosize\"\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    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\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{width:310px;min-width:310px;box-sizing:border-box}.mapa-input--autosize{width:auto}.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-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}: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-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}: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:var(--mapa-radius-sm, 12px)}: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: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}: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{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}: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: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: 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.21", ngImport: i0, type: MapaInputComponent, decorators: [{
             type: Component,
@@ -352,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             useExisting: forwardRef(() => MapaInputComponent),
                             multi: true,
                         },
-                    ], standalone: true, 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-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}: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;height:48px}: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"] }]
+                    ], standalone: true, 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    [class.mapa-input--autosize]=\"element.autosize\"\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    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\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{width:310px;min-width:310px;box-sizing:border-box}.mapa-input--autosize{width:auto}.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-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}: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-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}: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:var(--mapa-radius-sm, 12px)}: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: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}: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{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}: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"] }]
         }], propDecorators: { formControl: [{
                 type: Input
             }], element: [{
@@ -505,7 +575,7 @@ class MapaTextareaComponent {
                 useExisting: forwardRef(() => MapaTextareaComponent),
                 multi: true,
             },
-        ], 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-error-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-hint-wrapper,: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"] }] }); }
+        ], 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-error-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-error:before{display:none}\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: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "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.21", ngImport: i0, type: MapaTextareaComponent, decorators: [{
             type: Component,
@@ -522,7 +592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             useExisting: forwardRef(() => MapaTextareaComponent),
                             multi: true,
                         },
-                    ], standalone: true, 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-error-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}\n"] }]
+                    ], standalone: true, 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-error-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-error:before{display:none}\n"] }]
         }], propDecorators: { formControl: [{
                 type: Input
             }], element: [{
@@ -815,7 +885,7 @@ class MapaDatepicker {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", 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}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .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: 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 }); }
+        ], 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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n        >\n          &times;\n        </button>\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:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker--hidden{display:none}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error:before{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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, decorators: [{
             type: Component,
@@ -831,7 +901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     ], 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}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}\n"] }]
+                    ], 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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n        >\n          &times;\n        </button>\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:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker--hidden{display:none}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error:before{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
                 type: Input
             }], element: [{
@@ -1025,7 +1095,7 @@ class MapaDatepickerRange {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepickerRange, isStandalone: true, selector: "mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, providers: [
             provideNgxMask(),
             provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
-        ], 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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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-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-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}: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 }); }
+        ], 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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n    >\n      &times;\n    </button>\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{display:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}: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,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}: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,: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:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}: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%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);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;margin-left: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-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}: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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, decorators: [{
             type: Component,
@@ -1040,7 +1110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     ], providers: [
                         provideNgxMask(),
                         provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
-                    ], 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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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-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-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"] }]
+                    ], 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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n    >\n      &times;\n    </button>\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{display:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}: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,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}: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,: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:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}: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%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);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;margin-left: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-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
                 type: Input
             }], element: [{
@@ -1061,7 +1131,7 @@ class HtmlSanitizerService {
     sanitize(value) {
         return sanitizeHtmlContent(this.sanitizer, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, decorators: [{
@@ -1069,7 +1139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 class SafeHtmlPipe {
     constructor(htmlSanitizer) {
@@ -1090,221 +1160,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
         }], ctorParameters: () => [{ type: HtmlSanitizerService }] });
 
 class MapaDropdownComponent {
-    constructor(i18n, cdr) {
-        this.i18n = i18n;
-        this.cdr = cdr;
-        this.openedChange = new EventEmitter();
-        this.filteredOptions = new ReplaySubject(1);
-        this.filteredGroups = new ReplaySubject(1);
-        this.filteredOptionsCache = [];
-        this.filteredGroupCache = [];
+    constructor() {
+        this.i18n = inject(MapaI18nService);
+        this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.isIndeterminate = false;
-        this.isChecked = false;
-        this.isOptionsGroup = false;
+        this.isOpenState = signal(false, ...(ngDevMode ? [{ debugName: "isOpenState" }] : []));
+        this.overlayWidthState = signal(0, ...(ngDevMode ? [{ debugName: "overlayWidthState" }] : []));
+        this.openedChange = new EventEmitter();
+        this.overlayPositions = [
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "start",
+                overlayY: "top",
+                offsetY: 8,
+            },
+            {
+                originX: "start",
+                originY: "top",
+                overlayX: "start",
+                overlayY: "bottom",
+                offsetY: -8,
+            },
+        ];
+    }
+    set formControl(control) {
+        this.formControlChanges?.unsubscribe();
+        this.formControlValue = control;
+        this.formControlChanges = merge(control.valueChanges, control.statusChanges)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.cdr.markForCheck());
+    }
+    get formControl() {
+        return this.formControlValue;
     }
     writeValue(_value) {
-        // No-op: inner <mat-select [formControl]="formControl"> handles binding.
+        // The inner control is bound directly through the formControl input.
     }
     registerOnChange(_fn) {
-        // No-op.
+        // Changes are propagated by the supplied formControl.
     }
     registerOnTouched(_fn) {
-        // No-op.
+        // Touch state is propagated by the supplied formControl.
     }
     setDisabledState(_isDisabled) {
-        // No-op.
+        // Disabled state is propagated by the supplied formControl.
     }
-    get texts() {
-        return this.i18n.textsSignal();
+    isOpen() {
+        return this.isOpenState();
     }
-    get selectAllLabel() {
-        return this.texts.common.selectAll;
+    overlayWidth() {
+        return this.overlayWidthState();
+    }
+    isMultiple() {
+        return !!this.element.multiple;
     }
-    get selectedOptions() {
+    isDisabled() {
+        return !!this.formControl?.disabled;
+    }
+    hasGroups() {
+        return this.isElementGroup(this.element.options?.[0]);
+    }
+    selectedOptions() {
         const value = this.formControl?.value;
         if (Array.isArray(value)) {
             return value.filter((option) => this.isElementOption(option));
         }
         return this.isElementOption(value) ? [value] : [];
     }
-    ngOnInit() {
-        this.setOptions();
-        this.element.search?.formControl?.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.filterOptions();
-            this.setToggleAllCheckboxState();
-            this.cdr.markForCheck();
-        });
+    selectedLabel() {
+        const selected = this.selectedOptions();
+        if (!selected.length) {
+            return this.element.placeholder || "";
+        }
+        return selected.map((option) => option.value).join(", ");
     }
-    ngAfterViewInit() {
-        Promise.resolve().then(() => this.cdr.detectChanges());
+    isOptionSelected(option) {
+        return this.selectedOptions().some((selected) => selected.key === option.key);
     }
-    ngOnChanges(changes) {
-        if (changes["element"]?.previousValue !== undefined &&
-            changes["element"].previousValue?.controlType === "dropdown" &&
-            changes["element"].previousValue?.options !==
-                changes["element"].currentValue?.options) {
-            this.element.options = changes["element"].currentValue.options;
-            this.setOptions();
-            this.cdr.markForCheck();
-        }
+    hasValue() {
+        return this.selectedOptions().length > 0;
+    }
+    get selectAllLabel() {
+        return this.i18n.textsSignal().common.selectAll;
+    }
+    isAllSelected() {
+        const options = this.visibleOptions();
+        return (options.length > 0 &&
+            options.every((option) => this.isOptionSelected(option)));
+    }
+    isIndeterminate() {
+        const options = this.visibleOptions();
+        const selectedCount = options.filter((option) => this.isOptionSelected(option)).length;
+        return selectedCount > 0 && selectedCount < options.length;
     }
-    setOptions() {
-        this.isOptionsGroup = this.isElementGroup(this.element.options[0]);
-        if (this.isOptionsGroup) {
-            this.filteredGroupCache = this.element.options.slice();
-            this.filteredGroups.next(this.filteredGroupCache);
-            this.cdr.markForCheck();
+    toggleSelectAll() {
+        if (this.isDisabled()) {
             return;
         }
-        this.filteredOptionsCache = this.element.options.slice();
-        this.filteredOptions.next(this.filteredOptionsCache);
-        this.cdr.markForCheck();
+        const options = this.visibleOptions();
+        const next = this.isAllSelected() ? [] : options.slice();
+        this.formControl.setValue(next);
+        this.markControlAsChanged();
+    }
+    options() {
+        if (this.hasGroups()) {
+            return this.element.options.flatMap((group) => group.options);
+        }
+        return this.element.options ?? [];
     }
-    filterOptionsFromGroup(group, value) {
-        const filterValue = this.normalizeValue(value);
-        return this.normalizeValue(group.label).includes(filterValue)
-            ? group.options
-            : group.options.filter((item) => this.normalizeValue(item.value).includes(filterValue));
+    filteredOptions() {
+        const options = this.hasGroups() ? [] : this.options();
+        const searchTerm = this.normalizedSearchTerm();
+        if (!searchTerm) {
+            return options;
+        }
+        return options.filter((option) => this.normalizeValue(option.value).includes(searchTerm));
     }
-    filterOptions() {
-        if (!this.element.options) {
+    filteredGroups() {
+        if (!this.hasGroups()) {
+            return [];
+        }
+        const groups = this.element.options;
+        const searchTerm = this.normalizedSearchTerm();
+        if (!searchTerm) {
+            return groups;
+        }
+        return groups
+            .map((group) => ({
+            label: group.label,
+            options: this.normalizeValue(group.label).includes(searchTerm)
+                ? group.options
+                : group.options.filter((option) => this.normalizeValue(option.value).includes(searchTerm)),
+        }))
+            .filter((group) => group.options.length > 0);
+    }
+    visibleOptions() {
+        return this.hasGroups()
+            ? this.filteredGroups().flatMap((group) => group.options)
+            : this.filteredOptions();
+    }
+    hasSearch() {
+        return !!this.searchControl;
+    }
+    searchPlaceholder() {
+        return this.element.search?.placeholder ?? "";
+    }
+    emptyStateLabel() {
+        return this.element.search?.noEntriesFoundLabel ?? "";
+    }
+    shouldShowError() {
+        return (this.formControl.invalid &&
+            (this.formControl.dirty || this.formControl.touched));
+    }
+    optionPadding(option) {
+        const level = Math.max(0, option.childrenLevel ?? 0);
+        return level === 0 ? 16 : 10 + level * 20;
+    }
+    toggleDropdown() {
+        if (this.isDisabled()) {
             return;
         }
-        const search = this.normalizeValue(this.element.search?.formControl?.value);
-        if (this.isOptionsGroup) {
-            const groups = this.element.options;
-            this.filteredGroupCache = groups
-                .map((group) => ({
-                label: group.label,
-                options: this.filterOptionsFromGroup(group, search),
-            }))
-                .filter((group) => group.options.length > 0);
-            this.filteredGroups.next(this.filteredGroupCache);
+        const isOpening = !this.isOpenState();
+        this.setOpenState(isOpening);
+        if (isOpening) {
+            this.overlayWidthState.set(this.triggerButton?.nativeElement.offsetWidth ?? 0);
+            this.searchControl?.setValue("", { emitEvent: true });
+            setTimeout(() => {
+                this.triggerButton?.nativeElement.blur();
+                this.searchInput?.nativeElement.focus();
+                this.searchInput?.nativeElement.select();
+            });
             return;
         }
-        const options = this.element.options;
-        if (!search) {
-            this.filteredOptionsCache = options.slice();
-            this.filteredOptions.next(this.filteredOptionsCache);
+        this.markAsTouchedIfEmpty();
+    }
+    selectOption(option) {
+        if (this.isDisabled()) {
             return;
         }
-        this.filteredOptionsCache = options.filter((option) => this.normalizeValue(option.value).includes(search));
-        this.filteredOptions.next(this.filteredOptionsCache);
+        if (this.isMultiple()) {
+            this.toggleOption(option);
+            return;
+        }
+        this.formControl.setValue(option);
+        this.markControlAsChanged();
+        this.closeDropdown();
     }
-    normalizeValue(value) {
-        return (value ?? "")
-            .normalize("NFD")
-            .replace(/[\u0300-\u036f]/g, "")
-            .toLowerCase();
+    clearValue(event) {
+        event.stopPropagation();
+        if (this.isDisabled()) {
+            return;
+        }
+        this.formControl.setValue(this.isMultiple() ? [] : null);
+        this.markControlAsChanged();
     }
-    triggerOpenedChange(event) {
-        this.openedChange.emit(event);
+    closeDropdown() {
+        if (this.isOpenState()) {
+            this.setOpenState(false);
+        }
+        this.searchControl?.setValue("", { emitEvent: true });
+        this.markAsTouchedIfEmpty();
     }
-    setToggleAllCheckboxState() {
-        const search = this.normalizeValue(this.element.search?.formControl?.value);
-        if (!search) {
-            this.isIndeterminate = false;
-            this.isChecked = false;
+    handleOverlayOutsideClick(event) {
+        if (this.triggerButton?.nativeElement.contains(event.target)) {
             return;
         }
-        const filteredLength = this.filteredOptionsCache.filter((option) => this.normalizeValue(option.value).includes(search)).length;
-        this.isIndeterminate =
-            filteredLength > 0 && filteredLength < this.filteredOptionsCache.length;
-        this.isChecked =
-            filteredLength > 0 && filteredLength === this.filteredOptionsCache.length;
-        this.cdr.markForCheck();
+        this.closeDropdown();
     }
-    toggleSelectAll(event) {
-        if (this.isOptionsGroup) {
-            const groupOptions = this.filteredGroupCache.reduce((accumulator, group) => accumulator.concat(group.options), []);
-            this.formControl?.patchValue(event.checked ? groupOptions : []);
-            return;
+    handleWindowResize() {
+        if (this.isOpenState()) {
+            this.overlayWidthState.set(this.triggerButton?.nativeElement.offsetWidth ?? 0);
         }
-        this.formControl?.patchValue(event.checked ? this.filteredOptionsCache : []);
     }
-    isElementGroup(object) {
-        return !!object && "label" in object && "options" in object;
+    get searchControl() {
+        return (this.element.search?.formControl ?? this.formControlSearch);
     }
-    isElementOption(object) {
-        return (!!object &&
-            typeof object === "object" &&
-            "key" in object &&
-            "value" in object);
+    toggleOption(option) {
+        const current = this.selectedOptions();
+        const next = this.isOptionSelected(option)
+            ? current.filter((selected) => selected.key !== option.key)
+            : [...current, option];
+        this.formControl.setValue(next);
+        this.markControlAsChanged();
     }
-    compareFn(c1, c2) {
-        return c1 && c2 ? c1.key === c2.key : c1 === c2;
+    normalizedSearchTerm() {
+        return this.normalizeValue(this.searchControl?.value?.trim());
     }
-    hasValue() {
-        const value = this.formControl?.value;
-        return Array.isArray(value) ? value.length > 0 : this.isElementOption(value);
+    normalizeValue(value) {
+        return (value ?? "")
+            .normalize("NFD")
+            .replace(/[\u0300-\u036f]/g, "")
+            .toLocaleLowerCase();
     }
-    clearValue(event) {
-        event.stopPropagation();
-        this.formControl.setValue(null);
-        this.cdr.markForCheck();
+    isElementGroup(value) {
+        return !!value && "label" in value && "options" in value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", 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.21", 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" },
-            },
-            {
-                provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-                useValue: { appearance: "outline" },
-            },
+    isElementOption(value) {
+        return (!!value &&
+            typeof value === "object" &&
+            "key" in value &&
+            "value" in value);
+    }
+    markControlAsChanged() {
+        this.formControl.markAsDirty();
+        this.formControl.markAsTouched();
+    }
+    markAsTouchedIfEmpty() {
+        if (!this.hasValue()) {
+            this.formControl.markAsTouched();
+        }
+    }
+    setOpenState(isOpen) {
+        this.isOpenState.set(isOpen);
+        this.openedChange.emit(isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDropdownComponent, isStandalone: true, selector: "mapa-dropdown", inputs: { element: "element", formControl: "formControl", formControlSearch: "formControlSearch", border: "border" }, outputs: { openedChange: "openedChange" }, host: { listeners: { "window:resize": "handleWindowResize()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MapaDropdownComponent),
                 multi: true,
             },
-        ], 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-error-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-hint-wrapper,: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 }); }
+        ], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:310px;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-dropdown", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        FormsModule,
+            args: [{ selector: "mapa-dropdown", standalone: true, imports: [
                         ReactiveFormsModule,
-                        MatCheckboxModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatSelectModule,
-                        NgxMatSelectSearchModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
                         ButtonComponent,
                         MapaFormErrorsComponent,
                         SafeHtmlPipe,
                     ], providers: [
-                        {
-                            provide: MAT_SELECT_CONFIG,
-                            useValue: { overlayPanelClass: "mapa-overlay-dropdown" },
-                        },
-                        {
-                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-                            useValue: { appearance: "outline" },
-                        },
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MapaDropdownComponent),
                             multi: true,
                         },
-                    ], standalone: true, 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-error-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-hint-wrapper,: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"] }]
-        }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formControl: [{
-                type: Input
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:310px;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"] }]
+        }], propDecorators: { element: [{
+                type: Input,
+                args: [{ required: true }]
+            }], formControl: [{
+                type: Input,
+                args: [{ required: true }]
             }], formControlSearch: [{
                 type: Input
-            }], element: [{
-                type: Input
             }], border: [{
                 type: Input
             }], openedChange: [{
                 type: Output
-            }], dropdown: [{
+            }], triggerButton: [{
+                type: ViewChild,
+                args: ["triggerButton"]
+            }], searchInput: [{
                 type: ViewChild,
-                args: ["dropdown", { static: true }]
+                args: ["searchInput"]
+            }], handleWindowResize: [{
+                type: HostListener,
+                args: ["window:resize"]
             }] } });
 
 /*
@@ -1371,11 +1527,11 @@ class MapaDropdownTreeComponent {
         this.openedChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", 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-error-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-hint-wrapper,: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: "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: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", 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: [""], 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: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["element", "formControl", "formControlSearch", "border"], outputs: ["openedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-dropdown-tree', imports: [CommonModule, ReactiveFormsModule, 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-error-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-hint-wrapper,: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"] }]
+            args: [{ selector: 'mapa-dropdown-tree', imports: [CommonModule, ReactiveFormsModule, 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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
                 type: Input
             }], element: [{
@@ -1409,7 +1565,7 @@ class MapaFormComponent {
         element.openedChange?.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", 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: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", 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-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: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: ["element", "formControl", "formControlSearch", "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.21", ngImport: i0, type: MapaFormComponent, decorators: [{
             type: Component,
@@ -1424,7 +1580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         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 (\"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"] }]
+                    ], 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-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"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], elements: [{