matcha-components 20.277.0 → 20.279.0

package/fesm2022/matcha-components.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, HostListener, Input, Directive, EventEmitter, forwardRe
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NgControl, FormControlName, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, FormControlName, NG_VALIDATORS, ReactiveFormsModule, FormsModule, FormGroup, FormControl } from '@angular/forms';
 import { Subject, Subscription, fromEvent, BehaviorSubject, of } from 'rxjs';
 import { filter, debounceTime, distinctUntilChanged, takeUntil, startWith, map } from 'rxjs/operators';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
@@ -425,12 +425,25 @@ class MatchaPanelComponent {
             if (!this.open)
                 return;
             const target = event.target;
+            // IMPORTANTE: o nó clicado pode ter sido REMOVIDO do DOM pelo próprio
+            // handler do clique antes deste listener rodar — o zone.js dispara
+            // change detection entre os listeners de um mesmo evento. Ex: trocar
+            // de view no matcha-calendar-picker (dias -> anos/meses) recria os
+            // botões via *ngIf, destruindo o botão clicado. Nesse caso
+            // `contains(target)` retorna false e o painel fechava indevidamente.
+            //
+            // Usamos `composedPath()`, capturado no início do dispatch, para saber
+            // ONDE o clique originou — robusto a remoções de nós durante o evento.
+            const path = (typeof event.composedPath === 'function'
+                ? event.composedPath()
+                : []);
             // Verificar se clicou dentro do painel (via ViewChild pois *ngIf recria)
             const panelEl = this.panelRef?.nativeElement;
-            const isInsidePanel = panelEl?.contains(target);
-            const isInsideTrigger = this.triggerElement?.contains(target);
+            const isInsidePanel = !!panelEl && (path.includes(panelEl) || panelEl.contains(target));
+            const isInsideTrigger = !!this.triggerElement
+                && (path.includes(this.triggerElement) || this.triggerElement.contains(target));
             // Verificar se clicou dentro de um elemento ignorado (ex: submenu)
-            const isInsideIgnored = this.ignoreClickOutsideElements.some(el => el?.contains(target));
+            const isInsideIgnored = this.ignoreClickOutsideElements.some(el => !!el && (path.includes(el) || el.contains(target)));
             if (!isInsidePanel && !isInsideTrigger && !isInsideIgnored) {
                 this.closePanel();
             }
@@ -1881,11 +1894,13 @@ class MatchaSelectComponent {
         });
         // Notificar a diretiva sobre a seleção
         this.notifyDirectiveOfSelection(option.value);
-        // Emitir evento de mudança de seleção (compatível com MatSelectChange)
-        this.selectionChange.emit({ source: this, value: option.value });
-        // Notificar o Angular Forms sobre a mudança
+        // Notificar o Angular Forms sobre a mudança ANTES de emitir o evento:
+        // consumidores que leem o valor atual do formulário no handler de
+        // selectionChange precisam já enxergar o novo valor.
         this.onChange(option.value);
         this.onTouched();
+        // Emitir evento de mudança de seleção (compatível com MatSelectChange)
+        this.selectionChange.emit({ source: this, value: option.value });
         // Forçar detecção de mudanças
         this.cdr.detectChanges();
     }
@@ -1942,11 +1957,13 @@ class MatchaSelectComponent {
         });
         // Notificar a diretiva sobre a seleção antes de fechar o painel
         this.notifyDirectiveOfSelection(option.value);
-        // Emitir evento de mudança de seleção (compatível com MatSelectChange)
-        this.selectionChange.emit({ source: this, value: option.value });
-        // Notificar o Angular Forms sobre a mudança
+        // Notificar o Angular Forms sobre a mudança ANTES de emitir o evento:
+        // consumidores que leem o valor atual do formulário no handler de
+        // selectionChange precisam já enxergar o novo valor.
         this.onChange(option.value);
         this.onTouched();
+        // Emitir evento de mudança de seleção (compatível com MatSelectChange)
+        this.selectionChange.emit({ source: this, value: option.value });
         // Fechamos painel automaticamente
         this.closePanel();
         // Forçar detecção de mudanças para garantir que o painel seja fechado
@@ -2807,9 +2824,12 @@ class MatchaSelectMultipleComponent {
     }
     emitChange() {
         const value = [...this.selectedValues];
-        this.selectionChange.emit({ source: this, value });
+        // Atualiza o FormControl ANTES de emitir o evento: consumidores que leem o
+        // valor atual do formulário no handler de selectionChange precisam já
+        // enxergar o novo valor.
         this.onChange(value);
         this.onTouched();
+        this.selectionChange.emit({ source: this, value });
     }
     // ===== Ordenação / navegação =====
     /** Retorna as opções com as marcadas primeiro, preservando a ordem de declaração. */
@@ -9249,13 +9269,412 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: [NgControl, { descendants: true }]
             }] } });
 
