mapa-library-ui 1.7.2 → 1.7.3

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

@@ -1,23 +1,25 @@
 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, ChangeDetectorRef, HostListener, ViewChild } from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, ElementRef, DestroyRef, booleanAttribute, Directive, Self, 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 { NgControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl } from '@angular/forms';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { NgxMaskDirective, NgxMaskService, provideNgxMask } from 'ngx-mask';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i5$1 from '@angular/cdk/text-field';
+import { AutofillMonitor } from '@angular/cdk/text-field';
+import { filter } from 'rxjs/operators';
 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';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-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';
@@ -274,6 +276,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Máscaras numéricas cujo valor de modelo não é a simples projeção
+ * "texto renderizado menos caracteres especiais". `separator` ainda altera
+ * `NgxMaskService.specialCharacters` em runtime, o que quebra a simetria da
+ * comparação feita aqui. Nenhuma delas é produzida por autofill.
+ */
+const SKIPPED_MASK_PREFIXES = ['separator', 'percent'];
+/**
+ * Mantém o FormControl em sincronia com `input.value` quando o valor foi escrito
+ * por algo que não é o usuário: autofill do navegador, gerenciador de senhas ou
+ * extensão (geradores de CPF/CNPJ).
+ *
+ * A NgxMaskDirective é o ControlValueAccessor de todo input com máscara desta
+ * biblioteca e só empurra valor para o modelo a partir do seu host listener de
+ * `input`. O handler de `blur` chama `onTouch()` mas nunca `onChange()`, e não
+ * existe listener de `change`. Um agente externo que atribui `element.value` sem
+ * disparar um evento `input` nativo deixa o controle no valor anterior, mantendo
+ * o erro `required` na tela até o usuário redigitar o campo.
+ *
+ * Esta diretiva detecta a divergência e reenvia o evento `input` que faltou,
+ * fazendo a NgxMaskDirective analisar, re-renderizar e emitir exatamente como se
+ * o usuário tivesse colado o valor. É no-op enquanto DOM e modelo concordam.
+ */
+class MapaMaskAutofillSyncDirective {
+    constructor() {
+        /** Permite desligar a reconciliação em um campo específico. */
+        this.mapaMaskAutofillSync = true;
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.autofillMonitor = inject(AutofillMonitor);
+        this.maskDirective = inject(NgxMaskDirective, {
+            self: true,
+            optional: true,
+        });
+        this.maskService = inject(NgxMaskService, {
+            self: true,
+            optional: true,
+        });
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.reconciling = false;
+    }
+    ngOnInit() {
+        // monitor() é idempotente por elemento e devolve um Subject compartilhado
+        // com o MatInput, que já monitora este mesmo elemento. Nunca chamar
+        // stopMonitoring(): ele completa esse Subject e remove o listener de
+        // animação para todos os consumidores. O MatInput cuida do teardown.
+        this.autofillMonitor
+            .monitor(this.elementRef.nativeElement)
+            .pipe(filter((event) => event.isAutofilled), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.reconcile());
+    }
+    /** Idempotente: não faz nada enquanto DOM e modelo concordam. */
+    reconcile() {
+        if (!this.mapaMaskAutofillSync || this.reconciling) {
+            return;
+        }
+        const element = this.elementRef.nativeElement;
+        // ngControl.control só existe depois do ngOnChanges da FormControlDirective,
+        // por isso é lido aqui e não no construtor.
+        const control = this.ngControl?.control;
+        if (!control || control.disabled || element.readOnly) {
+            return;
+        }
+        if (element instanceof HTMLInputElement && element.type === 'number') {
+            return;
+        }
+        const mask = this.maskDirective?.mask() ?? '';
+        if (SKIPPED_MASK_PREFIXES.some((prefix) => mask.startsWith(prefix))) {
+            return;
+        }
+        if (this.isInSync(element, control, mask)) {
+            return;
+        }
+        const previousValue = control.value;
+        this.reconciling = true;
+        try {
+            // Reenvia o que o navegador deveria ter emitido. A NgxMaskDirective relê
+            // element.value, reaplica a máscara, re-renderiza o campo e empurra o
+            // valor pelo seu próprio pipeline de CVA — marcando o controle como dirty
+            // e reexecutando todos os validadores.
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+            if (control.value === previousValue) {
+                // O evento não moveu o modelo. Acontece com controles criados como
+                // { updateOn: 'blur' | 'submit' }, em que o value accessor apenas
+                // enfileira a mudança em vez de comitá-la.
+                control.setValue(this.toModelValue(element.value, mask));
+                control.markAsDirty();
+            }
+        }
+        finally {
+            this.reconciling = false;
+        }
+    }
+    isInSync(element, control, mask) {
+        return (this.toComparable(element.value, mask) ===
+            this.toComparable(this.stringify(control.value), mask));
+    }
+    /**
+     * Sem máscara, o texto renderizado e o valor de modelo são a mesma string. Com
+     * máscara eles diferem apenas pelos caracteres especiais, então limpar os dois
+     * lados com as regras da própria NgxMaskService vale tanto para
+     * `dropSpecialCharacters: true` quanto para `false`.
+     */
+    toComparable(value, mask) {
+        return mask && this.maskService ? this.maskService.removeMask(value) : value;
+    }
+    toModelValue(domValue, mask) {
+        return mask && this.maskService && this.maskService.dropSpecialCharacters
+            ? this.maskService.removeMask(domValue)
+            : domValue;
+    }
+    stringify(value) {
+        return value === null || value === undefined ? '' : String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMaskAutofillSyncDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.21", type: MapaMaskAutofillSyncDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { mapaMaskAutofillSync: ["mapaMaskAutofillSync", "mapaMaskAutofillSync", booleanAttribute] }, host: { listeners: { "change": "reconcile()", "focusout": "reconcile()" } }, exportAs: ["mapaMaskAutofillSync"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMaskAutofillSyncDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[mask], textarea[mask]',
+                    standalone: true,
+                    exportAs: 'mapaMaskAutofillSync',
+                    host: {
+                        '(change)': 'reconcile()',
+                        '(focusout)': 'reconcile()',
+                    },
+                }]
+        }], propDecorators: { mapaMaskAutofillSync: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
 /*
 * Originally from: https://github.com/anotherkitten/mat-input-autosize
 * @author: Ellie Larson (anotherkitten)
@@ -400,7 +535,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    [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      tabindex=\"-1\"\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: [":host{display:inline-block;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input{width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input--autosize{width:auto;--mapa-input-autosize-preferred-width: 310px}.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--autosize .mat-mdc-form-field-infix{overflow:hidden}: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"] }] }); }
+        ], 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      tabindex=\"-1\"\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: [":host{display:inline-block;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input{width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input--autosize{width:auto;--mapa-input-autosize-preferred-width: 310px}.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--autosize .mat-mdc-form-field-infix{overflow:hidden}: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: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { 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,
@@ -414,6 +549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         MatInputModule,
                         ButtonComponent,
                         MatInputAutosizeDirective,
+                        MapaMaskAutofillSyncDirective,
                         MapaFormErrorsComponent,
                     ], providers: [
                         provideNgxMask(),
@@ -575,7 +711,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}: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"] }] }); }
+        ], 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:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);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:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-textarea .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-textarea .mdc-notched-outline__leading,:host ::ng-deep .mapa-textarea .mdc-notched-outline__notch,:host ::ng-deep .mapa-textarea .mdc-notched-outline__trailing{border-width:1px!important}: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,
@@ -592,7 +728,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}: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"] }]
+                    ], 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:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);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:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-textarea .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-textarea .mdc-notched-outline__leading,:host ::ng-deep .mapa-textarea .mdc-notched-outline__notch,:host ::ng-deep .mapa-textarea .mdc-notched-outline__trailing{border-width:1px!important}: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: [{
@@ -605,6 +741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
 
 const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
 const MONTH_DAY_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}([T ].*)?$/;
 const DOCS_LANGUAGE_STORAGE_KEY = "mapa-library-ui-docs-language";
 function isValidDate(date) {
     return !Number.isNaN(date.getTime());
@@ -729,6 +866,38 @@ function parseDateValue(value, locale = getActiveDateLocale()) {
     const parsedDate = new Date(trimmedValue);
     return isValidDate(parsedDate) ? parsedDate : null;
 }
+/**
+ * Parse estrito para o texto de um campo de data mascarado.
+ *
+ * Diferente de `parseDateValue`, não cai em `new Date(string)` para qualquer
+ * entrada. O motor de datas do V8 aceita fragmentos numéricos e devolve datas
+ * inventadas — `"2"` vira 01/02/2001 e `"251220"` vira o ano 251220 —, o que
+ * fazia os datepickers moverem o calendário a cada tecla enquanto o usuário
+ * ainda estava digitando.
+ *
+ * Aceita apenas uma data completa no formato do locale ativo (com validação de
+ * faixa de dia/mês) ou uma data ISO-8601, para não quebrar valores vindos de
+ * API que o consumidor grave direto no controle.
+ */
+function parseDateFieldValue(value, locale = getActiveDateLocale()) {
+    if (value instanceof Date || typeof value === "number") {
+        return parseDateValue(value, locale);
+    }
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+        return null;
+    }
+    const localeDate = parseLocaleDateValue(trimmedValue, locale);
+    if (localeDate) {
+        return localeDate;
+    }
+    return ISO_DATE_PATTERN.test(trimmedValue)
+        ? parseDateValue(trimmedValue, locale)
+        : null;
+}
 function isDateValue(value) {
     return parseDateValue(value) !== null;
 }
