matcha-components 20.125.0 → 20.126.0

package/fesm2022/matcha-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, ViewEncapsulation, ChangeDetectionStrategy, HostListener, ContentChild, Directive, forwardRef, InjectionToken, inject, Injectable, ViewChild, TemplateRef, Optional, NgModule, createComponent, PLATFORM_ID, Pipe } from '@angular/core';
+import { EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, ViewEncapsulation, ChangeDetectionStrategy, HostListener, ContentChild, Directive, forwardRef, ViewChild, InjectionToken, inject, Injectable, TemplateRef, Optional, NgModule, createComponent, PLATFORM_ID, Pipe } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
 import { Subscription, Subject, BehaviorSubject, fromEvent, of } from 'rxjs';
 import { debounceTime, takeUntil, filter, startWith, map, distinctUntilChanged } from 'rxjs/operators';
@@ -3136,18 +3136,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class MatchaDateComponent {
     constructor() {
-        this.placeholder = 'Selecione uma data';
+        this.placeholder = '__/__/____';
         this.min = '';
         this.max = '';
         this.disabled = false;
+        this.showNativePicker = true; // Mostrar botão para abrir datepicker nativo
         this.value = '';
+        this.displayValue = '';
         this.isDisabled = false;
         // ControlValueAccessor methods
         this.onChange = (value) => { };
         this.onTouched = () => { };
     }
     writeValue(value) {
-        this.value = value || '';
+        if (value) {
+            // Se o valor vem como YYYY-MM-DD (do FormControl)
+            if (this.isValidDateFormat(value, 'YYYY-MM-DD')) {
+                this.value = value;
+                this.displayValue = this.formatDateForDisplay(value);
+                // Sincronizar com input nativo
+                if (this.nativeDateInput?.nativeElement) {
+                    this.nativeDateInput.nativeElement.value = value;
+                }
+                // Atualizar o input de texto
+                if (this.textInput?.nativeElement) {
+                    setTimeout(() => {
+                        if (this.textInput?.nativeElement) {
+                            this.textInput.nativeElement.value = this.displayValue;
+                        }
+                    }, 0);
+                }
+            }
+            else if (this.isValidDateFormat(value, 'DD/MM/YYYY')) {
+                // Se o valor já vem mascarado
+                this.displayValue = value;
+                const yyyyMMdd = this.convertToYYYYMMDD(value);
+                this.value = yyyyMMdd;
+                if (this.nativeDateInput?.nativeElement) {
+                    this.nativeDateInput.nativeElement.value = yyyyMMdd;
+                }
+                if (this.textInput?.nativeElement) {
+                    setTimeout(() => {
+                        if (this.textInput?.nativeElement) {
+                            this.textInput.nativeElement.value = this.displayValue;
+                        }
+                    }, 0);
+                }
+            }
+            else {
+                this.value = value;
+                this.displayValue = value || '';
+            }
+        }
+        else {
+            this.value = '';
+            this.displayValue = '';
+            if (this.nativeDateInput?.nativeElement) {
+                this.nativeDateInput.nativeElement.value = '';
+            }
+            if (this.textInput?.nativeElement) {
+                this.textInput.nativeElement.value = '';
+            }
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3161,20 +3211,193 @@ class MatchaDateComponent {
     }
     onInputChange(event) {
         const input = event.target;
-        this.value = input.value;
-        this.onChange(this.value);
+        let inputValue = input.value;
+        // Aplicar máscara DD/MM/YYYY manualmente (permite zeros)
+        inputValue = this.applyDateMask(inputValue);
+        // Atualizar o valor do input se a máscara foi aplicada
+        if (input.value !== inputValue) {
+            input.value = inputValue;
+        }
+        this.displayValue = inputValue;
+        // Apenas converter para YYYY-MM-DD se a data estiver completa e válida
+        if (inputValue && inputValue.length === 10 && this.isValidDateFormat(inputValue, 'DD/MM/YYYY')) {
+            const yyyyMMdd = this.convertToYYYYMMDD(inputValue);
+            if (this.isValidDate(yyyyMMdd)) {
+                this.value = yyyyMMdd;
+                this.onChange(yyyyMMdd);
+                // Sincronizar com input nativo
+                if (this.nativeDateInput?.nativeElement) {
+                    this.nativeDateInput.nativeElement.value = yyyyMMdd;
+                }
+            }
+            else {
+                // Data inválida (ex: 31/02/2024) - não limpar, apenas não converter
+                this.onChange(null);
+            }
+        }
+        else if (!inputValue || inputValue.length === 0) {
+            // Campo vazio
+            this.value = '';
+            this.onChange(null);
+            if (this.nativeDateInput?.nativeElement) {
+                this.nativeDateInput.nativeElement.value = '';
+            }
+        }
+        else {
+            // Data incompleta - emitir null para indicar que ainda não está completa
+            this.onChange(null);
+        }
+    }
+    onKeyDown(event) {
+        // Permitir Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X, Backspace, Delete, Tab, Arrow keys
+        const allowedKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+        const isCtrl = event.ctrlKey || event.metaKey;
+        const isAllowedCtrl = isCtrl && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase());
+        if (allowedKeys.includes(event.key) || isAllowedCtrl) {
+            return; // Permitir
+        }
+        // Permitir apenas números e barras
+        if (!/[0-9\/]/.test(event.key)) {
+            event.preventDefault();
+        }
+    }
+    applyDateMask(value) {
+        // Remove tudo que não é número
+        const numbers = value.replace(/\D/g, '');
+        // Limita a 8 dígitos (DDMMYYYY)
+        const limitedNumbers = numbers.slice(0, 8);
+        // Aplica máscara DD/MM/YYYY
+        if (limitedNumbers.length <= 2) {
+            return limitedNumbers;
+        }
+        else if (limitedNumbers.length <= 4) {
+            return `${limitedNumbers.slice(0, 2)}/${limitedNumbers.slice(2)}`;
+        }
+        else {
+            return `${limitedNumbers.slice(0, 2)}/${limitedNumbers.slice(2, 4)}/${limitedNumbers.slice(4, 8)}`;
+        }
+    }
+    onNativeDateChange(event) {
+        const input = event.target;
+        const value = input.value;
+        if (value) {
+            this.value = value;
+            this.displayValue = this.formatDateForDisplay(value);
+            // Sincronizar com input de texto
+            if (this.textInput?.nativeElement) {
+                this.textInput.nativeElement.value = this.displayValue;
+            }
+            this.onChange(value);
+        }
+        else {
+            this.value = '';
+            this.displayValue = '';
+            if (this.textInput?.nativeElement) {
+                this.textInput.nativeElement.value = '';
+            }
+            this.onChange(null);
+        }
     }
     onBlur() {
         this.onTouched();
+        // Obter o valor atual do input
+        const currentInputValue = this.textInput?.nativeElement?.value || this.displayValue;
+        // Se já temos um valor válido e a data digitada é a mesma, não fazer nada
+        if (this.value && currentInputValue && currentInputValue.length === 10) {
+            const yyyyMMdd = this.convertToYYYYMMDD(currentInputValue);
+            if (this.value === yyyyMMdd) {
+                return;
+            }
+        }
+        // Apenas tentar converter se a data estiver completa
+        // Não limpar nada - deixa o matcha-error mostrar erros de validação
+        if (currentInputValue && currentInputValue.length === 10) {
+            if (this.isValidDateFormat(currentInputValue, 'DD/MM/YYYY')) {
+                const yyyyMMdd = this.convertToYYYYMMDD(currentInputValue);
+                if (this.isValidDate(yyyyMMdd)) {
+                    // Data válida, atualizar valores
+                    this.value = yyyyMMdd;
+                    this.displayValue = currentInputValue;
+                    this.onChange(yyyyMMdd);
+                    // Sincronizar com input nativo
+                    if (this.nativeDateInput?.nativeElement) {
+                        this.nativeDateInput.nativeElement.value = yyyyMMdd;
+                    }
+                }
+                else {
+                    // Data inválida - não limpar, apenas não converter
+                    // O matcha-error vai mostrar o erro
+                    this.onChange(null);
+                }
+            }
+            else {
+                // Formato inválido - não limpar, apenas não converter
+                this.onChange(null);
+            }
+        }
+        else if (currentInputValue && currentInputValue.length > 0) {
+            // Data incompleta - manter o que foi digitado
+            this.displayValue = currentInputValue;
+            this.onChange(null);
+        }
+        else {
+            // Campo vazio
+            this.displayValue = '';
+            this.value = '';
+            this.onChange(null);
+        }
+    }
+    openNativeDatePicker() {
+        if (this.nativeDateInput?.nativeElement && !this.disabled && !this.isDisabled) {
+            // Verificar se showPicker está disponível (suporte moderno)
+            if (typeof this.nativeDateInput.nativeElement.showPicker === 'function') {
+                this.nativeDateInput.nativeElement.showPicker();
+            }
+            else {
+                // Fallback: focar no input nativo
+                this.nativeDateInput.nativeElement.focus();
+                this.nativeDateInput.nativeElement.click();
+            }
+        }
+    }
+    isValidDateFormat(date, format) {
+        if (format === 'DD/MM/YYYY') {
+            return /^\d{2}\/\d{2}\/\d{4}$/.test(date);
+        }
+        else {
+            return /^\d{4}-\d{2}-\d{2}$/.test(date);
+        }
+    }
+    isValidDate(dateString) {
+        if (!this.isValidDateFormat(dateString, 'YYYY-MM-DD')) {
+            return false;
+        }
+        // Usar Date constructor com componentes separados para evitar problemas de fuso horário
+        const [year, month, day] = dateString.split('-').map(Number);
+        // Criar data usando componentes locais (não UTC)
+        const date = new Date(year, month - 1, day);
+        // Verificar se a data é válida e corresponde ao que foi digitado
+        // Isso evita que 31/02/2024 seja aceito (seria convertido para 03/03/2024)
+        return date.getFullYear() === year &&
+            date.getMonth() + 1 === month &&
+            date.getDate() === day;
+    }
+    convertToYYYYMMDD(ddMMyyyy) {
+        const [day, month, year] = ddMMyyyy.split('/');
+        return `${year}-${month}-${day}`;
+    }
+    formatDateForDisplay(yyyyMMdd) {
+        const [year, month, day] = yyyyMMdd.split('-');
+        return `${day}/${month}/${year}`;
     }
     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: [
+    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", showNativePicker: "showNativePicker" }, 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 }); }
+        ], 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;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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateComponent, decorators: [{
             type: Component,
@@ -3184,7 +3407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             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" }]
+                    ], 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;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: [{
                 type: Input
             }], min: [{
@@ -3193,6 +3416,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], showNativePicker: [{
+                type: Input
+            }], textInput: [{
+                type: ViewChild,
+                args: ['textInput']
+            }], nativeDateInput: [{
+                type: ViewChild,
+                args: ['nativeDateInput']
             }] } });
 
 class MatchaDateRangeComponent {
@@ -3270,14 +3501,14 @@ class MatchaDateRangeComponent {
         }
         // Validação principal: data inicial não pode ser posterior à data final
         if (startDate > endDate) {
-            // Adiciona erros quando a data inicial é posterior à final
+            // Adiciona erros específicos quando a data inicial é posterior à final
             this.startDateControl.setErrors({
                 ...this.startDateControl.errors,
-                ['dateRangeInvalid']: true
+                ['startAfterEnd']: true
             });
             this.endDateControl.setErrors({
                 ...this.endDateControl.errors,
-                ['dateRangeInvalid']: true
+                ['endBeforeStart']: true
             });
         }
         else {
@@ -3290,13 +3521,11 @@ class MatchaDateRangeComponent {
      */
     clearDateRangeErrors() {
         if (this.startDateControl) {
-            this.removeSpecificError(this.startDateControl, 'dateRangeInvalid');
             this.removeSpecificError(this.startDateControl, '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');