matcha-components 20.90.0 → 20.91.0

package/fesm2022/matcha-components.mjs

@@ -2277,13 +2277,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MatchaLabelComponent {
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         this.elementRef = elementRef;
+        this.cdr = cdr;
         this.color = 'blue-grey';
         this.isRequired = false;
     }
     ngAfterViewInit() {
-        this.checkIfRequired();
+        // Usar setTimeout para evitar ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => {
+            this.checkIfRequired();
+            this.cdr.detectChanges();
+        });
     }
     checkIfRequired() {
         // Busca o form-field pai
@@ -2295,13 +2300,13 @@ class MatchaLabelComponent {
             this.isRequired = !!inputElement;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isRequired\">&nbsp;*</span>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>\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: MatchaLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-label', standalone: false, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isRequired\">&nbsp;*</span>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { color: [{
                 type: Input
             }] } });
 
@@ -4822,6 +4827,7 @@ const initialConfig = {
     leadZero: false,
     keepCharacterPositions: false,
     triggerOnMaskChange: false,
+    currencyMode: false,
     inputTransformFn: (value) => value,
     outputTransformFn: (value) => value,
     maskFilled: new EventEmitter(),
@@ -4911,6 +4917,7 @@ class MatchaMaskApplierService {
         this.keepCharacterPositions = this._config.keepCharacterPositions;
         this.instantPrefix = this._config.instantPrefix;
         this.triggerOnMaskChange = this._config.triggerOnMaskChange;
+        this.currencyMode = this._config.currencyMode;
         this._shift = new Set();
         this.plusOnePosition = false;
         this.maskExpression = '';
@@ -5108,6 +5115,42 @@ class MatchaMaskApplierService {
                     decimalMarker = this.decimalMarker.find((dm) => dm !== this.thousandSeparator);
                 }
             }
+            // Modo moeda: dígitos entram pela direita (ex: 1 → 0,01, 12 → 0,12, 123 → 1,23)
+            if (this.currencyMode && precision > 0) {
+                // Extrair apenas dígitos e sinal negativo
+                const hasMinus = processedValue.startsWith("-" /* MaskExpression.MINUS */) ||
+                    (this.allowNegativeNumbers && processedValue.includes("-" /* MaskExpression.MINUS */));
+                const digitsOnly = processedValue.replace(/[^\d]/g, '');
+                if (digitsOnly.length === 0) {
+                    result = "" /* MaskExpression.EMPTY_STRING */;
+                }
+                else {
+                    // Remover zeros à esquerda desnecessários
+                    const cleanDigits = digitsOnly.replace(/^0+/, '') || '0';
+                    let formattedValue;
+                    if (cleanDigits.length <= precision) {
+                        // Menos ou igual dígitos que a precisão: 0,XX
+                        const paddedDecimal = cleanDigits.padStart(precision, '0');
+                        formattedValue = '0' + decimalMarker + paddedDecimal;
+                    }
+                    else {
+                        // Mais dígitos que a precisão: separar inteiro e decimal
+                        const integerPart = cleanDigits.slice(0, -precision);
+                        const decimalPart = cleanDigits.slice(-precision);
+                        // Aplicar separador de milhares na parte inteira
+                        let formattedInteger = integerPart;
+                        const rgx = /(\d+)(\d{3})/;
+                        while (this.thousandSeparator && rgx.test(formattedInteger)) {
+                            formattedInteger = formattedInteger.replace(rgx, '$1' + this.thousandSeparator + '$2');
+                        }
+                        formattedValue = formattedInteger + decimalMarker + decimalPart;
+                    }
+                    result = (hasMinus ? "-" /* MaskExpression.MINUS */ : '') + formattedValue;
+                }
+                // Mover o cursor para o final
+                cb(result.length, result.length);
+                return `${this.prefix}${result}${this.suffix}`;
+            }
             if (backspaced) {
                 const { decimalMarkerIndex, nonZeroIndex } = this._findFirstNonZeroAndDecimalIndex(processedValue, decimalMarker);
                 const zeroIndexMinus = processedValue[0] === "-" /* MaskExpression.MINUS */;
@@ -5694,9 +5737,33 @@ class MatchaMaskService extends MatchaMaskApplierService {
     applyMask(inputValue, maskExpression, position = 0, justPasted = false, backspaced = false, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     cb = () => { }) {
+        // Converter automaticamente número, boolean ou object para string (retrocompatível)
+        // Isso previne o erro "indexOf is not a function" quando números são passados
+        let processedInputValue;
+        if (inputValue === null || inputValue === undefined) {
+            processedInputValue = '';
+        }
+        else if (typeof inputValue === 'number') {
+            processedInputValue = String(inputValue);
+        }
+        else if (typeof inputValue === 'boolean') {
+            processedInputValue = inputValue ? 'true' : 'false';
+        }
+        else if (typeof inputValue === 'object') {
+            // Para objetos, tentar converter para string (JSON.stringify ou toString)
+            try {
+                processedInputValue = JSON.stringify(inputValue);
+            }
+            catch {
+                processedInputValue = String(inputValue);
+            }
+        }
+        else {
+            processedInputValue = String(inputValue);
+        }
         // If no mask expression, return the input value or the actual value
         if (!maskExpression) {
-            return inputValue !== this.actualValue ? this.actualValue : inputValue;
+            return processedInputValue !== this.actualValue ? this.actualValue : processedInputValue;
         }
         // Show mask in input if required
         this.maskIsShown = this.showMaskTyped
@@ -5704,27 +5771,27 @@ class MatchaMaskService extends MatchaMaskApplierService {
             : "" /* MaskExpression.EMPTY_STRING */;
         // Handle specific mask expressions
         if (this.maskExpression === "IP" /* MaskExpression.IP */ && this.showMaskTyped) {
-            this.maskIsShown = this.showMaskInInput(inputValue || "#" /* MaskExpression.HASH */);
+            this.maskIsShown = this.showMaskInInput(processedInputValue || "#" /* MaskExpression.HASH */);
         }
         if (this.maskExpression === "CPF_CNPJ" /* MaskExpression.CPF_CNPJ */ && this.showMaskTyped) {
-            this.maskIsShown = this.showMaskInInput(inputValue || "#" /* MaskExpression.HASH */);
+            this.maskIsShown = this.showMaskInInput(processedInputValue || "#" /* MaskExpression.HASH */);
         }
         // Handle empty input value with mask typed
-        if (!inputValue && this.showMaskTyped) {
+        if (!processedInputValue && this.showMaskTyped) {
             this.formControlResult(this.prefix);
             return `${this.prefix}${this.maskIsShown}${this.suffix}`;
         }
-        const getSymbol = !!inputValue && typeof this.selStart === 'number'
-            ? (inputValue[this.selStart] ?? "" /* MaskExpression.EMPTY_STRING */)
+        const getSymbol = !!processedInputValue && typeof this.selStart === 'number'
+            ? (processedInputValue[this.selStart] ?? "" /* MaskExpression.EMPTY_STRING */)
             : "" /* MaskExpression.EMPTY_STRING */;
         let newInputValue = '';
         let newPosition = position;
         // Handle hidden input or input with asterisk symbol
         if ((this.hiddenInput ||
-            (inputValue && inputValue.indexOf("*" /* MaskExpression.SYMBOL_STAR */) >= 0)) &&
+            (processedInputValue && processedInputValue.indexOf("*" /* MaskExpression.SYMBOL_STAR */) >= 0)) &&
             !this.writingValue) {
-            let actualResult = inputValue && inputValue.length === 1
-                ? inputValue.split("" /* MaskExpression.EMPTY_STRING */)
+            let actualResult = processedInputValue && processedInputValue.length === 1
+                ? processedInputValue.split("" /* MaskExpression.EMPTY_STRING */)
                 : this.actualValue.split("" /* MaskExpression.EMPTY_STRING */);
             // Handle backspace
             if (backspaced) {
@@ -5735,7 +5802,7 @@ class MatchaMaskService extends MatchaMaskApplierService {
             // Remove mask if showMaskTyped is true
             if (this.showMaskTyped) {
                 // eslint-disable-next-line no-param-reassign
-                inputValue = this.removeMask(inputValue);
+                processedInputValue = this.removeMask(processedInputValue);
                 actualResult = this.removeMask(actualResult.join('')).split("" /* MaskExpression.EMPTY_STRING */);
             }
             // Handle selection start and end
@@ -5744,18 +5811,18 @@ class MatchaMaskService extends MatchaMaskApplierService {
                 this.selEnd = Number(this.selEnd);
             }
             else {
-                if (inputValue !== "" /* MaskExpression.EMPTY_STRING */ && actualResult.length) {
+                if (processedInputValue !== "" /* MaskExpression.EMPTY_STRING */ && actualResult.length) {
                     if (typeof this.selStart === 'number' && typeof this.selEnd === 'number') {
-                        if (inputValue.length > actualResult.length) {
+                        if (processedInputValue.length > actualResult.length) {
                             actualResult.splice(this.selStart, 0, getSymbol);
                         }
-                        else if (inputValue.length < actualResult.length) {
-                            if (actualResult.length - inputValue.length === 1) {
+                        else if (processedInputValue.length < actualResult.length) {
+                            if (actualResult.length - processedInputValue.length === 1) {
                                 if (backspaced) {
                                     actualResult.splice(this.selStart - 1, 1);
                                 }
                                 else {
-                                    actualResult.splice(inputValue.length - 1, 1);
+                                    actualResult.splice(processedInputValue.length - 1, 1);
                                 }
                             }
                             else {
@@ -5770,27 +5837,27 @@ class MatchaMaskService extends MatchaMaskApplierService {
             }
             // Remove mask if showMaskTyped is true and hiddenInput is false
             if (this.showMaskTyped && !this.hiddenInput) {
-                newInputValue = this.removeMask(inputValue);
+                newInputValue = this.removeMask(processedInputValue);
             }
             // Handle actual value length
             if (this.actualValue.length) {
-                if (actualResult.length < inputValue.length) {
+                if (actualResult.length < processedInputValue.length) {
                     newInputValue = this.shiftTypedSymbols(actualResult.join("" /* MaskExpression.EMPTY_STRING */));
                 }
-                else if (actualResult.length === inputValue.length) {
+                else if (actualResult.length === processedInputValue.length) {
                     newInputValue = actualResult.join("" /* MaskExpression.EMPTY_STRING */);
                 }
                 else {
-                    newInputValue = inputValue;
+                    newInputValue = processedInputValue;
                 }
             }
             else {
-                newInputValue = inputValue;
+                newInputValue = processedInputValue;
             }
         }
         // Handle just pasted input
         if (justPasted && (this.hiddenInput || !this.hiddenInput)) {
-            newInputValue = inputValue;
+            newInputValue = processedInputValue;
         }
         // Handle backspace with special characters
         if (backspaced &&
@@ -5817,11 +5884,11 @@ class MatchaMaskService extends MatchaMaskApplierService {
         }
         // Handle mask changed
         if (this.maskChanged) {
-            newInputValue = inputValue;
+            newInputValue = processedInputValue;
         }
         else {
             newInputValue =
-                Boolean(newInputValue) && newInputValue.length ? newInputValue : inputValue;
+                Boolean(newInputValue) && newInputValue.length ? newInputValue : processedInputValue;
         }
         // Handle showMaskTyped and keepCharacterPositions
         if (this.showMaskTyped &&
@@ -6316,23 +6383,24 @@ class MatchaMaskCompatibleDirective {
         this._suffix = '';
         this.thousandSeparator = ' ';
         this.decimalMarker = '.';
-        this.dropSpecialCharacters = null;
-        this.hiddenInput = null;
-        this.showMaskTyped = null;
+        this._dropSpecialCharacters = null;
+        this._hiddenInput = null;
+        this._showMaskTyped = null;
         this.placeHolderCharacter = null;
         this.shownMaskExpression = null;
-        this.clearIfNotMatch = null;
-        this.validation = null;
+        this._clearIfNotMatch = null;
+        this._validation = null;
         this.separatorLimit = '';
-        this.allowNegativeNumbers = null;
-        this.leadZeroDateTime = null;
-        this.leadZero = null;
-        this.triggerOnMaskChange = null;
-        this.apm = null;
+        this._allowNegativeNumbers = null;
+        this._leadZeroDateTime = null;
+        this._leadZero = null;
+        this._triggerOnMaskChange = null;
+        this._apm = null;
         this.inputTransformFn = null;
         this.outputTransformFn = null;
-        this.keepCharacterPositions = null;
-        this.instantPrefix = null;
+        this._keepCharacterPositions = null;
+        this._instantPrefix = null;
+        this._currencyMode = null;
         this.maskFilled = new EventEmitter();
         this._maskValue = '';
         this._inputValue = '';
@@ -6366,8 +6434,112 @@ class MatchaMaskCompatibleDirective {
     get suffixAttr() {
         return this._suffix || null;
     }
+    set dropSpecialCharacters(value) {
+        // Converter string "true" ou "false" para boolean (retrocompatível)
+        if (value === 'true' || value === true) {
+            this._dropSpecialCharacters = true;
+        }
+        else if (value === 'false' || value === false) {
+            this._dropSpecialCharacters = false;
+        }
+        else if (Array.isArray(value) || value === null) {
+            this._dropSpecialCharacters = value;
+        }
+        else {
+            // Para qualquer outro valor string, tratar como false
+            this._dropSpecialCharacters = false;
+        }
+    }
+    get dropSpecialCharacters() {
+        return this._dropSpecialCharacters;
+    }
+    // Helper function para converter string para boolean (retrocompatível)
+    convertToBoolean(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'string') {
+            return value.toLowerCase() === 'true';
+        }
+        return false;
+    }
+    set hiddenInput(value) {
+        this._hiddenInput = this.convertToBoolean(value);
+    }
+    get hiddenInput() {
+        return this._hiddenInput;
+    }
+    set showMaskTyped(value) {
+        this._showMaskTyped = this.convertToBoolean(value);
+    }
+    get showMaskTyped() {
+        return this._showMaskTyped;
+    }
+    set clearIfNotMatch(value) {
+        this._clearIfNotMatch = this.convertToBoolean(value);
+    }
+    get clearIfNotMatch() {
+        return this._clearIfNotMatch;
+    }
+    set validation(value) {
+        this._validation = this.convertToBoolean(value);
+    }
+    get validation() {
+        return this._validation;
+    }
+    set allowNegativeNumbers(value) {
+        this._allowNegativeNumbers = this.convertToBoolean(value);
+    }
+    get allowNegativeNumbers() {
+        return this._allowNegativeNumbers;
+    }
+    set leadZeroDateTime(value) {
+        this._leadZeroDateTime = this.convertToBoolean(value);
+    }
+    get leadZeroDateTime() {
+        return this._leadZeroDateTime;
+    }
+    set leadZero(value) {
+        this._leadZero = this.convertToBoolean(value);
+    }
+    get leadZero() {
+        return this._leadZero;
+    }
+    set triggerOnMaskChange(value) {
+        this._triggerOnMaskChange = this.convertToBoolean(value);
+    }
+    get triggerOnMaskChange() {
+        return this._triggerOnMaskChange;
+    }
+    set apm(value) {
+        this._apm = this.convertToBoolean(value);
+    }
+    get apm() {
+        return this._apm;
+    }
+    set keepCharacterPositions(value) {
+        this._keepCharacterPositions = this.convertToBoolean(value);
+    }
+    get keepCharacterPositions() {
+        return this._keepCharacterPositions;
+    }
+    set instantPrefix(value) {
+        this._instantPrefix = this.convertToBoolean(value);
+    }
+    get instantPrefix() {
+        return this._instantPrefix;
+    }
+    set currencyMode(value) {
+        this._currencyMode = this.convertToBoolean(value);
+    }
+    get currencyMode() {
+        return this._currencyMode;
+    }
     ngOnChanges(changes) {
-        const { mask, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, instantPrefix, } = changes;
+        const { mask, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, instantPrefix, currencyMode, } = changes;
         if (mask) {
             this._mask = mask.currentValue ?? '';
             this._maskValue = this._mask ?? '';
@@ -6394,13 +6566,25 @@ class MatchaMaskCompatibleDirective {
             this._maskService.decimalMarker = decimalMarker.currentValue ?? '.';
         }
         if (dropSpecialCharacters) {
-            this._maskService.dropSpecialCharacters = dropSpecialCharacters.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.dropSpecialCharacters;
+            if (value !== null) {
+                this._maskService.dropSpecialCharacters = value;
+            }
         }
         if (hiddenInput) {
-            this._maskService.hiddenInput = hiddenInput.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.hiddenInput;
+            if (value !== null) {
+                this._maskService.hiddenInput = value;
+            }
         }
         if (showMaskTyped) {
-            this._maskService.showMaskTyped = showMaskTyped.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.showMaskTyped;
+            if (value !== null) {
+                this._maskService.showMaskTyped = value;
+            }
         }
         if (placeHolderCharacter) {
             this._maskService.placeHolderCharacter = placeHolderCharacter.currentValue;
@@ -6409,28 +6593,56 @@ class MatchaMaskCompatibleDirective {
             this._maskService.shownMaskExpression = shownMaskExpression.currentValue;
         }
         if (clearIfNotMatch) {
-            this._maskService.clearIfNotMatch = clearIfNotMatch.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.clearIfNotMatch;
+            if (value !== null) {
+                this._maskService.clearIfNotMatch = value;
+            }
         }
         if (validation) {
-            this._maskService.validation = validation.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.validation;
+            if (value !== null) {
+                this._maskService.validation = value;
+            }
         }
         if (separatorLimit) {
             this._maskService.separatorLimit = separatorLimit.currentValue ?? '';
         }
         if (allowNegativeNumbers) {
-            this._maskService.allowNegativeNumbers = allowNegativeNumbers.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.allowNegativeNumbers;
+            if (value !== null) {
+                this._maskService.allowNegativeNumbers = value;
+            }
         }
         if (leadZeroDateTime) {
-            this._maskService.leadZeroDateTime = leadZeroDateTime.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.leadZeroDateTime;
+            if (value !== null) {
+                this._maskService.leadZeroDateTime = value;
+            }
         }
         if (leadZero) {
-            this._maskService.leadZero = leadZero.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.leadZero;
+            if (value !== null) {
+                this._maskService.leadZero = value;
+            }
         }
         if (triggerOnMaskChange) {
-            this._maskService.triggerOnMaskChange = triggerOnMaskChange.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.triggerOnMaskChange;
+            if (value !== null) {
+                this._maskService.triggerOnMaskChange = value;
+            }
         }
         if (apm) {
-            this._maskService.apm = apm.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.apm;
+            if (value !== null) {
+                this._maskService.apm = value;
+            }
         }
         if (inputTransformFn) {
             this._maskService.inputTransformFn = inputTransformFn.currentValue;
@@ -6439,10 +6651,25 @@ class MatchaMaskCompatibleDirective {
             this._maskService.outputTransformFn = outputTransformFn.currentValue;
         }
         if (keepCharacterPositions) {
-            this._maskService.keepCharacterPositions = keepCharacterPositions.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.keepCharacterPositions;
+            if (value !== null) {
+                this._maskService.keepCharacterPositions = value;
+            }
         }
         if (instantPrefix) {
-            this._maskService.instantPrefix = instantPrefix.currentValue;
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.instantPrefix;
+            if (value !== null) {
+                this._maskService.instantPrefix = value;
+            }
+        }
+        if (currencyMode) {
+            // O setter já faz a conversão automática de string para boolean
+            const value = this.currencyMode;
+            if (value !== null) {
+                this._maskService.currencyMode = value;
+            }
         }
     }
     onPaste() {
@@ -6456,21 +6683,26 @@ class MatchaMaskCompatibleDirective {
         if (this._maskService.writingValue) {
             return;
         }
-        this._inputValue = value;
+        // Converter automaticamente número para string (retrocompatível)
+        const stringValue = typeof value === 'number' ? value.toString() : (value || '');
+        this._inputValue = stringValue;
         // Aplicar máscara se definida
         if (this._mask && this._mask.trim() !== '') {
-            const maskedValue = this._maskService.applyMask(value, this._mask);
-            if (maskedValue !== value) {
+            const maskedValue = this._maskService.applyMask(stringValue, this._mask);
+            if (maskedValue !== stringValue) {
                 this._maskService.writingValue = true;
                 this._maskService.onChange(maskedValue);
-                this._maskService.writingValue = false;
+                // Usar setTimeout para garantir que writingValue permaneça true durante o ciclo
+                setTimeout(() => {
+                    this._maskService.writingValue = false;
+                }, 0);
             }
             else {
-                this._maskService.onChange(value);
+                this._maskService.onChange(stringValue);
             }
         }
         else {
-            this._maskService.onChange(value);
+            this._maskService.onChange(stringValue);
         }
     }
     onInput(event) {
@@ -6511,17 +6743,65 @@ class MatchaMaskCompatibleDirective {
         // Implementar lógica de teclado se necessário
     }
     writeValue(value) {
+        // Se já estamos escrevendo, não processar novamente (prevenir loop infinito)
+        if (this._maskService.writingValue) {
+            return;
+        }
         this._maskService.writingValue = true;
-        this._inputValue = value;
+        // Converter automaticamente número para string (retrocompatível)
+        // Isso previne o erro "indexOf is not a function" quando números são passados
+        let inputValue;
+        if (value === null || value === undefined) {
+            inputValue = '';
+        }
+        else if (typeof value === 'number') {
+            inputValue = value.toString();
+        }
+        else {
+            inputValue = String(value);
+        }
+        // Se a máscara usa separator e o valor tem ponto decimal, converter para vírgula
+        // Isso é útil quando valores numéricos vêm do backend (ex: 10.5 -> 10,50)
+        if (this._mask && this._mask.trim().startsWith('separator.') && inputValue.includes('.')) {
+            // Converter ponto para vírgula se o decimalMarker é vírgula
+            const decimalMarker = this._maskService.decimalMarker;
+            if (decimalMarker === ',' || (Array.isArray(decimalMarker) && decimalMarker.includes(','))) {
+                inputValue = inputValue.replace('.', ',');
+            }
+        }
+        this._inputValue = inputValue;
         // Aplicar máscara se definida
         if (this._mask && this._mask.trim() !== '') {
-            const maskedValue = this._maskService.applyMask(value, this._mask);
-            this._maskService.onChange(maskedValue);
+            const maskedValue = this._maskService.applyMask(inputValue, this._mask);
+            // Só atualizar se o valor mascarado for diferente do valor atual
+            // Isso previne loops quando o valor já está correto
+            const currentValue = this._maskService.currentValue || '';
+            if (maskedValue !== currentValue) {
+                // Usar setTimeout para garantir que writingValue permaneça true durante o ciclo
+                // Isso previne que onModelChange processe durante writeValue
+                setTimeout(() => {
+                    this._maskService.onChange(maskedValue);
+                    this._maskService.writingValue = false;
+                }, 0);
+            }
+            else {
+                // Se o valor já está correto, não precisa atualizar
+                this._maskService.writingValue = false;
+            }
         }
         else {
-            this._maskService.onChange(value);
+            // Sem máscara, apenas atualizar o valor
+            const currentValue = this._maskService.currentValue || '';
+            if (inputValue !== currentValue) {
+                setTimeout(() => {
+                    this._maskService.onChange(inputValue);
+                    this._maskService.writingValue = false;
+                }, 0);
+            }
+            else {
+                this._maskService.writingValue = false;
+            }
         }
-        this._maskService.writingValue = false;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -6538,7 +6818,7 @@ class MatchaMaskCompatibleDirective {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskCompatibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMaskCompatibleDirective, isStandalone: false, selector: "input[matchaMask], textarea[matchaMask]", inputs: { mask: ["matchaMask", "mask"], specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions", instantPrefix: "instantPrefix" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste($event)", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-matcha-mask": "this.maskAttr", "attr.data-prefix": "this.prefixAttr", "attr.data-suffix": "this.suffixAttr" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMaskCompatibleDirective, isStandalone: false, selector: "input[matchaMask], textarea[matchaMask]", inputs: { mask: ["matchaMask", "mask"], specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions", instantPrefix: "instantPrefix", currencyMode: "currencyMode" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste($event)", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-matcha-mask": "this.maskAttr", "attr.data-prefix": "this.prefixAttr", "attr.data-suffix": "this.suffixAttr" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaMaskCompatibleDirective),
@@ -6630,6 +6910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], instantPrefix: [{
                 type: Input
+            }], currencyMode: [{
+                type: Input
             }], maskFilled: [{
                 type: Output
             }], onPaste: [{
@@ -6854,7 +7136,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)\" [matchaMask]=\"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[matchaMask], textarea[matchaMask]", inputs: ["matchaMask", "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: ["matchaMask"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    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)\" [matchaMask]=\"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[matchaMask], textarea[matchaMask]", inputs: ["matchaMask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "currencyMode"], outputs: ["maskFilled"], exportAs: ["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,