mapa-library-ui 1.7.3 → 2.0.0

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

@@ -1,24 +1,87 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, Input, Component, ElementRef, DestroyRef, booleanAttribute, Directive, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, Input, Component, ElementRef, DestroyRef, booleanAttribute, Directive, effect, ChangeDetectorRef, EventEmitter, HostListener, ViewChild, Output, ChangeDetectionStrategy } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2$1 from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
 import { NgControl, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { provideNativeDateAdapter } from '@angular/material/core';
-import * as i3 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { NgxMaskDirective, NgxMaskService, provideNgxMask } from 'ngx-mask';
+import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 import { AutofillMonitor } from '@angular/cdk/text-field';
 import { filter } from 'rxjs/operators';
 import { getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
 
-const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
+class ElementBase {
+    constructor(options = {}) {
+        this.value = options.value || "";
+        this.key = options.key || "";
+        this.label = options.label || "";
+        this.required = !!options.required;
+        this.order = options.order === undefined ? 1 : options.order;
+        this.controlType = options.controlType || "";
+        this.type = options.type || "";
+        this.placeholder = options.placeholder || "";
+        this.readonly = options.readonly || false;
+        this.hint = options.hint || "";
+        this.prefix = options.prefix || "";
+        this.suffix = options.suffix || "";
+        this.autosize = options.autosize || false;
+        this.autosizeMinWidth = options.autosizeMinWidth || "212px";
+        this.autosizeMaxWidth = options.autosizeMaxWidth || "400px";
+        this.autosizeMinRow = options.autosizeMinRow || 2;
+        this.autosizeMaxRow = options.autosizeMaxRow || 5;
+        this.options = options.options || [];
+        this.tree = options.tree || [];
+        this.multiple = options.multiple || false;
+        this.search = options.search || undefined;
+        this.maxLength = options.maxLength || null;
+        this.errors = options.errors || undefined;
+        this.actionButton = options.actionButton || undefined;
+        this.mask = options.mask || undefined;
+        this.autocomplete = options.autocomplete || "";
+        this.clearValue =
+            options.clearValue !== undefined ? options.clearValue : true;
+        this.minDate = options.minDate || undefined;
+        this.maxDate = options.maxDate || undefined;
+        this.status = options.status || undefined;
+        this.checkParent = options.checkParent || false;
+        this.checkChildren = options.checkChildren || false;
+        this.openedChange = options.openedChange || undefined;
+    }
+}
+
+class Datepicker extends ElementBase {
+    constructor(options = {}) {
+        super(options);
+        this.controlType = 'datepicker';
+        this.mode = options.mode || 'single';
+        this.disabledDates = options.disabledDates || undefined;
+        this.isInvalidDate = options.isInvalidDate || undefined;
+        this.presets = options.presets || undefined;
+        this.presetsLabel = options.presetsLabel || undefined;
+        this.calendars = options.calendars || undefined;
+        this.weekStart = options.weekStart ?? null;
+        this.closeOnSelect =
+            options.closeOnSelect !== undefined ? options.closeOnSelect : true;
+    }
+}
+/**
+ * @deprecated Use `Datepicker` with `mode: "range"`.
+ * Kept as a compatibility bridge for 2.x consumers.
+ */
+class DatepickerRange extends Datepicker {
+    constructor(options = {}) {
+        super({ ...options, mode: 'range' });
+        this.controlType = 'datepicker-range';
+    }
+}
+
+const MAPA_UI_TEXTS = new InjectionToken('MAPA_UI_TEXTS');
 function formatPaginatorRange(page, pageSize, length) {
     if (length === 0 || pageSize === 0) {
         return `0 de ${length}`;
@@ -32,66 +95,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() {
@@ -430,9 +500,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";
 }
@@ -600,134 +667,590 @@ 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();
+    }
+    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;
     }
-    get minDate() {
+    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 === "") {
+    isInvalidDate() {
+        return this.element.isInvalidDate ?? this.neverInvalid;
+    }
+    /**
+     * 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();
+        }
+    }
+    applyPreset(entry) {
+        this.closePresets();
+        if (this.isDisabled()) {
             return;
         }
-        this.formControl.patchValue("");
-        this.cdr.markForCheck();
+        // `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.handlePickerValue({ start: entry.range[0], end: entry.range[1] });
     }
-    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)) {
+    // --- interação ------------------------------------------------------------
+    toggleCalendar() {
+        if (this.isDisabled() || this.isReadonly()) {
             return;
         }
-        this.formDatepicker.patchValue({ date: nextDate }, { emitEvent: false });
-        this.cdr.markForCheck();
+        const isOpening = !this.isOpenState();
+        if (isOpening) {
+            this.dateLocale.refresh();
+        }
+        this.setOpenState(isOpening);
+        if (!isOpening) {
+            this.control.markAsTouched();
+        }
+    }
+    closeCalendar() {
+        if (this.isOpenState()) {
+            this.setOpenState(false);
+        }
+        this.control?.markAsTouched();
     }
-    updateExternalControl(value) {
-        if (!value) {
-            if (this.formControl.value !== "") {
-                this.formControl.patchValue("");
-                this.cdr.markForCheck();
+    handleOverlayOutsideClick(event) {
+        if (this.toggleButton?.nativeElement.contains(event.target)) {
+            return;
+        }
+        this.closeCalendar();
+    }
+    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();
+        }
+    }
+    /** 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.emitExternal(next);
+        if (this.element.closeOnSelect && this.shouldCloseAfterSelect(next)) {
+            this.closeCalendar();
+        }
+    }
+    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);
+    }
+    /** 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);
+    }
+    applyExternal(value) {
+        if (this.syncing) {
             return;
         }
-        const formattedDate = formatDateAsDayMonthYear(value);
-        if (this.formControl.value === formattedDate) {
+        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();
+    }
+    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;
         }
-        this.formControl.patchValue(formattedDate);
+        this.syncing = true;
+        try {
+            this.control.patchValue(next);
+            this.control.markAsDirty();
+        }
+        finally {
+            this.syncing = false;
+        }
         this.cdr.markForCheck();
     }
-    closePicker(picker) {
-        picker.close();
+    patchDisplay(display) {
+        this.syncing = true;
+        try {
+            this.formDisplay.patchValue(display, { emitEvent: false });
+        }
+        finally {
+            this.syncing = false;
+        }
+    }
+    // --- 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);
+        }
     }
-    areDatesEqual(first, second) {
-        if (first === second) {
-            return true;
+    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) : '';
         }
-        if (!first || !second) {
-            return false;
+    }
+    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,
+                };
         }
-        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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.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 }); }
+    /** 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 : '';
+        }
+    }
+    emptyValue() {
+        switch (this.mode()) {
+            case 'range':
+                return { startDate: null, endDate: null };
+            case 'multiple':
+                return [];
+            default:
+                return '';
+        }
+    }
+    asRangeValue(value) {
+        if (value && typeof value === 'object' && !Array.isArray(value)) {
+            return {
+                startDate: value.startDate ?? null,
+                endDate: value.endDate ?? null,
+            };
+        }
+        return { startDate: null, endDate: null };
+    }
+    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: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MapaDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-datepicker", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
+            args: [{ selector: 'mapa-datepicker, mapa-datepicker-range', standalone: true, imports: [
+                        NgTemplateOutlet,
                         ReactiveFormsModule,
                         NgxMaskDirective,
                         MapaMaskAutofillSyncDirective,
-                        MatDatepickerModule,
                         MatFormFieldModule,
-                        MatIconModule,
                         MatInputModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        NgxsmkDatepickerComponent,
                         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
+                    ], 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 (single)
+ * Public API Surface of mapa-library-ui datepicker
  */
 
 /*
- * Public API Surface of mapa-library-ui datepicker (single)
+ * Public API Surface of mapa-library-ui datepicker
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MAPA_DATEPICKER_FORMATS, MapaDatepicker };
+export { Datepicker, DatepickerRange, ElementBase, MapaDatepicker, MapaDatepicker as MapaDatepickerRange };
 //# sourceMappingURL=mapa-library-ui-src-lib-components-datepicker.mjs.map