matcha-components 20.78.0 → 20.80.0

package/fesm2022/matcha-components.mjs

@@ -6,7 +6,7 @@ import { debounceTime, takeUntil, filter, startWith, map, distinctUntilChanged }
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormControlName, NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControlName, NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 
 /**
@@ -1973,11 +1973,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class MatchaModalHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaModalHeaderComponent, isStandalone: false, selector: "matcha-modal-header", ngImport: i0, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaModalHeaderComponent, isStandalone: false, selector: "matcha-modal-header", ngImport: i0, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-space-between mb-16 mb-md-24\">\n        <!-- Remo\u00E7\u00E3o do flex-wrap para que o conte\u00FAdo seja exibido em uma \u00FAnica linha -->\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-modal-header', standalone: false, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n" }]
+            args: [{ selector: 'matcha-modal-header', standalone: false, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-space-between mb-16 mb-md-24\">\n        <!-- Remo\u00E7\u00E3o do flex-wrap para que o conte\u00FAdo seja exibido em uma \u00FAnica linha -->\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n" }]
         }] });
 
 class MatchaModalFooterComponent {
@@ -2243,14 +2243,14 @@ class MatchaFormFieldComponent {
         return this.controlDir?.control;
     }
     get showError() {
-        return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
+        return !!this.control?.invalid && !!this.control?.touched;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n" }]
+            args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
                 type: Input
             }], size: [{
@@ -2289,8 +2289,9 @@ class MatchaLabelComponent {
         // Busca o form-field pai
         const formField = this.elementRef.nativeElement.closest('matcha-form-field');
         if (formField) {
-            // Busca por input, textarea ou select com required
-            const inputElement = formField.querySelector('input[required], textarea[required], select[required]');
+            // 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]');
             this.isRequired = !!inputElement;
         }
     }
@@ -2306,11 +2307,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class MatchaErrorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaErrorComponent, isStandalone: false, selector: "matcha-error", ngImport: i0, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaErrorComponent, isStandalone: false, selector: "matcha-error", ngImport: i0, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0 py-4\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-error', standalone: false, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>" }]
+            args: [{ selector: 'matcha-error', standalone: false, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0 py-4\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>\n" }]
         }] });
 
 class MatchaRippleDirective {
@@ -6750,7 +6751,7 @@ class MatchaInputPhoneComponent {
         this.removeClickListener();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaInputPhoneComponent, isStandalone: false, selector: "matcha-input-phone", inputs: { fallbackMask: "fallbackMask", value: "value" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "inputSelector", first: true, predicate: ["inputSelector"], descendants: true }, { propertyName: "phoneRef", first: true, predicate: ["phoneRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"flex-row position-relative px-16 gap-8\" #inputSelector>\n    <div class=\"min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16\" (click)=\"toggleDropdown()\">\n        <div class=\"d-flex-row flex-align-center\">\n            <img alt=\"\" [src]=\"'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'\"\n                height=\"16\">\n        </div>\n        <span class=\"w-16 fs-16\"\n            [ngClass]=\"isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'\"></span>\n\n    </div>\n    <input *ngIf=\"isInitialized\" #phoneRef type=\"text\" placeholder=\"{{ typeMask }}\"\n        [(ngModel)]=\"inputValueModel\"\n        pattern=\"[0-9]*\" (keyup)=\"onInput($event)\" [mask]=\"typeMask\">\n\n    <ng-container *ngIf=\"isOpen\">\n        <div class=\"position-absolute z-index-10\">\n            <div class=\"grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1\"\n                style=\"top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;\">\n\n                <label *ngFor=\"let country of allCountries; let i = index\"\n                    class=\"fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l\"\n                    [ngClass]=\"labelHover === i+'bg' ? 'background-bg' : 'background-surface'\"\n                    (mouseover)=\"labelHover = i+'bg'\" (mouseout)=\"labelHover = i+'su'\"\n                    (click)=\"selectCountry(country)\">\n                    <img alt=\"\" class=\"mr-8\"\n                        [src]=\"'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'\" height=\"16\">\n                    {{country.name}}\n                </label>\n            </div>\n        </div>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatchaMaskCompatibleDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "matchaMask"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaInputPhoneComponent, isStandalone: false, selector: "matcha-input-phone", inputs: { fallbackMask: "fallbackMask", value: "value" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "inputSelector", first: true, predicate: ["inputSelector"], descendants: true }, { propertyName: "phoneRef", first: true, predicate: ["phoneRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"flex-row position-relative px-16 gap-8\" #inputSelector>\n    <div class=\"min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16\" (click)=\"toggleDropdown()\">\n        <div class=\"d-flex-row flex-align-center\">\n            <img alt=\"\" [src]=\"'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'\"\n                height=\"16\">\n        </div>\n        <span class=\"w-16 fs-16\"\n            [ngClass]=\"isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'\"></span>\n\n    </div>\n    <input *ngIf=\"isInitialized\" #phoneRef type=\"text\" placeholder=\"{{ typeMask }}\"\n        [(ngModel)]=\"inputValueModel\"\n        pattern=\"[0-9]*\" (keyup)=\"onInput($event)\" [mask]=\"typeMask\">\n\n    <ng-container *ngIf=\"isOpen\">\n        <div class=\"position-absolute z-index-10\">\n            <div class=\"grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1\"\n                style=\"top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;\">\n\n                <label *ngFor=\"let country of allCountries; let i = index\"\n                    class=\"fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l\"\n                    [ngClass]=\"labelHover === i+'bg' ? 'background-bg' : 'background-surface'\"\n                    (mouseover)=\"labelHover = i+'bg'\" (mouseout)=\"labelHover = i+'su'\"\n                    (click)=\"selectCountry(country)\">\n                    <img alt=\"\" class=\"mr-8\"\n                        [src]=\"'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'\" height=\"16\">\n                    {{country.name}}\n                </label>\n            </div>\n        </div>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: MatchaMaskCompatibleDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "matchaMask"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneComponent, decorators: [{
             type: Component,
@@ -8398,6 +8399,8 @@ class MatchaSelectComponent {
         this.updateSelectedStates();
         this.panel.closePanel();
         this.closed.emit();
+        // Marcar como touched quando o painel fecha (importante para validação)
+        this.onTouched();
     }
     togglePanel() {
         this.open ? this.closePanel() : this.openPanel();
@@ -10881,17 +10884,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
+const compatibleOptions = {
+    specialCharacters: ['/', '(', ')', '.', ':', '-', ' ', '+', ',', '@', '[', ']', '"', "'", '*'],
+    patterns: {
+        '0': { pattern: /\d/ },
+        '9': { pattern: /\d/, optional: true },
+        'A': { pattern: /[a-zA-Z0-9]/ },
+        'S': { pattern: /[a-zA-Z]/ }
+    },
+    prefix: '',
+    suffix: '',
+    thousandSeparator: '',
+    decimalMarker: '.',
+    clearIfNotMatch: false,
+    showMaskTyped: false,
+    placeHolderCharacter: '_',
+    shownMaskExpression: '',
+    dropSpecialCharacters: true,
+    hiddenInput: false,
+    validation: true,
+    instantPrefix: false,
+    separatorLimit: '',
+    apm: false,
+    allowNegativeNumbers: false,
+    leadZeroDateTime: false,
+    leadZero: false,
+    triggerOnMaskChange: false,
+    keepCharacterPositions: false,
+    inputTransformFn: (v) => v,
+    outputTransformFn: (v) => v,
+    maskFilled: new EventEmitter()
+};
+class MatchaMaskModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, declarations: [MatchaMaskCompatibleDirective], imports: [CommonModule], exports: [MatchaMaskCompatibleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, providers: [
+            MatchaMaskService,
+            { provide: MATCHA_MASK_CONFIG, useValue: compatibleOptions }
+        ], imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MatchaMaskCompatibleDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        MatchaMaskCompatibleDirective
+                    ],
+                    providers: [
+                        MatchaMaskService,
+                        { provide: MATCHA_MASK_CONFIG, useValue: compatibleOptions }
+                    ]
+                }]
+        }] });
+
 class MatchaFormFieldModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, imports: [CommonModule, MatchaIconModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent], imports: [CommonModule, MatchaIconModule, ReactiveFormsModule, MatchaMaskModule], exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent, ReactiveFormsModule, MatchaMaskModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, imports: [CommonModule, MatchaIconModule, ReactiveFormsModule, MatchaMaskModule, ReactiveFormsModule, MatchaMaskModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent],
-                    imports: [CommonModule, MatchaIconModule],
-                    exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent],
+                    imports: [CommonModule, MatchaIconModule, ReactiveFormsModule, MatchaMaskModule],
+                    exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent, ReactiveFormsModule, MatchaMaskModule],
                 }]
         }] });
 
@@ -11674,64 +11735,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
-const compatibleOptions = {
-    specialCharacters: ['/', '(', ')', '.', ':', '-', ' ', '+', ',', '@', '[', ']', '"', "'", '*'],
-    patterns: {
-        '0': { pattern: /\d/ },
-        '9': { pattern: /\d/, optional: true },
-        'A': { pattern: /[a-zA-Z0-9]/ },
-        'S': { pattern: /[a-zA-Z]/ }
-    },
-    prefix: '',
-    suffix: '',
-    thousandSeparator: '',
-    decimalMarker: '.',
-    clearIfNotMatch: false,
-    showMaskTyped: false,
-    placeHolderCharacter: '_',
-    shownMaskExpression: '',
-    dropSpecialCharacters: true,
-    hiddenInput: false,
-    validation: true,
-    instantPrefix: false,
-    separatorLimit: '',
-    apm: false,
-    allowNegativeNumbers: false,
-    leadZeroDateTime: false,
-    leadZero: false,
-    triggerOnMaskChange: false,
-    keepCharacterPositions: false,
-    inputTransformFn: (v) => v,
-    outputTransformFn: (v) => v,
-    maskFilled: new EventEmitter()
-};
-class MatchaMaskModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, declarations: [MatchaMaskCompatibleDirective], imports: [CommonModule], exports: [MatchaMaskCompatibleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, providers: [
-            MatchaMaskService,
-            { provide: MATCHA_MASK_CONFIG, useValue: compatibleOptions }
-        ], imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MatchaMaskCompatibleDirective
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        MatchaMaskCompatibleDirective
-                    ],
-                    providers: [
-                        MatchaMaskService,
-                        { provide: MATCHA_MASK_CONFIG, useValue: compatibleOptions }
-                    ]
-                }]
-        }] });
-
 class MatchaInputPhoneModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneModule, declarations: [MatchaInputPhoneComponent], imports: [CommonModule,