matcha-components 20.84.0 → 20.88.0

package/fesm2022/matcha-components.mjs

@@ -2291,7 +2291,7 @@ class MatchaLabelComponent {
         if (formField) {
             // Busca por elementos nativos e componentes customizados com required
             const inputElement = formField.querySelector('input[required], textarea[required], select[required], ' +
-                'matcha-select[required], matcha-autocomplete[required]');
+                'matcha-select[required], matcha-autocomplete[required], matcha-date[required]');
             this.isRequired = !!inputElement;
         }
     }
@@ -3122,6 +3122,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
+class MatchaDateComponent {
+    constructor() {
+        this.placeholder = 'Selecione uma data';
+        this.min = '';
+        this.max = '';
+        this.disabled = false;
+        this.value = '';
+        this.isDisabled = false;
+        // ControlValueAccessor methods
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.disabled = isDisabled;
+    }
+    onInputChange(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDateComponent, isStandalone: false, selector: "matcha-date", inputs: { placeholder: "placeholder", min: "min", max: "max", disabled: "disabled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MatchaDateComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<input\n  type=\"date\"\n  class=\"matcha-date-input\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [disabled]=\"disabled || isDisabled\"\n  (input)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n", styles: [""], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-date', encapsulation: ViewEncapsulation.None, standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MatchaDateComponent),
+                            multi: true
+                        }
+                    ], template: "<input\n  type=\"date\"\n  class=\"matcha-date-input\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [disabled]=\"disabled || isDisabled\"\n  (input)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n" }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
 class MatchaDateRangeComponent {
     constructor() {
         this.startDateControl = null;
@@ -3150,42 +3211,83 @@ class MatchaDateRangeComponent {
     validateDateRange() {
         if (!this.startDateControl || !this.endDateControl)
             return;
-        if (!this.startDateControl.value || !this.endDateControl.value)
+        const startValue = this.startDateControl.value;
+        const endValue = this.endDateControl.value;
+        // Se ambos os campos estão vazios, não valida
+        if (!startValue && !endValue) {
+            this.clearDateRangeErrors();
             return;
+        }
+        // Se apenas um campo está preenchido, limpa erros de intervalo
+        if (!startValue || !endValue) {
+            this.clearDateRangeErrors();
+            return;
+        }
         // Validação de formato de data (YYYY-MM-DD)
         const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-        if (!dateRegex.test(this.startDateControl.value)) {
-            this.startDateControl.setErrors({ ['invalidDateFormat']: true });
+        if (!dateRegex.test(startValue)) {
+            this.startDateControl.setErrors({
+                ...this.startDateControl.errors,
+                ['invalidDateFormat']: true
+            });
             return;
         }
-        if (!dateRegex.test(this.endDateControl.value)) {
-            this.endDateControl.setErrors({ ['invalidDateFormat']: true });
+        if (!dateRegex.test(endValue)) {
+            this.endDateControl.setErrors({
+                ...this.endDateControl.errors,
+                ['invalidDateFormat']: true
+            });
             return;
         }
-        const startDate = new Date(this.startDateControl.value);
-        const endDate = new Date(this.endDateControl.value);
+        const startDate = new Date(startValue);
+        const endDate = new Date(endValue);
         // Verifica se as datas são válidas
         if (isNaN(startDate.getTime())) {
-            this.startDateControl.setErrors({ ['invalidDate']: true });
+            this.startDateControl.setErrors({
+                ...this.startDateControl.errors,
+                ['invalidDate']: true
+            });
             return;
         }
         if (isNaN(endDate.getTime())) {
-            this.endDateControl.setErrors({ ['invalidDate']: true });
+            this.endDateControl.setErrors({
+                ...this.endDateControl.errors,
+                ['invalidDate']: true
+            });
             return;
         }
+        // Validação principal: data inicial não pode ser posterior à data final
         if (startDate > endDate) {
             // Adiciona erros quando a data inicial é posterior à final
-            this.startDateControl.setErrors({ ['startAfterEnd']: true });
-            this.endDateControl.setErrors({ ['endBeforeStart']: true });
+            this.startDateControl.setErrors({
+                ...this.startDateControl.errors,
+                ['dateRangeInvalid']: true
+            });
+            this.endDateControl.setErrors({
+                ...this.endDateControl.errors,
+                ['dateRangeInvalid']: true
+            });
         }
         else {
-            // Remove apenas nossos erros específicos
-            this.removeSpecificError(this.startDateControl, 'startAfterEnd');
-            this.removeSpecificError(this.endDateControl, 'endBeforeStart');
+            // Remove apenas nossos erros específicos se o intervalo está correto
+            this.clearDateRangeErrors();
+        }
+    }
+    /**
+     * Limpa apenas os erros relacionados ao intervalo de datas
+     */
+    clearDateRangeErrors() {
+        if (this.startDateControl) {
+            this.removeSpecificError(this.startDateControl, 'dateRangeInvalid');
             this.removeSpecificError(this.startDateControl, 'invalidDateFormat');
-            this.removeSpecificError(this.endDateControl, 'invalidDateFormat');
             this.removeSpecificError(this.startDateControl, 'invalidDate');
+            this.removeSpecificError(this.startDateControl, 'startAfterEnd');
+        }
+        if (this.endDateControl) {
+            this.removeSpecificError(this.endDateControl, 'dateRangeInvalid');
+            this.removeSpecificError(this.endDateControl, 'invalidDateFormat');
             this.removeSpecificError(this.endDateControl, 'invalidDate');
+            this.removeSpecificError(this.endDateControl, 'endBeforeStart');
         }
     }
     /**
@@ -3199,11 +3301,11 @@ class MatchaDateRangeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDateRangeComponent, isStandalone: false, selector: "matcha-date-range", queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDateRangeComponent, isStandalone: false, selector: "matcha-date-range", queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"matcha-date-range-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-date-range', standalone: false, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'matcha-date-range', standalone: false, template: "<div class=\"matcha-date-range-container\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { controls: [{
                 type: ContentChildren,
                 args: [NgControl, { descendants: true }]
@@ -8001,8 +8103,17 @@ class MatchaAutocompleteComponent {
         this.placement = 'auto';
         this.maxHeight = 280;
         this.minWidth = 160;
+        // Funcionalidades avançadas
+        this.autoSelectOnBlur = false;
+        this.displayWith = null;
+        this.displayProperty = 'name';
+        this.showClearButton = false;
+        this.clearButtonIcon = 'action_close';
+        this.clearButtonAriaLabel = 'Limpar seleção';
         this.opened = new EventEmitter();
         this.closed = new EventEmitter();
+        this.cleared = new EventEmitter();
+        this.autoSelected = new EventEmitter();
         this.open = false;
         this.activeIndex = -1;
     }
@@ -8048,14 +8159,14 @@ class MatchaAutocompleteComponent {
             }
         });
     }
-    notifyDirectiveOfSelection(value) {
+    notifyDirectiveOfSelection(data) {
         // Disparar evento customizado para notificar a diretiva sobre a seleção
         const selectionEvent = new CustomEvent('matcha-autocomplete-selection', {
-            detail: { value },
+            detail: data,
             bubbles: true
         });
         this.elRef.nativeElement.dispatchEvent(selectionEvent);
-        console.log('MatchaAutocomplete: Evento de seleção disparado', { value });
+        console.log('MatchaAutocomplete: Evento de seleção disparado', data);
     }
     openPanel() {
         if (!this.triggerElement) {
@@ -8157,7 +8268,12 @@ class MatchaAutocompleteComponent {
             allOptions: this.options.toArray().map(o => ({ value: o.value, selected: o.selected }))
         });
         // Notificar a diretiva sobre a seleção antes de fechar o painel
-        this.notifyDirectiveOfSelection(option.value);
+        // Passar tanto o valor quanto o texto de exibição
+        const displayText = this.getDisplayValue(option.value);
+        this.notifyDirectiveOfSelection({
+            value: option.value,
+            displayText: displayText
+        });
         // Fechamos painel automaticamente
         console.log('MatchaAutocomplete: Fechando painel após seleção');
         this.closePanel();
@@ -8175,8 +8291,59 @@ class MatchaAutocompleteComponent {
         });
         return value;
     }
+    hasSelection() {
+        return this.selectedValue !== undefined && this.selectedValue !== null;
+    }
+    clearSelection() {
+        this.selectedValue = undefined;
+        // Limpar seleção visual das opções
+        this.options.forEach(opt => {
+            opt.selected = false;
+        });
+        // Notificar diretiva para limpar input
+        const clearEvent = new CustomEvent('matcha-autocomplete-clear', {
+            bubbles: true
+        });
+        this.elRef.nativeElement.dispatchEvent(clearEvent);
+        // Emitir evento de limpeza
+        this.cleared.emit();
+    }
+    /**
+     * Obtém o texto de exibição de um valor
+     * Usa displayWith se fornecido, senão displayProperty, senão retorna o valor como string
+     */
+    getDisplayValue(value) {
+        if (value == null)
+            return '';
+        if (this.displayWith) {
+            return this.displayWith(value) || '';
+        }
+        if (typeof value === 'object' && this.displayProperty) {
+            return value[this.displayProperty] || '';
+        }
+        return String(value);
+    }
+    /**
+     * Busca uma opção que corresponda ao texto digitado
+     * Compara usando displayWith ou displayProperty
+     */
+    findOptionByText(text) {
+        if (!text || text.trim() === '')
+            return null;
+        const searchText = text.toLowerCase().trim();
+        const options = this.options.toArray();
+        for (const option of options) {
+            if (option.disabled)
+                continue;
+            const displayText = this.getDisplayValue(option.value).toLowerCase().trim();
+            if (displayText === searchText) {
+                return option;
+            }
+        }
+        return null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<matcha-panel\n    #panel\n    [open]=\"open\"\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [triggerElement]=\"triggerElement\"\n    (opened)=\"opened.emit()\"\n    (closed)=\"closed.emit()\">\n    <div class=\"matcha-panel-content flex-column\">\n        <ng-content></ng-content>\n    </div>\n</matcha-panel>\n", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", autoSelectOnBlur: "autoSelectOnBlur", displayWith: "displayWith", displayProperty: "displayProperty", showClearButton: "showClearButton", clearButtonIcon: "clearButtonIcon", clearButtonAriaLabel: "clearButtonAriaLabel" }, outputs: { opened: "opened", closed: "closed", cleared: "cleared", autoSelected: "autoSelected" }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<matcha-panel\n    #panel\n    [open]=\"open\"\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [triggerElement]=\"triggerElement\"\n    (opened)=\"opened.emit()\"\n    (closed)=\"closed.emit()\">\n    <div class=\"matcha-panel-content flex-column\">\n        <ng-content></ng-content>\n    </div>\n</matcha-panel>\n", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
             type: Component,
@@ -8193,10 +8360,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], minWidth: [{
                 type: Input
+            }], autoSelectOnBlur: [{
+                type: Input
+            }], displayWith: [{
+                type: Input
+            }], displayProperty: [{
+                type: Input
+            }], showClearButton: [{
+                type: Input
+            }], clearButtonIcon: [{
+                type: Input
+            }], clearButtonAriaLabel: [{
+                type: Input
             }], opened: [{
                 type: Output
             }], closed: [{
                 type: Output
+            }], cleared: [{
+                type: Output
+            }], autoSelected: [{
+                type: Output
             }] } });
 
 class MatchaSelectComponent {
@@ -10957,8 +11140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         }] });
 
 class MatchaAutocompleteTriggerDirective {
-    constructor(el) {
+    constructor(el, renderer, cdr, ngControl) {
         this.el = el;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.ngControl = ngControl;
         this.subs = new Subscription();
     }
     ngAfterViewInit() {
@@ -10989,31 +11175,107 @@ class MatchaAutocompleteTriggerDirective {
         // Escutar evento de seleção do autocomplete
         const selectionSub = fromEvent(this.panel.elRef.nativeElement, 'matcha-autocomplete-selection').subscribe((event) => {
             console.log('MatchaAutocomplete: Evento de seleção recebido na diretiva', event.detail);
-            const { value } = event.detail;
+            const { value, displayText } = event.detail;
             if (value !== undefined) {
-                this.writeValueToInput(value);
+                // Usar displayText se fornecido, senão usar o valor diretamente
+                const textToWrite = displayText !== undefined ? displayText : value;
+                this.writeValueToInput(textToWrite, value);
             }
         });
         this.subs.add(selectionSub);
+        // Escutar evento de limpeza
+        const clearSub = fromEvent(this.panel.elRef.nativeElement, 'matcha-autocomplete-clear').subscribe(() => {
+            console.log('MatchaAutocomplete: Evento de limpeza recebido na diretiva');
+            this.clearInput();
+        });
+        this.subs.add(clearSub);
+        // Criar botão de limpar se necessário
+        if (this.panel.showClearButton) {
+            this.createClearButton();
+            // Observar mudanças no estado disabled do input
+            const input = this.el.nativeElement;
+            const observer = new MutationObserver(() => {
+                this.updateClearButtonVisibility();
+            });
+            observer.observe(input, {
+                attributes: true,
+                attributeFilter: ['disabled']
+            });
+            // Armazenar observer para cleanup
+            this._disabledObserver = observer;
+        }
+        // Observar mudanças na seleção para mostrar/esconder botão
+        const selectionChangeSub = fromEvent(this.panel.elRef.nativeElement, 'matcha-autocomplete-selection').subscribe(() => {
+            this.updateClearButtonVisibility();
+        });
+        const clearChangeSub = fromEvent(this.panel.elRef.nativeElement, 'matcha-autocomplete-clear').subscribe(() => {
+            this.updateClearButtonVisibility();
+        });
+        this.subs.add(selectionChangeSub);
+        this.subs.add(clearChangeSub);
+        // Observar mudanças no FormControl para sincronizar o input com displayWith
+        if (this.ngControl && this.ngControl.control) {
+            const controlValueSub = this.ngControl.control.valueChanges.subscribe((value) => {
+                console.log('MatchaAutocomplete: FormControl valor mudou', value);
+                // Se o valor é um objeto, usar displayWith para exibir no input
+                if (value && typeof value === 'object') {
+                    const displayText = this.panel.getDisplayValue(value);
+                    console.log('MatchaAutocomplete: Atualizando input com displayWith', { value, displayText });
+                    // Atualizar apenas o input visual, sem disparar eventos do FormControl
+                    const input = this.el.nativeElement;
+                    if (input.value !== displayText) {
+                        input.value = displayText;
+                    }
+                    // Atualizar visibilidade do botão de limpar
+                    this.updateClearButtonVisibility();
+                }
+            });
+            this.subs.add(controlValueSub);
+        }
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
+        // Limpar observer se existir
+        if (this._disabledObserver) {
+            this._disabledObserver.disconnect();
+        }
+        // Remover botão de limpar se existir
+        if (this.clearButton && this.clearButton.parentNode) {
+            this.renderer.removeChild(this.clearButton.parentNode, this.clearButton);
+        }
     }
-    writeValueToInput(value) {
+    writeValueToInput(displayText, actualValue) {
         console.log('MatchaAutocomplete: writeValueToInput chamado', {
-            value,
+            displayText,
+            actualValue,
             input: this.el.nativeElement
         });
         const input = this.el.nativeElement;
-        input.value = value == null ? '' : value;
+        input.value = displayText == null ? '' : String(displayText);
         // Dispatch múltiplos eventos para garantir compatibilidade com Angular Forms
         const inputEvent = new Event('input', { bubbles: true });
         const changeEvent = new Event('change', { bubbles: true });
+        input.dispatchEvent(inputEvent);
+        input.dispatchEvent(changeEvent);
+        // Atualizar visibilidade do botão após escrever valor
+        setTimeout(() => {
+            this.updateClearButtonVisibility();
+        }, 0);
+        console.log('MatchaAutocomplete: Valor escrito no input', input.value);
+    }
+    clearInput() {
+        const input = this.el.nativeElement;
+        input.value = '';
+        // Dispatch eventos para garantir compatibilidade com Angular Forms
+        const inputEvent = new Event('input', { bubbles: true });
+        const changeEvent = new Event('change', { bubbles: true });
         const blurEvent = new Event('blur', { bubbles: true });
         input.dispatchEvent(inputEvent);
         input.dispatchEvent(changeEvent);
         input.dispatchEvent(blurEvent);
-        console.log('MatchaAutocomplete: Valor escrito no input', input.value);
+        // Atualizar visibilidade do botão
+        this.updateClearButtonVisibility();
+        console.log('MatchaAutocomplete: Input limpo');
     }
     onClick() {
         // Abrir painel quando clicar no input
@@ -11028,6 +11290,50 @@ class MatchaAutocompleteTriggerDirective {
         if (!this.panel.open)
             this.panel.openPanel();
     }
+    onBlur() {
+        // Implementar auto-seleção no blur se configurado
+        if (!this.panel.autoSelectOnBlur) {
+            return;
+        }
+        const input = this.el.nativeElement;
+        const currentValue = input.value;
+        // Se já há uma seleção válida (objeto), verificar se o texto ainda corresponde
+        const selectedValue = this.panel.getSelectedValue();
+        if (selectedValue !== undefined && selectedValue !== null) {
+            // Verificar se o texto do input corresponde ao valor selecionado
+            const displayText = this.panel.getDisplayValue(selectedValue);
+            if (displayText.toLowerCase().trim() === currentValue.toLowerCase().trim()) {
+                // Texto corresponde à seleção, não fazer nada
+                return;
+            }
+        }
+        // Se o valor é uma string (texto digitado mas não selecionado)
+        if (typeof currentValue === 'string' && currentValue.trim() !== '') {
+            // Procurar match exato (case-insensitive) nas opções disponíveis
+            const exactMatch = this.panel.findOptionByText(currentValue);
+            if (exactMatch) {
+                // Match exato encontrado - selecionar automaticamente
+                console.log('MatchaAutocomplete: Match exato encontrado no blur, selecionando automaticamente');
+                this.panel.selectOption(exactMatch);
+                // Emitir evento de auto-seleção
+                this.panel.autoSelected.emit(exactMatch.value);
+                // Atualizar visibilidade do botão de limpar após auto-seleção
+                this.updateClearButtonVisibility();
+            }
+            else {
+                // Nenhum match exato - limpar o campo
+                console.log('MatchaAutocomplete: Nenhum match exato encontrado no blur, limpando campo');
+                this.panel.clearSelection();
+            }
+        }
+        else if (currentValue === '' || !currentValue) {
+            // Campo vazio - limpar seleção se houver
+            if (this.panel.hasSelection()) {
+                console.log('MatchaAutocomplete: Campo vazio no blur, limpando seleção');
+                this.panel.clearSelection();
+            }
+        }
+    }
     onKeydown(ev) {
         if (!this.panel)
             return;
@@ -11046,8 +11352,10 @@ class MatchaAutocompleteTriggerDirective {
                 // pega o value escolhido e escreve no input
                 setTimeout(() => {
                     const val = this.panel.getSelectedValue();
-                    if (val !== undefined)
-                        this.writeValueToInput(val);
+                    if (val !== undefined) {
+                        const displayText = this.panel.getDisplayValue(val);
+                        this.writeValueToInput(displayText, val);
+                    }
                 });
                 break;
             case 'Escape':
@@ -11070,14 +11378,79 @@ class MatchaAutocompleteTriggerDirective {
             setTimeout(() => {
                 if (this.panel && typeof this.panel.getSelectedValue === 'function') {
                     const val = this.panel.getSelectedValue();
-                    if (val !== undefined)
-                        this.writeValueToInput(val);
+                    if (val !== undefined) {
+                        const displayText = this.panel.getDisplayValue(val);
+                        this.writeValueToInput(displayText, val);
+                    }
                 }
             }, 10);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "input": "onInput($event)", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
+    createClearButton() {
+        if (this.clearButton)
+            return;
+        const input = this.el.nativeElement;
+        const formField = input.closest('matcha-form-field');
+        if (!formField) {
+            console.warn('MatchaAutocomplete: matcha-form-field não encontrado para adicionar botão de limpar');
+            return;
+        }
+        // Criar botão
+        this.clearButton = this.renderer.createElement('span');
+        // Adicionar classe do ícone (formato: i-matcha-{iconName})
+        const iconClass = this.panel.clearButtonIcon.startsWith('i-matcha-')
+            ? this.panel.clearButtonIcon
+            : 'i-matcha-' + this.panel.clearButtonIcon;
+        this.renderer.addClass(this.clearButton, iconClass);
+        this.renderer.addClass(this.clearButton, 'i-size-sm');
+        this.renderer.addClass(this.clearButton, 'matcha-autocomplete-clear-button');
+        this.renderer.setStyle(this.clearButton, 'cursor', 'pointer');
+        this.renderer.setStyle(this.clearButton, 'position', 'absolute');
+        this.renderer.setStyle(this.clearButton, 'right', '12px');
+        this.renderer.setStyle(this.clearButton, 'z-index', '10');
+        this.renderer.setAttribute(this.clearButton, 'aria-label', this.panel.clearButtonAriaLabel);
+        this.renderer.setAttribute(this.clearButton, 'role', 'button');
+        this.renderer.setAttribute(this.clearButton, 'tabindex', '0');
+        // Adicionar evento de clique
+        this.renderer.listen(this.clearButton, 'click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.panel.clearSelection();
+        });
+        // Adicionar evento de teclado (Enter e Space)
+        this.renderer.listen(this.clearButton, 'keydown', (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.panel.clearSelection();
+            }
+        });
+        // Inserir botão no form-field (após o input)
+        const inputContainer = input.parentElement;
+        if (inputContainer) {
+            this.renderer.setStyle(inputContainer, 'position', 'relative');
+            this.renderer.appendChild(inputContainer, this.clearButton);
+        }
+        else {
+            this.renderer.appendChild(formField, this.clearButton);
+        }
+        // Atualizar visibilidade inicial
+        this.updateClearButtonVisibility();
+    }
+    updateClearButtonVisibility() {
+        if (!this.clearButton)
+            return;
+        const hasSelection = this.panel.hasSelection();
+        const isDisabled = this.el.nativeElement.disabled;
+        if (hasSelection && !isDisabled && this.panel.showClearButton) {
+            this.renderer.setStyle(this.clearButton, 'display', 'block');
+        }
+        else {
+            this.renderer.setStyle(this.clearButton, 'display', 'none');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i2.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteTriggerDirective, decorators: [{
             type: Directive,
@@ -11085,7 +11458,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     selector: '[matchaAutocomplete]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { panel: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { panel: [{
                 type: Input,
                 args: ['matchaAutocomplete']
             }], onClick: [{
@@ -11097,6 +11472,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
             }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -11556,12 +11934,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
+class MatchaDateModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateModule, declarations: [MatchaDateComponent], imports: [CommonModule,
+            FormsModule], exports: [MatchaDateComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateModule, imports: [CommonModule,
+            FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaDateComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule
+                    ],
+                    exports: [
+                        MatchaDateComponent
+                    ]
+                }]
+        }] });
+
 class MatchaDateRangeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, declarations: [MatchaDateRangeComponent], imports: [CommonModule,
-            ReactiveFormsModule], exports: [MatchaDateRangeComponent] }); }
+            ReactiveFormsModule,
+            MatchaDateModule], exports: [MatchaDateRangeComponent,
+            MatchaDateModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, imports: [CommonModule,
-            ReactiveFormsModule] }); }
+            ReactiveFormsModule,
+            MatchaDateModule, MatchaDateModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, decorators: [{
             type: NgModule,
@@ -11569,9 +11973,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     declarations: [MatchaDateRangeComponent],
                     imports: [
                         CommonModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
+                        MatchaDateModule
                     ],
-                    exports: [MatchaDateRangeComponent]
+                    exports: [
+                        MatchaDateRangeComponent,
+                        MatchaDateModule
+                    ]
                 }]
         }] });
 
@@ -12529,5 +12937,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * 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, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, 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, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map