matcha-components 20.278.0 → 20.279.0

package/fesm2022/matcha-components.mjs

@@ -1894,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();
     }
@@ -1955,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
@@ -2820,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. */
@@ -10254,6 +10261,9 @@ class MatchaPeriodComponent {
         this.cdr.detectChanges();
         this.panel.attachTo(anchor);
         this.panel.openPanel();
+        if (this.showingCustom) {
+            this.scrollCustomIntoView();
+        }
         this.opened.emit();
         this.openedChange.emit(true);
     }
@@ -10303,6 +10313,26 @@ class MatchaPeriodComponent {
         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);
@@ -10323,9 +10353,13 @@ class MatchaPeriodComponent {
     }
     commitValue(value) {
         this.value = value;
-        this.periodChange.emit(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();
     }
     // ---------------------------------------------------------------------------
@@ -10475,7 +10509,7 @@ class MatchaPeriodComponent {
                 useExisting: forwardRef(() => MatchaPeriodComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, 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 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 }); }
+        ], 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,
@@ -10485,10 +10519,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             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 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" }]
+                    ], 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: [{
@@ -15369,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();
@@ -15453,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();
         }
     }
@@ -15489,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();
         }
     }
@@ -15512,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();
         }
     }