-class MatchaDateComponent {
+/**
+ * Serviço de internacionalização do matcha-calendar-picker.
+ * Inspirado no MatchaPaginatorIntl, porém registrado APENAS via
+ * `providedIn: 'root'` — nunca em `providers:` de módulo. Isso garante uma
+ * única instância em todo o app mesmo com lazy loading (o registro em
+ * `providers` de um módulo lazy criaria uma instância separada no injector
+ * daquele módulo, e as alterações de label não chegariam ao componente).
+ *
+ * Uso no app consumidor:
+ *   constructor(private calendarIntl: MatchaCalendarIntl) {}
+ *   setEnglish() {
+ *     this.calendarIntl.monthNames = ['January', ...];
+ *     this.calendarIntl.changes.next();
+ *   }
+ */
+class MatchaCalendarIntl {
     constructor() {
+        /** Emite quando os labels mudam. O picker reconstrói as células ao receber. */
+        this.changes = new Subject();
+        /** Nomes completos dos meses (view de meses). Índice 0 = Janeiro. */
+        this.monthNames = [
+            'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+            'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+        ];
+        /** Nomes abreviados dos meses (cabeçalho da view de dias). Índice 0 = Jan. */
+        this.monthNamesShort = [
+            'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
+            'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'
+        ];
+        /** Abreviações dos dias da semana (cabeçalho do grid). Índice 0 = Domingo. */
+        this.weekdayNamesShort = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Calendário/datepicker apresentacional com três views (dias, meses, anos).
+ *
+ * É um componente "burro": recebe `value`/`min`/`max` (todos no formato
+ * 'YYYY-MM-DD') e emite `dateChange` com a data selecionada. Não implementa
+ * ControlValueAccessor — o host (ex: matcha-date) é quem mantém o valor.
+ *
+ * Tradução via {@link MatchaCalendarIntl} (global) ou pelos @Inputs de label
+ * (override por instância). Os arrays de label são CACHEADOS dentro das
+ * células, por isso reconstruímos as células quando `intl.changes` emite.
+ */
+class MatchaCalendarPickerComponent {
+    constructor(intl, cdr) {
+        this.intl = intl;
+        this.cdr = cdr;
+        /** Data selecionada no formato 'YYYY-MM-DD' (ou null). */
+        this.value = null;
+        /** Limite inferior 'YYYY-MM-DD' (ou '' para sem limite). */
+        this.min = '';
+        /** Limite superior 'YYYY-MM-DD' (ou '' para sem limite). */
+        this.max = '';
+        /** Emite a data selecionada no formato 'YYYY-MM-DD'. */
+        this.dateChange = new EventEmitter();
+        // Expor o tipo para o template
+        this.view = 'day';
+        // Caches reconstruídos a cada mudança de input/intl
+        this.weekdayHeaders = [];
+        this.dayCells = [];
+        this.monthCells = [];
+        this.yearCells = [];
+        this.selectedDate = null;
+        this.minDate = null;
+        this.maxDate = null;
+        this.userNavigated = false;
+        this.intlSub = this.intl.changes.subscribe(() => {
+            // Labels ficam cacheados nas células: reconstruir, não só markForCheck.
+            this.rebuildAll();
+            this.cdr.markForCheck();
+        });
+        this.initActiveFromToday();
+    }
+    ngOnChanges(changes) {
+        if (changes['min'] || changes['max']) {
+            this.parseBounds();
+        }
+        if (changes['value']) {
+            this.parseSelection();
+            // Só re-sincroniza o período exibido com a seleção se o usuário ainda
+            // não navegou manualmente (evita "voltar" a tela ao re-vincular value).
+            if (!this.userNavigated) {
+                this.syncActiveToSelection();
+            }
+        }
+        this.rebuildAll();
+    }
+    ngOnDestroy() {
+        this.intlSub?.unsubscribe();
+    }
+    // ---------------------------------------------------------------------------
+    // Labels (híbrido: @Input tem prioridade sobre o serviço)
+    // ---------------------------------------------------------------------------
+    get months() {
+        return this.monthNames ?? this.intl.monthNames;
+    }
+    get monthsShort() {
+        return this.monthNamesShort ?? this.intl.monthNamesShort;
+    }
+    get weekdays() {
+        return this.weekdayNamesShort ?? this.intl.weekdayNamesShort;
+    }
+    get activeMonthLabelShort() {
+        return this.monthsShort[this.activeMonth] ?? '';
+    }
+    get decadeLabel() {
+        return `${this.decadeStart}-${this.decadeStart + 9}`;
+    }
+    // ---------------------------------------------------------------------------
+    // Parse / format (timezone-safe: sempre componentes locais)
+    // ---------------------------------------------------------------------------
+    parseYmd(s) {
+        if (!s || !/^\d{4}-\d{2}-\d{2}$/.test(s)) {
+            return null;
+        }
+        const [y, m, d] = s.split('-').map(Number);
+        const dt = new Date(y, m - 1, d);
+        if (dt.getFullYear() !== y || dt.getMonth() + 1 !== m || dt.getDate() !== d) {
+            return null;
+        }
+        return { y, m: m - 1, d };
+    }
+    formatYmd(y, m0, d) {
+        return `${y}-${String(m0 + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+    }
+    parseSelection() {
+        this.selectedDate = this.parseYmd(this.value);
+    }
+    parseBounds() {
+        const min = this.parseYmd(this.min);
+        const max = this.parseYmd(this.max);
+        this.minDate = min ? new Date(min.y, min.m, min.d) : null;
+        this.maxDate = max ? new Date(max.y, max.m, max.d) : null;
+    }
+    // ---------------------------------------------------------------------------
+    // Inicialização do período exibido
+    // ---------------------------------------------------------------------------
+    initActiveFromToday() {
+        const now = new Date();
+        this.activeYear = now.getFullYear();
+        this.activeMonth = now.getMonth();
+        this.decadeStart = Math.floor(this.activeYear / 10) * 10;
+    }
+    /** Posiciona o período exibido na seleção, ou hoje, clampando para [min,max]. */
+    syncActiveToSelection() {
+        let y;
+        let m0;
+        if (this.selectedDate) {
+            y = this.selectedDate.y;
+            m0 = this.selectedDate.m;
+        }
+        else {
+            const now = new Date();
+            y = now.getFullYear();
+            m0 = now.getMonth();
+        }
+        // Clampar para o mês válido mais próximo quando o alvo cai fora de [min,max].
+        const target = new Date(y, m0, 1);
+        if (this.minDate && target.getTime() < new Date(this.minDate.getFullYear(), this.minDate.getMonth(), 1).getTime()) {
+            y = this.minDate.getFullYear();
+            m0 = this.minDate.getMonth();
+        }
+        else if (this.maxDate && target.getTime() > new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), 1).getTime()) {
+            y = this.maxDate.getFullYear();
+            m0 = this.maxDate.getMonth();
+        }
+        this.activeYear = y;
+        this.activeMonth = m0;
+        this.decadeStart = Math.floor(this.activeYear / 10) * 10;
+    }
+    /** Reposiciona a view ao reabrir (chamado pelo host). */
+    resetView() {
+        this.view = 'day';
+        this.userNavigated = false;
+        this.syncActiveToSelection();
+        this.rebuildAll();
+        this.cdr.markForCheck();
+    }
+    // ---------------------------------------------------------------------------
+    // Construção das grids / labels
+    // ---------------------------------------------------------------------------
+    rebuildAll() {
+        this.weekdayHeaders = [...this.weekdays];
+        this.buildDayGrid();
+        this.buildMonthGrid();
+        this.buildYearGrid();
+    }
+    buildDayGrid() {
+        const firstOfMonth = new Date(this.activeYear, this.activeMonth, 1);
+        const leading = firstOfMonth.getDay(); // 0..6 (Domingo = 0)
+        const gridStart = new Date(this.activeYear, this.activeMonth, 1 - leading);
+        const cells = [];
+        for (let i = 0; i < 42; i++) {
+            const dt = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
+            const y = dt.getFullYear();
+            const m0 = dt.getMonth();
+            const d = dt.getDate();
+            cells.push({
+                date: this.formatYmd(y, m0, d),
+                day: d,
+                inCurrentMonth: m0 === this.activeMonth,
+                selected: this.isSelected(y, m0, d),
+                disabled: this.isDateDisabled(dt),
+                isToday: this.isToday(y, m0, d)
+            });
+        }
+        this.dayCells = cells;
+    }
+    buildMonthGrid() {
+        this.monthCells = this.months.map((label, m0) => ({
+            month: m0,
+            label,
+            selected: !!this.selectedDate && this.selectedDate.y === this.activeYear && this.selectedDate.m === m0,
+            disabled: this.isMonthFullyOutOfRange(this.activeYear, m0)
+        }));
+    }
+    buildYearGrid() {
+        this.decadeStart = Math.floor(this.activeYear / 10) * 10;
+        const cells = [];
+        for (let i = 0; i < 12; i++) {
+            const yr = this.decadeStart + i;
+            cells.push({
+                year: yr,
+                selected: !!this.selectedDate && this.selectedDate.y === yr,
+                disabled: this.isYearFullyOutOfRange(yr)
+            });
+        }
+        this.yearCells = cells;
+    }
+    // ---------------------------------------------------------------------------
+    // Predicados
+    // ---------------------------------------------------------------------------
+    isSelected(y, m0, d) {
+        return !!this.selectedDate
+            && this.selectedDate.y === y
+            && this.selectedDate.m === m0
+            && this.selectedDate.d === d;
+    }
+    isToday(y, m0, d) {
+        const now = new Date();
+        return now.getFullYear() === y && now.getMonth() === m0 && now.getDate() === d;
+    }
+    isDateDisabled(dt) {
+        const t = dt.getTime();
+        if (this.minDate && t < this.minDate.getTime()) {
+            return true;
+        }
+        if (this.maxDate && t > this.maxDate.getTime()) {
+            return true;
+        }
+        return false;
+    }
+    isMonthFullyOutOfRange(y, m0) {
+        const first = new Date(y, m0, 1);
+        const last = new Date(y, m0 + 1, 0); // último dia do mês
+        if (this.maxDate && first.getTime() > this.maxDate.getTime()) {
+            return true;
+        }
+        if (this.minDate && last.getTime() < this.minDate.getTime()) {
+            return true;
+        }
+        return false;
+    }
+    isYearFullyOutOfRange(y) {
+        const jan1 = new Date(y, 0, 1);
+        const dec31 = new Date(y, 11, 31);
+        if (this.maxDate && jan1.getTime() > this.maxDate.getTime()) {
+            return true;
+        }
+        if (this.minDate && dec31.getTime() < this.minDate.getTime()) {
+            return true;
+        }
+        return false;
+    }
+    // ---------------------------------------------------------------------------
+    // Navegação (setas)
+    // ---------------------------------------------------------------------------
+    prev() {
+        this.shift(-1);
+    }
+    next() {
+        this.shift(1);
+    }
+    shift(dir) {
+        this.userNavigated = true;
+        if (this.view === 'day') {
+            const dt = new Date(this.activeYear, this.activeMonth + dir, 1);
+            this.activeYear = dt.getFullYear();
+            this.activeMonth = dt.getMonth();
+        }
+        else if (this.view === 'month') {
+            this.activeYear += dir;
+        }
+        else {
+            this.activeYear += dir * 10;
+        }
+        this.rebuildAll();
+    }
+    // ---------------------------------------------------------------------------
+    // Troca de view (toggles do cabeçalho)
+    // ---------------------------------------------------------------------------
+    openMonthView() {
+        this.userNavigated = true;
+        this.view = 'month';
+        this.rebuildAll();
+    }
+    openYearView() {
+        this.userNavigated = true;
+        this.view = 'year';
+        this.rebuildAll();
+    }
+    // ---------------------------------------------------------------------------
+    // Seleção
+    // ---------------------------------------------------------------------------
+    selectDay(cell) {
+        if (cell.disabled) {
+            return;
+        }
+        this.dateChange.emit(cell.date);
+    }
+    selectMonth(cell) {
+        if (cell.disabled) {
+            return;
+        }
+        this.activeMonth = cell.month;
+        this.view = 'day';
+        this.rebuildAll();
+    }
+    selectYear(cell) {
+        if (cell.disabled) {
+            return;
+        }
+        this.activeYear = cell.year;
+        this.view = 'month';
+        this.rebuildAll();
+    }
+    /** trackBy para os grids (evita recriar nós ao reconstruir). */
+    trackByDate(_, cell) {
+        return cell.date;
+    }
+    trackByMonth(_, cell) {
+        return cell.month;
+    }
+    trackByYear(_, cell) {
+        return cell.year;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarPickerComponent, deps: [{ token: MatchaCalendarIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatchaCalendarPickerComponent, isStandalone: false, selector: "matcha-calendar-picker", inputs: { value: "value", min: "min", max: "max", monthNames: "monthNames", monthNamesShort: "monthNamesShort", weekdayNamesShort: "weekdayNamesShort" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"w-100-p p-8 background-surface color-text flex-column gap-md-16 gap-8\">\n    <!-- Cabe\u00E7alho -->\n    <div class=\"d-flex flex-align-center flex-space-between\">\n        <div class=\"min-w-0 d-flex flex-align-center gap-8\">\n            <!-- View de dias: toggle de ano + toggle de m\u00EAs -->\n            <ng-container *ngIf=\"view === 'day'\">\n                <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" (click)=\"openYearView()\">\n                    <span class=\"color-label\">\n                        {{ activeYear }}\n                    </span>\n                    <matcha-icon name=\"action_arrow_down\" color=\"label\" size=\"medium\"></matcha-icon>\n                </button>\n                <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" (click)=\"openMonthView()\">\n                    <span class=\"color-label\">\n                        {{ activeMonthLabelShort }}\n                    </span>\n                    <matcha-icon name=\"action_arrow_down\" color=\"label\" size=\"medium\"></matcha-icon>\n                </button>\n            </ng-container>\n\n            <!-- View de meses: toggle de ano -->\n            <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" *ngIf=\"view === 'month'\" (click)=\"openYearView()\">\n                <span class=\"color-label\">\n                    {{ activeYear }}\n                </span>\n                <matcha-icon name=\"action_arrow_down\" color=\"label\" size=\"medium\"></matcha-icon>\n            </button>\n\n            <!-- View de anos: r\u00F3tulo da d\u00E9cada -->\n            <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" *ngIf=\"view === 'year'\">\n                <span class=\"color-label\">\n                    {{ decadeLabel }}\n                </span>\n            </button>\n        </div>\n\n        <div class=\"d-sm-flex--force flex-sm-align-center d-none\">\n            <button type=\"button\" matcha-button link basic icon size=\"tiny\" color=\"accent\" (click)=\"prev()\" aria-label=\"Anterior\">\n                <matcha-icon name=\"chevron-left\"></matcha-icon>\n            </button>\n            <button type=\"button\" matcha-button link basic icon size=\"tiny\" color=\"accent\" (click)=\"next()\" aria-label=\"Pr\u00F3ximo\">\n                <matcha-icon name=\"chevron-right\"></matcha-icon>\n            </button>\n        </div>\n    </div>\n\n    <matcha-divider></matcha-divider>\n\n    <!-- View de dias -->\n    <div *ngIf=\"view === 'day'\">\n        <div class=\"matcha-calendar-weekdays\">\n            <span class=\"matcha-calendar-weekday\" *ngFor=\"let wd of weekdayHeaders\">{{ wd }}</span>\n        </div>\n        <div class=\"matcha-calendar-days\">\n            <button type=\"button\" class=\"matcha-calendar-day\" *ngFor=\"let cell of dayCells; trackBy: trackByDate\" [class.matcha-calendar-day-outside]=\"!cell.inCurrentMonth\" [class.matcha-calendar-day-selected]=\"cell.selected\" [class.matcha-calendar-day-today]=\"cell.isToday && !cell.selected\" [disabled]=\"cell.disabled\" [attr.aria-label]=\"cell.date\" [attr.aria-selected]=\"cell.selected\" (click)=\"selectDay(cell)\">\n                {{ cell.day }}\n            </button>\n        </div>\n    </div>\n\n    <!-- View de meses -->\n    <div class=\"matcha-calendar-month-view\" *ngIf=\"view === 'month'\">\n        <button type=\"button\" matcha-button color=\"surface\" *ngFor=\"let cell of monthCells; trackBy: trackByMonth\" [class.matcha-calendar-month-selected]=\"cell.selected\" [disabled]=\"cell.disabled\" [attr.aria-selected]=\"cell.selected\" (click)=\"selectMonth(cell)\">\n            <span class=\"color-label fw-400 fs-12\">\n                {{ cell.label }}\n            </span>\n        </button>\n    </div>\n\n    <!-- View de anos -->\n    <div class=\"matcha-calendar-year-view\" *ngIf=\"view === 'year'\">\n        <button type=\"button\" matcha-button color=\"surface\" class=\"h-36--force\" *ngFor=\"let cell of yearCells; trackBy: trackByYear\" [class.matcha-calendar-year-selected]=\"cell.selected\" [disabled]=\"cell.disabled\" [attr.aria-selected]=\"cell.selected\" (click)=\"selectYear(cell)\">\n            <span class=\"color-label fw-400 fs-12\">\n                {{ cell.year }}\n            </span>\n        </button>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }, { kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-calendar-picker', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"w-100-p p-8 background-surface color-text flex-column gap-md-16 gap-8\">\n    <!-- Cabe\u00E7alho -->\n    <div class=\"d-flex flex-align-center flex-space-between\">\n        <div class=\"min-w-0 d-flex flex-align-center gap-8\">\n            <!-- View de dias: toggle de ano + toggle de m\u00EAs -->\n            <ng-container *ngIf=\"view === 'day'\">\n                <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" (click)=\"openYearView()\">\n                    <span class=\"color-label\">\n                        {{ activeYear }}\n                    </span>\n                    <matcha-icon name=\"action_arrow_down\" color=\"label\" size=\"medium\"></matcha-icon>\n                </button>\n                <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" (click)=\"openMonthView()\">\n                    <span class=\"color-label\">\n                        {{ activeMonthLabelShort }}\n                    </span>\n                    <matcha-icon name=\"action_arrow_down\" color=\"label\" size=\"medium\"></matcha-icon>\n                </button>\n            </ng-container>\n\n            <!-- View de meses: toggle de ano -->\n            <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" *ngIf=\"view === 'month'\" (click)=\"openYearView()\">\n                <span class=\"color-label\">\n                    {{ activeYear }}\n                </span>\n                <matcha-icon name=\"action_arrow_down\" color=\"label\" size=\"medium\"></matcha-icon>\n            </button>\n\n            <!-- View de anos: r\u00F3tulo da d\u00E9cada -->\n            <button type=\"button\" matcha-button size=\"tiny\" class=\"px-8--force\" *ngIf=\"view === 'year'\">\n                <span class=\"color-label\">\n                    {{ decadeLabel }}\n                </span>\n            </button>\n        </div>\n\n        <div class=\"d-sm-flex--force flex-sm-align-center d-none\">\n            <button type=\"button\" matcha-button link basic icon size=\"tiny\" color=\"accent\" (click)=\"prev()\" aria-label=\"Anterior\">\n                <matcha-icon name=\"chevron-left\"></matcha-icon>\n            </button>\n            <button type=\"button\" matcha-button link basic icon size=\"tiny\" color=\"accent\" (click)=\"next()\" aria-label=\"Pr\u00F3ximo\">\n                <matcha-icon name=\"chevron-right\"></matcha-icon>\n            </button>\n        </div>\n    </div>\n\n    <matcha-divider></matcha-divider>\n\n    <!-- View de dias -->\n    <div *ngIf=\"view === 'day'\">\n        <div class=\"matcha-calendar-weekdays\">\n            <span class=\"matcha-calendar-weekday\" *ngFor=\"let wd of weekdayHeaders\">{{ wd }}</span>\n        </div>\n        <div class=\"matcha-calendar-days\">\n            <button type=\"button\" class=\"matcha-calendar-day\" *ngFor=\"let cell of dayCells; trackBy: trackByDate\" [class.matcha-calendar-day-outside]=\"!cell.inCurrentMonth\" [class.matcha-calendar-day-selected]=\"cell.selected\" [class.matcha-calendar-day-today]=\"cell.isToday && !cell.selected\" [disabled]=\"cell.disabled\" [attr.aria-label]=\"cell.date\" [attr.aria-selected]=\"cell.selected\" (click)=\"selectDay(cell)\">\n                {{ cell.day }}\n            </button>\n        </div>\n    </div>\n\n    <!-- View de meses -->\n    <div class=\"matcha-calendar-month-view\" *ngIf=\"view === 'month'\">\n        <button type=\"button\" matcha-button color=\"surface\" *ngFor=\"let cell of monthCells; trackBy: trackByMonth\" [class.matcha-calendar-month-selected]=\"cell.selected\" [disabled]=\"cell.disabled\" [attr.aria-selected]=\"cell.selected\" (click)=\"selectMonth(cell)\">\n            <span class=\"color-label fw-400 fs-12\">\n                {{ cell.label }}\n            </span>\n        </button>\n    </div>\n\n    <!-- View de anos -->\n    <div class=\"matcha-calendar-year-view\" *ngIf=\"view === 'year'\">\n        <button type=\"button\" matcha-button color=\"surface\" class=\"h-36--force\" *ngFor=\"let cell of yearCells; trackBy: trackByYear\" [class.matcha-calendar-year-selected]=\"cell.selected\" [disabled]=\"cell.disabled\" [attr.aria-selected]=\"cell.selected\" (click)=\"selectYear(cell)\">\n            <span class=\"color-label fw-400 fs-12\">\n                {{ cell.year }}\n            </span>\n        </button>\n    </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: MatchaCalendarIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], monthNames: [{
+                type: Input
+            }], monthNamesShort: [{
+                type: Input
+            }], weekdayNamesShort: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }] } });
+
+class MatchaDateComponent {
+    constructor(elRef, cdr) {
+        this.elRef = elRef;
+        this.cdr = cdr;
         this.placeholder = '__/__/____';
         this.min = '';
         this.max = '';
         this.disabled = false;
         this.showNativePicker = true; // Mostrar botão para abrir datepicker nativo
+        /**
+         * Define o que o botão de calendário faz ao ser clicado.
+         * - true (padrão): abre o datepicker nativo do navegador (comportamento histórico).
+         * - false: NÃO abre o nativo. A abertura passa a ser responsabilidade do
+         *   matcha-calendar-picker (Parte 2), que conterá essa lógica.
+         */
+        this.useNativePicker = true;
+        /**
+         * Quando true, o painel do matcha-calendar-picker NÃO dispara o evento global
+         * que fecha os demais painéis. Use quando este matcha-date estiver ANINHADO
+         * dentro de outro matcha-panel (ex: o modo "Personalizado" do matcha-period),
+         * para que abrir o calendário não feche o painel pai.
+         */
+        this.suppressPanelGlobalClose = false;
+        /**
+         * Emite o elemento do painel do calendário quando ele abre/fecha. O painel
+         * pai (quando aninhado) usa esses elementos em `ignoreClickOutsideElements`
+         * para não fechar ao clicar dentro do calendário.
+         */
+        this.calendarPanelOpened = new EventEmitter();
+        this.calendarPanelClosed = new EventEmitter();
         this.value = '';
         this.displayValue = '';
         this.isDisabled = false;
@@ -9263,6 +9682,18 @@ class MatchaDateComponent {
         this.onChange = (value) => { };
         this.onTouched = () => { };
     }
+    ngAfterViewInit() {
+        // Quando o picker nativo está desligado, ancoramos o painel do calendário
+        // ao matcha-form-field (ou ao próprio host) — mesmo padrão do matcha-period.
+        if (!this.useNativePicker && this.calendarPanel) {
+            this.calendarPanel.attachTo(this.panelAnchor());
+        }
+    }
+    /** Elemento âncora do painel: o matcha-form-field envolvente, ou o host. */
+    panelAnchor() {
+        const formField = this.elRef.nativeElement.closest('matcha-form-field');
+        return formField || this.elRef.nativeElement;
+    }
     writeValue(value) {
         if (value) {
             // Se for um objeto Date, converter para YYYY-MM-DD (usando componentes locais)
@@ -9470,7 +9901,30 @@ class MatchaDateComponent {
         }
     }
     openNativeDatePicker() {
-        if (this.nativeDateInput?.nativeElement && !this.disabled && !this.isDisabled) {
+        if (this.disabled || this.isDisabled) {
+            return;
+        }
+        // Picker nativo desligado: abrir o matcha-calendar-picker no painel.
+        if (!this.useNativePicker) {
+            if (this.calendarPanel) {
+                this.calendarPanel.attachTo(this.panelAnchor());
+                if (this.calendarPanel.open) {
+                    this.calendarPanel.closePanel();
+                }
+                else {
+                    // Reposiciona a view na seleção atual ao (re)abrir.
+                    this.calendarPicker?.resetView();
+                    this.calendarPanel.openPanel();
+                    // Avisa o painel pai (quando aninhado) sobre o overlay do calendário.
+                    this.lastCalendarPane = this.calendarPanel.paneRef?.nativeElement;
+                    if (this.lastCalendarPane) {
+                        this.calendarPanelOpened.emit(this.lastCalendarPane);
+                    }
+                }
+            }
+            return;
+        }
+        if (this.nativeDateInput?.nativeElement) {
             // Verificar se showPicker está disponível (suporte moderno)
             if (typeof this.nativeDateInput.nativeElement.showPicker === 'function') {
                 this.nativeDateInput.nativeElement.showPicker();
@@ -9482,6 +9936,29 @@ class MatchaDateComponent {
             }
         }
     }
+    /** Dia selecionado no matcha-calendar-picker (recebe 'YYYY-MM-DD'). */
+    onCalendarDateSelected(ymd) {
+        this.value = ymd;
+        this.displayValue = this.formatDateForDisplay(ymd);
+        if (this.nativeDateInput?.nativeElement) {
+            this.nativeDateInput.nativeElement.value = ymd;
+        }
+        if (this.textInput?.nativeElement) {
+            this.textInput.nativeElement.value = this.displayValue;
+        }
+        this.onChange(ymd);
+        this.onTouched();
+        this.calendarPanel?.closePanel();
+        this.cdr.detectChanges();
+    }
+    onCalendarPanelClosed() {
+        this.onTouched();
+        // Libera o overlay registrado no painel pai (quando aninhado).
+        if (this.lastCalendarPane) {
+            this.calendarPanelClosed.emit(this.lastCalendarPane);
+            this.lastCalendarPane = undefined;
+        }
+    }
     isValidDateFormat(date, format) {
         if (format === 'DD/MM/YYYY') {
             return /^\d{2}\/\d{2}\/\d{4}$/.test(date);
@@ -9512,14 +9989,14 @@ class MatchaDateComponent {
         const [year, month, day] = yyyyMMdd.split('-');
         return `${day}/${month}/${year}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatchaDateComponent, isStandalone: false, selector: "matcha-date", inputs: { placeholder: "placeholder", min: "min", max: "max", disabled: "disabled", showNativePicker: "showNativePicker" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaDateComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatchaDateComponent, isStandalone: false, selector: "matcha-date", inputs: { placeholder: "placeholder", min: "min", max: "max", disabled: "disabled", showNativePicker: "showNativePicker", useNativePicker: "useNativePicker", suppressPanelGlobalClose: "suppressPanelGlobalClose" }, outputs: { calendarPanelOpened: "calendarPanelOpened", calendarPanelClosed: "calendarPanelClosed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaDateComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "nativeDateInput", first: true, predicate: ["nativeDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"matcha-date-container\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"matcha-date-input\"\n    [value]=\"displayValue\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isDisabled\"\n    maxlength=\"10\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n  />\n\n  <!-- Input nativo de data (hidden) para usar o datepicker nativo -->\n  <input\n    #nativeDateInput\n    type=\"date\"\n    class=\"matcha-date-native-input\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [disabled]=\"disabled || isDisabled\"\n    (change)=\"onNativeDateChange($event)\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Bot\u00E3o para abrir datepicker nativo (opcional) -->\n  <button\n    *ngIf=\"showNativePicker && !disabled && !isDisabled\"\n    type=\"button\"\n    class=\"matcha-date-picker-button mr--12\"\n    (click)=\"openNativeDatePicker()\"\n    [disabled]=\"disabled || isDisabled\"\n    aria-label=\"Abrir seletor de data\"\n    tabindex=\"0\"\n  >\n    <span class=\"i-matcha-calendar color-grey\"></span>\n  </button>\n</div>\n\n", styles: [".matcha-date-container{position:relative;display:flex;align-items:center;width:100%}.matcha-date-input{width:100%}.matcha-date-native-input{position:absolute;right:0;bottom:0;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.matcha-date-picker-button{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--matcha-color-primary, #333);z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "nativeDateInput", first: true, predicate: ["nativeDateInput"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: MatchaPanelComponent, descendants: true }, { propertyName: "calendarPicker", first: true, predicate: MatchaCalendarPickerComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-date-container\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"matcha-date-input\"\n    [value]=\"displayValue\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isDisabled\"\n    maxlength=\"10\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n  />\n\n  <!-- Input nativo de data (hidden) para usar o datepicker nativo -->\n  <input\n    #nativeDateInput\n    type=\"date\"\n    class=\"matcha-date-native-input\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [disabled]=\"disabled || isDisabled\"\n    (change)=\"onNativeDateChange($event)\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Bot\u00E3o para abrir o seletor (nativo ou matcha-calendar-picker) -->\n  <button\n    *ngIf=\"(showNativePicker || !useNativePicker) && !disabled && !isDisabled\"\n    type=\"button\"\n    class=\"matcha-date-picker-button mr--12\"\n    (click)=\"openNativeDatePicker()\"\n    [disabled]=\"disabled || isDisabled\"\n    aria-label=\"Abrir seletor de data\"\n    tabindex=\"0\"\n  >\n    <span class=\"i-matcha-calendar color-grey\"></span>\n  </button>\n\n  <!-- Calend\u00E1rio customizado (usado quando useNativePicker=false) -->\n  <matcha-panel\n    *ngIf=\"!useNativePicker\"\n    [portalToBody]=\"true\"\n    [minWidth]=\"260\"\n    [maxHeight]=\"380\"\n    placement=\"auto\"\n    [suppressGlobalClose]=\"suppressPanelGlobalClose\"\n    (closed)=\"onCalendarPanelClosed()\"\n  >\n    <matcha-calendar-picker\n      [value]=\"value || null\"\n      [min]=\"min\"\n      [max]=\"max\"\n      (dateChange)=\"onCalendarDateSelected($event)\"\n    ></matcha-calendar-picker>\n  </matcha-panel>\n</div>\n\n", styles: [".matcha-date-container{position:relative;display:flex;align-items:center;width:100%}.matcha-date-input{width:100%}.matcha-date-native-input{position:absolute;right:0;bottom:0;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.matcha-date-picker-button{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--matcha-color-primary, #333);z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "widthMode", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }, { kind: "component", type: MatchaCalendarPickerComponent, selector: "matcha-calendar-picker", inputs: ["value", "min", "max", "monthNames", "monthNamesShort", "weekdayNamesShort"], outputs: ["dateChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaDateComponent, decorators: [{
             type: Component,
@@ -9529,8 +10006,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => MatchaDateComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"matcha-date-container\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"matcha-date-input\"\n    [value]=\"displayValue\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isDisabled\"\n    maxlength=\"10\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n  />\n\n  <!-- Input nativo de data (hidden) para usar o datepicker nativo -->\n  <input\n    #nativeDateInput\n    type=\"date\"\n    class=\"matcha-date-native-input\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [disabled]=\"disabled || isDisabled\"\n    (change)=\"onNativeDateChange($event)\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Bot\u00E3o para abrir datepicker nativo (opcional) -->\n  <button\n    *ngIf=\"showNativePicker && !disabled && !isDisabled\"\n    type=\"button\"\n    class=\"matcha-date-picker-button mr--12\"\n    (click)=\"openNativeDatePicker()\"\n    [disabled]=\"disabled || isDisabled\"\n    aria-label=\"Abrir seletor de data\"\n    tabindex=\"0\"\n  >\n    <span class=\"i-matcha-calendar color-grey\"></span>\n  </button>\n</div>\n\n", styles: [".matcha-date-container{position:relative;display:flex;align-items:center;width:100%}.matcha-date-input{width:100%}.matcha-date-native-input{position:absolute;right:0;bottom:0;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.matcha-date-picker-button{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--matcha-color-primary, #333);z-index:1}\n"] }]
-        }], propDecorators: { placeholder: [{
+                    ], template: "<div class=\"matcha-date-container\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"matcha-date-input\"\n    [value]=\"displayValue\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || isDisabled\"\n    maxlength=\"10\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n  />\n\n  <!-- Input nativo de data (hidden) para usar o datepicker nativo -->\n  <input\n    #nativeDateInput\n    type=\"date\"\n    class=\"matcha-date-native-input\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [disabled]=\"disabled || isDisabled\"\n    (change)=\"onNativeDateChange($event)\"\n    tabindex=\"-1\"\n  />\n\n  <!-- Bot\u00E3o para abrir o seletor (nativo ou matcha-calendar-picker) -->\n  <button\n    *ngIf=\"(showNativePicker || !useNativePicker) && !disabled && !isDisabled\"\n    type=\"button\"\n    class=\"matcha-date-picker-button mr--12\"\n    (click)=\"openNativeDatePicker()\"\n    [disabled]=\"disabled || isDisabled\"\n    aria-label=\"Abrir seletor de data\"\n    tabindex=\"0\"\n  >\n    <span class=\"i-matcha-calendar color-grey\"></span>\n  </button>\n\n  <!-- Calend\u00E1rio customizado (usado quando useNativePicker=false) -->\n  <matcha-panel\n    *ngIf=\"!useNativePicker\"\n    [portalToBody]=\"true\"\n    [minWidth]=\"260\"\n    [maxHeight]=\"380\"\n    placement=\"auto\"\n    [suppressGlobalClose]=\"suppressPanelGlobalClose\"\n    (closed)=\"onCalendarPanelClosed()\"\n  >\n    <matcha-calendar-picker\n      [value]=\"value || null\"\n      [min]=\"min\"\n      [max]=\"max\"\n      (dateChange)=\"onCalendarDateSelected($event)\"\n    ></matcha-calendar-picker>\n  </matcha-panel>\n</div>\n\n", styles: [".matcha-date-container{position:relative;display:flex;align-items:center;width:100%}.matcha-date-input{width:100%}.matcha-date-native-input{position:absolute;right:0;bottom:0;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.matcha-date-picker-button{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--matcha-color-primary, #333);z-index:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], min: [{
                 type: Input
@@ -9540,20 +10017,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], showNativePicker: [{
                 type: Input
+            }], useNativePicker: [{
+                type: Input
+            }], suppressPanelGlobalClose: [{
+                type: Input
+            }], calendarPanelOpened: [{
+                type: Output
+            }], calendarPanelClosed: [{
+                type: Output
             }], textInput: [{
                 type: ViewChild,
                 args: ['textInput']
             }], nativeDateInput: [{
                 type: ViewChild,
                 args: ['nativeDateInput']
+            }], calendarPanel: [{
+                type: ViewChild,
+                args: [MatchaPanelComponent]
+            }], calendarPicker: [{
+                type: ViewChild,
+                args: [MatchaCalendarPickerComponent]
             }] } });
 
+class MatchaCalendarPickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarPickerModule, declarations: [MatchaCalendarPickerComponent], imports: [CommonModule,
+            MatchaCardModule,
+            MatchaIconModule,
+            MatchaDividerModule], exports: [MatchaCalendarPickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarPickerModule, imports: [CommonModule,
+            MatchaCardModule,
+            MatchaIconModule,
+            MatchaDividerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaCalendarPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaCalendarPickerComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatchaCardModule,
+                        MatchaIconModule,
+                        MatchaDividerModule
+                    ],
+                    exports: [
+                        MatchaCalendarPickerComponent
+                    ]
+                    // MatchaCalendarIntl é providedIn: 'root' — NÃO declarar em providers aqui
+                    // (evita instância duplicada em módulos lazy).
+                }]
+        }] });
+
 class MatchaDateModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatchaDateModule, declarations: [MatchaDateComponent], imports: [CommonModule,
-            FormsModule], exports: [MatchaDateComponent] }); }
+            FormsModule,
+            MatchaPanelModule,
+            MatchaCalendarPickerModule], exports: [MatchaDateComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaDateModule, imports: [CommonModule,
-            FormsModule] }); }
+            FormsModule,
+            MatchaPanelModule,
+            MatchaCalendarPickerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaDateModule, decorators: [{
             type: NgModule,
@@ -9563,7 +10089,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ],
                     imports: [
                         CommonModule,
-                        FormsModule
+                        FormsModule,
+                        MatchaPanelModule,
+                        MatchaCalendarPickerModule
                     ],
                     exports: [
                         MatchaDateComponent
@@ -9597,6 +10125,488 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+class MatchaPeriodComponent {
+    constructor(elRef, cdr) {
+        this.elRef = elRef;
+        this.cdr = cdr;
+        /** Lista de presets exibidos. Cada preset é auto-contido (ver matcha-period.types). */
+        this.presets = [];
+        /** Habilita a opção "Personalizado" (com Data início / Data fim). */
+        this.allowCustom = true;
+        /** Texto exibido no gatilho quando não há valor. */
+        this.placeholder = 'Selecione o período';
+        /** Rótulo da opção de período personalizado. */
+        this.customLabel = 'Personalizado';
+        /** Formato do intervalo exibido no gatilho. */
+        this.displayFormat = 'dd/MM/yy';
+        this.disabled = false;
+        // Repasse ao matcha-panel
+        this.placement = 'auto';
+        this.maxHeight = 360;
+        this.minWidth = 240;
+        /** Emite sempre que um intervalo é definido (preset selecionado ou "Aplicar" do custom). */
+        this.periodChange = new EventEmitter();
+        this.opened = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.openedChange = new EventEmitter();
+        this.value = null;
+        this.open = false;
+        this.showingCustom = false;
+        /**
+         * Overlays dos calendários (matcha-date aninhados no modo personalizado).
+         * Repassados ao painel via `ignoreClickOutsideElements` para que clicar
+         * dentro de um calendário não feche o painel do período.
+         */
+        this.calendarOverlays = [];
+        // Modo personalizado: formulário consumido por matcha-date-range + matcha-date.
+        // Cada matcha-date escreve 'YYYY-MM-DD' (ou null quando incompleto/ inválido).
+        this.customForm = new FormGroup({
+            start: new FormControl(null),
+            end: new FormControl(null)
+        });
+        this.customError = '';
+        // Navegação por teclado (índice na lista lógica: presets + opção custom)
+        this.activeIndex = -1;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.isDisabledByForm = false;
+        // Limpa o erro de validação assim que o usuário edita os campos de data.
+        this.customForm.valueChanges.subscribe(() => {
+            if (this.customError) {
+                this.customError = '';
+            }
+        });
+    }
+    get isCurrentlyDisabled() {
+        return this.disabled || this.isDisabledByForm;
+    }
+    get hostDisabledClass() {
+        return this.isCurrentlyDisabled;
+    }
+    get hostDisabledAttr() {
+        return this.isCurrentlyDisabled ? '' : null;
+    }
+    /** Quantidade total de itens navegáveis (presets + custom, se habilitado). */
+    get navCount() {
+        return this.presets.length + (this.allowCustom ? 1 : 0);
+    }
+    ngAfterViewInit() {
+        const formField = this.elRef.nativeElement.closest('matcha-form-field');
+        const anchor = formField || this.elRef.nativeElement;
+        if (this.panel) {
+            this.panel.attachTo(anchor);
+        }
+        this.triggerElement = this.elRef.nativeElement.querySelector('.matcha-period-trigger') || undefined;
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Exibição
+    // ---------------------------------------------------------------------------
+    /** Rótulo exibido no gatilho: intervalo formatado ou placeholder. */
+    get triggerLabel() {
+        if (!this.value) {
+            return this.placeholder;
+        }
+        return `${this.formatDate(this.value.start)} - ${this.formatDate(this.value.end)}`;
+    }
+    get hasValue() {
+        return this.value !== null;
+    }
+    isPresetSelected(preset) {
+        return !!this.value && this.value.presetKey === preset.key;
+    }
+    get isCustomSelected() {
+        return !!this.value && this.value.presetKey === null;
+    }
+    // Limites recíprocos do modo personalizado (formato 'YYYY-MM-DD' esperado pelo matcha-date):
+    // a data de início não pode passar da data de fim, e a de fim não pode ser anterior à de início.
+    // Desabilita as datas inválidas diretamente no seletor nativo via min/max.
+    get customStartMax() {
+        return this.customForm.value.end ?? '';
+    }
+    get customEndMin() {
+        return this.customForm.value.start ?? '';
+    }
+    formatDate(date) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return this.displayFormat === 'dd/MM/yyyy'
+            ? `${day}/${month}/${year}`
+            : `${day}/${month}/${String(year).slice(-2)}`;
+    }
+    // ---------------------------------------------------------------------------
+    // Abertura / fechamento do painel
+    // ---------------------------------------------------------------------------
+    onTriggerClick() {
+        if (this.isCurrentlyDisabled) {
+            return;
+        }
+        this.open ? this.closePanel() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isCurrentlyDisabled) {
+            return;
+        }
+        const formField = this.elRef.nativeElement.closest('matcha-form-field');
+        const anchor = formField || this.elRef.nativeElement;
+        this.open = true;
+        this.calendarOverlays = [];
+        // Reabre já no modo personalizado se o valor atual for custom
+        this.showingCustom = this.isCustomSelected;
+        if (this.showingCustom) {
+            this.syncCustomInputsFromValue();
+        }
+        this.activeIndex = -1;
+        this.cdr.detectChanges();
+        this.panel.attachTo(anchor);
+        this.panel.openPanel();
+        if (this.showingCustom) {
+            this.scrollCustomIntoView();
+        }
+        this.opened.emit();
+        this.openedChange.emit(true);
+    }
+    closePanel() {
+        if (!this.open) {
+            return;
+        }
+        this.open = false;
+        this.activeIndex = -1;
+        this.calendarOverlays = [];
+        this.panel.closePanel();
+        this.closed.emit();
+        this.openedChange.emit(false);
+        this.onTouched();
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Seleção
+    // ---------------------------------------------------------------------------
+    selectPreset(preset) {
+        const range = preset.getRange();
+        this.commitValue({ start: range.start, end: range.end, presetKey: preset.key });
+        this.showingCustom = false;
+        this.customError = '';
+        this.closePanel();
+    }
+    /**
+     * Registra o overlay de um calendário aninhado (ao abrir) para ignorá-lo no
+     * click-outside do painel do período.
+     *
+     * NÃO removemos o overlay quando o calendário fecha: selecionar uma data fecha
+     * o calendário no MESMO clique que ainda propaga até o listener de click-outside
+     * do período. Como o `composedPath()` desse clique ainda contém o pane (mesmo já
+     * destruído), mantê-lo na lista evita que o período feche junto. Panes destruídos
+     * são inofensivos (nunca casam com cliques futuros) e a lista é zerada ao abrir/
+     * fechar o período.
+     */
+    registerCalendarOverlay(el) {
+        if (el && !this.calendarOverlays.includes(el)) {
+            this.calendarOverlays = [...this.calendarOverlays, el];
+            this.cdr.detectChanges();
+        }
+    }
+    /** Abre/realça a área de período personalizado, mantendo o painel aberto. */
+    toggleCustom() {
+        this.showingCustom = true;
+        this.customError = '';
+        this.syncCustomInputsFromValue();
+        this.cdr.detectChanges();
+        this.scrollCustomIntoView();
+    }
+    /**
+     * Rola o editor personalizado para dentro da área visível do painel.
+     *
+     * O painel tem scroll interno limitado por `maxHeight`; ao expandir o editor
+     * (que é inserido no fim da lista) o conteúdo novo pode ficar abaixo da dobra.
+     * Sem isso, o usuário precisaria rolar manualmente para ver os campos de data.
+     *
+     * `block: 'nearest'` garante o mínimo de rolagem necessária e evita mexer no
+     * scroll da página. Adiado por rAF para rodar após a renderização do *ngIf e
+     * o reposicionamento do painel (ResizeObserver).
+     */
+    scrollCustomIntoView() {
+        if (typeof requestAnimationFrame === 'undefined') {
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.customEditorRef?.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        });
+    }
+    applyCustom() {
+        const start = this.parseDate(this.customForm.value.start ?? null);
+        const end = this.parseDate(this.customForm.value.end ?? null);
+        if (!start || !end) {
+            this.customError = 'Informe datas válidas no formato DD/MM/AAAA.';
+            this.cdr.detectChanges();
+            return;
+        }
+        if (start.getTime() > end.getTime()) {
+            this.customError = 'A data de início não pode ser posterior à data de fim.';
+            this.cdr.detectChanges();
+            return;
+        }
+        this.customError = '';
+        this.commitValue({ start, end, presetKey: null });
+        this.closePanel();
+    }
+    commitValue(value) {
+        this.value = value;
+        // Atualiza o FormControl ANTES de emitir o evento: consumidores que leem o
+        // valor atual do formulário dentro do handler de `periodChange` precisam já
+        // enxergar o novo valor. Emitir antes do `onChange` faria o handler ler o
+        // valor anterior.
+        this.onChange(value);
+        this.onTouched();
+        this.periodChange.emit(value);
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Campos do modo personalizado (delegados a matcha-date-range + matcha-date)
+    // ---------------------------------------------------------------------------
+    /** Converte uma string 'YYYY-MM-DD' válida em Date; retorna null caso contrário. */
+    parseDate(value) {
+        if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+            return null;
+        }
+        const [year, month, day] = value.split('-').map(Number);
+        const date = new Date(year, month - 1, day);
+        // Garante que a data existe (rejeita 31/02, etc.)
+        if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
+            return null;
+        }
+        return date;
+    }
+    syncCustomInputsFromValue() {
+        if (this.value) {
+            this.customForm.setValue({
+                start: this.toInputValue(this.value.start),
+                end: this.toInputValue(this.value.end)
+            }, { emitEvent: false });
+        }
+    }
+    /** Formata um Date para o formato consumido pelo matcha-date ('YYYY-MM-DD'). */
+    toInputValue(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    // ---------------------------------------------------------------------------
+    // Navegação por teclado
+    // ---------------------------------------------------------------------------
+    onTriggerKeyDown(event) {
+        if (this.isCurrentlyDisabled) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.open) {
+                    this.openPanel();
+                }
+                else {
+                    this.moveActive(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.open) {
+                    this.moveActive(-1);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (!this.open) {
+                    this.openPanel();
+                }
+                else {
+                    this.activateCurrent();
+                }
+                break;
+            case 'Escape':
+                if (this.open) {
+                    event.preventDefault();
+                    this.closePanel();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    moveActive(delta) {
+        const count = this.navCount;
+        if (count === 0) {
+            return;
+        }
+        if (this.activeIndex < 0) {
+            this.activeIndex = delta > 0 ? 0 : count - 1;
+        }
+        else {
+            this.activeIndex = (this.activeIndex + delta + count) % count;
+        }
+        this.cdr.detectChanges();
+    }
+    isActiveIndex(index) {
+        return this.activeIndex === index;
+    }
+    get isCustomActive() {
+        return this.allowCustom && this.activeIndex === this.presets.length;
+    }
+    activateCurrent() {
+        if (this.activeIndex < 0) {
+            return;
+        }
+        if (this.activeIndex < this.presets.length) {
+            this.selectPreset(this.presets[this.activeIndex]);
+        }
+        else if (this.allowCustom) {
+            this.toggleCustom();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // ControlValueAccessor
+    // ---------------------------------------------------------------------------
+    writeValue(value) {
+        this.value = this.normalizeValue(value);
+        this.showingCustom = this.isCustomSelected;
+        if (this.showingCustom) {
+            this.syncCustomInputsFromValue();
+        }
+        this.cdr.detectChanges();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledByForm = isDisabled;
+        if (isDisabled && this.open) {
+            this.closePanel();
+        }
+        this.cdr.detectChanges();
+    }
+    /** Garante que start/end sejam Date (aceita strings/ISO vindas do FormControl). */
+    normalizeValue(value) {
+        if (!value || value.start == null || value.end == null) {
+            return null;
+        }
+        const start = value.start instanceof Date ? value.start : new Date(value.start);
+        const end = value.end instanceof Date ? value.end : new Date(value.end);
+        if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return null;
+        }
+        return { start, end, presetKey: value.presetKey ?? null };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaPeriodComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatchaPeriodComponent, isStandalone: false, selector: "matcha-period", inputs: { presets: "presets", allowCustom: "allowCustom", placeholder: "placeholder", customLabel: "customLabel", displayFormat: "displayFormat", disabled: "disabled", placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth" }, outputs: { periodChange: "periodChange", opened: "opened", closed: "closed", openedChange: "openedChange" }, host: { properties: { "class.matcha-period-disabled": "this.hostDisabledClass", "attr.disabled": "this.hostDisabledAttr" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MatchaPeriodComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }, { propertyName: "customEditorRef", first: true, predicate: ["customEditor"], descendants: true }], ngImport: i0, template: "<div class=\"position-relative d-inline-block w-100-p\">\n  <div class=\"matcha-period-trigger d-flex flex-align-center flex-space-between cursor-pointer\"\n    [class.matcha-period-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKeyDown($event)\" [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\"\n    [attr.aria-expanded]=\"open\" [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-period-value\" [class.matcha-period-placeholder]=\"!hasValue\">\n      {{ triggerLabel }}\n    </span>\n\n    <span class=\"matcha-period-arrow\" [class.matcha-period-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n    [portalToBody]=\"true\" [ignoreClickOutsideElements]=\"calendarOverlays\" (closed)=\"closePanel()\">\n\n    <div class=\"py-4\" role=\"listbox\">\n      <!-- Lista de presets -->\n      <div *ngFor=\"let preset of presets; let i = index\" class=\"matcha-period-option\" role=\"option\"\n        [class.matcha-period-option-selected]=\"isPresetSelected(preset)\"\n        [class.matcha-period-option-active]=\"isActiveIndex(i)\" [attr.aria-selected]=\"isPresetSelected(preset)\"\n        (click)=\"selectPreset(preset)\">\n        {{ preset.label }}\n      </div>\n\n      <!-- Op\u00E7\u00E3o \"Personalizado\" -->\n      <ng-container *ngIf=\"allowCustom\">\n        <matcha-divider gap=\"8\"></matcha-divider>\n\n        <div class=\"matcha-period-option\" role=\"option\"\n          [class.matcha-period-option-selected]=\"isCustomSelected || showingCustom\"\n          [class.matcha-period-option-active]=\"isCustomActive\" [attr.aria-selected]=\"isCustomSelected\"\n          (click)=\"toggleCustom()\">\n          {{ customLabel }}\n        </div>\n\n        <!-- Editor de per\u00EDodo personalizado (reaproveita matcha-date-range + matcha-date) -->\n        <div #customEditor class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n          <matcha-date-range>\n            <matcha-form-field>\n              <matcha-label>Data in\u00EDcio</matcha-label>\n              <matcha-date formControlName=\"start\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n                [max]=\"customStartMax\" [suppressPanelGlobalClose]=\"true\"\n                (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n            </matcha-form-field>\n            <matcha-form-field>\n              <matcha-label>Data fim</matcha-label>\n              <matcha-date formControlName=\"end\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n                [min]=\"customEndMin\" [suppressPanelGlobalClose]=\"true\"\n                (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n            </matcha-form-field>\n          </matcha-date-range>\n\n          <div class=\"color-red fs-12 mt-8\" *ngIf=\"customError\">{{ customError }}</div>\n\n          <button matcha-button color=\"accent\" size=\"small\" type=\"button\" class=\"w-100-p mt-12\"\n            (click)=\"applyCustom()\">\n            Aplicar\n          </button>\n        </div>\n      </ng-container>\n    </div>\n  </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "widthMode", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon", "badge"] }, { kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }, { kind: "component", type: MatchaDateComponent, selector: "matcha-date", inputs: ["placeholder", "min", "max", "disabled", "showNativePicker", "useNativePicker", "suppressPanelGlobalClose"], outputs: ["calendarPanelOpened", "calendarPanelClosed"] }, { kind: "component", type: MatchaDateRangeComponent, selector: "matcha-date-range" }, { kind: "component", type: MatchaFormFieldComponent, selector: "matcha-form-field", inputs: ["color", "size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl"] }, { kind: "component", type: MatchaLabelComponent, selector: "matcha-label", inputs: ["color"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaPeriodComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-period', encapsulation: ViewEncapsulation.None, standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MatchaPeriodComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"position-relative d-inline-block w-100-p\">\n  <div class=\"matcha-period-trigger d-flex flex-align-center flex-space-between cursor-pointer\"\n    [class.matcha-period-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKeyDown($event)\" [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\"\n    [attr.aria-expanded]=\"open\" [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n    <span class=\"matcha-period-value\" [class.matcha-period-placeholder]=\"!hasValue\">\n      {{ triggerLabel }}\n    </span>\n\n    <span class=\"matcha-period-arrow\" [class.matcha-period-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n    [portalToBody]=\"true\" [ignoreClickOutsideElements]=\"calendarOverlays\" (closed)=\"closePanel()\">\n\n    <div class=\"py-4\" role=\"listbox\">\n      <!-- Lista de presets -->\n      <div *ngFor=\"let preset of presets; let i = index\" class=\"matcha-period-option\" role=\"option\"\n        [class.matcha-period-option-selected]=\"isPresetSelected(preset)\"\n        [class.matcha-period-option-active]=\"isActiveIndex(i)\" [attr.aria-selected]=\"isPresetSelected(preset)\"\n        (click)=\"selectPreset(preset)\">\n        {{ preset.label }}\n      </div>\n\n      <!-- Op\u00E7\u00E3o \"Personalizado\" -->\n      <ng-container *ngIf=\"allowCustom\">\n        <matcha-divider gap=\"8\"></matcha-divider>\n\n        <div class=\"matcha-period-option\" role=\"option\"\n          [class.matcha-period-option-selected]=\"isCustomSelected || showingCustom\"\n          [class.matcha-period-option-active]=\"isCustomActive\" [attr.aria-selected]=\"isCustomSelected\"\n          (click)=\"toggleCustom()\">\n          {{ customLabel }}\n        </div>\n\n        <!-- Editor de per\u00EDodo personalizado (reaproveita matcha-date-range + matcha-date) -->\n        <div #customEditor class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n          <matcha-date-range>\n            <matcha-form-field>\n              <matcha-label>Data in\u00EDcio</matcha-label>\n              <matcha-date formControlName=\"start\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n                [max]=\"customStartMax\" [suppressPanelGlobalClose]=\"true\"\n                (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n            </matcha-form-field>\n            <matcha-form-field>\n              <matcha-label>Data fim</matcha-label>\n              <matcha-date formControlName=\"end\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n                [min]=\"customEndMin\" [suppressPanelGlobalClose]=\"true\"\n                (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n            </matcha-form-field>\n          </matcha-date-range>\n\n          <div class=\"color-red fs-12 mt-8\" *ngIf=\"customError\">{{ customError }}</div>\n\n          <button matcha-button color=\"accent\" size=\"small\" type=\"button\" class=\"w-100-p mt-12\"\n            (click)=\"applyCustom()\">\n            Aplicar\n          </button>\n        </div>\n      </ng-container>\n    </div>\n  </matcha-panel>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
+                type: ViewChild,
+                args: [MatchaPanelComponent]
+            }], customEditorRef: [{
+                type: ViewChild,
+                args: ['customEditor']
+            }], presets: [{
+                type: Input
+            }], allowCustom: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], customLabel: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], periodChange: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], openedChange: [{
+                type: Output
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.matcha-period-disabled']
+            }], hostDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }] } });
+
+class MatchaPeriodModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaPeriodModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatchaPeriodModule, declarations: [MatchaPeriodComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatchaPanelModule,
+            MatchaButtonModule,
+            MatchaIconModule,
+            MatchaDividerModule,
+            MatchaDateModule,
+            MatchaDateRangeModule,
+            MatchaFormFieldModule], exports: [MatchaPeriodComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaPeriodModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatchaPanelModule,
+            MatchaButtonModule,
+            MatchaIconModule,
+            MatchaDividerModule,
+            MatchaDateModule,
+            MatchaDateRangeModule,
+            MatchaFormFieldModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaPeriodModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaPeriodComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatchaPanelModule,
+                        MatchaButtonModule,
+                        MatchaIconModule,
+                        MatchaDividerModule,
+                        MatchaDateModule,
+                        MatchaDateRangeModule,
+                        MatchaFormFieldModule
+                    ],
+                    exports: [
+                        MatchaPeriodComponent
+                    ]
+                }]
+        }] });
+
 class MatchaTimeComponent {
     constructor() {
         this.placeholder = '__:__';
@@ -14396,9 +15406,12 @@ class MatchaSliderComponent {
             this.isDragging = false;
             this.draggingPointer = null;
             this.removeVisualFeedback();
-            this.userChangeEnd.emit(this.value);
+            // Atualiza o FormControl ANTES de emitir o evento de interação:
+            // consumidores que leem o valor atual do formulário no handler de
+            // `userChangeEnd` precisam já enxergar o novo valor.
             this.onChange(this.isRange ? [this.value, this.highValue] : this.value);
             this.onTouched();
+            this.userChangeEnd.emit(this.value);
         }
         this.cleanupEventListeners();
         this.cancelAnimationFrame();
@@ -14480,9 +15493,13 @@ class MatchaSliderComponent {
         const clampedValue = Math.max(floor, Math.min(ceil, newValue));
         if (clampedValue !== this.value) {
             this.value = clampedValue;
+            // `valueChange` é o output de two-way binding ([(value)]); permanece antes
+            // do `onChange`, espelhando o comportamento do Angular Material. Já o
+            // `userChange` (evento de interação) é emitido DEPOIS de atualizar o
+            // FormControl, para que o handler leia o novo valor.
             this.valueChange.emit(this.value);
-            this.userChange.emit(this.value);
             this.onChange(this.value);
+            this.userChange.emit(this.value);
             this.cdr.markForCheck();
         }
     }
@@ -14516,9 +15533,12 @@ class MatchaSliderComponent {
         }
         if (clampedValue !== this.value) {
             this.value = clampedValue;
+            // `valueChange` (two-way binding) permanece antes do `onChange`; o
+            // `userChange` (evento de interação) é emitido depois de atualizar o
+            // FormControl.
             this.valueChange.emit(this.value);
-            this.userChange.emit(this.value);
             this.onChange([this.value, this.highValue]);
+            this.userChange.emit(this.value);
             this.cdr.markForCheck();
         }
     }
@@ -14539,9 +15559,12 @@ class MatchaSliderComponent {
         }
         if (clampedValue !== this.highValue) {
             this.highValue = clampedValue;
+            // `highValueChange` (two-way binding) permanece antes do `onChange`; o
+            // `userChange` (evento de interação) é emitido depois de atualizar o
+            // FormControl.
             this.highValueChange.emit(this.highValue);
-            this.userChange.emit(this.highValue);
             this.onChange([this.value, this.highValue]);
+            this.userChange.emit(this.highValue);
             this.cdr.markForCheck();
         }
     }