@@ -846,7 +1015,10 @@ class MapaDatepicker {
         this.cdr.markForCheck();
     }
     syncDatepickerControl(value) {
-        const nextDate = parseDateValue(value);
+        // Parse estrito e sempre day-first: este componente formata a saída com
+        // formatDateAsDayMonthYear e usa MAPA_DATEPICKER_FORMATS (DD/MM/YYYY),
+        // independentemente do idioma ativo — a leitura precisa casar com a escrita.
+        const nextDate = parseDateFieldValue(value, "pt-BR");
         const currentDate = this.formDatepicker.controls.date.value;
         if (this.areDatesEqual(currentDate, nextDate)) {
             return;
@@ -885,7 +1057,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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\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;max-width:100%;min-width:0;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 }); }
+        ], 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          [dropSpecialCharacters]=\"false\"\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      tabindex=\"-1\"\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;max-width:100%;min-width:0;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: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { 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,
@@ -893,6 +1065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         NgxMaskDirective,
+                        MapaMaskAutofillSyncDirective,
                         MatDatepickerModule,
                         MatFormFieldModule,
                         MatIconModule,
@@ -901,7 +1074,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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\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;max-width:100%;min-width:0;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"] }]
+                    ], 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          [dropSpecialCharacters]=\"false\"\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      tabindex=\"-1\"\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;max-width:100%;min-width:0;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: [{
@@ -998,8 +1171,8 @@ class MapaDatepickerRange {
             endDate: nextValue.endDate,
         };
         const datepickerValue = {
-            startDate: parseDateValue(nextValue.startDate),
-            endDate: parseDateValue(nextValue.endDate),
+            startDate: parseDateFieldValue(nextValue.startDate, this.getLocale()),
+            endDate: parseDateFieldValue(nextValue.endDate, this.getLocale()),
         };
         const currentDisplay = this.formDisplay.getRawValue();
         if (currentDisplay.startDate !== displayValue.startDate ||
@@ -1021,8 +1194,8 @@ class MapaDatepickerRange {
         };
         this.patchExternalValue(nextValue);
         const nextDatepickerValue = {
-            startDate: parseDateValue(nextValue.startDate),
-            endDate: parseDateValue(nextValue.endDate),
+            startDate: parseDateFieldValue(nextValue.startDate, this.getLocale()),
+            endDate: parseDateFieldValue(nextValue.endDate, this.getLocale()),
         };
         this.formDatepicker.patchValue(nextDatepickerValue, { emitEvent: false });
         this.cdr.markForCheck();
@@ -1095,7 +1268,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    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\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;max-width:100%;min-width:0;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 }); }
+        ], 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      [dropSpecialCharacters]=\"false\"\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      [dropSpecialCharacters]=\"false\"\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      tabindex=\"-1\"\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;max-width:100%;min-width:0;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: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { 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,
@@ -1103,6 +1276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         NgxMaskDirective,
+                        MapaMaskAutofillSyncDirective,
                         MatDatepickerModule,
                         MatFormFieldModule,
                         MatIconModule,
@@ -1110,7 +1284,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    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\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;max-width:100%;min-width:0;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"] }]
+                    ], 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      [dropSpecialCharacters]=\"false\"\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      [dropSpecialCharacters]=\"false\"\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      tabindex=\"-1\"\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;max-width:100%;min-width:0;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: [{
@@ -1422,7 +1596,7 @@ class MapaDropdownComponent {
                 useExisting: forwardRef(() => MapaDropdownComponent),
                 multi: true,
             },
-        ], 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      tabindex=\"-1\"\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;width:310px;max-width:100%;min-width:0;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 }); }
+        ], 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;width:310px;max-width:100%;min-width:0;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,
@@ -1439,7 +1613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             useExisting: forwardRef(() => MapaDropdownComponent),
                             multi: true,
                         },
-                    ], 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      tabindex=\"-1\"\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;width:310px;max-width:100%;min-width:0;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"] }]
+                    ], 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;width:310px;max-width:100%;min-width:0;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 }]