mapa-library-ui 1.7.3 → 2.0.0

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

@@ -1,18 +1,18 @@
 import * as i0 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 { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, ElementRef, DestroyRef, booleanAttribute, Directive, Self, forwardRef, effect, ChangeDetectorRef, HostListener, ViewChild, ChangeDetectionStrategy, SecurityContext, Pipe } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i2 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 * as i1$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 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 * as i5 from '@angular/cdk/text-field';
 import { AutofillMonitor } from '@angular/cdk/text-field';
 import { filter } from 'rxjs/operators';
 import { fromEvent, merge } from 'rxjs';
@@ -20,12 +20,10 @@ 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 { provideNativeDateAdapter, DateAdapter } from '@angular/material/core';
-import * as i3$3 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import * as i1$1 from '@angular/platform-browser';
+import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
+import { getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
+import * as i1$2 from '@angular/platform-browser';
 
 class ButtonComponent {
     constructor() {
@@ -52,7 +50,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
  * Public API Surface of mapa-library-ui button
  */
 
-const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
+const MAPA_UI_TEXTS = new InjectionToken('MAPA_UI_TEXTS');
 function formatPaginatorRange(page, pageSize, length) {
     if (length === 0 || pageSize === 0) {
         return `0 de ${length}`;
@@ -66,66 +64,73 @@ function formatPaginatorRange(page, pageSize, length) {
 }
 function formatPaginatorShowingRange(page, pageSize, length) {
     if (length === 0 || pageSize === 0) {
-        return "Mostrando 0 - 0 de 0 item";
+        return 'Mostrando 0 - 0 de 0 item';
     }
     const safeLength = Math.max(length, 0);
     const startIndex = page * pageSize;
     const endIndex = startIndex < safeLength
         ? Math.min(startIndex + pageSize, safeLength)
         : startIndex + pageSize;
-    const itemLabel = safeLength === 1 ? "item" : "itens";
+    const itemLabel = safeLength === 1 ? 'item' : 'itens';
     return `Mostrando ${startIndex + 1} - ${endIndex} de ${safeLength} ${itemLabel}`;
 }
 const DEFAULT_MAPA_UI_TEXTS = {
     common: {
-        selectAll: "Selecionar todos",
+        selectAll: 'Selecionar todos',
+        retry: 'Tentar novamente',
     },
     filters: {
-        clear: "Limpar filtros",
-        submit: "Filtrar",
+        clear: 'Limpar filtros',
+        submit: 'Filtrar',
     },
     datepicker: {
-        startDatePlaceholder: "Data inicial",
-        endDatePlaceholder: "Data final",
+        startDatePlaceholder: 'Data inicial',
+        endDatePlaceholder: 'Data final',
     },
     capability: {
-        groupAverageTitle: "Média geral do grupo",
-        individualAverageTitle: "Média geral do indivíduo",
-        conceptTitle: "Conceito",
-        resultTitle: "Resultado",
-        positiveIndicatorsTitle: "Indicadores positivos",
-        negativeIndicatorsTitle: "Indicadores negativos",
-        riskIndicatorsTitle: "Indicadores de risco",
-        precipitationRiskTitle: "Risco de acidente por precipitação",
-        negligenceRiskTitle: "Risco de acidente por negligência",
-        negativeDirectionLabel: "Direção Negativa |",
-        positiveDirectionLabel: "Direção Positiva |",
+        groupAverageTitle: 'Média geral do grupo',
+        individualAverageTitle: 'Média geral do indivíduo',
+        conceptTitle: 'Conceito',
+        resultTitle: 'Resultado',
+        positiveIndicatorsTitle: 'Indicadores positivos',
+        negativeIndicatorsTitle: 'Indicadores negativos',
+        riskIndicatorsTitle: 'Indicadores de risco',
+        precipitationRiskTitle: 'Risco de acidente por precipitação',
+        negligenceRiskTitle: 'Risco de acidente por negligência',
+        negativeDirectionLabel: 'Direção Negativa |',
+        positiveDirectionLabel: 'Direção Positiva |',
     },
     paginator: {
-        itemsPerPage: "Itens por página",
-        nextPage: "Próxima página",
-        previousPage: "Página anterior",
+        itemsPerPage: 'Itens por página',
+        nextPage: 'Próxima página',
+        previousPage: 'Página anterior',
         rangeLabel: formatPaginatorRange,
         showingRangeLabel: formatPaginatorShowingRange,
     },
     warning: {
-        lowReliabilityTitle: "Nível baixo de confiabilidade no(s) teste(s):",
-        expirationLimitTitle: "O prazo de validade do(s) teste(s) está no limite:",
+        lowReliabilityTitle: 'Nível baixo de confiabilidade no(s) teste(s):',
+        expirationLimitTitle: 'O prazo de validade do(s) teste(s) está no limite:',
     },
     table: {
-        emptyTitle: "Não foram encontrados resultados",
-        emptySubtitle: "",
+        emptyTitle: 'Não foram encontrados resultados',
+        emptySubtitle: '',
+        loading: 'Carregando resultados',
+        errorTitle: 'Não foi possível carregar os resultados.',
+        selectAllVisible: 'Selecionar todos os itens desta página',
+        selectionColumn: 'Seleção',
+        selectRow: 'Selecionar item',
+        selectNamedRow: (item) => `Selecionar ${item}`,
     },
     validation: {
-        cnpj: "CNPJ inválido",
-        cpf: "CPF inválido",
-        email: "E-mail inválido",
-        max: (context) => `O valor máximo permitido é ${context?.max ?? ""}`.trim(),
-        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
-        min: (context) => `O valor mínimo permitido é ${context?.min ?? ""}`.trim(),
-        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
-        pattern: "Formato inválido",
-        required: "Campo obrigatório",
+        cnpj: 'CNPJ inválido',
+        cpf: 'CPF inválido',
+        email: 'E-mail inválido',
+        max: (context) => `O valor máximo permitido é ${context?.max ?? ''}`.trim(),
+        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ''} caracteres`.trim(),
+        min: (context) => `O valor mínimo permitido é ${context?.min ?? ''}`.trim(),
+        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ''} caracteres`.trim(),
+        pattern: 'Formato inválido',
+        required: 'Campo obrigatório',
     },
 };
 function getDefaultTexts() {
@@ -477,7 +482,7 @@ class MatInputAutosizeDirective {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.changeHiddenText(this.inputElement.value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MatInputAutosizeDirective, deps: [{ token: i0.ElementRef }, { token: i5.MatInput, self: true }, { token: i2.NgModel, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MatInputAutosizeDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatInput, self: true }, { token: i2.NgModel, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.21", type: MatInputAutosizeDirective, isStandalone: true, selector: "[matInputAutosize]", inputs: { matInputAutosizeMaxWidth: "matInputAutosizeMaxWidth", matInputAutosizeMinWidth: "matInputAutosizeMinWidth", matInputAutosizeFontStyle: "matInputAutosizeFontStyle" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MatInputAutosizeDirective, decorators: [{
@@ -486,7 +491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     selector: '[matInputAutosize]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i5.MatInput, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatInput, decorators: [{
                     type: Self
                 }] }, { type: i2.NgModel, decorators: [{
                     type: Optional
@@ -535,7 +540,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: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { 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: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "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,
@@ -711,7 +716,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: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"] }] }); }
+        ], 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: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTextareaComponent, decorators: [{
             type: Component,
@@ -794,9 +799,6 @@ function isMonthFirstDateLocale(locale = getActiveDateLocale()) {
 function getActiveDateFormat(locale = getActiveDateLocale()) {
     return isMonthFirstDateLocale(locale) ? "MM/DD/YYYY" : "DD/MM/YYYY";
 }
-function getActiveMaterialDateFormat(locale = getActiveDateLocale()) {
-    return isMonthFirstDateLocale(locale) ? "MM/dd/yyyy" : "dd/MM/yyyy";
-}
 function getDateInputMask(_locale = getActiveDateLocale()) {
     return "00/00/0000";
 }
@@ -964,335 +966,581 @@ function toUtcDayExclusiveEndIso(value) {
     return date ? buildUtcDate(date, 1, 3, 0, 0, 0).toISOString() : undefined;
 }
 
-const MAPA_DATEPICKER_FORMATS = {
-    parse: {
-        dateInput: "DD/MM/YYYY",
-    },
-    display: {
-        dateInput: "DD/MM/YYYY",
-        monthYearLabel: "MMM YYYY",
-        dateA11yLabel: "LL",
-        monthYearA11yLabel: "MMMM YYYY",
-    },
+/**
+ * Locale de data ativo exposto como sinal.
+ *
+ * `getActiveDateLocale()` lê do localStorage, que não é reativo. Em vez de
+ * consultar o valor a cada ciclo de change detection, observamos o
+ * `textsSignal` do `MapaI18nService`: toda troca de idioma do ecossistema
+ * passa por `setTexts()`. Como effects do Angular são agendados e não
+ * síncronos, quando o corpo do effect roda a gravação no localStorage feita
+ * logo após o `setTexts()` já aconteceu.
+ *
+ * Root-provided de propósito: um effect para toda a aplicação em vez de um por
+ * instância de datepicker.
+ */
+class MapaDateLocaleService {
+    constructor() {
+        this.i18n = inject(MapaI18nService);
+        this.localeState = signal(getActiveDateLocale(), ...(ngDevMode ? [{ debugName: "localeState" }] : []));
+        this.localeSignal = this.localeState.asReadonly();
+        effect(() => {
+            this.i18n.textsSignal();
+            this.refresh();
+        });
+    }
+    /**
+     * Relê o locale do storage. Cinto de segurança para consumidores que trocam
+     * o idioma sem passar por `setTexts()`.
+     */
+    refresh() {
+        const nextLocale = getActiveDateLocale();
+        if (this.localeState() !== nextLocale) {
+            this.localeState.set(nextLocale);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDateLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDateLocaleService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDateLocaleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Fallback do gatilho de presets. Literal como o `aria-label="Limpar"` que o
+ * v1 e o `mapa-dropdown` já embarcam — `MapaUiTextGroups["datepicker"]` vem do
+ * pacote externo `mapa-frontend-i18n`, então uma chave nova exigiria publicar
+ * aquele pacote antes. Consumidores sobrescrevem via `element.presetsLabel`.
+ */
+const DEFAULT_PRESETS_LABEL = 'Período';
+/**
+ * O `Intl` interno do ngxsmk trabalha melhor com tags BCP47 completas — `en`
+ * sozinho deixa a ordem dia/mês ambígua para ele.
+ */
+const NGXSMK_LOCALE_BY_MAPA_LOCALE = {
+    'pt-BR': 'pt-BR',
+    en: 'en-US',
+    es: 'es-ES',
 };
 class MapaDatepicker {
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.formDatepicker = new FormGroup({
-            date: new FormControl(null),
+        this.i18n = inject(MapaI18nService);
+        this.dateLocale = inject(MapaDateLocaleService);
+        this.openedChange = new EventEmitter();
+        /** Camada visível: strings mascaradas. `single` usa apenas `startDate`. */
+        this.formDisplay = new FormGroup({
+            startDate: new FormControl(null),
+            endDate: new FormControl(null),
         });
+        /** Camada do calendário: `Date`, no formato que o ngxsmk consome. */
+        this.pickerValue = signal(null, ...(ngDevMode ? [{ debugName: "pickerValue" }] : []));
+        this.isOpenState = signal(false, ...(ngDevMode ? [{ debugName: "isOpenState" }] : []));
+        this.isPresetsOpenState = signal(false, ...(ngDevMode ? [{ debugName: "isPresetsOpenState" }] : []));
+        this.localeState = null;
+        this.syncing = false;
+        this.overlayPositions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8,
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetY: 8,
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetY: -8,
+            },
+        ];
+        /**
+         * Referências estáveis: com OnPush, devolver um literal novo a cada ciclo
+         * marcaria o input do ngxsmk como alterado em toda change detection.
+         */
+        this.ngxsmkClasses = { inputGroup: 'mapa-datepicker__ngxsmk-group' };
+        this.emptyDisabledDates = [];
+        this.neverInvalid = () => false;
+        this.localeSync = effect(() => {
+            this.handleLocaleChange(this.dateLocale.localeSignal());
+        }, ...(ngDevMode ? [{ debugName: "localeSync" }] : []));
     }
     ngOnInit() {
-        this.formControl = this.formGroup.get(this.element.key);
-        this.syncDatepickerControl(this.formControl.value);
-        this.formControl.valueChanges
+        if (!this.element?.key) {
+            throw new Error('mapa-datepicker: element.key é obrigatório.');
+        }
+        const control = this.formGroup?.get(this.element.key);
+        if (!control) {
+            throw new Error(`mapa-datepicker: controle "${this.element.key}" não encontrado no formGroup.`);
+        }
+        this.control = control;
+        this.applyExternal(this.control.value);
+        this.control.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.syncDatepickerControl(value);
-        });
-        this.formDatepicker.controls.date.valueChanges
+            .subscribe((value) => this.applyExternal(value));
+        this.control.statusChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.updateExternalControl(value);
-        });
+            .subscribe(() => this.cdr.markForCheck());
+        this.formDisplay.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.handleDisplayChange());
+    }
+    // --- estado exposto ao template -----------------------------------------
+    mode() {
+        return this.element?.mode ?? 'single';
+    }
+    isOpen() {
+        return this.isOpenState();
     }
-    get minDate() {
+    isDisabled() {
+        return !!this.control?.disabled;
+    }
+    isReadonly() {
+        return !!this.element?.readonly;
+    }
+    hasValue() {
+        return this.serializeExternal(this.control?.value) !== '';
+    }
+    showClear() {
+        return this.hasValue() && !this.isDisabled() && !!this.element.clearValue;
+    }
+    shouldShowError() {
+        return (!!this.control &&
+            this.control.invalid &&
+            (this.control.dirty || this.control.touched));
+    }
+    /** Texto somente leitura do modo `multiple` — evita chaves novas de i18n. */
+    selectedLabel() {
+        const value = this.control?.value;
+        return Array.isArray(value) ? value.join(', ') : '';
+    }
+    mask() {
+        return this.element.mask ?? getDateInputMask(this.locale());
+    }
+    singlePlaceholder() {
+        return this.element.placeholder || this.element.label || '';
+    }
+    get startDatePlaceholder() {
+        return this.i18n.textsSignal().datepicker.startDatePlaceholder;
+    }
+    get endDatePlaceholder() {
+        return this.i18n.textsSignal().datepicker.endDatePlaceholder;
+    }
+    // --- entradas repassadas ao ngxsmk --------------------------------------
+    ngxsmkLocale() {
+        return NGXSMK_LOCALE_BY_MAPA_LOCALE[this.locale()];
+    }
+    displayFormat() {
+        return getActiveDateFormat(this.locale());
+    }
+    minDate() {
         return parseDateValue(this.element.minDate);
     }
-    get maxDate() {
+    maxDate() {
         return parseDateValue(this.element.maxDate);
     }
-    hasValue() {
-        return !!this.formControl?.value;
+    disabledDates() {
+        return this.element.disabledDates ?? this.emptyDisabledDates;
     }
-    cleanDatepicker() {
-        this.formDatepicker.patchValue({ date: null }, { emitEvent: false });
-        if (this.formControl.value === "") {
-            return;
-        }
-        this.formControl.patchValue("");
-        this.cdr.markForCheck();
+    isInvalidDate() {
+        return this.element.isInvalidDate ?? this.neverInvalid;
     }
-    syncDatepickerControl(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;
+    /**
+     * Um mês por padrão em todos os modos, para o painel ficar na largura do
+     * campo. Dois meses são opt-in via `element.calendars`.
+     */
+    calendars() {
+        return this.element.calendars ?? 1;
+    }
+    weekStart() {
+        return this.element.weekStart;
+    }
+    /**
+     * Presets já resolvidos em datas. Memoizado pela referência de
+     * `element.presets` para não reconstruir `Date`s a cada change detection.
+     *
+     * Alimenta o nosso dropdown, não o painel nativo do ngxsmk: o layout dele é
+     * ditado por media queries duplicadas que nenhum input ou variável controla
+     * (coluna lateral acima de 992px, cards de 45px acima de 1024px), e o input
+     * `classes` do componente de presets é morto — o template dele nunca o lê.
+     */
+    presetList() {
+        const presets = this.element.presets;
+        const cache = this.presetsCache;
+        if (cache && cache.source === presets) {
+            return cache.entries;
+        }
+        const entries = this.buildPresetEntries(presets);
+        this.presetsCache = { source: presets, entries };
+        return entries;
+    }
+    hasPresets() {
+        return this.presetList().length > 0;
+    }
+    isPresetsOpen() {
+        return this.isPresetsOpenState();
+    }
+    isPresetActive(entry) {
+        const locale = this.locale();
+        return (this.serializeExternal({
+            startDate: formatDateForLocale(entry.range[0], locale),
+            endDate: formatDateForLocale(entry.range[1], locale),
+        }) === this.serializeExternal(this.control?.value));
+    }
+    presetsTriggerLabel() {
+        const active = this.presetList().find((entry) => this.isPresetActive(entry));
+        return active?.label ?? this.element.presetsLabel ?? DEFAULT_PRESETS_LABEL;
+    }
+    togglePresets() {
+        this.isPresetsOpenState.update((isOpen) => !isOpen);
+    }
+    closePresets() {
+        if (this.isPresetsOpenState()) {
+            this.isPresetsOpenState.set(false);
+            this.cdr.markForCheck();
         }
-        this.formDatepicker.patchValue({ date: nextDate }, { emitEvent: false });
-        this.cdr.markForCheck();
     }
-    updateExternalControl(value) {
-        if (!value) {
-            if (this.formControl.value !== "") {
-                this.formControl.patchValue("");
-                this.cdr.markForCheck();
-            }
+    applyPreset(entry) {
+        this.closePresets();
+        if (this.isDisabled()) {
             return;
         }
-        const formattedDate = formatDateAsDayMonthYear(value);
-        if (this.formControl.value === formattedDate) {
+        // `selectRange` reposiciona o mês visível para o início da faixa e emite
+        // `valueChange` uma única vez, caindo no `handlePickerValue`. Em modo
+        // inline ele não fecha nada — quem fecha continua sendo o nosso overlay.
+        if (this.picker) {
+            this.picker.selectRange([entry.range[0], entry.range[1]]);
             return;
         }
-        this.formControl.patchValue(formattedDate);
-        this.cdr.markForCheck();
-    }
-    closePicker(picker) {
-        picker.close();
+        this.handlePickerValue({ start: entry.range[0], end: entry.range[1] });
     }
-    areDatesEqual(first, second) {
-        if (first === second) {
-            return true;
+    // --- interação ------------------------------------------------------------
+    toggleCalendar() {
+        if (this.isDisabled() || this.isReadonly()) {
+            return;
         }
-        if (!first || !second) {
-            return false;
+        const isOpening = !this.isOpenState();
+        if (isOpening) {
+            this.dateLocale.refresh();
+        }
+        this.setOpenState(isOpening);
+        if (!isOpening) {
+            this.control.markAsTouched();
         }
-        return first.getTime() === second.getTime();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    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          [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,
-            args: [{ selector: "mapa-datepicker", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        NgxMaskDirective,
-                        MapaMaskAutofillSyncDirective,
-                        MatDatepickerModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MapaFormErrorsComponent,
-                    ], providers: [
-                        provideNgxMask(),
-                        provideNativeDateAdapter(MAPA_DATEPICKER_FORMATS),
-                    ], standalone: true, template: "@if (element && formGroup) {\n  <section class=\"mapa-datepicker\" [formGroup]=\"formGroup\">\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\">\n        {{ element.label }}\n      </label>\n    }\n\n    <section class=\"mapa-datepicker__field\" [formGroup]=\"formGroup\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          [formControlName]=\"element.key\"\n          [placeholder]=\"element.placeholder || element.label || ''\"\n          [mask]=\"element.mask\"\n          [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: [{
-                type: Input
-            }] } });
-
-/*
- * Public API Surface of mapa-library-ui datepicker (single)
- */
-
-function getMapaDatepickerRangeFormats() {
-    const dateInput = getActiveMaterialDateFormat();
-    return {
-        parse: {
-            dateInput,
-        },
-        display: {
-            dateInput,
-            monthYearLabel: "MMM YYYY",
-            dateA11yLabel: "LL",
-            monthYearA11yLabel: "MMMM YYYY",
-        },
-    };
-}
-class MapaDatepickerRange {
-    constructor(i18n, cdr) {
-        this.i18n = i18n;
-        this.cdr = cdr;
-        this.destroyRef = inject(DestroyRef);
-        this.dateAdapter = inject((DateAdapter));
-        this.emptyValue = {
-            startDate: null,
-            endDate: null,
-        };
-        this.currentLocale = null;
-        this.formDatepicker = new FormGroup({
-            startDate: new FormControl(null),
-            endDate: new FormControl(null),
-        });
-        this.formDisplay = new FormGroup({
-            startDate: new FormControl(null),
-            endDate: new FormControl(null),
-        });
     }
-    get texts() {
-        return this.i18n.textsSignal();
+    closeCalendar() {
+        if (this.isOpenState()) {
+            this.setOpenState(false);
+        }
+        this.control?.markAsTouched();
     }
-    get dateInputMask() {
-        return getDateInputMask(this.getLocale());
+    handleOverlayOutsideClick(event) {
+        if (this.toggleButton?.nativeElement.contains(event.target)) {
+            return;
+        }
+        this.closeCalendar();
     }
-    get activeDateFormat() {
-        return getActiveDateFormat(this.getLocale());
+    handleEscape() {
+        // Dois estágios: o Escape fecha primeiro o dropdown de presets, e só o
+        // segundo fecha o calendário.
+        if (this.isPresetsOpenState()) {
+            this.closePresets();
+            return;
+        }
+        if (this.isOpenState()) {
+            this.closeCalendar();
+            this.toggleButton?.nativeElement.focus();
+        }
     }
-    ngOnInit() {
-        this.syncLocaleSettings();
-        if (!this.element?.key) {
-            throw new Error("mapa-datepicker-range requires element.key to resolve the target control.");
+    /** Seleção vinda do calendário. */
+    handlePickerValue(value) {
+        const next = this.toExternal(value, this.locale());
+        this.closePresets();
+        this.patchDisplay(this.toDisplayValue(next));
+        this.pickerValue.set(value);
+        // Um range pela metade nunca chega ao consumidor: o ngxsmk emite
+        // `{ start, end: null }` já no primeiro clique.
+        if (this.mode() === 'range' && !this.isCompleteRange(next)) {
+            this.cdr.markForCheck();
+            return;
         }
-        this.rangeControl = this.formGroup.get(this.element.key);
-        if (!this.rangeControl) {
-            throw new Error(`mapa-datepicker-range could not find control '${this.element.key}' in formGroup.`);
+        this.emitExternal(next);
+        if (this.element.closeOnSelect && this.shouldCloseAfterSelect(next)) {
+            this.closeCalendar();
         }
-        this.syncFromExternal(this.rangeControl.value);
-        this.rangeControl.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.syncFromExternal(value);
-        });
-        this.formDisplay.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.updateExternalFromDisplay(value);
-        });
-        this.formDatepicker.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.updateExternalFromDatepicker(value);
-        });
     }
-    ngDoCheck() {
-        this.syncLocaleSettings();
+    clear(event) {
+        event?.stopPropagation();
+        if (this.isDisabled()) {
+            return;
+        }
+        this.patchDisplay({ startDate: null, endDate: null });
+        this.pickerValue.set(null);
+        this.emitExternal(this.emptyValue());
+        this.control.markAsTouched();
+    }
+    // --- sincronização --------------------------------------------------------
+    locale() {
+        return this.localeState ?? this.dateLocale.localeSignal();
+    }
+    handleLocaleChange(locale) {
+        const previousLocale = this.localeState;
+        this.localeState = locale;
+        // O effect roda uma primeira vez antes de haver troca real de idioma, e
+        // pode rodar antes do ngOnInit resolver o controle.
+        if (!this.control || previousLocale === null || previousLocale === locale) {
+            this.cdr.markForCheck();
+            return;
+        }
+        const picker = this.pickerValue();
+        // Reformatamos a partir das datas já resolvidas, nunca reinterpretando o
+        // texto: assim um valor meio digitado ou inválido sobrevive à troca.
+        if (!picker) {
+            this.cdr.markForCheck();
+            return;
+        }
+        const next = this.toExternal(picker, locale);
+        this.patchDisplay(this.toDisplayValue(next));
+        this.emitExternal(next);
     }
-    get startDatePlaceholder() {
-        return this.texts.datepicker.startDatePlaceholder;
+    /** Digitação no campo mascarado. Passa o texto adiante verbatim. */
+    handleDisplayChange() {
+        if (this.syncing || this.mode() === 'multiple' || !this.control) {
+            return;
+        }
+        const display = this.formDisplay.getRawValue();
+        const next = this.mode() === 'range'
+            ? {
+                startDate: display.startDate || null,
+                endDate: display.endDate || null,
+            }
+            : (display.startDate ?? '');
+        this.pickerValue.set(this.toPickerValue(next, this.locale()));
+        this.emitExternal(next);
     }
-    get endDatePlaceholder() {
-        return this.texts.datepicker.endDatePlaceholder;
-    }
-    syncFromExternal(value) {
-        this.syncLocaleSettings();
-        const nextValue = value ?? this.emptyValue;
-        const displayValue = {
-            startDate: nextValue.startDate,
-            endDate: nextValue.endDate,
-        };
-        const datepickerValue = {
-            startDate: parseDateFieldValue(nextValue.startDate, this.getLocale()),
-            endDate: parseDateFieldValue(nextValue.endDate, this.getLocale()),
-        };
-        const currentDisplay = this.formDisplay.getRawValue();
-        if (currentDisplay.startDate !== displayValue.startDate ||
-            currentDisplay.endDate !== displayValue.endDate) {
-            this.formDisplay.patchValue(displayValue, { emitEvent: false });
+    applyExternal(value) {
+        if (this.syncing) {
+            return;
         }
-        const currentDatepicker = this.formDatepicker.getRawValue();
-        if (!this.areDatesEqual(currentDatepicker.startDate, datepickerValue.startDate) ||
-            !this.areDatesEqual(currentDatepicker.endDate, datepickerValue.endDate)) {
-            this.formDatepicker.patchValue(datepickerValue, { emitEvent: false });
+        const display = this.toDisplayValue(value);
+        const current = this.formDisplay.getRawValue();
+        if (current.startDate !== display.startDate ||
+            current.endDate !== display.endDate) {
+            this.patchDisplay(display);
         }
+        this.pickerValue.set(this.toPickerValue(value, this.locale()));
         this.cdr.markForCheck();
     }
-    updateExternalFromDisplay(value) {
-        this.syncLocaleSettings();
-        const nextValue = {
-            startDate: value.startDate ?? null,
-            endDate: value.endDate ?? null,
-        };
-        this.patchExternalValue(nextValue);
-        const nextDatepickerValue = {
-            startDate: parseDateFieldValue(nextValue.startDate, this.getLocale()),
-            endDate: parseDateFieldValue(nextValue.endDate, this.getLocale()),
-        };
-        this.formDatepicker.patchValue(nextDatepickerValue, { emitEvent: false });
-        this.cdr.markForCheck();
-    }
-    updateExternalFromDatepicker(value) {
-        this.syncLocaleSettings();
-        if (!value.startDate || !value.endDate) {
+    emitExternal(next) {
+        // Comparação pela string formatada, não por `Date`: presets devolvem o fim
+        // do range às 23:59:59.999 e um guard por `getTime()` reemitiria em loop.
+        if (this.serializeExternal(this.control.value) ===
+            this.serializeExternal(next)) {
+            this.cdr.markForCheck();
             return;
         }
-        const nextValue = {
-            startDate: formatDateForLocale(value.startDate, this.getLocale()),
-            endDate: formatDateForLocale(value.endDate, this.getLocale()),
-        };
-        this.patchExternalValue(nextValue);
-        this.formDisplay.patchValue(nextValue, { emitEvent: false });
+        this.syncing = true;
+        try {
+            this.control.patchValue(next);
+            this.control.markAsDirty();
+        }
+        finally {
+            this.syncing = false;
+        }
         this.cdr.markForCheck();
     }
-    patchExternalValue(nextValue) {
-        const currentValue = this.rangeControl.value;
-        if (currentValue?.startDate === nextValue.startDate &&
-            currentValue?.endDate === nextValue.endDate) {
-            return;
+    patchDisplay(display) {
+        this.syncing = true;
+        try {
+            this.formDisplay.patchValue(display, { emitEvent: false });
+        }
+        finally {
+            this.syncing = false;
         }
-        this.rangeControl.patchValue(nextValue);
     }
-    areDatesEqual(first, second) {
-        if (first === second) {
-            return true;
+    // --- conversões -----------------------------------------------------------
+    toPickerValue(value, locale) {
+        switch (this.mode()) {
+            case 'range': {
+                const range = this.asRangeValue(value);
+                const start = parseDateFieldValue(range.startDate, locale);
+                const end = parseDateFieldValue(range.endDate, locale);
+                return start || end ? { start, end } : null;
+            }
+            case 'multiple': {
+                const dates = (Array.isArray(value) ? value : [])
+                    .map((item) => parseDateFieldValue(item, locale))
+                    .filter((date) => !!date);
+                return dates.length ? dates : null;
+            }
+            default:
+                return parseDateFieldValue(value, locale);
         }
-        if (!first || !second) {
-            return false;
+    }
+    toExternal(value, locale) {
+        switch (this.mode()) {
+            case 'range': {
+                const range = this.asPickerRange(value);
+                return {
+                    startDate: range.start
+                        ? formatDateForLocale(range.start, locale)
+                        : null,
+                    endDate: range.end ? formatDateForLocale(range.end, locale) : null,
+                };
+            }
+            case 'multiple':
+                return (Array.isArray(value) ? value : []).map((date) => formatDateForLocale(date, locale));
+            default:
+                return value instanceof Date ? formatDateForLocale(value, locale) : '';
         }
-        return first.getTime() === second.getTime();
     }
-    cleanDatepicker() {
-        const defaultRange = {
-            startDate: null,
-            endDate: null,
-        };
-        this.formDatepicker.patchValue(defaultRange, { emitEvent: false });
-        this.formDisplay.patchValue(defaultRange, { emitEvent: false });
-        this.patchExternalValue(defaultRange);
-        this.cdr.markForCheck();
+    toDisplayValue(value) {
+        switch (this.mode()) {
+            case 'range': {
+                const range = this.asRangeValue(value);
+                return { startDate: range.startDate, endDate: range.endDate };
+            }
+            case 'multiple':
+                return { startDate: null, endDate: null };
+            default:
+                return {
+                    startDate: typeof value === 'string' ? value : '',
+                    endDate: null,
+                };
+        }
     }
-    getLocale() {
-        return this.currentLocale ?? getActiveDateLocale();
+    /** Forma canônica usada só para comparar — nunca é gravada no controle. */
+    serializeExternal(value) {
+        switch (this.mode()) {
+            case 'range': {
+                const range = this.asRangeValue(value);
+                const serialized = `${range.startDate ?? ''}|${range.endDate ?? ''}`;
+                return serialized === '|' ? '' : serialized;
+            }
+            case 'multiple':
+                return (Array.isArray(value) ? value : []).join('|');
+            default:
+                return typeof value === 'string' ? value : '';
+        }
     }
-    syncLocaleSettings() {
-        const nextLocale = getActiveDateLocale();
-        if (this.currentLocale === nextLocale) {
-            return;
+    emptyValue() {
+        switch (this.mode()) {
+            case 'range':
+                return { startDate: null, endDate: null };
+            case 'multiple':
+                return [];
+            default:
+                return '';
         }
-        this.currentLocale = nextLocale;
-        this.dateAdapter.setLocale(nextLocale);
-        const datepickerValue = this.formDatepicker.getRawValue();
-        const hasDateRange = !!datepickerValue.startDate && !!datepickerValue.endDate;
-        if (hasDateRange) {
-            const formattedRange = {
-                startDate: formatDateForLocale(datepickerValue.startDate, nextLocale),
-                endDate: formatDateForLocale(datepickerValue.endDate, nextLocale),
+    }
+    asRangeValue(value) {
+        if (value && typeof value === 'object' && !Array.isArray(value)) {
+            return {
+                startDate: value.startDate ?? null,
+                endDate: value.endDate ?? null,
             };
-            this.formDisplay.patchValue(formattedRange, { emitEvent: false });
-            if (this.rangeControl) {
-                this.patchExternalValue(formattedRange);
-            }
         }
-        this.cdr.markForCheck();
+        return { startDate: null, endDate: null };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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      [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 }); }
+    asPickerRange(value) {
+        if (value && !Array.isArray(value) && !(value instanceof Date)) {
+            return { start: value.start ?? null, end: value.end ?? null };
+        }
+        return { start: null, end: null };
+    }
+    isCompleteRange(value) {
+        const range = this.asRangeValue(value);
+        return !!range.startDate && !!range.endDate;
+    }
+    shouldCloseAfterSelect(value) {
+        switch (this.mode()) {
+            case 'multiple':
+                return false;
+            case 'range':
+                return this.isCompleteRange(value);
+            default:
+                return typeof value === 'string' && !!value;
+        }
+    }
+    buildPresetEntries(presets) {
+        if (this.mode() !== 'range' || !presets?.length) {
+            return [];
+        }
+        return presets.map((preset) => ({
+            label: preset.label,
+            range: this.resolvePreset(preset),
+        }));
+    }
+    resolvePreset(preset) {
+        if (preset.startDate && preset.endDate) {
+            return [preset.startDate, preset.endDate];
+        }
+        // Atenção: `getRelativeDateRange` devolve o fim às 23:59:59.999. Só o
+        // guard por string formatada de `emitExternal` tolera isso — um guard por
+        // `getTime()` reemitiria em loop.
+        const { startDate, endDate } = getRelativeDateRange(preset.daysBack ?? 0);
+        return [startDate, endDate];
+    }
+    setOpenState(isOpen) {
+        this.isOpenState.set(isOpen);
+        this.isPresetsOpenState.set(false);
+        this.openedChange.emit(isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker, mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true }, { propertyName: "picker", first: true, predicate: NgxsmkDatepickerComponent, descendants: true }], ngImport: i0, template: "@if (element && formGroup) {\n  <div\n    class=\"mapa-datepicker\"\n    [class.mapa-datepicker--open]=\"isOpen()\"\n    [class.mapa-datepicker--disabled]=\"isDisabled()\"\n  >\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n        {{ element.label }}\n      </label>\n    }\n\n    <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n         n\u00E3o atravessam blocos de controle de fluxo. -->\n    <div\n      class=\"mapa-datepicker__origin\"\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      [formGroup]=\"formDisplay\"\n    >\n      @if (mode() === \"range\") {\n        <div class=\"mapa-datepicker__range\">\n          <mat-form-field\n            appearance=\"outline\"\n            subscriptSizing=\"dynamic\"\n            class=\"mapa-datepicker__range-start\"\n          >\n            <input\n              matInput\n              formControlName=\"startDate\"\n              [attr.id]=\"element.key || null\"\n              [placeholder]=\"startDatePlaceholder\"\n              [mask]=\"mask()\"\n              [dropSpecialCharacters]=\"false\"\n              [readonly]=\"isReadonly()\"\n            />\n          </mat-form-field>\n\n          <span class=\"mapa-datepicker__divider\">&ndash;</span>\n\n          <mat-form-field\n            appearance=\"outline\"\n            subscriptSizing=\"dynamic\"\n            class=\"mapa-datepicker__range-end\"\n          >\n            <input\n              matInput\n              formControlName=\"endDate\"\n              [placeholder]=\"endDatePlaceholder\"\n              [mask]=\"mask()\"\n              [dropSpecialCharacters]=\"false\"\n              [readonly]=\"isReadonly()\"\n            />\n\n            @if (showClear()) {\n              <button\n                matSuffix\n                type=\"button\"\n                class=\"mapa-datepicker__clear\"\n                aria-label=\"Limpar\"\n                tabindex=\"-1\"\n                (click)=\"clear($event)\"\n              >\n                &times;\n              </button>\n            }\n\n            <button\n              #toggleButton\n              matSuffix\n              type=\"button\"\n              class=\"mapa-datepicker__toggle\"\n              [disabled]=\"isDisabled() || isReadonly()\"\n              [attr.aria-expanded]=\"isOpen()\"\n              aria-haspopup=\"dialog\"\n              aria-label=\"Abrir calend\u00E1rio\"\n              (click)=\"toggleCalendar()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n            </button>\n          </mat-form-field>\n        </div>\n      } @else {\n        <div class=\"mapa-datepicker__field\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            @if (mode() === \"multiple\") {\n              <input\n                matInput\n                [attr.id]=\"element.key || null\"\n                [value]=\"selectedLabel()\"\n                [placeholder]=\"singlePlaceholder()\"\n                readonly\n                (click)=\"toggleCalendar()\"\n              />\n            } @else {\n              <input\n                matInput\n                formControlName=\"startDate\"\n                [attr.id]=\"element.key || null\"\n                [placeholder]=\"singlePlaceholder()\"\n                [mask]=\"mask()\"\n                [dropSpecialCharacters]=\"false\"\n                [readonly]=\"isReadonly()\"\n              />\n            }\n\n            @if (showClear()) {\n              <button\n                matSuffix\n                type=\"button\"\n                class=\"mapa-datepicker__clear\"\n                aria-label=\"Limpar\"\n                tabindex=\"-1\"\n                (click)=\"clear($event)\"\n              >\n                &times;\n              </button>\n            }\n\n            <button\n              #toggleButton\n              matSuffix\n              type=\"button\"\n              class=\"mapa-datepicker__toggle\"\n              [disabled]=\"isDisabled() || isReadonly()\"\n              [attr.aria-expanded]=\"isOpen()\"\n              aria-haspopup=\"dialog\"\n              aria-label=\"Abrir calend\u00E1rio\"\n              (click)=\"toggleCalendar()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n    </div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n      [cdkConnectedOverlayPush]=\"true\"\n      cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n      (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    >\n      <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n        @if (hasPresets()) {\n          <div class=\"mapa-datepicker__presets\">\n            <button\n              type=\"button\"\n              class=\"mapa-datepicker__presets-trigger\"\n              [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n              [attr.aria-expanded]=\"isPresetsOpen()\"\n              aria-haspopup=\"listbox\"\n              (click)=\"togglePresets()\"\n            >\n              <span>{{ presetsTriggerLabel() }}</span>\n              <svg\n                class=\"mapa-datepicker__presets-chevron\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path d=\"M6 9l6 6 6-6\"></path>\n              </svg>\n            </button>\n\n            @if (isPresetsOpen()) {\n              <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n                @for (preset of presetList(); track preset.label) {\n                  <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n                    <button\n                      type=\"button\"\n                      class=\"mapa-datepicker__presets-option\"\n                      [class.mapa-datepicker__presets-option--active]=\"\n                        isPresetActive(preset)\n                      \"\n                      (click)=\"applyPreset(preset)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        }\n\n        <ngxsmk-datepicker\n          [inline]=\"true\"\n          [mode]=\"mode()\"\n          [value]=\"pickerValue()\"\n          [locale]=\"ngxsmkLocale()\"\n          [displayFormat]=\"displayFormat()\"\n          [theme]=\"'light'\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [isInvalidDate]=\"isInvalidDate()\"\n          [showRanges]=\"false\"\n          [calendars]=\"calendars()\"\n          [weekStart]=\"weekStart()\"\n          [showCalendarButton]=\"false\"\n          [classes]=\"ngxsmkClasses\"\n          (valueChange)=\"handlePickerValue($event)\"\n        ></ngxsmk-datepicker>\n      </div>\n    </ng-template>\n\n    @if (shouldShowError()) {\n      <p class=\"mapa-datepicker__error\">\n        <mapa-form-errors\n          [control]=\"control\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </p>\n    } @else if (element.hint) {\n      <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n    }\n  </div>\n}\n\n<ng-template #calendarIcon>\n  <svg\n    class=\"mapa-datepicker__icon\"\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.8\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n    <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n  </svg>\n</ng-template>\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__origin{display:block;width:100%;min-width: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;gap:4px;margin-right:12px}: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:0}: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 8px 0 16px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:72px}: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-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__divider{flex:none;margin:0 8px;color:var(--mapa-color-muted, #555555)}: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__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}: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--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;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));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: 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: NgxsmkDatepickerComponent, selector: "ngxsmk-datepicker", inputs: ["mode", "calendarViewMode", "isInvalidDate", "asyncDateFilter", "showRanges", "showTime", "timeOnly", "timeRangeMode", "showCalendarButton", "minuteInterval", "use24Hour", "secondInterval", "showSeconds", "holidayProvider", "disableHolidays", "disabledDates", "disabledRanges", "recurringPattern", "dateTemplate", "placeholder", "inline", "responsive", "inputId", "name", "autocomplete", "translations", "translationService", "clearLabel", "closeLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "clearAriaLabel", "closeAriaLabel", "weekStart", "yearRange", "timezone", "showOtherMonths", "hooks", "enableKeyboardShortcuts", "customShortcuts", "autoApplyClose", "allowSameDay", "displayFormat", "allowTyping", "inputMask", "enableNaturalLanguage", "naturalLanguagePreviewTemplate", "calendars", "rangePresetFactory", "showTimezoneSelector", "defaultTimezone", "calendarCount", "calendarLayout", "changeActiveMonthOnSelection", "showWeekNumbers", "weekNumberLabel", "secondaryCalendar", "dayMetadata", "calendarHeaderTemplate", "calendarFooterTemplate", "defaultMonthOffset", "syncScroll", "align", "useNativePicker", "enableHapticFeedback", "mobileModalStyle", "mobileTimePickerStyle", "enablePullToRefresh", "mobileTheme", "enableVoiceInput", "autoDetectMobile", "disableFocusTrap", "appendToBody", "value", "field", "startAt", "locale", "theme", "dateFormatPattern", "animationConfig", "rtl", "classes", "disabledState", "required", "errorState", "userAriaDescribedBy", "minDate", "maxDate", "ranges", "comparisonRange"], outputs: ["asyncDateFilterLoading", "asyncDateFilterError", "naturalLanguageResolved", "invalidRange", "timezoneChange", "valueChange", "action", "validationError"] }, { 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: MapaDatepickerRange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-datepicker-range", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
+            args: [{ selector: 'mapa-datepicker, mapa-datepicker-range', standalone: true, imports: [
+                        NgTemplateOutlet,
                         ReactiveFormsModule,
                         NgxMaskDirective,
                         MapaMaskAutofillSyncDirective,
-                        MatDatepickerModule,
                         MatFormFieldModule,
-                        MatIconModule,
                         MatInputModule,
-                    ], 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      [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
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        NgxsmkDatepickerComponent,
+                        MapaFormErrorsComponent,
+                    ], providers: [provideNgxMask()], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (element && formGroup) {\n  <div\n    class=\"mapa-datepicker\"\n    [class.mapa-datepicker--open]=\"isOpen()\"\n    [class.mapa-datepicker--disabled]=\"isDisabled()\"\n  >\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n        {{ element.label }}\n      </label>\n    }\n\n    <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n         n\u00E3o atravessam blocos de controle de fluxo. -->\n    <div\n      class=\"mapa-datepicker__origin\"\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      [formGroup]=\"formDisplay\"\n    >\n      @if (mode() === \"range\") {\n        <div class=\"mapa-datepicker__range\">\n          <mat-form-field\n            appearance=\"outline\"\n            subscriptSizing=\"dynamic\"\n            class=\"mapa-datepicker__range-start\"\n          >\n            <input\n              matInput\n              formControlName=\"startDate\"\n              [attr.id]=\"element.key || null\"\n              [placeholder]=\"startDatePlaceholder\"\n              [mask]=\"mask()\"\n              [dropSpecialCharacters]=\"false\"\n              [readonly]=\"isReadonly()\"\n            />\n          </mat-form-field>\n\n          <span class=\"mapa-datepicker__divider\">&ndash;</span>\n\n          <mat-form-field\n            appearance=\"outline\"\n            subscriptSizing=\"dynamic\"\n            class=\"mapa-datepicker__range-end\"\n          >\n            <input\n              matInput\n              formControlName=\"endDate\"\n              [placeholder]=\"endDatePlaceholder\"\n              [mask]=\"mask()\"\n              [dropSpecialCharacters]=\"false\"\n              [readonly]=\"isReadonly()\"\n            />\n\n            @if (showClear()) {\n              <button\n                matSuffix\n                type=\"button\"\n                class=\"mapa-datepicker__clear\"\n                aria-label=\"Limpar\"\n                tabindex=\"-1\"\n                (click)=\"clear($event)\"\n              >\n                &times;\n              </button>\n            }\n\n            <button\n              #toggleButton\n              matSuffix\n              type=\"button\"\n              class=\"mapa-datepicker__toggle\"\n              [disabled]=\"isDisabled() || isReadonly()\"\n              [attr.aria-expanded]=\"isOpen()\"\n              aria-haspopup=\"dialog\"\n              aria-label=\"Abrir calend\u00E1rio\"\n              (click)=\"toggleCalendar()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n            </button>\n          </mat-form-field>\n        </div>\n      } @else {\n        <div class=\"mapa-datepicker__field\">\n          <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n            @if (mode() === \"multiple\") {\n              <input\n                matInput\n                [attr.id]=\"element.key || null\"\n                [value]=\"selectedLabel()\"\n                [placeholder]=\"singlePlaceholder()\"\n                readonly\n                (click)=\"toggleCalendar()\"\n              />\n            } @else {\n              <input\n                matInput\n                formControlName=\"startDate\"\n                [attr.id]=\"element.key || null\"\n                [placeholder]=\"singlePlaceholder()\"\n                [mask]=\"mask()\"\n                [dropSpecialCharacters]=\"false\"\n                [readonly]=\"isReadonly()\"\n              />\n            }\n\n            @if (showClear()) {\n              <button\n                matSuffix\n                type=\"button\"\n                class=\"mapa-datepicker__clear\"\n                aria-label=\"Limpar\"\n                tabindex=\"-1\"\n                (click)=\"clear($event)\"\n              >\n                &times;\n              </button>\n            }\n\n            <button\n              #toggleButton\n              matSuffix\n              type=\"button\"\n              class=\"mapa-datepicker__toggle\"\n              [disabled]=\"isDisabled() || isReadonly()\"\n              [attr.aria-expanded]=\"isOpen()\"\n              aria-haspopup=\"dialog\"\n              aria-label=\"Abrir calend\u00E1rio\"\n              (click)=\"toggleCalendar()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n    </div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n      [cdkConnectedOverlayPush]=\"true\"\n      cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n      (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    >\n      <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n        @if (hasPresets()) {\n          <div class=\"mapa-datepicker__presets\">\n            <button\n              type=\"button\"\n              class=\"mapa-datepicker__presets-trigger\"\n              [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n              [attr.aria-expanded]=\"isPresetsOpen()\"\n              aria-haspopup=\"listbox\"\n              (click)=\"togglePresets()\"\n            >\n              <span>{{ presetsTriggerLabel() }}</span>\n              <svg\n                class=\"mapa-datepicker__presets-chevron\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path d=\"M6 9l6 6 6-6\"></path>\n              </svg>\n            </button>\n\n            @if (isPresetsOpen()) {\n              <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n                @for (preset of presetList(); track preset.label) {\n                  <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n                    <button\n                      type=\"button\"\n                      class=\"mapa-datepicker__presets-option\"\n                      [class.mapa-datepicker__presets-option--active]=\"\n                        isPresetActive(preset)\n                      \"\n                      (click)=\"applyPreset(preset)\"\n                    >\n                      {{ preset.label }}\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        }\n\n        <ngxsmk-datepicker\n          [inline]=\"true\"\n          [mode]=\"mode()\"\n          [value]=\"pickerValue()\"\n          [locale]=\"ngxsmkLocale()\"\n          [displayFormat]=\"displayFormat()\"\n          [theme]=\"'light'\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [isInvalidDate]=\"isInvalidDate()\"\n          [showRanges]=\"false\"\n          [calendars]=\"calendars()\"\n          [weekStart]=\"weekStart()\"\n          [showCalendarButton]=\"false\"\n          [classes]=\"ngxsmkClasses\"\n          (valueChange)=\"handlePickerValue($event)\"\n        ></ngxsmk-datepicker>\n      </div>\n    </ng-template>\n\n    @if (shouldShowError()) {\n      <p class=\"mapa-datepicker__error\">\n        <mapa-form-errors\n          [control]=\"control\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </p>\n    } @else if (element.hint) {\n      <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n    }\n  </div>\n}\n\n<ng-template #calendarIcon>\n  <svg\n    class=\"mapa-datepicker__icon\"\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.8\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n    <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n  </svg>\n</ng-template>\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__origin{display:block;width:100%;min-width: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;gap:4px;margin-right:12px}: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:0}: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 8px 0 16px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:72px}: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-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__divider{flex:none;margin:0 8px;color:var(--mapa-color-muted, #555555)}: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__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}: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--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;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));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input,
+                args: [{ required: true }]
             }], element: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
+            }], openedChange: [{
+                type: Output
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['toggleButton']
+            }], picker: [{
+                type: ViewChild,
+                args: [NgxsmkDatepickerComponent]
+            }], handleEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 /*
- * Public API Surface of mapa-library-ui datepicker-range
+ * Public API Surface of mapa-library-ui datepicker
  */
 
 function sanitizeHtmlContent(sanitizer, value) {
@@ -1305,7 +1553,7 @@ class HtmlSanitizerService {
     sanitize(value) {
         return sanitizeHtmlContent(this.sanitizer, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, decorators: [{
@@ -1313,7 +1561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
 
 class SafeHtmlPipe {
     constructor(htmlSanitizer) {
@@ -1739,7 +1987,7 @@ class MapaFormComponent {
         element.openedChange?.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaFormComponent, isStandalone: true, selector: "mapa-form", inputs: { formGroup: "formGroup", elements: "elements" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"datepicker-range\") {\n            <mapa-datepicker-range\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker-range>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%;min-width:0}:host ::ng-deep .mapa-form__element--type{width:100%;min-width:0}:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MapaDatepicker, selector: "mapa-datepicker", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaDatepickerRange, selector: "mapa-datepicker-range", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["element", "formControl", "formControlSearch", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaDropdownTreeComponent, selector: "mapa-dropdown-tree", inputs: ["formGroup", "element"], outputs: ["openedChange"] }, { kind: "component", type: RadioButtonComponent, selector: "mapa-radio-button", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: MapaTextareaComponent, selector: "mapa-textarea", inputs: ["formControl", "element"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaFormComponent, isStandalone: true, selector: "mapa-form", inputs: { formGroup: "formGroup", elements: "elements" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%;min-width:0}:host ::ng-deep .mapa-form__element--type{width:100%;min-width:0}:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MapaDatepicker, selector: "mapa-datepicker, mapa-datepicker-range", inputs: ["formGroup", "element"], outputs: ["openedChange"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["element", "formControl", "formControlSearch", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaDropdownTreeComponent, selector: "mapa-dropdown-tree", inputs: ["formGroup", "element"], outputs: ["openedChange"] }, { kind: "component", type: RadioButtonComponent, selector: "mapa-radio-button", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: MapaTextareaComponent, selector: "mapa-textarea", inputs: ["formControl", "element"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaFormComponent, decorators: [{
             type: Component,
@@ -1747,14 +1995,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         CommonModule,
                         ReactiveFormsModule,
                         MapaDatepicker,
-                        MapaDatepickerRange,
                         MapaInputComponent,
                         MapaDropdownComponent,
                         MapaDropdownTreeComponent,
                         RadioButtonComponent,
                         SlideToggleComponent,
                         MapaTextareaComponent,
-                    ], standalone: true, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"datepicker-range\") {\n            <mapa-datepicker-range\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker-range>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%;min-width:0}:host ::ng-deep .mapa-form__element--type{width:100%;min-width:0}:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"] }]
+                    ], standalone: true, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%;min-width:0}:host ::ng-deep .mapa-form__element--type{width:100%;min-width:0}:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], elements: [{