mapa-library-ui 1.7.3 → 2.0.0

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

@@ -1,733 +0,0 @@
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, booleanAttribute, Input, Directive, InjectionToken, Injector, signal, Optional, Inject, Injectable, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
-import { NgControl, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { DateAdapter, 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 { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import { NgxMaskDirective, NgxMaskService, provideNgxMask } from 'ngx-mask';
-import { AutofillMonitor } from '@angular/cdk/text-field';
-import { filter } from 'rxjs/operators';
-import { getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
-
-/**
- * Máscaras numéricas cujo valor de modelo não é a simples projeção
- * "texto renderizado menos caracteres especiais". `separator` ainda altera
- * `NgxMaskService.specialCharacters` em runtime, o que quebra a simetria da
- * comparação feita aqui. Nenhuma delas é produzida por autofill.
- */
-const SKIPPED_MASK_PREFIXES = ['separator', 'percent'];
-/**
- * Mantém o FormControl em sincronia com `input.value` quando o valor foi escrito
- * por algo que não é o usuário: autofill do navegador, gerenciador de senhas ou
- * extensão (geradores de CPF/CNPJ).
- *
- * A NgxMaskDirective é o ControlValueAccessor de todo input com máscara desta
- * biblioteca e só empurra valor para o modelo a partir do seu host listener de
- * `input`. O handler de `blur` chama `onTouch()` mas nunca `onChange()`, e não
- * existe listener de `change`. Um agente externo que atribui `element.value` sem
- * disparar um evento `input` nativo deixa o controle no valor anterior, mantendo
- * o erro `required` na tela até o usuário redigitar o campo.
- *
- * Esta diretiva detecta a divergência e reenvia o evento `input` que faltou,
- * fazendo a NgxMaskDirective analisar, re-renderizar e emitir exatamente como se
- * o usuário tivesse colado o valor. É no-op enquanto DOM e modelo concordam.
- */
-class MapaMaskAutofillSyncDirective {
-    constructor() {
-        /** Permite desligar a reconciliação em um campo específico. */
-        this.mapaMaskAutofillSync = true;
-        this.elementRef = inject(ElementRef);
-        this.destroyRef = inject(DestroyRef);
-        this.autofillMonitor = inject(AutofillMonitor);
-        this.maskDirective = inject(NgxMaskDirective, {
-            self: true,
-            optional: true,
-        });
-        this.maskService = inject(NgxMaskService, {
-            self: true,
-            optional: true,
-        });
-        this.ngControl = inject(NgControl, { self: true, optional: true });
-        this.reconciling = false;
-    }
-    ngOnInit() {
-        // monitor() é idempotente por elemento e devolve um Subject compartilhado
-        // com o MatInput, que já monitora este mesmo elemento. Nunca chamar
-        // stopMonitoring(): ele completa esse Subject e remove o listener de
-        // animação para todos os consumidores. O MatInput cuida do teardown.
-        this.autofillMonitor
-            .monitor(this.elementRef.nativeElement)
-            .pipe(filter((event) => event.isAutofilled), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.reconcile());
-    }
-    /** Idempotente: não faz nada enquanto DOM e modelo concordam. */
-    reconcile() {
-        if (!this.mapaMaskAutofillSync || this.reconciling) {
-            return;
-        }
-        const element = this.elementRef.nativeElement;
-        // ngControl.control só existe depois do ngOnChanges da FormControlDirective,
-        // por isso é lido aqui e não no construtor.
-        const control = this.ngControl?.control;
-        if (!control || control.disabled || element.readOnly) {
-            return;
-        }
-        if (element instanceof HTMLInputElement && element.type === 'number') {
-            return;
-        }
-        const mask = this.maskDirective?.mask() ?? '';
-        if (SKIPPED_MASK_PREFIXES.some((prefix) => mask.startsWith(prefix))) {
-            return;
-        }
-        if (this.isInSync(element, control, mask)) {
-            return;
-        }
-        const previousValue = control.value;
-        this.reconciling = true;
-        try {
-            // Reenvia o que o navegador deveria ter emitido. A NgxMaskDirective relê
-            // element.value, reaplica a máscara, re-renderiza o campo e empurra o
-            // valor pelo seu próprio pipeline de CVA — marcando o controle como dirty
-            // e reexecutando todos os validadores.
-            element.dispatchEvent(new Event('input', { bubbles: true }));
-            if (control.value === previousValue) {
-                // O evento não moveu o modelo. Acontece com controles criados como
-                // { updateOn: 'blur' | 'submit' }, em que o value accessor apenas
-                // enfileira a mudança em vez de comitá-la.
-                control.setValue(this.toModelValue(element.value, mask));
-                control.markAsDirty();
-            }
-        }
-        finally {
-            this.reconciling = false;
-        }
-    }
-    isInSync(element, control, mask) {
-        return (this.toComparable(element.value, mask) ===
-            this.toComparable(this.stringify(control.value), mask));
-    }
-    /**
-     * Sem máscara, o texto renderizado e o valor de modelo são a mesma string. Com
-     * máscara eles diferem apenas pelos caracteres especiais, então limpar os dois
-     * lados com as regras da própria NgxMaskService vale tanto para
-     * `dropSpecialCharacters: true` quanto para `false`.
-     */
-    toComparable(value, mask) {
-        return mask && this.maskService ? this.maskService.removeMask(value) : value;
-    }
-    toModelValue(domValue, mask) {
-        return mask && this.maskService && this.maskService.dropSpecialCharacters
-            ? this.maskService.removeMask(domValue)
-            : domValue;
-    }
-    stringify(value) {
-        return value === null || value === undefined ? '' : String(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMaskAutofillSyncDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.21", type: MapaMaskAutofillSyncDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { mapaMaskAutofillSync: ["mapaMaskAutofillSync", "mapaMaskAutofillSync", booleanAttribute] }, host: { listeners: { "change": "reconcile()", "focusout": "reconcile()" } }, exportAs: ["mapaMaskAutofillSync"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMaskAutofillSyncDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[mask], textarea[mask]',
-                    standalone: true,
-                    exportAs: 'mapaMaskAutofillSync',
-                    host: {
-                        '(change)': 'reconcile()',
-                        '(focusout)': 'reconcile()',
-                    },
-                }]
-        }], propDecorators: { mapaMaskAutofillSync: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
-
-const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
-const MONTH_DAY_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
-const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}([T ].*)?$/;
-const DOCS_LANGUAGE_STORAGE_KEY = "mapa-library-ui-docs-language";
-function isValidDate(date) {
-    return !Number.isNaN(date.getTime());
-}
-function buildUtcDate(date, dayOffset, hours, minutes, seconds, milliseconds) {
-    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate() + dayOffset, hours, minutes, seconds, milliseconds));
-}
-function formatDateAsDayMonthYear(date) {
-    const day = `${date.getDate()}`.padStart(2, "0");
-    const month = `${date.getMonth() + 1}`.padStart(2, "0");
-    const year = `${date.getFullYear()}`;
-    return `${day}/${month}/${year}`;
-}
-function formatDateAsMonthDayYear(date) {
-    const day = `${date.getDate()}`.padStart(2, "0");
-    const month = `${date.getMonth() + 1}`.padStart(2, "0");
-    const year = `${date.getFullYear()}`;
-    return `${month}/${day}/${year}`;
-}
-function normalizeDateLocale(value) {
-    if (typeof value !== "string") {
-        return "pt-BR";
-    }
-    const normalizedValue = value.trim().toLowerCase();
-    if (normalizedValue.startsWith("en")) {
-        return "en";
-    }
-    if (normalizedValue.startsWith("es")) {
-        return "es";
-    }
-    return "pt-BR";
-}
-function getDocsStoredLanguage() {
-    if (typeof window === "undefined") {
-        return null;
-    }
-    try {
-        return window.localStorage.getItem(DOCS_LANGUAGE_STORAGE_KEY);
-    }
-    catch {
-        return null;
-    }
-}
-function getActiveDateLocale() {
-    return normalizeDateLocale(getDocsStoredLanguage() ?? getStoredAppLanguage());
-}
-function isMonthFirstDateLocale(locale = getActiveDateLocale()) {
-    return normalizeDateLocale(locale) === "en";
-}
-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";
-}
-function formatDateForLocale(date, locale = getActiveDateLocale()) {
-    return isMonthFirstDateLocale(locale)
-        ? formatDateAsMonthDayYear(date)
-        : formatDateAsDayMonthYear(date);
-}
-function parseOrderedDate(value, pattern, order) {
-    const match = pattern.exec(value.trim());
-    if (!match) {
-        return null;
-    }
-    const [, firstValue, secondValue, yearValue] = match;
-    const year = Number(yearValue);
-    const month = Number(order === "month-first" ? firstValue : secondValue);
-    const day = Number(order === "month-first" ? secondValue : firstValue);
-    const parsedDate = new Date(year, month - 1, day);
-    if (parsedDate.getFullYear() !== year ||
-        parsedDate.getMonth() !== month - 1 ||
-        parsedDate.getDate() !== day) {
-        return null;
-    }
-    return parsedDate;
-}
-function parseLocaleDateValue(value, locale = getActiveDateLocale()) {
-    const normalizedLocale = normalizeDateLocale(locale);
-    const parsers = normalizedLocale === "en"
-        ? [
-            () => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
-            () => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
-        ]
-        : [
-            () => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
-            () => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
-        ];
-    for (const parse of parsers) {
-        const parsedDate = parse();
-        if (parsedDate) {
-            return parsedDate;
-        }
-    }
-    return null;
-}
-function parseDateValue(value, locale = getActiveDateLocale()) {
-    if (value instanceof Date) {
-        return isValidDate(value) ? new Date(value.getTime()) : null;
-    }
-    if (typeof value === "number") {
-        const parsedDate = new Date(value);
-        return isValidDate(parsedDate) ? parsedDate : null;
-    }
-    if (typeof value !== "string") {
-        return null;
-    }
-    const trimmedValue = value.trim();
-    if (!trimmedValue) {
-        return null;
-    }
-    const localeDate = parseLocaleDateValue(trimmedValue, locale);
-    if (localeDate) {
-        return localeDate;
-    }
-    if (DAY_MONTH_YEAR_PATTERN.test(trimmedValue) || MONTH_DAY_YEAR_PATTERN.test(trimmedValue)) {
-        return null;
-    }
-    const parsedDate = new Date(trimmedValue);
-    return isValidDate(parsedDate) ? parsedDate : null;
-}
-/**
- * Parse estrito para o texto de um campo de data mascarado.
- *
- * Diferente de `parseDateValue`, não cai em `new Date(string)` para qualquer
- * entrada. O motor de datas do V8 aceita fragmentos numéricos e devolve datas
- * inventadas — `"2"` vira 01/02/2001 e `"251220"` vira o ano 251220 —, o que
- * fazia os datepickers moverem o calendário a cada tecla enquanto o usuário
- * ainda estava digitando.
- *
- * Aceita apenas uma data completa no formato do locale ativo (com validação de
- * faixa de dia/mês) ou uma data ISO-8601, para não quebrar valores vindos de
- * API que o consumidor grave direto no controle.
- */
-function parseDateFieldValue(value, locale = getActiveDateLocale()) {
-    if (value instanceof Date || typeof value === "number") {
-        return parseDateValue(value, locale);
-    }
-    if (typeof value !== "string") {
-        return null;
-    }
-    const trimmedValue = value.trim();
-    if (!trimmedValue) {
-        return null;
-    }
-    const localeDate = parseLocaleDateValue(trimmedValue, locale);
-    if (localeDate) {
-        return localeDate;
-    }
-    return ISO_DATE_PATTERN.test(trimmedValue)
-        ? parseDateValue(trimmedValue, locale)
-        : null;
-}
-function isDateValue(value) {
-    return parseDateValue(value) !== null;
-}
-function parseBrazilianDate(value) {
-    return parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first");
-}
-function normalizeDateInput(value) {
-    return parseDateValue(value);
-}
-function formatBrazilianDate(value) {
-    const date = normalizeDateInput(value);
-    return date ? formatDateAsDayMonthYear(date) : "";
-}
-function addDays(date, days) {
-    const nextDate = new Date(date);
-    nextDate.setDate(nextDate.getDate() + days);
-    return nextDate;
-}
-function formatLocaleDate(value, dateStyle = "short") {
-    const date = normalizeDateInput(value);
-    if (!date) {
-        return "";
-    }
-    return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
-        dateStyle,
-    }).format(date);
-}
-function formatLocaleDateTime(value, options = {}) {
-    const date = normalizeDateInput(value);
-    if (!date) {
-        return "";
-    }
-    const { dateStyle = "short", timeStyle = "short" } = options;
-    return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
-        dateStyle,
-        timeStyle,
-    }).format(date);
-}
-function getDefaultDateRange(days = 60) {
-    const today = new Date();
-    return {
-        startDate: formatBrazilianDate(addDays(today, -days)),
-        endDate: formatBrazilianDate(today),
-    };
-}
-function getRelativeDateRange(daysBack) {
-    const endDate = new Date();
-    endDate.setHours(23, 59, 59, 999);
-    const startDate = new Date();
-    startDate.setHours(0, 0, 0, 0);
-    startDate.setDate(startDate.getDate() - daysBack);
-    return { startDate, endDate };
-}
-function toUtcRangeStartIso(value) {
-    const date = normalizeDateInput(value);
-    return date ? buildUtcDate(date, 0, 3, 0, 0, 0).toISOString() : undefined;
-}
-function toUtcRangeEndIso(value) {
-    const date = normalizeDateInput(value);
-    return date ? buildUtcDate(date, 1, 2, 59, 59, 999).toISOString() : undefined;
-}
-function toUtcDayExclusiveEndIso(value) {
-    const date = normalizeDateInput(value);
-    return date ? buildUtcDate(date, 1, 3, 0, 0, 0).toISOString() : undefined;
-}
-
-const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
-function formatPaginatorRange(page, pageSize, length) {
-    if (length === 0 || pageSize === 0) {
-        return `0 de ${length}`;
-    }
-    const safeLength = Math.max(length, 0);
-    const startIndex = page * pageSize;
-    const endIndex = startIndex < safeLength
-        ? Math.min(startIndex + pageSize, safeLength)
-        : startIndex + pageSize;
-    return `${startIndex + 1} - ${endIndex} de ${safeLength}`;
-}
-function formatPaginatorShowingRange(page, pageSize, length) {
-    if (length === 0 || pageSize === 0) {
-        return "Mostrando 0 - 0 de 0 item";
-    }
-    const safeLength = Math.max(length, 0);
-    const startIndex = page * pageSize;
-    const endIndex = startIndex < safeLength
-        ? Math.min(startIndex + pageSize, safeLength)
-        : startIndex + pageSize;
-    const itemLabel = safeLength === 1 ? "item" : "itens";
-    return `Mostrando ${startIndex + 1} - ${endIndex} de ${safeLength} ${itemLabel}`;
-}
-const DEFAULT_MAPA_UI_TEXTS = {
-    common: {
-        selectAll: "Selecionar todos",
-    },
-    filters: {
-        clear: "Limpar filtros",
-        submit: "Filtrar",
-    },
-    datepicker: {
-        startDatePlaceholder: "Data inicial",
-        endDatePlaceholder: "Data final",
-    },
-    capability: {
-        groupAverageTitle: "Média geral do grupo",
-        individualAverageTitle: "Média geral do indivíduo",
-        conceptTitle: "Conceito",
-        resultTitle: "Resultado",
-        positiveIndicatorsTitle: "Indicadores positivos",
-        negativeIndicatorsTitle: "Indicadores negativos",
-        riskIndicatorsTitle: "Indicadores de risco",
-        precipitationRiskTitle: "Risco de acidente por precipitação",
-        negligenceRiskTitle: "Risco de acidente por negligência",
-        negativeDirectionLabel: "Direção Negativa |",
-        positiveDirectionLabel: "Direção Positiva |",
-    },
-    paginator: {
-        itemsPerPage: "Itens por página",
-        nextPage: "Próxima página",
-        previousPage: "Página anterior",
-        rangeLabel: formatPaginatorRange,
-        showingRangeLabel: formatPaginatorShowingRange,
-    },
-    warning: {
-        lowReliabilityTitle: "Nível baixo de confiabilidade no(s) teste(s):",
-        expirationLimitTitle: "O prazo de validade do(s) teste(s) está no limite:",
-    },
-    table: {
-        emptyTitle: "Não foram encontrados resultados",
-        emptySubtitle: "",
-    },
-    validation: {
-        cnpj: "CNPJ inválido",
-        cpf: "CPF inválido",
-        email: "E-mail inválido",
-        max: (context) => `O valor máximo permitido é ${context?.max ?? ""}`.trim(),
-        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
-        min: (context) => `O valor mínimo permitido é ${context?.min ?? ""}`.trim(),
-        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
-        pattern: "Formato inválido",
-        required: "Campo obrigatório",
-    },
-};
-function getDefaultTexts() {
-    return DEFAULT_MAPA_UI_TEXTS;
-}
-function mergeMapaUiTexts(customTexts) {
-    const defaults = getDefaultTexts();
-    return {
-        common: { ...defaults.common, ...(customTexts?.common ?? {}) },
-        filters: { ...defaults.filters, ...(customTexts?.filters ?? {}) },
-        datepicker: { ...defaults.datepicker, ...(customTexts?.datepicker ?? {}) },
-        capability: { ...defaults.capability, ...(customTexts?.capability ?? {}) },
-        paginator: { ...defaults.paginator, ...(customTexts?.paginator ?? {}) },
-        warning: { ...defaults.warning, ...(customTexts?.warning ?? {}) },
-        table: { ...defaults.table, ...(customTexts?.table ?? {}) },
-        validation: { ...defaults.validation, ...(customTexts?.validation ?? {}) },
-    };
-}
-function provideMapaUiTexts(texts) {
-    return {
-        provide: MAPA_UI_TEXTS,
-        useValue: texts,
-    };
-}
-
-class MapaI18nService {
-    constructor(customTexts) {
-        this.injector = inject(Injector);
-        this.textsState = signal(mergeMapaUiTexts(), ...(ngDevMode ? [{ debugName: "textsState" }] : []));
-        this.textsSignal = this.textsState.asReadonly();
-        this.texts$ = toObservable(this.textsSignal, { injector: this.injector });
-        if (customTexts) {
-            this.textsState.set(mergeMapaUiTexts(customTexts));
-        }
-    }
-    get texts() {
-        return this.textsState();
-    }
-    setTexts(texts) {
-        this.textsState.set(mergeMapaUiTexts(texts));
-    }
-    resolveValidationText(key, context) {
-        return this.resolveText(this.texts.validation[key], context);
-    }
-    resolveText(value, context) {
-        return typeof value === "function" ? value(context) : value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaI18nService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAPA_UI_TEXTS]
-                }] }] });
-
-function getMapaDatepickerRangeFormats() {
-    const dateInput = getActiveMaterialDateFormat();
-    return {
-        parse: {
-            dateInput,
-        },
-        display: {
-            dateInput,
-            monthYearLabel: "MMM YYYY",
-            dateA11yLabel: "LL",
-            monthYearA11yLabel: "MMMM YYYY",
-        },
-    };
-}
-class MapaDatepickerRange {
-    constructor(i18n, cdr) {
-        this.i18n = i18n;
-        this.cdr = cdr;
-        this.destroyRef = inject(DestroyRef);
-        this.dateAdapter = inject((DateAdapter));
-        this.emptyValue = {
-            startDate: null,
-            endDate: null,
-        };
-        this.currentLocale = null;
-        this.formDatepicker = new FormGroup({
-            startDate: new FormControl(null),
-            endDate: new FormControl(null),
-        });
-        this.formDisplay = new FormGroup({
-            startDate: new FormControl(null),
-            endDate: new FormControl(null),
-        });
-    }
-    get texts() {
-        return this.i18n.textsSignal();
-    }
-    get dateInputMask() {
-        return getDateInputMask(this.getLocale());
-    }
-    get activeDateFormat() {
-        return getActiveDateFormat(this.getLocale());
-    }
-    ngOnInit() {
-        this.syncLocaleSettings();
-        if (!this.element?.key) {
-            throw new Error("mapa-datepicker-range requires element.key to resolve the target control.");
-        }
-        this.rangeControl = this.formGroup.get(this.element.key);
-        if (!this.rangeControl) {
-            throw new Error(`mapa-datepicker-range could not find control '${this.element.key}' in formGroup.`);
-        }
-        this.syncFromExternal(this.rangeControl.value);
-        this.rangeControl.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.syncFromExternal(value);
-        });
-        this.formDisplay.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.updateExternalFromDisplay(value);
-        });
-        this.formDatepicker.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.updateExternalFromDatepicker(value);
-        });
-    }
-    ngDoCheck() {
-        this.syncLocaleSettings();
-    }
-    get startDatePlaceholder() {
-        return this.texts.datepicker.startDatePlaceholder;
-    }
-    get endDatePlaceholder() {
-        return this.texts.datepicker.endDatePlaceholder;
-    }
-    syncFromExternal(value) {
-        this.syncLocaleSettings();
-        const nextValue = value ?? this.emptyValue;
-        const displayValue = {
-            startDate: nextValue.startDate,
-            endDate: nextValue.endDate,
-        };
-        const datepickerValue = {
-            startDate: parseDateFieldValue(nextValue.startDate, this.getLocale()),
-            endDate: parseDateFieldValue(nextValue.endDate, this.getLocale()),
-        };
-        const currentDisplay = this.formDisplay.getRawValue();
-        if (currentDisplay.startDate !== displayValue.startDate ||
-            currentDisplay.endDate !== displayValue.endDate) {
-            this.formDisplay.patchValue(displayValue, { emitEvent: false });
-        }
-        const currentDatepicker = this.formDatepicker.getRawValue();
-        if (!this.areDatesEqual(currentDatepicker.startDate, datepickerValue.startDate) ||
-            !this.areDatesEqual(currentDatepicker.endDate, datepickerValue.endDate)) {
-            this.formDatepicker.patchValue(datepickerValue, { emitEvent: false });
-        }
-        this.cdr.markForCheck();
-    }
-    updateExternalFromDisplay(value) {
-        this.syncLocaleSettings();
-        const nextValue = {
-            startDate: value.startDate ?? null,
-            endDate: value.endDate ?? null,
-        };
-        this.patchExternalValue(nextValue);
-        const nextDatepickerValue = {
-            startDate: parseDateFieldValue(nextValue.startDate, this.getLocale()),
-            endDate: parseDateFieldValue(nextValue.endDate, this.getLocale()),
-        };
-        this.formDatepicker.patchValue(nextDatepickerValue, { emitEvent: false });
-        this.cdr.markForCheck();
-    }
-    updateExternalFromDatepicker(value) {
-        this.syncLocaleSettings();
-        if (!value.startDate || !value.endDate) {
-            return;
-        }
-        const nextValue = {
-            startDate: formatDateForLocale(value.startDate, this.getLocale()),
-            endDate: formatDateForLocale(value.endDate, this.getLocale()),
-        };
-        this.patchExternalValue(nextValue);
-        this.formDisplay.patchValue(nextValue, { emitEvent: false });
-        this.cdr.markForCheck();
-    }
-    patchExternalValue(nextValue) {
-        const currentValue = this.rangeControl.value;
-        if (currentValue?.startDate === nextValue.startDate &&
-            currentValue?.endDate === nextValue.endDate) {
-            return;
-        }
-        this.rangeControl.patchValue(nextValue);
-    }
-    areDatesEqual(first, second) {
-        if (first === second) {
-            return true;
-        }
-        if (!first || !second) {
-            return false;
-        }
-        return first.getTime() === second.getTime();
-    }
-    cleanDatepicker() {
-        const defaultRange = {
-            startDate: null,
-            endDate: null,
-        };
-        this.formDatepicker.patchValue(defaultRange, { emitEvent: false });
-        this.formDisplay.patchValue(defaultRange, { emitEvent: false });
-        this.patchExternalValue(defaultRange);
-        this.cdr.markForCheck();
-    }
-    getLocale() {
-        return this.currentLocale ?? getActiveDateLocale();
-    }
-    syncLocaleSettings() {
-        const nextLocale = getActiveDateLocale();
-        if (this.currentLocale === nextLocale) {
-            return;
-        }
-        this.currentLocale = nextLocale;
-        this.dateAdapter.setLocale(nextLocale);
-        const datepickerValue = this.formDatepicker.getRawValue();
-        const hasDateRange = !!datepickerValue.startDate && !!datepickerValue.endDate;
-        if (hasDateRange) {
-            const formattedRange = {
-                startDate: formatDateForLocale(datepickerValue.startDate, nextLocale),
-                endDate: formatDateForLocale(datepickerValue.endDate, nextLocale),
-            };
-            this.formDisplay.patchValue(formattedRange, { emitEvent: false });
-            if (this.rangeControl) {
-                this.patchExternalValue(formattedRange);
-            }
-        }
-        this.cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepickerRange, isStandalone: true, selector: "mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, providers: [
-            provideNgxMask(),
-            provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
-        ], ngImport: i0, template: "@if (element.label) {\n  <div class=\"mapa-datepicker-range__label\">\n    {{ element.label }}\n  </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__start-date\"\n  >\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      [mask]=\"dateInputMask\"\n      [dropSpecialCharacters]=\"false\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n  </mat-form-field>\n  <div class=\"mapa-datepicker-range__divider\">&ndash;</div>\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__end-date\"\n  >\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      [mask]=\"dateInputMask\"\n      [dropSpecialCharacters]=\"false\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\n    >\n      &times;\n    </button>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input matStartDate formControlName=\"startDate\" />\n      <input matEndDate formControlName=\"endDate\" />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host{display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, decorators: [{
-            type: Component,
-            args: [{ selector: "mapa-datepicker-range", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        NgxMaskDirective,
-                        MapaMaskAutofillSyncDirective,
-                        MatDatepickerModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        MatInputModule,
-                    ], providers: [
-                        provideNgxMask(),
-                        provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
-                    ], standalone: true, template: "@if (element.label) {\n  <div class=\"mapa-datepicker-range__label\">\n    {{ element.label }}\n  </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__start-date\"\n  >\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      [mask]=\"dateInputMask\"\n      [dropSpecialCharacters]=\"false\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n  </mat-form-field>\n  <div class=\"mapa-datepicker-range__divider\">&ndash;</div>\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__end-date\"\n  >\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      [mask]=\"dateInputMask\"\n      [dropSpecialCharacters]=\"false\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\n    >\n      &times;\n    </button>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input matStartDate formControlName=\"startDate\" />\n      <input matEndDate formControlName=\"endDate\" />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host{display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
-                type: Input
-            }], element: [{
-                type: Input
-            }] } });
-
-/*
- * Public API Surface of mapa-library-ui datepicker-range
- */
-
-/*
- * Public API Surface of mapa-library-ui datepicker-range
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { MapaDatepickerRange, getMapaDatepickerRangeFormats };
-//# sourceMappingURL=mapa-library-ui-src-lib-components-datepicker-range.mjs.map