ngx-mask 18.0.4 → 19.0.1

package/fesm2022/ngx-mask.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, inject, Injectable, ElementRef, Renderer2, makeEnvironmentProviders, Directive, Input, Output, HostListener, Pipe } from '@angular/core';
+import { InjectionToken, EventEmitter, inject, Injectable, ElementRef, Renderer2, makeEnvironmentProviders, input, output, signal, Directive, HostListener, Pipe } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 
@@ -57,7 +57,6 @@ const initialConfig = {
     thousandSeparator: ' ',
     decimalMarker: ['.', ','],
     clearIfNotMatch: false,
-    showTemplate: false,
     showMaskTyped: false,
     placeHolderCharacter: '_',
     dropSpecialCharacters: true,
@@ -140,7 +139,6 @@ class NgxMaskApplierService {
     _config = inject(NGX_MASK_CONFIG);
     dropSpecialCharacters = this._config.dropSpecialCharacters;
     hiddenInput = this._config.hiddenInput;
-    showTemplate;
     clearIfNotMatch = this._config.clearIfNotMatch;
     specialCharacters = this._config.specialCharacters;
     patterns = this._config.patterns;
@@ -169,11 +167,6 @@ class NgxMaskApplierService {
     deletedSpecialCharacter = false;
     ipError;
     cpfCnpjError;
-    applyMaskWithPattern(inputValue, maskAndPattern) {
-        const [mask, customPattern] = maskAndPattern;
-        this.customPattern = customPattern;
-        return this.applyMask(inputValue, mask);
-    }
     applyMask(inputValue, maskExpression, position = 0, justPasted = false, backspaced = false, cb = () => { }) {
         if (!maskExpression || typeof inputValue !== 'string') {
             return MaskExpression.EMPTY_STRING;
@@ -863,10 +856,10 @@ class NgxMaskApplierService {
         }
         return -1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskApplierService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskApplierService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskApplierService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskApplierService, decorators: [{
             type: Injectable
         }] });
 
@@ -875,12 +868,12 @@ class NgxMaskService extends NgxMaskApplierService {
     maskIsShown = '';
     selStart = null;
     selEnd = null;
-    writingValue = false;
     maskChanged = false;
-    _maskExpressionArray = [];
+    maskExpressionArray = [];
     triggerOnMaskChange = false;
-    _previousValue = '';
-    _currentValue = '';
+    previousValue = '';
+    currentValue = '';
+    writingValue = false;
     _emitValue = false;
     _start;
     _end;
@@ -949,7 +942,7 @@ class NgxMaskService extends NgxMaskApplierService {
             this.specialCharacters.indexOf(this.maskExpression[newPosition] ?? MaskExpression.EMPTY_STRING) !== -1 &&
             this.showMaskTyped &&
             !this.prefix) {
-            newInputValue = this._currentValue;
+            newInputValue = this.currentValue;
         }
         if (this.deletedSpecialCharacter && newPosition) {
             if (this.specialCharacters.includes(this.actualValue.slice(newPosition, newPosition + 1))) {
@@ -996,13 +989,13 @@ class NgxMaskService extends NgxMaskApplierService {
             this.specialCharacters = this.specialCharacters.filter((item) => !this._compareOrIncludes(item, this.decimalMarker, this.thousandSeparator));
         }
         if (result || result === '') {
-            this._previousValue = this._currentValue;
-            this._currentValue = result;
+            this.previousValue = this.currentValue;
+            this.currentValue = result;
             this._emitValue =
-                this._previousValue !== this._currentValue ||
+                this.previousValue !== this.currentValue ||
                     this.maskChanged ||
                     this.writingValue ||
-                    (this._previousValue === this._currentValue && justPasted);
+                    (this.previousValue === this.currentValue && justPasted);
         }
         this._emitValue
             ? this.writingValue && this.triggerOnMaskChange
@@ -1426,10 +1419,10 @@ class NgxMaskService extends NgxMaskApplierService {
     currentLocaleDecimalMarker() {
         return (1.1).toLocaleString().substring(1, 2);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskService, decorators: [{
             type: Injectable
         }] });
 
@@ -1462,65 +1455,60 @@ function provideEnvironmentNgxMask(configValue) {
 }
 
 class NgxMaskDirective {
-    maskExpression = '';
-    specialCharacters = [];
-    patterns = {};
-    prefix = '';
-    suffix = '';
-    thousandSeparator = ' ';
-    decimalMarker = '.';
-    dropSpecialCharacters = null;
-    hiddenInput = null;
-    showMaskTyped = null;
-    placeHolderCharacter = null;
-    shownMaskExpression = null;
-    showTemplate = null;
-    clearIfNotMatch = null;
-    validation = null;
-    separatorLimit = null;
-    allowNegativeNumbers = null;
-    leadZeroDateTime = null;
-    leadZero = null;
-    triggerOnMaskChange = null;
-    apm = null;
-    inputTransformFn = null;
-    outputTransformFn = null;
-    keepCharacterPositions = null;
-    maskFilled = new EventEmitter();
-    _maskValue = '';
-    _inputValue;
-    _position = null;
-    _code;
-    _maskExpressionArray = [];
-    _allowFewMaskChangeMask = false;
-    _justPasted = false;
-    _isFocused = false;
-    _isComposing = false;
-    document = inject(DOCUMENT);
+    mask = input('');
+    specialCharacters = input([]);
+    patterns = input({});
+    prefix = input('');
+    suffix = input('');
+    thousandSeparator = input(' ');
+    decimalMarker = input('.');
+    dropSpecialCharacters = input(null);
+    hiddenInput = input(null);
+    showMaskTyped = input(null);
+    placeHolderCharacter = input(null);
+    shownMaskExpression = input(null);
+    clearIfNotMatch = input(null);
+    validation = input(null);
+    separatorLimit = input('');
+    allowNegativeNumbers = input(null);
+    leadZeroDateTime = input(null);
+    leadZero = input(null);
+    triggerOnMaskChange = input(null);
+    apm = input(null);
+    inputTransformFn = input(null);
+    outputTransformFn = input(null);
+    keepCharacterPositions = input(null);
+    maskFilled = output();
+    _maskValue = signal('');
+    _inputValue = signal('');
+    _position = signal(null);
+    _code = signal('');
+    _maskExpressionArray = signal([]);
+    _allowFewMaskChangeMask = signal(false);
+    _justPasted = signal(false);
+    _isFocused = signal(false);
+    _isComposing = signal(false);
     _maskService = inject(NgxMaskService, { self: true });
+    document = inject(DOCUMENT);
     _config = inject(NGX_MASK_CONFIG);
     onChange = (_) => { };
     onTouch = () => { };
     ngOnChanges(changes) {
-        const { maskExpression, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, showTemplate, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, } = changes;
-        if (maskExpression) {
-            if (maskExpression.currentValue !== maskExpression.previousValue &&
-                !maskExpression.firstChange) {
+        const { mask, specialCharacters, patterns, prefix, suffix, thousandSeparator, decimalMarker, dropSpecialCharacters, hiddenInput, showMaskTyped, placeHolderCharacter, shownMaskExpression, clearIfNotMatch, validation, separatorLimit, allowNegativeNumbers, leadZeroDateTime, leadZero, triggerOnMaskChange, apm, inputTransformFn, outputTransformFn, keepCharacterPositions, } = changes;
+        if (mask) {
+            if (mask.currentValue !== mask.previousValue && !mask.firstChange) {
                 this._maskService.maskChanged = true;
             }
-            if (maskExpression.currentValue &&
-                maskExpression.currentValue.split(MaskExpression.OR).length > 1) {
-                this._maskExpressionArray = maskExpression.currentValue
-                    .split(MaskExpression.OR)
-                    .sort((a, b) => {
+            if (mask.currentValue && mask.currentValue.split(MaskExpression.OR).length > 1) {
+                this._maskExpressionArray.set(mask.currentValue.split(MaskExpression.OR).sort((a, b) => {
                     return a.length - b.length;
-                });
+                }));
                 this._setMask();
             }
             else {
-                this._maskExpressionArray = [];
-                this._maskValue = maskExpression.currentValue || MaskExpression.EMPTY_STRING;
-                this._maskService.maskExpression = this._maskValue;
+                this._maskExpressionArray.set([]);
+                this._maskValue.set(mask.currentValue || MaskExpression.EMPTY_STRING);
+                this._maskService.maskExpression = this._maskValue();
             }
         }
         if (specialCharacters) {
@@ -1565,7 +1553,7 @@ class NgxMaskDirective {
             this._maskService.showMaskTyped = showMaskTyped.currentValue;
             if (showMaskTyped.previousValue === false &&
                 showMaskTyped.currentValue === true &&
-                this._isFocused) {
+                this._isFocused()) {
                 requestAnimationFrame(() => {
                     this._maskService._elementRef?.nativeElement.click();
                 });
@@ -1577,9 +1565,6 @@ class NgxMaskDirective {
         if (shownMaskExpression) {
             this._maskService.shownMaskExpression = shownMaskExpression.currentValue;
         }
-        if (showTemplate) {
-            this._maskService.showTemplate = showTemplate.currentValue;
-        }
         if (clearIfNotMatch) {
             this._maskService.clearIfNotMatch = clearIfNotMatch.currentValue;
         }
@@ -1611,7 +1596,8 @@ class NgxMaskDirective {
     }
     validate({ value }) {
         const processedValue = typeof value === 'number' ? String(value) : value;
-        if (!this._maskService.validation || !this._maskValue) {
+        const maskValue = this._maskValue();
+        if (!this._maskService.validation || !maskValue) {
             return null;
         }
         if (this._maskService.ipError) {
@@ -1620,19 +1606,19 @@ class NgxMaskDirective {
         if (this._maskService.cpfCnpjError) {
             return this._createValidationError(processedValue);
         }
-        if (this._maskValue.startsWith(MaskExpression.SEPARATOR)) {
+        if (maskValue.startsWith(MaskExpression.SEPARATOR)) {
             return null;
         }
-        if (withoutValidation.includes(this._maskValue)) {
+        if (withoutValidation.includes(maskValue)) {
             return null;
         }
         if (this._maskService.clearIfNotMatch) {
             return null;
         }
-        if (timeMasks.includes(this._maskValue)) {
+        if (timeMasks.includes(maskValue)) {
             return this._validateTime(processedValue);
         }
-        if (this._maskValue === MaskExpression.EMAIL_MASK) {
+        if (maskValue === MaskExpression.EMAIL_MASK) {
             const emailPattern = /^[^@]+@[^@]+\.[^@]+$/;
             if (!emailPattern.test(processedValue) && processedValue) {
                 return this._createValidationError(processedValue);
@@ -1643,53 +1629,53 @@ class NgxMaskDirective {
         }
         if (processedValue && processedValue.length >= 1) {
             let counterOfOpt = 0;
-            if (this._maskValue.includes(MaskExpression.CURLY_BRACKETS_LEFT) &&
-                this._maskValue.includes(MaskExpression.CURLY_BRACKETS_RIGHT)) {
-                const lengthInsideCurlyBrackets = this._maskValue.slice(this._maskValue.indexOf(MaskExpression.CURLY_BRACKETS_LEFT) + 1, this._maskValue.indexOf(MaskExpression.CURLY_BRACKETS_RIGHT));
+            if (maskValue.includes(MaskExpression.CURLY_BRACKETS_LEFT) &&
+                maskValue.includes(MaskExpression.CURLY_BRACKETS_RIGHT)) {
+                const lengthInsideCurlyBrackets = maskValue.slice(maskValue.indexOf(MaskExpression.CURLY_BRACKETS_LEFT) + 1, maskValue.indexOf(MaskExpression.CURLY_BRACKETS_RIGHT));
                 return lengthInsideCurlyBrackets === String(processedValue.length)
                     ? null
                     : this._createValidationError(processedValue);
             }
-            if (this._maskValue.startsWith(MaskExpression.PERCENT)) {
+            if (maskValue.startsWith(MaskExpression.PERCENT)) {
                 return null;
             }
             for (const key in this._maskService.patterns) {
                 if (this._maskService.patterns[key]?.optional) {
-                    if (this._maskValue.indexOf(key) !== this._maskValue.lastIndexOf(key)) {
-                        const opt = this._maskValue
+                    if (maskValue.indexOf(key) !== maskValue.lastIndexOf(key)) {
+                        const opt = maskValue
                             .split(MaskExpression.EMPTY_STRING)
                             .filter((i) => i === key)
                             .join(MaskExpression.EMPTY_STRING);
                         counterOfOpt += opt.length;
                     }
-                    else if (this._maskValue.indexOf(key) !== -1) {
+                    else if (maskValue.indexOf(key) !== -1) {
                         counterOfOpt++;
                     }
-                    if (this._maskValue.indexOf(key) !== -1 &&
-                        processedValue.length >= this._maskValue.indexOf(key)) {
+                    if (maskValue.indexOf(key) !== -1 &&
+                        processedValue.length >= maskValue.indexOf(key)) {
                         return null;
                     }
-                    if (counterOfOpt === this._maskValue.length) {
+                    if (counterOfOpt === maskValue.length) {
                         return null;
                     }
                 }
             }
-            if ((this._maskValue.indexOf(MaskExpression.SYMBOL_STAR) > 1 &&
-                processedValue.length < this._maskValue.indexOf(MaskExpression.SYMBOL_STAR)) ||
-                (this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) > 1 &&
-                    processedValue.length < this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION))) {
+            if ((maskValue.indexOf(MaskExpression.SYMBOL_STAR) > 1 &&
+                processedValue.length < maskValue.indexOf(MaskExpression.SYMBOL_STAR)) ||
+                (maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) > 1 &&
+                    processedValue.length < maskValue.indexOf(MaskExpression.SYMBOL_QUESTION))) {
                 return this._createValidationError(processedValue);
             }
-            if (this._maskValue.indexOf(MaskExpression.SYMBOL_STAR) === -1 ||
-                this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === -1) {
-                const array = this._maskValue.split('*');
+            if (maskValue.indexOf(MaskExpression.SYMBOL_STAR) === -1 ||
+                maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === -1) {
+                const array = maskValue.split('*');
                 const length = this._maskService.dropSpecialCharacters
-                    ? this._maskValue.length -
-                        this._maskService.checkDropSpecialCharAmount(this._maskValue) -
+                    ? maskValue.length -
+                        this._maskService.checkDropSpecialCharAmount(maskValue) -
                         counterOfOpt
-                    : this.prefix
-                        ? this._maskValue.length + this.prefix.length - counterOfOpt
-                        : this._maskValue.length - counterOfOpt;
+                    : this.prefix()
+                        ? maskValue.length + this.prefix().length - counterOfOpt
+                        : maskValue.length - counterOfOpt;
                 if (array.length === 1) {
                     if (processedValue.length < length) {
                         return this._createValidationError(processedValue);
@@ -1700,7 +1686,7 @@ class NgxMaskDirective {
                     if (lastIndexArray &&
                         this._maskService.specialCharacters.includes(lastIndexArray[0]) &&
                         String(processedValue).includes(lastIndexArray[0] ?? '') &&
-                        !this.dropSpecialCharacters) {
+                        !this.dropSpecialCharacters()) {
                         const special = value.split(lastIndexArray[0]);
                         return special[special.length - 1].length === lastIndexArray.length - 1
                             ? null
@@ -1718,8 +1704,8 @@ class NgxMaskDirective {
                     }
                 }
             }
-            if (this._maskValue.indexOf(MaskExpression.SYMBOL_STAR) === 1 ||
-                this._maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === 1) {
+            if (maskValue.indexOf(MaskExpression.SYMBOL_STAR) === 1 ||
+                maskValue.indexOf(MaskExpression.SYMBOL_QUESTION) === 1) {
                 return null;
             }
         }
@@ -1730,10 +1716,10 @@ class NgxMaskDirective {
         return null;
     }
     onPaste() {
-        this._justPasted = true;
+        this._justPasted.set(true);
     }
     onFocus() {
-        this._isFocused = true;
+        this._isFocused.set(true);
     }
     onModelChange(value) {
         if ((value === MaskExpression.EMPTY_STRING ||
@@ -1744,7 +1730,7 @@ class NgxMaskDirective {
         }
     }
     onInput(e) {
-        if (this._isComposing) {
+        if (this._isComposing()) {
             return;
         }
         const el = e.target;
@@ -1752,20 +1738,22 @@ class NgxMaskDirective {
         if (el.type !== 'number') {
             if (typeof transformedValue === 'string' || typeof transformedValue === 'number') {
                 el.value = transformedValue.toString();
-                this._inputValue = el.value;
+                this._inputValue.set(el.value);
                 this._setMask();
-                if (!this._maskValue) {
+                if (!this._maskValue()) {
                     this.onChange(el.value);
                     return;
                 }
                 let position = el.selectionStart === 1
                     ? el.selectionStart + this._maskService.prefix.length
                     : el.selectionStart;
-                if (this.showMaskTyped &&
-                    this.keepCharacterPositions &&
+                if (this.showMaskTyped() &&
+                    this.keepCharacterPositions() &&
                     this._maskService.placeHolderCharacter.length === 1) {
+                    const suffix = this.suffix();
+                    const prefix = this.prefix();
                     const inputSymbol = el.value.slice(position - 1, position);
-                    const prefixLength = this.prefix.length;
+                    const prefixLength = prefix.length;
                     const checkSymbols = this._maskService._checkSymbolMask(inputSymbol, this._maskService.maskExpression[position - 1 - prefixLength] ??
                         MaskExpression.EMPTY_STRING);
                     const checkSpecialCharacter = this._maskService._checkSymbolMask(inputSymbol, this._maskService.maskExpression[position + 1 - prefixLength] ??
@@ -1773,32 +1761,32 @@ class NgxMaskDirective {
                     const selectRangeBackspace = this._maskService.selStart === this._maskService.selEnd;
                     const selStart = Number(this._maskService.selStart) - prefixLength;
                     const selEnd = Number(this._maskService.selEnd) - prefixLength;
-                    const backspaceOrDelete = this._code === MaskExpression.BACKSPACE ||
-                        this._code === MaskExpression.DELETE;
+                    const backspaceOrDelete = this._code() === MaskExpression.BACKSPACE ||
+                        this._code() === MaskExpression.DELETE;
                     if (backspaceOrDelete) {
                         if (!selectRangeBackspace) {
                             if (this._maskService.selStart === prefixLength) {
-                                this._maskService.actualValue = `${this.prefix}${this._maskService.maskIsShown.slice(0, selEnd)}${this._inputValue.split(this.prefix).join('')}`;
+                                this._maskService.actualValue = `${prefix}${this._maskService.maskIsShown.slice(0, selEnd)}${this._inputValue().split(prefix).join('')}`;
                             }
                             else if (this._maskService.selStart ===
                                 this._maskService.maskIsShown.length + prefixLength) {
-                                this._maskService.actualValue = `${this._inputValue}${this._maskService.maskIsShown.slice(selStart, selEnd)}`;
+                                this._maskService.actualValue = `${this._inputValue()}${this._maskService.maskIsShown.slice(selStart, selEnd)}`;
                             }
                             else {
-                                this._maskService.actualValue = `${this.prefix}${this._inputValue
-                                    .split(this.prefix)
+                                this._maskService.actualValue = `${prefix}${this._inputValue()
+                                    .split(prefix)
                                     .join('')
-                                    .slice(0, selStart)}${this._maskService.maskIsShown.slice(selStart, selEnd)}${this._maskService.actualValue.slice(selEnd + prefixLength, this._maskService.maskIsShown.length + prefixLength)}${this.suffix}`;
+                                    .slice(0, selStart)}${this._maskService.maskIsShown.slice(selStart, selEnd)}${this._maskService.actualValue.slice(selEnd + prefixLength, this._maskService.maskIsShown.length + prefixLength)}${suffix}`;
                             }
                         }
-                        else if (!this._maskService.specialCharacters.includes(this._maskService.maskExpression.slice(position - this.prefix.length, position + 1 - this.prefix.length)) &&
+                        else if (!this._maskService.specialCharacters.includes(this._maskService.maskExpression.slice(position - prefixLength, position + 1 - prefixLength)) &&
                             selectRangeBackspace) {
-                            if (selStart === 1 && this.prefix) {
-                                this._maskService.actualValue = `${this.prefix}${this._maskService.placeHolderCharacter}${el.value
-                                    .split(this.prefix)
+                            if (selStart === 1 && prefix) {
+                                this._maskService.actualValue = `${prefix}${this._maskService.placeHolderCharacter}${el.value
+                                    .split(prefix)
                                     .join('')
-                                    .split(this.suffix)
-                                    .join('')}${this.suffix}`;
+                                    .split(suffix)
+                                    .join('')}${suffix}`;
                                 position = position - 1;
                             }
                             else {
@@ -1807,7 +1795,7 @@ class NgxMaskDirective {
                                 this._maskService.actualValue = `${part1}${this._maskService.placeHolderCharacter}${part2}`;
                             }
                         }
-                        position = this._code === MaskExpression.DELETE ? position + 1 : position;
+                        position = this._code() === MaskExpression.DELETE ? position + 1 : position;
                     }
                     if (!backspaceOrDelete) {
                         if (!checkSymbols && !checkSpecialCharacter && selectRangeBackspace) {
@@ -1821,49 +1809,49 @@ class NgxMaskDirective {
                         }
                         else if (checkSymbols) {
                             if (el.value.length === 1 && position === 1) {
-                                this._maskService.actualValue = `${this.prefix}${inputSymbol}${this._maskService.maskIsShown.slice(1, this._maskService.maskIsShown.length)}${this.suffix}`;
+                                this._maskService.actualValue = `${prefix}${inputSymbol}${this._maskService.maskIsShown.slice(1, this._maskService.maskIsShown.length)}${suffix}`;
                             }
                             else {
                                 this._maskService.actualValue = `${el.value.slice(0, position - 1)}${inputSymbol}${el.value
                                     .slice(position + 1)
-                                    .split(this.suffix)
-                                    .join('')}${this.suffix}`;
+                                    .split(suffix)
+                                    .join('')}${suffix}`;
                             }
                         }
-                        else if (this.prefix &&
+                        else if (prefix &&
                             el.value.length === 1 &&
                             position - prefixLength === 1 &&
                             this._maskService._checkSymbolMask(el.value, this._maskService.maskExpression[position - 1 - prefixLength] ??
                                 MaskExpression.EMPTY_STRING)) {
-                            this._maskService.actualValue = `${this.prefix}${el.value}${this._maskService.maskIsShown.slice(1, this._maskService.maskIsShown.length)}${this.suffix}`;
+                            this._maskService.actualValue = `${prefix}${el.value}${this._maskService.maskIsShown.slice(1, this._maskService.maskIsShown.length)}${suffix}`;
                         }
                     }
                 }
                 let caretShift = 0;
                 let backspaceShift = false;
-                if (this._code === MaskExpression.DELETE && MaskExpression.SEPARATOR) {
+                if (this._code() === MaskExpression.DELETE && MaskExpression.SEPARATOR) {
                     this._maskService.deletedSpecialCharacter = true;
                 }
-                if (this._inputValue.length >= this._maskService.maskExpression.length - 1 &&
-                    this._code !== MaskExpression.BACKSPACE &&
+                if (this._inputValue().length >= this._maskService.maskExpression.length - 1 &&
+                    this._code() !== MaskExpression.BACKSPACE &&
                     this._maskService.maskExpression === MaskExpression.DAYS_MONTHS_YEARS &&
                     position < 10) {
-                    const inputSymbol = this._inputValue.slice(position - 1, position);
+                    const inputSymbol = this._inputValue().slice(position - 1, position);
                     el.value =
-                        this._inputValue.slice(0, position - 1) +
+                        this._inputValue().slice(0, position - 1) +
                             inputSymbol +
-                            this._inputValue.slice(position + 1);
+                            this._inputValue().slice(position + 1);
                 }
                 if (this._maskService.maskExpression === MaskExpression.DAYS_MONTHS_YEARS &&
-                    this.leadZeroDateTime) {
+                    this.leadZeroDateTime()) {
                     if ((position < 3 && Number(el.value) > 31 && Number(el.value) < 40) ||
                         (position === 5 && Number(el.value.slice(3, 5)) > 12)) {
                         position = position + 2;
                     }
                 }
                 if (this._maskService.maskExpression === MaskExpression.HOURS_MINUTES_SECONDS &&
-                    this.apm) {
-                    if (this._justPasted && el.value.slice(0, 2) === MaskExpression.DOUBLE_ZERO) {
+                    this.apm()) {
+                    if (this._justPasted() && el.value.slice(0, 2) === MaskExpression.DOUBLE_ZERO) {
                         el.value = el.value.slice(1, 2) + el.value.slice(2, el.value.length);
                     }
                     el.value =
@@ -1871,8 +1859,9 @@ class NgxMaskDirective {
                             ? MaskExpression.NUMBER_ZERO
                             : el.value;
                 }
-                this._maskService.applyValueChanges(position, this._justPasted, this._code === MaskExpression.BACKSPACE || this._code === MaskExpression.DELETE, (shift, _backspaceShift) => {
-                    this._justPasted = false;
+                this._maskService.applyValueChanges(position, this._justPasted(), this._code() === MaskExpression.BACKSPACE ||
+                    this._code() === MaskExpression.DELETE, (shift, _backspaceShift) => {
+                    this._justPasted.set(false);
                     caretShift = shift;
                     backspaceShift = _backspaceShift;
                 });
@@ -1883,13 +1872,13 @@ class NgxMaskDirective {
                     position = position + 1;
                     this._maskService.plusOnePosition = false;
                 }
-                if (this._maskExpressionArray.length) {
-                    if (this._code === MaskExpression.BACKSPACE) {
-                        const specialChartMinusOne = this.specialCharacters.includes(this._maskService.actualValue.slice(position - 1, position));
-                        const specialChartPlusOne = this.specialCharacters.includes(this._maskService.actualValue.slice(position, position + 1));
-                        if (this._allowFewMaskChangeMask && !specialChartPlusOne) {
+                if (this._maskExpressionArray().length) {
+                    if (this._code() === MaskExpression.BACKSPACE) {
+                        const specialChartMinusOne = this.specialCharacters().includes(this._maskService.actualValue.slice(position - 1, position));
+                        const specialChartPlusOne = this.specialCharacters().includes(this._maskService.actualValue.slice(position, position + 1));
+                        if (this._allowFewMaskChangeMask() && !specialChartPlusOne) {
                             position = el.selectionStart + 1;
-                            this._allowFewMaskChangeMask = false;
+                            this._allowFewMaskChangeMask.set(false);
                         }
                         else {
                             position = specialChartMinusOne ? position - 1 : position;
@@ -1902,12 +1891,15 @@ class NgxMaskDirective {
                                 : el.selectionStart;
                     }
                 }
-                this._position =
-                    this._position === 1 && this._inputValue.length === 1 ? null : this._position;
-                let positionToApply = this._position
-                    ? this._inputValue.length + position + caretShift
+                this._position.set(this._position() === 1 && this._inputValue().length === 1
+                    ? null
+                    : this._position());
+                let positionToApply = this._position()
+                    ? this._inputValue().length + position + caretShift
                     : position +
-                        (this._code === MaskExpression.BACKSPACE && !backspaceShift ? 0 : caretShift);
+                        (this._code() === MaskExpression.BACKSPACE && !backspaceShift
+                            ? 0
+                            : caretShift);
                 if (positionToApply > this._getActualInputLength()) {
                     positionToApply =
                         el.value === this._maskService.decimalMarker && el.value.length === 1
@@ -1918,59 +1910,59 @@ class NgxMaskDirective {
                     positionToApply = 0;
                 }
                 el.setSelectionRange(positionToApply, positionToApply);
-                this._position = null;
+                this._position.set(null);
             }
             else {
                 console.warn('Ngx-mask writeValue work with string | number, your current value:', typeof transformedValue);
             }
         }
         else {
-            if (!this._maskValue) {
+            if (!this._maskValue()) {
                 this.onChange(el.value);
                 return;
             }
-            this._maskService.applyValueChanges(el.value.length, this._justPasted, this._code === MaskExpression.BACKSPACE || this._code === MaskExpression.DELETE);
+            this._maskService.applyValueChanges(el.value.length, this._justPasted(), this._code() === MaskExpression.BACKSPACE || this._code() === MaskExpression.DELETE);
         }
     }
     onCompositionStart() {
-        this._isComposing = true;
+        this._isComposing.set(true);
     }
     onCompositionEnd(e) {
-        this._isComposing = false;
-        this._justPasted = true;
+        this._isComposing.set(false);
+        this._justPasted.set(true);
         this.onInput(e);
     }
     onBlur(e) {
-        if (this._maskValue) {
+        if (this._maskValue()) {
             const el = e.target;
             if (this._maskService.leadZero &&
                 el.value.length > 0 &&
                 typeof this._maskService.decimalMarker === 'string') {
                 const maskExpression = this._maskService.maskExpression;
+                const decimalMarker = this._maskService.decimalMarker;
+                const suffix = this._maskService.suffix;
                 const precision = Number(this._maskService.maskExpression.slice(maskExpression.length - 1, maskExpression.length));
                 if (precision > 0) {
-                    el.value = this._maskService.suffix
-                        ? el.value.split(this._maskService.suffix).join('')
-                        : el.value;
-                    const decimalPart = el.value.split(this._maskService.decimalMarker)[1];
-                    el.value = el.value.includes(this._maskService.decimalMarker)
+                    el.value = suffix ? el.value.split(suffix).join('') : el.value;
+                    const decimalPart = el.value.split(decimalMarker)[1];
+                    el.value = el.value.includes(decimalMarker)
                         ? el.value +
                             MaskExpression.NUMBER_ZERO.repeat(precision - decimalPart.length) +
-                            this._maskService.suffix
+                            suffix
                         : el.value +
-                            this._maskService.decimalMarker +
+                            decimalMarker +
                             MaskExpression.NUMBER_ZERO.repeat(precision) +
-                            this._maskService.suffix;
+                            suffix;
                     this._maskService.actualValue = el.value;
                 }
             }
             this._maskService.clearIfNotMatchFn();
         }
-        this._isFocused = false;
+        this._isFocused.set(false);
         this.onTouch();
     }
     onClick(e) {
-        if (!this._maskValue) {
+        if (!this._maskValue()) {
             return;
         }
         const el = e.target;
@@ -1981,7 +1973,7 @@ class NgxMaskDirective {
             el.selectionStart === el.selectionEnd &&
             el.selectionStart > this._maskService.prefix.length &&
             e.keyCode !== 38) {
-            if (this._maskService.showMaskTyped && !this.keepCharacterPositions) {
+            if (this._maskService.showMaskTyped && !this.keepCharacterPositions()) {
                 this._maskService.maskIsShown = this._maskService.showMaskInInput();
                 if (el.setSelectionRange &&
                     this._maskService.prefix + this._maskService.maskIsShown === el.value) {
@@ -2015,18 +2007,18 @@ class NgxMaskDirective {
         }
     }
     onKeyDown(e) {
-        if (!this._maskValue) {
+        if (!this._maskValue()) {
             return;
         }
-        if (this._isComposing) {
+        if (this._isComposing()) {
             if (e.key === 'Enter') {
                 this.onCompositionEnd(e);
             }
             return;
         }
-        this._code = e.code ? e.code : e.key;
+        this._code.set(e.code ? e.code : e.key);
         const el = e.target;
-        this._inputValue = el.value;
+        this._inputValue.set(el.value);
         this._setMask();
         if (el.type !== 'number') {
             if (e.key === MaskExpression.ARROW_UP) {
@@ -2039,21 +2031,21 @@ class NgxMaskDirective {
                     el.selectionStart = el.selectionEnd;
                 }
                 if (e.key === MaskExpression.BACKSPACE && el.selectionStart !== 0) {
-                    this.specialCharacters = this.specialCharacters?.length
-                        ? this.specialCharacters
+                    const prefixLength = this.prefix().length;
+                    const specialCharacters = this.specialCharacters().length
+                        ? this.specialCharacters()
                         : this._config.specialCharacters;
-                    if (this.prefix.length > 1 &&
-                        el.selectionStart <= this.prefix.length) {
-                        el.setSelectionRange(this.prefix.length, el.selectionEnd);
+                    if (prefixLength > 1 && el.selectionStart <= prefixLength) {
+                        el.setSelectionRange(prefixLength, el.selectionEnd);
                     }
                     else {
-                        if (this._inputValue.length !== el.selectionStart &&
+                        if (this._inputValue().length !== el.selectionStart &&
                             el.selectionStart !== 1) {
-                            while (this.specialCharacters.includes((this._inputValue[el.selectionStart - 1] ??
+                            while (specialCharacters.includes((this._inputValue()[el.selectionStart - 1] ??
                                 MaskExpression.EMPTY_STRING).toString()) &&
-                                ((this.prefix.length >= 1 &&
-                                    el.selectionStart > this.prefix.length) ||
-                                    this.prefix.length === 0)) {
+                                ((prefixLength >= 1 &&
+                                    el.selectionStart > prefixLength) ||
+                                    prefixLength === 0)) {
                                 el.setSelectionRange(el.selectionStart - 1, el.selectionEnd);
                             }
                         }
@@ -2071,14 +2063,14 @@ class NgxMaskDirective {
                     cursorStart === 0 &&
                     el.selectionEnd === el.value.length &&
                     el.value.length !== 0) {
-                    this._position = this._maskService.prefix ? this._maskService.prefix.length : 0;
-                    this._maskService.applyMask(this._maskService.prefix, this._maskService.maskExpression, this._position);
+                    this._position.set(this._maskService.prefix ? this._maskService.prefix.length : 0);
+                    this._maskService.applyMask(this._maskService.prefix, this._maskService.maskExpression, this._position());
                 }
             }
-            if (!!this.suffix &&
-                this.suffix.length > 1 &&
-                this._inputValue.length - this.suffix.length < el.selectionStart) {
-                el.setSelectionRange(this._inputValue.length - this.suffix.length, this._inputValue.length);
+            if (!!this.suffix() &&
+                this.suffix().length > 1 &&
+                this._inputValue().length - this.suffix().length < el.selectionStart) {
+                el.setSelectionRange(this._inputValue().length - this.suffix().length, this._inputValue().length);
             }
             else if ((e.code === 'KeyA' && e.ctrlKey) ||
                 (e.code === 'KeyA' && e.metaKey)) {
@@ -2091,6 +2083,7 @@ class NgxMaskDirective {
     }
     async writeValue(controlValue) {
         let value = controlValue;
+        const inputTransformFn = this.inputTransformFn();
         if (typeof value === 'object' && value !== null && 'value' in value) {
             if ('disable' in value) {
                 this.setDisabledState(Boolean(value.disable));
@@ -2098,19 +2091,19 @@ class NgxMaskDirective {
             value = value.value;
         }
         if (value !== null) {
-            value = this.inputTransformFn ? this.inputTransformFn(value) : value;
+            value = inputTransformFn ? inputTransformFn(value) : value;
         }
         if (typeof value === 'string' ||
             typeof value === 'number' ||
             value === null ||
             typeof value === 'undefined') {
             if (value === null || typeof value === 'undefined' || value === '') {
-                this._maskService._currentValue = '';
-                this._maskService._previousValue = '';
+                this._maskService.currentValue = '';
+                this._maskService.previousValue = '';
             }
             let inputValue = value;
             if (typeof inputValue === 'number' ||
-                this._maskValue.startsWith(MaskExpression.SEPARATOR)) {
+                this._maskValue().startsWith(MaskExpression.SEPARATOR)) {
                 inputValue = String(inputValue);
                 const localeDecimalMarker = this._maskService.currentLocaleDecimalMarker();
                 if (!Array.isArray(this._maskService.decimalMarker)) {
@@ -2121,8 +2114,8 @@ class NgxMaskDirective {
                 }
                 if (this._maskService.leadZero &&
                     inputValue &&
-                    this.maskExpression &&
-                    this.dropSpecialCharacters !== false) {
+                    this.mask() &&
+                    this.dropSpecialCharacters() !== false) {
                     inputValue = this._maskService._checkPrecision(this._maskService.maskExpression, inputValue);
                 }
                 if (this._maskService.decimalMarker === MaskExpression.COMMA ||
@@ -2132,7 +2125,7 @@ class NgxMaskDirective {
                         .toString()
                         .replace(MaskExpression.DOT, MaskExpression.COMMA);
                 }
-                if (this.maskExpression?.startsWith(MaskExpression.SEPARATOR) && this.leadZero) {
+                if (this.mask()?.startsWith(MaskExpression.SEPARATOR) && this.leadZero()) {
                     requestAnimationFrame(() => {
                         this._maskService.applyMask(inputValue?.toString() ?? '', this._maskService.maskExpression);
                     });
@@ -2142,26 +2135,26 @@ class NgxMaskDirective {
             if (typeof inputValue !== 'string') {
                 inputValue = '';
             }
-            this._inputValue = inputValue;
+            this._inputValue.set(inputValue);
             this._setMask();
             if ((inputValue && this._maskService.maskExpression) ||
                 (this._maskService.maskExpression &&
                     (this._maskService.prefix || this._maskService.showMaskTyped))) {
-                if (typeof this.inputTransformFn !== 'function') {
+                if (typeof inputTransformFn !== 'function') {
                     this._maskService.writingValue = true;
                 }
                 this._maskService.formElementProperty = [
                     'value',
                     this._maskService.applyMask(inputValue, this._maskService.maskExpression),
                 ];
-                if (typeof this.inputTransformFn !== 'function') {
+                if (typeof inputTransformFn !== 'function') {
                     this._maskService.writingValue = false;
                 }
             }
             else {
                 this._maskService.formElementProperty = ['value', inputValue];
             }
-            this._inputValue = inputValue;
+            this._inputValue.set(inputValue);
         }
         else {
             console.warn('Ngx-mask writeValue work with string | number, your current value:', typeof value);
@@ -2183,21 +2176,24 @@ class NgxMaskDirective {
         }
     }
     checkSelectionOnDeletion(el) {
-        el.selectionStart = Math.min(Math.max(this.prefix.length, el.selectionStart), this._inputValue.length - this.suffix.length);
-        el.selectionEnd = Math.min(Math.max(this.prefix.length, el.selectionEnd), this._inputValue.length - this.suffix.length);
+        const prefixLength = this.prefix().length;
+        const suffixLength = this.suffix().length;
+        const inputValueLength = this._inputValue().length;
+        el.selectionStart = Math.min(Math.max(prefixLength, el.selectionStart), inputValueLength - suffixLength);
+        el.selectionEnd = Math.min(Math.max(prefixLength, el.selectionEnd), inputValueLength - suffixLength);
     }
     setDisabledState(isDisabled) {
         this._maskService.formElementProperty = ['disabled', isDisabled];
     }
     _applyMask() {
-        this._maskService.maskExpression = this._maskService._repeatPatternSymbols(this._maskValue || '');
+        this._maskService.maskExpression = this._maskService._repeatPatternSymbols(this._maskValue() || '');
         this._maskService.formElementProperty = [
             'value',
-            this._maskService.applyMask(this._inputValue, this._maskService.maskExpression),
+            this._maskService.applyMask(this._inputValue(), this._maskService.maskExpression),
         ];
     }
     _validateTime(value) {
-        const rowMaskLen = this._maskValue
+        const rowMaskLen = this._maskValue()
             .split(MaskExpression.EMPTY_STRING)
             .filter((s) => s !== ':').length;
         if (!value) {
@@ -2216,55 +2212,54 @@ class NgxMaskDirective {
     _createValidationError(actualValue) {
         return {
             mask: {
-                requiredMask: this._maskValue,
+                requiredMask: this._maskValue(),
                 actualValue,
             },
         };
     }
     _setMask() {
-        this._maskExpressionArray.some((mask) => {
+        this._maskExpressionArray().some((mask) => {
             const specialChart = mask
                 .split(MaskExpression.EMPTY_STRING)
                 .some((char) => this._maskService.specialCharacters.includes(char));
             if ((specialChart &&
-                this._inputValue &&
-                this._areAllCharactersInEachStringSame(this._maskExpressionArray)) ||
+                this._inputValue() &&
+                this._areAllCharactersInEachStringSame(this._maskExpressionArray())) ||
                 mask.includes(MaskExpression.CURLY_BRACKETS_LEFT)) {
-                const test = this._maskService.removeMask(this._inputValue)?.length <=
+                const test = this._maskService.removeMask(this._inputValue())?.length <=
                     this._maskService.removeMask(mask)?.length;
                 if (test) {
-                    this._maskValue =
-                        this.maskExpression =
-                            this._maskService.maskExpression =
-                                mask.includes(MaskExpression.CURLY_BRACKETS_LEFT)
-                                    ? this._maskService._repeatPatternSymbols(mask)
-                                    : mask;
+                    const maskValue = mask.includes(MaskExpression.CURLY_BRACKETS_LEFT)
+                        ? this._maskService._repeatPatternSymbols(mask)
+                        : mask;
+                    this._maskValue.set(maskValue);
+                    this._maskService.maskExpression = maskValue;
                     return test;
                 }
                 else {
-                    if (this._code === MaskExpression.BACKSPACE) {
-                        this._allowFewMaskChangeMask = true;
+                    if (this._code() === MaskExpression.BACKSPACE) {
+                        this._allowFewMaskChangeMask.set(true);
                     }
-                    const expression = this._maskExpressionArray[this._maskExpressionArray.length - 1] ??
+                    const expression = this._maskExpressionArray()[this._maskExpressionArray().length - 1] ??
                         MaskExpression.EMPTY_STRING;
-                    this._maskValue =
-                        this.maskExpression =
-                            this._maskService.maskExpression =
-                                expression.includes(MaskExpression.CURLY_BRACKETS_LEFT)
-                                    ? this._maskService._repeatPatternSymbols(expression)
-                                    : expression;
+                    const maskValue = expression.includes(MaskExpression.CURLY_BRACKETS_LEFT)
+                        ? this._maskService._repeatPatternSymbols(expression)
+                        : expression;
+                    this._maskValue.set(maskValue);
+                    this._maskService.maskExpression = maskValue;
                 }
             }
             else {
                 const check = this._maskService
-                    .removeMask(this._inputValue)
+                    .removeMask(this._inputValue())
                     ?.split(MaskExpression.EMPTY_STRING)
                     .every((character, index) => {
                     const indexMask = mask.charAt(index);
                     return this._maskService._checkSymbolMask(character, indexMask);
                 });
-                if (check || this._justPasted) {
-                    this._maskValue = this.maskExpression = this._maskService.maskExpression = mask;
+                if (check || this._justPasted()) {
+                    this._maskValue.set(mask);
+                    this._maskService.maskExpression = mask;
                     return check;
                 }
             }
@@ -2282,8 +2277,8 @@ class NgxMaskDirective {
             return uniqueCharacters.size === 1;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: NgxMaskDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { maskExpression: ["mask", "maskExpression"], specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", showTemplate: "showTemplate", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgxMaskDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, specialCharacters: { classPropertyName: "specialCharacters", publicName: "specialCharacters", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, thousandSeparator: { classPropertyName: "thousandSeparator", publicName: "thousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, decimalMarker: { classPropertyName: "decimalMarker", publicName: "decimalMarker", isSignal: true, isRequired: false, transformFunction: null }, dropSpecialCharacters: { classPropertyName: "dropSpecialCharacters", publicName: "dropSpecialCharacters", isSignal: true, isRequired: false, transformFunction: null }, hiddenInput: { classPropertyName: "hiddenInput", publicName: "hiddenInput", isSignal: true, isRequired: false, transformFunction: null }, showMaskTyped: { classPropertyName: "showMaskTyped", publicName: "showMaskTyped", isSignal: true, isRequired: false, transformFunction: null }, placeHolderCharacter: { classPropertyName: "placeHolderCharacter", publicName: "placeHolderCharacter", isSignal: true, isRequired: false, transformFunction: null }, shownMaskExpression: { classPropertyName: "shownMaskExpression", publicName: "shownMaskExpression", isSignal: true, isRequired: false, transformFunction: null }, clearIfNotMatch: { classPropertyName: "clearIfNotMatch", publicName: "clearIfNotMatch", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, separatorLimit: { classPropertyName: "separatorLimit", publicName: "separatorLimit", isSignal: true, isRequired: false, transformFunction: null }, allowNegativeNumbers: { classPropertyName: "allowNegativeNumbers", publicName: "allowNegativeNumbers", isSignal: true, isRequired: false, transformFunction: null }, leadZeroDateTime: { classPropertyName: "leadZeroDateTime", publicName: "leadZeroDateTime", isSignal: true, isRequired: false, transformFunction: null }, leadZero: { classPropertyName: "leadZero", publicName: "leadZero", isSignal: true, isRequired: false, transformFunction: null }, triggerOnMaskChange: { classPropertyName: "triggerOnMaskChange", publicName: "triggerOnMaskChange", isSignal: true, isRequired: false, transformFunction: null }, apm: { classPropertyName: "apm", publicName: "apm", isSignal: true, isRequired: false, transformFunction: null }, inputTransformFn: { classPropertyName: "inputTransformFn", publicName: "inputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, outputTransformFn: { classPropertyName: "outputTransformFn", publicName: "outputTransformFn", isSignal: true, isRequired: false, transformFunction: null }, keepCharacterPositions: { classPropertyName: "keepCharacterPositions", publicName: "keepCharacterPositions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste()", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: NgxMaskDirective,
@@ -2297,7 +2292,7 @@ class NgxMaskDirective {
             NgxMaskService,
         ], exportAs: ["mask", "ngxMask"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mask], textarea[mask]',
@@ -2317,58 +2312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     ],
                     exportAs: 'mask,ngxMask',
                 }]
-        }], propDecorators: { maskExpression: [{
-                type: Input,
-                args: ['mask']
-            }], specialCharacters: [{
-                type: Input
-            }], patterns: [{
-                type: Input
-            }], prefix: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }], thousandSeparator: [{
-                type: Input
-            }], decimalMarker: [{
-                type: Input
-            }], dropSpecialCharacters: [{
-                type: Input
-            }], hiddenInput: [{
-                type: Input
-            }], showMaskTyped: [{
-                type: Input
-            }], placeHolderCharacter: [{
-                type: Input
-            }], shownMaskExpression: [{
-                type: Input
-            }], showTemplate: [{
-                type: Input
-            }], clearIfNotMatch: [{
-                type: Input
-            }], validation: [{
-                type: Input
-            }], separatorLimit: [{
-                type: Input
-            }], allowNegativeNumbers: [{
-                type: Input
-            }], leadZeroDateTime: [{
-                type: Input
-            }], leadZero: [{
-                type: Input
-            }], triggerOnMaskChange: [{
-                type: Input
-            }], apm: [{
-                type: Input
-            }], inputTransformFn: [{
-                type: Input
-            }], outputTransformFn: [{
-                type: Input
-            }], keepCharacterPositions: [{
-                type: Input
-            }], maskFilled: [{
-                type: Output
-            }], onPaste: [{
+        }], propDecorators: { onPaste: [{
                 type: HostListener,
                 args: ['paste']
             }], onFocus: [{
@@ -2400,8 +2344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 class NgxMaskPipe {
     defaultOptions = inject(NGX_MASK_CONFIG);
     _maskService = inject(NgxMaskService);
-    _maskExpressionArray = [];
-    mask = '';
+    _maskExpressionArray = signal([]);
+    _mask = signal('');
     transform(value, mask, { patterns, ...config } = {}) {
         let processedValue = value;
         const currentConfig = {
@@ -2419,13 +2363,13 @@ class NgxMaskPipe {
         if (mask.includes('||')) {
             const maskParts = mask.split('||');
             if (maskParts.length > 1) {
-                this._maskExpressionArray = maskParts.sort((a, b) => a.length - b.length);
+                this._maskExpressionArray.set(maskParts.sort((a, b) => a.length - b.length));
                 this._setMask(processedValue);
-                return this._maskService.applyMask(`${processedValue}`, this.mask);
+                return this._maskService.applyMask(`${processedValue}`, this._mask());
             }
             else {
-                this._maskExpressionArray = [];
-                return this._maskService.applyMask(`${processedValue}`, this.mask);
+                this._maskExpressionArray.set([]);
+                return this._maskService.applyMask(`${processedValue}`, this._mask());
             }
         }
         if (mask.includes(MaskExpression.CURLY_BRACKETS_LEFT)) {
@@ -2465,26 +2409,26 @@ class NgxMaskPipe {
         return this._maskService.applyMask(`${processedValue}`, mask);
     }
     _setMask(value) {
-        if (this._maskExpressionArray.length > 0) {
-            this._maskExpressionArray.some((mask) => {
+        if (this._maskExpressionArray().length > 0) {
+            this._maskExpressionArray().some((mask) => {
                 const test = this._maskService.removeMask(value)?.length <=
                     this._maskService.removeMask(mask)?.length;
                 if (value && test) {
-                    this.mask = mask;
+                    this._mask.set(mask);
                     return test;
                 }
                 else {
-                    const expression = this._maskExpressionArray[this._maskExpressionArray.length - 1] ??
+                    const expression = this._maskExpressionArray()[this._maskExpressionArray.length - 1] ??
                         MaskExpression.EMPTY_STRING;
-                    this.mask = expression;
+                    this._mask.set(expression);
                 }
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskPipe, isStandalone: true, name: "mask" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskPipe, isStandalone: true, name: "mask" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxMaskPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgxMaskPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mask',