@@ -15841,6 +16864,8 @@ class MatchaComponentsModule {
             MatchaTitleModule,
             MatchaTooltipModule,
             MatchaDateRangeModule,
+            MatchaPeriodModule,
+            MatchaCalendarPickerModule,
             MatchaTimeModule,
             MatchaTimeRangeModule,
             MatchaDropListModule,
@@ -15886,6 +16911,8 @@ class MatchaComponentsModule {
             MatchaTitleModule,
             MatchaTooltipModule,
             MatchaDateRangeModule,
+            MatchaPeriodModule,
+            MatchaCalendarPickerModule,
             MatchaTimeModule,
             MatchaTimeRangeModule,
             MatchaDropListModule,
@@ -15936,6 +16963,8 @@ class MatchaComponentsModule {
             MatchaTitleModule,
             MatchaTooltipModule,
             MatchaDateRangeModule,
+            MatchaPeriodModule,
+            MatchaCalendarPickerModule,
             MatchaTimeModule,
             MatchaTimeRangeModule,
             MatchaDropListModule,
@@ -15981,6 +17010,8 @@ class MatchaComponentsModule {
             MatchaTitleModule,
             MatchaTooltipModule,
             MatchaDateRangeModule,
+            MatchaPeriodModule,
+            MatchaCalendarPickerModule,
             MatchaTimeModule,
             MatchaTimeRangeModule,
             MatchaDropListModule,
@@ -16037,6 +17068,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatchaTitleModule,
                         MatchaTooltipModule,
                         MatchaDateRangeModule,
+                        MatchaPeriodModule,
+                        MatchaCalendarPickerModule,
                         MatchaTimeModule,
                         MatchaTimeRangeModule,
                         MatchaDropListModule,
@@ -16084,6 +17117,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatchaTitleModule,
                         MatchaTooltipModule,
                         MatchaDateRangeModule,
+                        MatchaPeriodModule,
+                        MatchaCalendarPickerModule,
                         MatchaTimeModule,
                         MatchaTimeRangeModule,
                         MatchaDropListModule,
@@ -16131,6 +17166,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+/**
+ * Tipagem pública do componente matcha-period (seletor de período / presets).
+ */
+
 class MatchaGridComponent {
     getStringSplited(inputValue) {
         const stringWithoutSpaces = inputValue.replace(/\s+/g, '');
@@ -17213,5 +18252,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaDropListService, MatchaDropZoneDirective, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageBuilderComponent, MatchaPageBuilderModule, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectMultipleComponent, MatchaSelectMultipleModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, buildSunEditorConfig, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCalendarIntl, MatchaCalendarPickerComponent, MatchaCalendarPickerModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaDropListService, MatchaDropZoneDirective, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageBuilderComponent, MatchaPageBuilderModule, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaPeriodComponent, MatchaPeriodModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectMultipleComponent, MatchaSelectMultipleModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, buildSunEditorConfig, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map