@webilix/ngx-form-m3 0.0.62 → 0.0.67

package/fesm2022/webilix-ngx-form-m3.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, EventEmitter, Output, model, computed, makeEnvironmentProviders, ViewChild, Inject } from '@angular/core';
+import { HostBinding, Directive, Input, HostListener, Optional, Pipe, InjectionToken, inject, ChangeDetectionStrategy, Component, signal, Injector, EventEmitter, Output, model, computed, makeEnvironmentProviders, ViewChild, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, Validators, FormsModule, FormGroup } from '@angular/forms';
 import { MatIconButton, MatButton } from '@angular/material/button';
+import { timer } from 'rxjs';
 import * as i2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormField } from '@angular/material/form-field';
@@ -11,7 +12,7 @@ import * as i2$1 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
 import { Helper } from '@webilix/helper-library';
 import * as i1$1 from '@angular/platform-browser';
-import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { MaskitoDirective } from '@maskito/angular';
 import { JalaliDateTime } from '@webilix/jalali-date-time';
 import { NgComponentOutlet, NgClass, DecimalPipe } from '@angular/common';
 import * as i1$2 from '@webilix/ngx-helper-m3';
@@ -24,6 +25,7 @@ import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import { maskitoNumber } from '@maskito/kit';
 import { ENTER, COMMA, PERIOD } from '@angular/cdk/keycodes';
 import * as i3$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
@@ -31,10 +33,10 @@ import * as i1$5 from '@angular/router';
 
 class AutoCompleteDirective {
     autocomplete = 'one-time-code';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutoCompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AutoCompleteDirective, isStandalone: true, selector: "input[type=\"text\"]", host: { properties: { "attr.autocomplete": "this.autocomplete" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AutoCompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: AutoCompleteDirective, isStandalone: true, selector: "input[type=\"text\"]", host: { properties: { "attr.autocomplete": "this.autocomplete" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutoCompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AutoCompleteDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'input[type="text"]' }]
         }], propDecorators: { autocomplete: [{
@@ -54,12 +56,12 @@ class AutoFocusDirective {
         const input = this.elementRef.nativeElement;
         if (!input)
             return;
-        setTimeout(() => input.focus && input.focus(), 0);
+        timer(0).subscribe(() => input.focus && input.focus());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AutoFocusDirective, isStandalone: true, selector: "[AutoFocusDirective]", inputs: { AutoFocusDirective: "AutoFocusDirective" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: AutoFocusDirective, isStandalone: true, selector: "[AutoFocusDirective]", inputs: { AutoFocusDirective: "AutoFocusDirective" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutoFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AutoFocusDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[AutoFocusDirective]' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { AutoFocusDirective: [{
@@ -104,10 +106,10 @@ class AutoHeightDirective {
         this.renderer2.setStyle(this.elementRef.nativeElement, 'height', value);
         this.renderer2.setStyle(this.elementRef.nativeElement, 'overflow', 'auto');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutoHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AutoHeightDirective, isStandalone: true, selector: "[AutoHeightDirective]", inputs: { AutoHeightDirective: "AutoHeightDirective", minHeight: "minHeight", maxHeight: "maxHeight" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "input": "resize()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AutoHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: AutoHeightDirective, isStandalone: true, selector: "[AutoHeightDirective]", inputs: { AutoHeightDirective: "AutoHeightDirective", minHeight: "minHeight", maxHeight: "maxHeight" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "input": "resize()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutoHeightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AutoHeightDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[AutoHeightDirective]' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { AutoHeightDirective: [{
@@ -134,11 +136,11 @@ class FormErrorDirective {
     elementRef;
     formGroupDirective;
     onSubmit() {
-        setTimeout(() => {
+        timer(150).subscribe(() => {
             const invalidControl = this.elementRef.nativeElement.querySelector('.mat-form-field-invalid');
             if (invalidControl)
                 return this.scrollToElement(invalidControl);
-        }, 150);
+        });
     }
     constructor(elementRef, formGroupDirective) {
         this.elementRef = elementRef;
@@ -150,10 +152,10 @@ class FormErrorDirective {
     scrollToElement(element) {
         window.scroll({ top: this.getElementTop(element), behavior: 'smooth' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: FormErrorDirective, isStandalone: true, selector: "form.ngx-form", host: { listeners: { "submit": "onSubmit()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: FormErrorDirective, isStandalone: true, selector: "form.ngx-form", host: { listeners: { "submit": "onSubmit()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormErrorDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'form.ngx-form' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FormGroupDirective, decorators: [{
@@ -204,9 +206,31 @@ class InputErrorPipe {
             case 'duplicate':
                 return 'امکان انتخاب مقادیر تکراری وجود ندارد.';
             case 'bank-card':
-                return `شماره کارت بانکی صحیح مشخص نشده است.`;
+                switch (value) {
+                    case 'length':
+                        return 'شماره کارت بانکی دارای ۱۶ رقم است.';
+                    case 'validate':
+                        return `شماره کارت بانکی صحیح مشخص نشده است.`;
+                }
+                break;
             case 'bank-sheba':
-                return `شماره شبا صحیح مشخص نشده است.`;
+                switch (value) {
+                    case 'length':
+                        return 'شماره شبا دارای ۲۴ رقم است.';
+                    case 'validate':
+                        return `شماره شبا صحیح مشخص نشده است.`;
+                }
+                break;
+            case 'mobile':
+                switch (value) {
+                    case 'length':
+                        return 'شماره موبایل دارای ۱۱ رقم است.';
+                    case 'validate':
+                        return `شماره موبایل صحیح مشخص نشده است.`;
+                }
+                break;
+            case 'id':
+                return value;
             case 'username':
                 return value;
             case 'pattern':
@@ -227,23 +251,13 @@ class InputErrorPipe {
                         return 'فرمت استاندارد آدرس سایت رعایت نشده است.';
                 }
                 break;
-            case 'mask':
-                switch (type) {
-                    case 'BANK-CARD':
-                        return 'شماره کارت بانکی دارای ۱۶ رقم است.';
-                    case 'BANK-SHEBA':
-                        return 'شماره شبا دارای ۲۴ رقم است.';
-                    case 'MOBILE':
-                        return 'شماره موبایل دارای ۱۱ رقم است.';
-                }
-                break;
         }
         return 'مقدار وارد شده صحیح نیست.';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: InputErrorPipe, isStandalone: true, name: "InputErrorPipe" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: InputErrorPipe, isStandalone: true, name: "InputErrorPipe" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputErrorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputErrorPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'InputErrorPipe' }]
         }] });
@@ -260,10 +274,10 @@ class MultiLinePipe {
             ? this.sanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
             : Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MultiLinePipe, isStandalone: true, name: "MultiLinePipe" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: MultiLinePipe, isStandalone: true, name: "MultiLinePipe" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MultiLinePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: MultiLinePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'MultiLinePipe' }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
@@ -288,10 +302,10 @@ class InputAutoCompleteComponent {
         const value = (this.formControl.value || '').toString().trim();
         this.filtered = this.input.options.filter((option) => option.indexOf(value) !== -1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputAutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputAutoCompleteComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-auto-complete" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [class.ngx-form-m3-en]=\"input.english\"\n        [maxLength]=\"524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (input)=\"filter()\"\n        (focus)=\"filter()\"\n        [matAutocomplete]=\"ngxAutoComplete\"\n    />\n    <mat-autocomplete #ngxAutoComplete=\"matAutocomplete\" class=\"ngx-helper-form-m3-auto-complete-input\">\n        <div class=\"options\">\n            <!-- OPTIONS -->\n            @for (option of filtered ; track $index) {\n            <mat-option [value]=\"option\" [class.ngx-form-m3-en]=\"input.english\">{{ option }}</mat-option>\n            }\n        </div>\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-auto-complete-input{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputAutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputAutoCompleteComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-auto-complete" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [class.ngx-form-m3-en]=\"input.english\"\n        [maxLength]=\"524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (input)=\"filter()\"\n        (focus)=\"filter()\"\n        [matAutocomplete]=\"ngxAutoComplete\"\n    />\n    <mat-autocomplete #ngxAutoComplete=\"matAutocomplete\" class=\"ngx-helper-form-m3-auto-complete-input\">\n        <div class=\"options\">\n            <!-- OPTIONS -->\n            @for (option of filtered ; track $index) {\n            <mat-option [value]=\"option\" [class.ngx-form-m3-en]=\"input.english\">{{ option }}</mat-option>\n            }\n        </div>\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-auto-complete-input{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputAutoCompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputAutoCompleteComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-auto-complete' }, imports: [
                         ReactiveFormsModule,
@@ -304,7 +318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [class.ngx-form-m3-en]=\"input.english\"\n        [maxLength]=\"524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (input)=\"filter()\"\n        (focus)=\"filter()\"\n        [matAutocomplete]=\"ngxAutoComplete\"\n    />\n    <mat-autocomplete #ngxAutoComplete=\"matAutocomplete\" class=\"ngx-helper-form-m3-auto-complete-input\">\n        <div class=\"options\">\n            <!-- OPTIONS -->\n            @for (option of filtered ; track $index) {\n            <mat-option [value]=\"option\" [class.ngx-form-m3-en]=\"input.english\">{{ option }}</mat-option>\n            }\n        </div>\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-auto-complete-input{padding:0!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [class.ngx-form-m3-en]=\"input.english\"\n        [maxLength]=\"524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (input)=\"filter()\"\n        (focus)=\"filter()\"\n        [matAutocomplete]=\"ngxAutoComplete\"\n    />\n    <mat-autocomplete #ngxAutoComplete=\"matAutocomplete\" class=\"ngx-helper-form-m3-auto-complete-input\">\n        <div class=\"options\">\n            <!-- OPTIONS -->\n            @for (option of filtered ; track $index) {\n            <mat-option [value]=\"option\" [class.ngx-form-m3-en]=\"input.english\">{{ option }}</mat-option>\n            }\n        </div>\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-auto-complete-input{padding:0!important}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -333,20 +347,40 @@ class InputBankCardComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    bank = '';
-    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
+    bank = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bank" }] : /* istanbul ignore next */ []));
+    maskitoOptions = {
+        mask: [
+            ...Array.from({ length: 4 }).fill(/\d/),
+            '-',
+            ...Array.from({ length: 4 }).fill(/\d/),
+            '-',
+            ...Array.from({ length: 4 }).fill(/\d/),
+            '-',
+            ...Array.from({ length: 4 }).fill(/\d/),
+        ],
+        preprocessors: [
+            // CHANGE PERSIAN NUMBERS
+            ({ elementState, data }) => ({ elementState, data: Helper.STRING.changeNumbers(data.toString(), 'EN') }),
+        ],
+    };
     ngOnInit() {
-        this.setBank(this.input.value || '');
+        this.setCard(this.input.value || '');
     }
-    setBank(card) {
+    setValue() {
+        const value = (this.formControl.value || '').replace(/-/g, '');
+        if (Helper.IS.STRING.bankCard(value))
+            this.formControl.setValue(value);
+    }
+    setCard(card) {
         card = card.replace(/-/g, '').substring(0, 6);
         const bank = Helper.BANK.findCard(card);
-        this.bank = bank?.title || '';
+        this.bank.set(bank?.title || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputBankCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputBankCardComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-bank-card" } }, providers: [provideNgxMask()], ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u06A9\u0627\u0631\u062A \u0628\u0627\u0646\u06A9\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-bank-card-input\">\n        <!-- BANK NAME -->\n        @if (!input.hideBank && bank !== '') {\n        <div class=\"bank\">{{ bank }}</div>\n        }\n\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"numeric\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [mask]=\"'0000-0000-0000-0000'\"\n            [inputTransformFn]=\"inputTransformFn\"\n            (input)=\"setBank(bankCardInput.value)\"\n            #bankCardInput\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputBankCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputBankCardComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-bank-card" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u06A9\u0627\u0631\u062A \u0628\u0627\u0646\u06A9\u06CC' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-bank-card-input\">\n        <!-- BANK NAME -->\n        @if (!input.hideBank && bank() !== '') {\n            <div class=\"bank\">{{ bank() }}</div>\n        }\n\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"numeric\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [maskito]=\"maskitoOptions\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            (input)=\"setValue(); setCard(bankCardInput.value)\"\n            #bankCardInput\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputBankCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputBankCardComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-bank-card' }, imports: [
                         ReactiveFormsModule,
@@ -354,12 +388,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatIcon,
                         MatIconButton,
                         MatInputModule,
-                        NgxMaskDirective,
+                        MaskitoDirective,
                         AutoCompleteDirective,
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], providers: [provideNgxMask()], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u06A9\u0627\u0631\u062A \u0628\u0627\u0646\u06A9\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-bank-card-input\">\n        <!-- BANK NAME -->\n        @if (!input.hideBank && bank !== '') {\n        <div class=\"bank\">{{ bank }}</div>\n        }\n\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"numeric\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [mask]=\"'0000-0000-0000-0000'\"\n            [inputTransformFn]=\"inputTransformFn\"\n            (input)=\"setBank(bankCardInput.value)\"\n            #bankCardInput\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u06A9\u0627\u0631\u062A \u0628\u0627\u0646\u06A9\u06CC' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-bank-card-input\">\n        <!-- BANK NAME -->\n        @if (!input.hideBank && bank() !== '') {\n            <div class=\"bank\">{{ bank() }}</div>\n        }\n\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"numeric\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [maskito]=\"maskitoOptions\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            (input)=\"setValue(); setCard(bankCardInput.value)\"\n            #bankCardInput\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -370,19 +404,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 const BankCardValidator = () => {
     return (formControl) => {
-        const value = formControl.value;
-        if (Helper.IS.empty(value) || !Helper.IS.string(value) || value.length !== 16)
+        const value = (formControl.value || '').replace(/-/g, '');
+        if (Helper.IS.empty(value) || !Helper.IS.string(value))
             return null;
-        return !Helper.IS.STRING.bankCard(value) ? { 'bank-card': true } : null;
+        // ERRORS
+        if (value.length !== 16)
+            return { 'bank-card': 'length' };
+        if (!Helper.IS.STRING.bankCard(value))
+            return { 'bank-card': 'validate' };
+        return null;
     };
 };
 
 const BankShebaValidator = () => {
     return (formControl) => {
         const value = formControl.value;
-        if (Helper.IS.empty(value) || !Helper.IS.string(value) || value.length !== 24)
+        if (Helper.IS.empty(value) || !Helper.IS.string(value))
             return null;
-        return !Helper.IS.STRING.bankSheba(`IR${value}`) ? { 'bank-sheba': true } : null;
+        // ERRORS
+        if (value.length !== 24)
+            return { 'bank-sheba': 'length' };
+        if (!Helper.IS.STRING.bankSheba(`IR${value}`))
+            return { 'bank-sheba': 'validate' };
+        return null;
     };
 };
 
@@ -486,6 +530,47 @@ const DuplicateValidator = (callback) => {
     };
 };
 
+const IdValidator = (verify) => {
+    return (formControl) => {
+        const value = formControl.value;
+        if (Helper.IS.empty(value) || !Helper.IS.string(value))
+            return null;
+        // MINLENGTH
+        const minLength = verify?.minLength;
+        if (minLength && minLength > 0 && value.length < minLength)
+            return { id: `مقدار باید حداقل داری ${Helper.NUMBER.format(minLength)} کاراکتر باشد.` };
+        // MAXLENGTH
+        const maxLength = verify?.maxLength;
+        if (maxLength && maxLength > 0 && value.length > maxLength)
+            return { id: `مقدار می‌تواند حداکثر داری ${Helper.NUMBER.format(maxLength)} کاراکتر باشد.` };
+        // ID
+        const regExp = new RegExp(/^[a-z0-9-.]{1,}$/);
+        if (!regExp.test(value)) {
+            const chars = [].filter((char) => char !== '');
+            return { id: 'کاراکترهای مجاز: حروف انگلیسی کوچک  و اعداد انگلیسی' };
+        }
+        // USE DASH
+        if (!verify?.useDash && value.indexOf('-') !== -1)
+            return { id: `امکان استفاده از خط فاصله در مقدار وجود ندارد.` };
+        // USE DOT
+        if (!verify?.useDot && value.indexOf('.') !== -1)
+            return { id: `امکان استفاده از نقطه در مقدار وجود ندارد.` };
+        // START WITH CHAR
+        if (!verify?.canStartWithNumber) {
+            const regExp = new RegExp(/^[a-z]{1}/);
+            if (!regExp.test(value))
+                return { id: 'مقدار باید با یک کاراکتر انگلیسی شروع شده باشد.' };
+        }
+        // END WITH CHAR
+        if (!verify?.canEndWithNumber) {
+            const regExp = new RegExp(/[a-z]{1}$/);
+            if (!regExp.test(value))
+                return { id: 'مقدار باید با یک کاراکتر انگلیسی تمام شده باشد.' };
+        }
+        return null;
+    };
+};
+
 const LengthValidator = (length) => {
     return (formControl) => {
         const value = formControl.value;
@@ -495,6 +580,20 @@ const LengthValidator = (length) => {
     };
 };
 
+const MobileValidator = () => {
+    return (formControl) => {
+        const value = (formControl.value || '').replace(/-/g, '');
+        if (Helper.IS.empty(value) || !Helper.IS.string(value))
+            return null;
+        // ERRORS
+        if (value.length !== 9)
+            return { mobile: 'length' };
+        if (!Helper.IS.STRING.mobile(`09${value}`))
+            return { mobile: 'validate' };
+        return null;
+    };
+};
+
 const UsernameValidator = (verify) => {
     return (formControl) => {
         const value = formControl.value;
@@ -517,10 +616,10 @@ const UsernameValidator = (verify) => {
         }
         // USE DASH
         if (!verify?.useDash && value.indexOf('-') !== -1)
-            return { username: `امکان استفاده از خط فاصله در کلمه عبور وجود ندارد.` };
+            return { username: `امکان استفاده از خط فاصله در نام کاربری وجود ندارد.` };
         // USE DOT
         if (!verify?.useDot && value.indexOf('.') !== -1)
-            return { username: `امکان استفاده از نقطه در کلمه عبور وجود ندارد.` };
+            return { username: `امکان استفاده از نقطه در نام کاربری وجود ندارد.` };
         // START WITH CHAR
         if (!!verify?.startWithChar) {
             const regExp = new RegExp(/^[a-z]{1}/);
@@ -554,12 +653,14 @@ class InputBankShebaComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    bank = '';
-    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputBankShebaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputBankShebaComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-bank-sheba" } }, providers: [provideNgxMask()], ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u0634\u0628\u0627' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">IR</span>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"'000000000000000000000000'\"\n        [inputTransformFn]=\"inputTransformFn\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    maskitoOptions = {
+        mask: Array.from({ length: 24 }, () => /\d/),
+        preprocessors: [({ elementState, data }) => ({ elementState, data: Helper.STRING.changeNumbers(data, 'EN') })],
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputBankShebaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputBankShebaComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-bank-sheba" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u0634\u0628\u0627' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">IR</span>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maskito]=\"maskitoOptions\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputBankShebaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputBankShebaComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-bank-sheba' }, imports: [
                         ReactiveFormsModule,
@@ -567,12 +668,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatIcon,
                         MatIconButton,
                         MatInputModule,
-                        NgxMaskDirective,
+                        MaskitoDirective,
                         AutoCompleteDirective,
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], providers: [provideNgxMask()], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u0634\u0628\u0627' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">IR</span>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"'000000000000000000000000'\"\n        [inputTransformFn]=\"inputTransformFn\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u0634\u0628\u0627' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">IR</span>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maskito]=\"maskitoOptions\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -603,12 +704,12 @@ class InputCheckboxComponent {
         this.formControl.setValue(!value);
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputCheckboxComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-checkbox" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-checkbox-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"toggleValue()\"\n    >\n        <mat-icon>{{ !!formControl.value ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ input.message }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputCheckboxComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-checkbox" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-checkbox-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"toggleValue()\"\n    >\n        <mat-icon>{{ !!formControl.value ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ input.message }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-checkbox' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-checkbox-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"toggleValue()\"\n    >\n        <mat-icon>{{ !!formControl.value ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ input.message }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center}\n"] }]
+            args: [{ host: { selector: 'input-checkbox' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-checkbox-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"toggleValue()\"\n    >\n        <mat-icon>{{ !!formControl.value ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ input.message }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -632,12 +733,12 @@ class InputColorComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputColorComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-color" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0631\u0646\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'palette' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div class=\"ngx-helper-form-m3-color-input\">\n        <section>\n            <input type=\"color\" (input)=\"formControl.setValue(colorInput.value)\" [value]=\"formControl.value\" #colorInput />\n            <div\n                class=\"color\"\n                [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n                [style.background-color]=\"formControl.value || 'transparent'\"\n                (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n            >\n                &nbsp;\n            </div>\n        </section>\n\n        <div\n            class=\"value ngx-form-m3-en\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n        >\n            {{ formControl.value || '&nbsp;' }}\n        </div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputColorComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-color" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0631\u0646\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'palette' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div class=\"ngx-helper-form-m3-color-input\">\n        <section>\n            <input type=\"color\" (input)=\"formControl.setValue(colorInput.value)\" [value]=\"formControl.value\" #colorInput />\n            <div\n                class=\"color\"\n                [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n                [style.background-color]=\"formControl.value || 'transparent'\"\n                (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n            >\n                &nbsp;\n            </div>\n        </section>\n\n        <div\n            class=\"value ngx-form-m3-en\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n        >\n            {{ formControl.value || '&nbsp;' }}\n        </div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputColorComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-color' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0631\u0646\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'palette' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div class=\"ngx-helper-form-m3-color-input\">\n        <section>\n            <input type=\"color\" (input)=\"formControl.setValue(colorInput.value)\" [value]=\"formControl.value\" #colorInput />\n            <div\n                class=\"color\"\n                [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n                [style.background-color]=\"formControl.value || 'transparent'\"\n                (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n            >\n                &nbsp;\n            </div>\n        </section>\n\n        <div\n            class=\"value ngx-form-m3-en\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n        >\n            {{ formControl.value || '&nbsp;' }}\n        </div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+            args: [{ host: { selector: 'input-color' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0631\u0646\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'palette' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div class=\"ngx-helper-form-m3-color-input\">\n        <section>\n            <input type=\"color\" (input)=\"formControl.setValue(colorInput.value)\" [value]=\"formControl.value\" #colorInput />\n            <div\n                class=\"color\"\n                [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n                [style.background-color]=\"formControl.value || 'transparent'\"\n                (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n            >\n                &nbsp;\n            </div>\n        </section>\n\n        <div\n            class=\"value ngx-form-m3-en\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n        >\n            {{ formControl.value || '&nbsp;' }}\n        </div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -678,10 +779,10 @@ class InputComponentComponent {
     ngOnChanges(changes) {
         this.paddig = this.input.zeroPadding ? '0' : '16px';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputComponentComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-component" }, properties: { "style.--padding": "this.paddig" } }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <!-- TITLE -->\n    @if (input.title) {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- ERROR -->\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <ng-container *ngComponentOutlet=\"input.component; inputs: input.componentInputs; injector: injector\"></ng-container>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-text-field-wrapper{padding-left:var(--padding)!important;padding-right:var(--padding)!important}:host ::ng-deep .mat-mdc-form-field-infix{padding-top:var(--padding)!important;padding-bottom:var(--padding)!important}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputComponentComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-component" }, properties: { "style.--padding": "this.paddig" } }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <!-- TITLE -->\n    @if (input.title) {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- ERROR -->\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <ng-container *ngComponentOutlet=\"input.component; inputs: input.componentInputs; injector: injector\"></ng-container>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-text-field-wrapper{padding-left:var(--padding)!important;padding-right:var(--padding)!important}:host ::ng-deep .mat-mdc-form-field-infix{padding-top:var(--padding)!important;padding-bottom:var(--padding)!important}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputComponentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputComponentComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-component' }, imports: [
                         NgComponentOutlet,
@@ -692,7 +793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatInputModule,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <!-- TITLE -->\n    @if (input.title) {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- ERROR -->\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <ng-container *ngComponentOutlet=\"input.component; inputs: input.componentInputs; injector: injector\"></ng-container>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-text-field-wrapper{padding-left:var(--padding)!important;padding-right:var(--padding)!important}:host ::ng-deep .mat-mdc-form-field-infix{padding-top:var(--padding)!important;padding-bottom:var(--padding)!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <!-- TITLE -->\n    @if (input.title) {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- ERROR -->\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <ng-container *ngComponentOutlet=\"input.component; inputs: input.componentInputs; injector: injector\"></ng-container>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [":host ::ng-deep .mat-mdc-text-field-wrapper{padding-left:var(--padding)!important;padding-right:var(--padding)!important}:host ::ng-deep .mat-mdc-form-field-infix{padding-top:var(--padding)!important;padding-bottom:var(--padding)!important}\n"] }]
         }], propDecorators: { paddig: [{
                 type: HostBinding,
                 args: ['style.--padding']
@@ -740,12 +841,12 @@ class InputCoordinatesComponent {
         this.formControl.setValue(null);
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCoordinatesComponent, deps: [{ token: i1$2.NgxHelperCoordinatesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputCoordinatesComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-coordinates" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'location_on' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"formControl.value ? coordinates?.latitude + ', ' + coordinates?.longitude : ''\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputCoordinatesComponent, deps: [{ token: i1$2.NgxHelperCoordinatesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputCoordinatesComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-coordinates" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'location_on' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"\n            formControl.value\n                ? $safeNavigationMigration(coordinates?.latitude) + ', ' + $safeNavigationMigration(coordinates?.longitude)\n                : ''\n        \"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputCoordinatesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputCoordinatesComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-coordinates' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'location_on' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"formControl.value ? coordinates?.latitude + ', ' + coordinates?.longitude : ''\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+            args: [{ host: { selector: 'input-coordinates' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0642\u0639\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetCoordinates() : setCoordinates(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'location_on' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        class=\"ngx-helper-form-m3-coordinates-input ngx-form-m3-en\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setCoordinates()\"\n        [value]=\"\n            formControl.value\n                ? $safeNavigationMigration(coordinates?.latitude) + ', ' + $safeNavigationMigration(coordinates?.longitude)\n                : ''\n        \"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgxHelperCoordinatesService }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -794,10 +895,10 @@ class InputDateComponent {
             this.formControl.markAsTouched();
         }, () => this.formControl.markAsTouched());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputDateComponent, deps: [{ token: i1$3.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputDateComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-date" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u062A\u0627\u0631\u06CC\u062E' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setDate(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setDate()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputDateComponent, deps: [{ token: i1$3.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputDateComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-date" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u062A\u0627\u0631\u06CC\u062E' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setDate(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setDate()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputDateComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-date' }, imports: [
                         ReactiveFormsModule,
@@ -808,7 +909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         InputErrorPipe,
                         MultiLinePipe,
                         NgxHelperDatePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u062A\u0627\u0631\u06CC\u062E' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setDate(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setDate()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u062A\u0627\u0631\u06CC\u062E' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setDate(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setDate()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$3.NgxCalendarService }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -837,10 +938,10 @@ class InputEmailComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputEmailComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-email" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0627\u06CC\u0645\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>alternate_email</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"email\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputEmailComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-email" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0627\u06CC\u0645\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>alternate_email</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"email\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputEmailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-email' }, imports: [
                         ReactiveFormsModule,
@@ -852,7 +953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0627\u06CC\u0645\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>alternate_email</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"email\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0627\u06CC\u0645\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>alternate_email</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"email\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -886,10 +987,10 @@ class InputFileComponent {
         this.formControl.setValue(file);
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputFileComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-file" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0641\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : fileInput.click()\">\n            {{ formControl.value ? 'close' : 'insert_drive_file' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input\n        type=\"file\"\n        [style.display]=\"'none !important'\"\n        [accept]=\"(input.mimes === 'IMAGE' ? ['image/gif', 'image/jpeg', 'image/png'] : input.mimes || ['*']).join(',')\"\n        (change)=\"setFile($event); fileInput.value = ''\"\n        #fileInput\n    />\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div\n        class=\"ngx-helper-form-m3-file-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"fileInput.value = ''; fileInput.click()\"\n    >\n        <div class=\"size\">{{ formControl.value?.size | ngxHelperFileSize }}</div>\n        <input type=\"text \" matInput [readonly]=\"true\" [disabled]=\"formControl.disabled\" class=\"ngx-form-m3-en\" />\n        <div class=\"name ngx-form-m3-en\">{{ formControl.value?.name || '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperFileSizePipe, name: "ngxHelperFileSize" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputFileComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-file" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0641\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : fileInput.click()\">\n            {{ formControl.value ? 'close' : 'insert_drive_file' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input\n        type=\"file\"\n        [style.display]=\"'none !important'\"\n        [accept]=\"(input.mimes === 'IMAGE' ? ['image/gif', 'image/jpeg', 'image/png'] : input.mimes || ['*']).join(',')\"\n        (change)=\"setFile($event); fileInput.value = ''\"\n        #fileInput\n    />\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div\n        class=\"ngx-helper-form-m3-file-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"fileInput.value = ''; fileInput.click()\"\n    >\n        <div class=\"size\">{{ $safeNavigationMigration(formControl.value?.size) | ngxHelperFileSize }}</div>\n        <input type=\"text \" matInput [readonly]=\"true\" [disabled]=\"formControl.disabled\" class=\"ngx-form-m3-en\" />\n        <div class=\"name ngx-form-m3-en\">{{ formControl.value?.name || '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperFileSizePipe, name: "ngxHelperFileSize" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-file' }, imports: [
                         ReactiveFormsModule,
@@ -900,7 +1001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         InputErrorPipe,
                         MultiLinePipe,
                         NgxHelperFileSizePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0641\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : fileInput.click()\">\n            {{ formControl.value ? 'close' : 'insert_drive_file' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input\n        type=\"file\"\n        [style.display]=\"'none !important'\"\n        [accept]=\"(input.mimes === 'IMAGE' ? ['image/gif', 'image/jpeg', 'image/png'] : input.mimes || ['*']).join(',')\"\n        (change)=\"setFile($event); fileInput.value = ''\"\n        #fileInput\n    />\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div\n        class=\"ngx-helper-form-m3-file-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"fileInput.value = ''; fileInput.click()\"\n    >\n        <div class=\"size\">{{ formControl.value?.size | ngxHelperFileSize }}</div>\n        <input type=\"text \" matInput [readonly]=\"true\" [disabled]=\"formControl.disabled\" class=\"ngx-form-m3-en\" />\n        <div class=\"name ngx-form-m3-en\">{{ formControl.value?.name || '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0641\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : fileInput.click()\">\n            {{ formControl.value ? 'close' : 'insert_drive_file' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input\n        type=\"file\"\n        [style.display]=\"'none !important'\"\n        [accept]=\"(input.mimes === 'IMAGE' ? ['image/gif', 'image/jpeg', 'image/png'] : input.mimes || ['*']).join(',')\"\n        (change)=\"setFile($event); fileInput.value = ''\"\n        #fileInput\n    />\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n    <div\n        class=\"ngx-helper-form-m3-file-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"fileInput.value = ''; fileInput.click()\"\n    >\n        <div class=\"size\">{{ $safeNavigationMigration(formControl.value?.size) | ngxHelperFileSize }}</div>\n        <input type=\"text \" matInput [readonly]=\"true\" [disabled]=\"formControl.disabled\" class=\"ngx-form-m3-en\" />\n        <div class=\"name ngx-form-m3-en\">{{ formControl.value?.name || '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -924,10 +1025,10 @@ class InputIconComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputIconComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-icon" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputIconComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-icon" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIconComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-icon' }, imports: [
                         ReactiveFormsModule,
@@ -939,7 +1040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -957,16 +1058,56 @@ class InputIconMethods extends InputMethods {
     }
 }
 
+class InputIdComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputIdComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-id" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0646\u0627\u0633\u0647' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>&nbsp;</span>\n            <mat-icon>label</mat-icon>\n        </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maxLength]=\"input.verify?.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIdComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-id' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        AutoCompleteDirective,
+                        AutoFocusDirective,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0634\u0646\u0627\u0633\u0647' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>&nbsp;</span>\n            <mat-icon>label</mat-icon>\n        </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maxLength]=\"input.verify?.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n" }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputIdMethods extends InputMethods {
+    control(input, validators) {
+        validators.push(IdValidator(input.verify));
+        return new FormControl(input.value || null, validators);
+    }
+    value(value, input) {
+        return Helper.IS.string(value) && value !== '' ? value : null;
+    }
+}
+
 class InputIpComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputIpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputIpComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-ip" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0622\u06CC\u200C\u067E\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>language</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputIpComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-ip" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0622\u06CC\u200C\u067E\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>language</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputIpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIpComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-ip' }, imports: [
                         ReactiveFormsModule,
@@ -978,7 +1119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0622\u06CC\u200C\u067E\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>language</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0622\u06CC\u200C\u067E\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>language</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1012,12 +1153,12 @@ class ListInputComponent {
         this.onInput.next(value);
         input.value = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ListInputComponent, isStandalone: true, selector: "list-input", inputs: { english: "english", disabled: "disabled", autoFocus: "autoFocus", placeholder: "placeholder" }, outputs: { onFocus: "onFocus", onInput: "onInput" }, ngImport: i0, template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"placeholder || (english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F')\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ListInputComponent, isStandalone: true, selector: "list-input", inputs: { english: "english", disabled: "disabled", autoFocus: "autoFocus", placeholder: "placeholder" }, outputs: { onFocus: "onFocus", onInput: "onInput" }, ngImport: i0, template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"placeholder || (english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F')\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"], dependencies: [{ kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ListInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ListInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'list-input', imports: [MatInput, AutoFocusDirective], template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"placeholder || (english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F')\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"] }]
+            args: [{ selector: 'list-input', imports: [MatInput, AutoFocusDirective], changeDetection: ChangeDetectionStrategy.Eager, template: "<input\n    matInput\n    type=\"text\"\n    [placeholder]=\"placeholder || (english ? 'New Item' : '\u06AF\u0632\u06CC\u0646\u0647 \u062C\u062F\u06CC\u062F')\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"autoFocus\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input); onFocus.next(false)\"\n    (focus)=\"onFocus.next(true)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n", styles: [":host{display:flex;align-items:center}input::placeholder{font-size:85%}\n"] }]
         }], propDecorators: { english: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1052,12 +1193,12 @@ class ListItemComponent {
             this.onUpdate.next(value);
         this.view = 'VALUE';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ListItemComponent, isStandalone: true, selector: "list-item", inputs: { value: "value", english: "english", disabled: "disabled", disableSort: "disableSort" }, outputs: { onUpdate: "onUpdate", onDelete: "onDelete" }, ngImport: i0, template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ListItemComponent, isStandalone: true, selector: "list-item", inputs: { value: "value", english: "english", disabled: "disabled", disableSort: "disableSort" }, outputs: { onUpdate: "onUpdate", onDelete: "onDelete" }, ngImport: i0, template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'list-item', imports: [CdkDragHandle, FormsModule, MatIcon, MatIconButton, MatInput, AutoFocusDirective], template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"] }]
+            args: [{ selector: 'list-item', imports: [CdkDragHandle, FormsModule, MatIcon, MatIconButton, MatInput, AutoFocusDirective], changeDetection: ChangeDetectionStrategy.Eager, template: "<!--  SORT -->\n@if (view === 'VALUE' && !disableSort) {\n<mat-icon class=\"drag\" [class.ngx-form-m3-disabled-input]=\"disabled\" cdkDragHandle>drag_indicator</mat-icon>\n}\n\n<!-- VALUE -->\n@if (view === 'VALUE') {\n<div [class.ngx-form-m3-en]=\"english\" [class.ngx-form-m3-disabled-input]=\"disabled\">\n    {{ value }}\n</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'UPDATE'\" [tabIndex]=\"-1\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'DELETE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">delete</mat-icon>\n</button>\n}\n\n<!-- UPDATE -->\n@if (view === 'UPDATE') {\n<input\n    matInput\n    type=\"text\"\n    [ngModel]=\"value\"\n    [class.ngx-form-m3-en]=\"english\"\n    [AutoFocusDirective]=\"true\"\n    [disabled]=\"disabled\"\n    (blur)=\"checkValue(input)\"\n    (keydown.enter)=\"$event.preventDefault(); checkValue(input)\"\n    enterkeyhint=\"done\"\n    #input\n/>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"checkValue(input)\" [tabIndex]=\"-1\">\n    <mat-icon>done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n\n<!-- DELETE -->\n@if (view === 'DELETE') {\n<div [class.ngx-form-m3-disabled-input]=\"disabled\">\u0645\u06CC\u200C\u062E\u0648\u0627\u0647\u06CC\u062F \u0627\u06CC\u0646 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u062D\u0630\u0641 \u06A9\u0646\u06CC\u062F\u061F</div>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"onDelete.next(); view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon [style.color]=\"'var(--error)'\" [class.ngx-form-m3-disabled-input]=\"disabled\">done_all</mat-icon>\n</button>\n\n<button mat-icon-button [type]=\"'button'\" [disabled]=\"disabled\" (click)=\"view = 'VALUE'\" [tabIndex]=\"-1\">\n    <mat-icon>close</mat-icon>\n</button>\n}\n", styles: [":host{display:flex;align-items:center;direction:rtl;overflow:hidden}:host .drag{cursor:pointer;padding-left:.25rem}:host div{flex:1;width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button{display:flex;align-items:center;justify-content:center}:host button mat-icon{font-size:70%}\n"] }]
         }], propDecorators: { value: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1113,10 +1254,10 @@ class InputItemListComponent {
         this.options.splice(index, 1);
         this.setValue();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputItemListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-item-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus", "placeholder"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputItemListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-item-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus", "placeholder"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputItemListComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-item-list' }, imports: [
                         DragDropModule,
@@ -1129,7 +1270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MultiLinePipe,
                         ListInputComponent,
                         ListItemComponent,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1160,11 +1301,28 @@ class InputMobileComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputMobileComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-mobile" } }, providers: [provideNgxMask()], ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0628\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON & SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">09</span>\n        @if (input.showIcon) { <mat-icon>smartphone</mat-icon> }\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"'00-000-0000'\"\n        [inputTransformFn]=\"inputTransformFn\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    maskitoOptions = {
+        mask: [
+            ...Array.from({ length: 2 }).fill(/\d/),
+            '-',
+            ...Array.from({ length: 3 }).fill(/\d/),
+            '-',
+            ...Array.from({ length: 4 }).fill(/\d/),
+        ],
+        preprocessors: [
+            // CHANGE PERSIAN NUMBERS
+            ({ elementState, data }) => ({ elementState, data: Helper.STRING.changeNumbers(data.toString(), 'EN') }),
+        ],
+    };
+    setValue() {
+        const value = (this.formControl.value || '').replace(/-/g, '');
+        if (Helper.IS.STRING.mobile('09' + value))
+            this.formControl.setValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputMobileComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-mobile" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0628\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- ICON & SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">09</span>\n        @if (input.showIcon) {\n            <mat-icon>smartphone</mat-icon>\n        }\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maskito]=\"maskitoOptions\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (input)=\"setValue()\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputMobileComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-mobile' }, imports: [
                         ReactiveFormsModule,
@@ -1172,12 +1330,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatIcon,
                         MatIconButton,
                         MatInputModule,
-                        NgxMaskDirective,
+                        MaskitoDirective,
                         AutoCompleteDirective,
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], providers: [provideNgxMask()], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0628\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON & SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">09</span>\n        @if (input.showIcon) { <mat-icon>smartphone</mat-icon> }\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"'00-000-0000'\"\n        [inputTransformFn]=\"inputTransformFn\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0645\u0648\u0628\u0627\u06CC\u0644' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) {\n        <mat-hint>{{ input.hint }}</mat-hint>\n    }\n\n    <!-- ICON & SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span class=\"ngx-form-m3-en\">09</span>\n        @if (input.showIcon) {\n            <mat-icon>smartphone</mat-icon>\n        }\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [maskito]=\"maskitoOptions\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (input)=\"setValue()\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1188,6 +1346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class InputMobileMethods extends InputMethods {
     control(input, validators) {
+        validators.push(MobileValidator());
         const value = input.value && Helper.RE.MOBILE.verify(input.value) ? input.value.substring(2) : null;
         return new FormControl(value, validators);
     }
@@ -1221,10 +1380,10 @@ class InputMomentComponent {
             this.formControl.markAsTouched();
         }, () => this.formControl.markAsTouched());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputMomentComponent, deps: [{ token: i1$3.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputMomentComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-moment" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0632\u0645\u0627\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setMoment(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setMoment()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format || 'FULL' }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputMomentComponent, deps: [{ token: i1$3.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputMomentComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-moment" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0632\u0645\u0627\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setMoment(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setMoment()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format || 'FULL' }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputMomentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputMomentComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-moment' }, imports: [
                         ReactiveFormsModule,
@@ -1235,7 +1394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         InputErrorPipe,
                         MultiLinePipe,
                         NgxHelperDatePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0632\u0645\u0627\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setMoment(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setMoment()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format || 'FULL' }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0632\u0645\u0627\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setMoment(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'calendar_month' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        type=\"text\"\n        matInput\n        [readonly]=\"true\"\n        [disabled]=\"formControl.disabled\"\n        (click)=\"setMoment()\"\n        [value]=\"formControl.value | ngxHelperDate : { format: input.format || 'FULL' }\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$3.NgxCalendarService }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1304,10 +1463,10 @@ class InputMultiSelectComponent {
             .map((option) => option.title)
             .join('، ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputMultiSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-multi-select" }, properties: { "style.--listHeight": "this.listHeight" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- LABEL -->\n    @if (input.view === 'SELECT') {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT (DEFAULT VIEW) -->\n    @if (!input.view) {\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    }\n\n    <!-- INPUT (SELECT VIEW) -->\n    @if (input.view === 'SELECT') {\n    <mat-select\n        [formControl]=\"formControl\"\n        [multiple]=\"true\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n    >\n        <mat-select-trigger>{{ getSelectValues() }}</mat-select-trigger>\n        @for (option of input.options; track $index) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n    }\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputMultiSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-multi-select" }, properties: { "style.--listHeight": "this.listHeight" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- LABEL -->\n    @if (input.view === 'SELECT') {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT (DEFAULT VIEW) -->\n    @if (!input.view) {\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    }\n\n    <!-- INPUT (SELECT VIEW) -->\n    @if (input.view === 'SELECT') {\n    <mat-select\n        [formControl]=\"formControl\"\n        [multiple]=\"true\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n    >\n        <mat-select-trigger>{{ getSelectValues() }}</mat-select-trigger>\n        @for (option of input.options; track $index) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n    }\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-multi-select' }, imports: [
                         NgClass,
@@ -1321,7 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatSelectModule,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- LABEL -->\n    @if (input.view === 'SELECT') {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT (DEFAULT VIEW) -->\n    @if (!input.view) {\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    }\n\n    <!-- INPUT (SELECT VIEW) -->\n    @if (input.view === 'SELECT') {\n    <mat-select\n        [formControl]=\"formControl\"\n        [multiple]=\"true\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n    >\n        <mat-select-trigger>{{ getSelectValues() }}</mat-select-trigger>\n        @for (option of input.options; track $index) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n    }\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- LABEL -->\n    @if (input.view === 'SELECT') {\n    <mat-label>{{ input.title }}</mat-label>\n    }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT (DEFAULT VIEW) -->\n    @if (!input.view) {\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"header\">\n            <div class=\"title\">\n                {{ input.title }}\n                @if (input.minCount) { <span class=\"asterisk\">*</span> }\n            </div>\n            <!-- SELECT BUTTONS -->\n            @if (input.selectButtons) {\n            <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n            <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n            }\n            <!-- GROUPS -->\n            @if ((input.groups || []).length !== 0) {\n            <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n            <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n                @for (item of input.groups || []; track $index) {\n                <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n                }\n            </mat-menu>\n            }\n        </div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon [class.selected]=\"ids.includes(item.id)\">\n                        {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n                    </mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    }\n\n    <!-- INPUT (SELECT VIEW) -->\n    @if (input.view === 'SELECT') {\n    <mat-select\n        [formControl]=\"formControl\"\n        [multiple]=\"true\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n    >\n        <mat-select-trigger>{{ getSelectValues() }}</mat-select-trigger>\n        @for (option of input.options; track $index) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n    }\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"] }]
         }], propDecorators: { listHeight: [{
                 type: HostBinding,
                 args: ['style.--listHeight']
@@ -1383,12 +1542,12 @@ class InputNameComponent {
         const value = first !== '' && last !== '' ? { first, last } : null;
         this.formControl.setValue(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputNameComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-name" } }, ngImport: i0, template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"ngx-helper-form-m3-name-input\">\n    <!-- FIRST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 {{ input.title || '' }}</mat-label>\n        @if (firstFormControl.invalid) { <mat-error>{{ firstFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input\n            matInput\n            type=\"text\"\n            [name]=\"input.name + '-first'\"\n            [formControl]=\"firstFormControl\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            (input)=\"setName()\"\n        />\n    </mat-form-field>\n    <!-- LAST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 \u062E\u0627\u0646\u0648\u0627\u062F\u06AF\u06CC {{ input.title || '' }}</mat-label>\n        @if (lastFormControl.invalid) { <mat-error>{{ lastFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input matInput type=\"text\" [name]=\"input.name + '-last'\" [formControl]=\"lastFormControl\" (input)=\"setName()\" />\n    </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputNameComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-name" } }, ngImport: i0, template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"ngx-helper-form-m3-name-input\">\n    <!-- FIRST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 {{ input.title || '' }}</mat-label>\n        @if (firstFormControl.invalid) { <mat-error>{{ firstFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input\n            matInput\n            type=\"text\"\n            [name]=\"input.name + '-first'\"\n            [formControl]=\"firstFormControl\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            (input)=\"setName()\"\n        />\n    </mat-form-field>\n    <!-- LAST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 \u062E\u0627\u0646\u0648\u0627\u062F\u06AF\u06CC {{ input.title || '' }}</mat-label>\n        @if (lastFormControl.invalid) { <mat-error>{{ lastFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input matInput type=\"text\" [name]=\"input.name + '-last'\" [formControl]=\"lastFormControl\" (input)=\"setName()\" />\n    </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputNameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNameComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-name' }, imports: [ReactiveFormsModule, MatFormField, MatInputModule, AutoCompleteDirective, AutoFocusDirective, InputErrorPipe], template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"ngx-helper-form-m3-name-input\">\n    <!-- FIRST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 {{ input.title || '' }}</mat-label>\n        @if (firstFormControl.invalid) { <mat-error>{{ firstFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input\n            matInput\n            type=\"text\"\n            [name]=\"input.name + '-first'\"\n            [formControl]=\"firstFormControl\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            (input)=\"setName()\"\n        />\n    </mat-form-field>\n    <!-- LAST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 \u062E\u0627\u0646\u0648\u0627\u062F\u06AF\u06CC {{ input.title || '' }}</mat-label>\n        @if (lastFormControl.invalid) { <mat-error>{{ lastFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input matInput type=\"text\" [name]=\"input.name + '-last'\" [formControl]=\"lastFormControl\" (input)=\"setName()\" />\n    </mat-form-field>\n</div>\n" }]
+            args: [{ host: { selector: 'input-name' }, imports: [ReactiveFormsModule, MatFormField, MatInputModule, AutoCompleteDirective, AutoFocusDirective, InputErrorPipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"ngx-helper-form-m3-name-input\">\n    <!-- FIRST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 {{ input.title || '' }}</mat-label>\n        @if (firstFormControl.invalid) { <mat-error>{{ firstFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input\n            matInput\n            type=\"text\"\n            [name]=\"input.name + '-first'\"\n            [formControl]=\"firstFormControl\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            (input)=\"setName()\"\n        />\n    </mat-form-field>\n    <!-- LAST NAME -->\n    <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n        <mat-label>\u0646\u0627\u0645 \u062E\u0627\u0646\u0648\u0627\u062F\u06AF\u06CC {{ input.title || '' }}</mat-label>\n        @if (lastFormControl.invalid) { <mat-error>{{ lastFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n        <input matInput type=\"text\" [name]=\"input.name + '-last'\" [formControl]=\"lastFormControl\" (input)=\"setName()\" />\n    </mat-form-field>\n</div>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1413,13 +1572,28 @@ class InputNumberComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    maxLength = 15;
     hintText;
     isFocused = false;
-    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
+    maskitoOptions;
     ngOnInit() {
-        if (!this.input.fractionDigits && !this.input.allowNegatives && this.input.maximum)
-            this.maxLength = Helper.NUMBER.format(this.input.maximum, 'EN').length;
+        const numberOptions = maskitoNumber({
+            thousandSeparator: ',',
+            // Fraction Digits
+            decimalSeparator: '.',
+            maximumFractionDigits: this.input.fractionDigits === true ? 10 : this.input.fractionDigits || 0,
+            // Allow Negatives
+            minusSign: '-',
+            min: this.input.allowNegatives ? -999_999_999_999_999 : 0,
+            max: 999_999_999_999_999,
+        });
+        this.maskitoOptions = {
+            ...numberOptions,
+            preprocessors: [
+                // CHANGE PERSIAN NUMBERS
+                ({ elementState, data }) => ({ elementState, data: Helper.STRING.changeNumbers(data.toString(), 'EN') }),
+                ...(numberOptions.preprocessors || []),
+            ],
+        };
         this.updateHint();
     }
     setValue(input) {
@@ -1436,10 +1610,10 @@ class InputNumberComponent {
         const isNegative = value < 0;
         this.hintText = (isNegative ? 'منفی ' : '') + Helper.NUMBER.getTitle(Math.abs(value));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputNumberComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-number" } }, providers: [provideNgxMask()], ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint|| (isFocused && hintText)) { <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint> }\n\n    <!-- CURRENCY -->\n    @if (input.suffix) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>{{ input.suffix }}</span>\n    </span>\n    }\n\n    <!-- ICON -->\n    @if (input.showIcon && !input.suffix) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>tag</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"\n            input.fractionDigits === true\n                ? 'separator.3'\n                : !!input.fractionDigits && input.fractionDigits > 0\n                ? 'separator.' + input.fractionDigits.toString()\n                : 'separator.0'\n        \"\n        thousandSeparator=\",\"\n        decimalMarker=\".\"\n        [allowNegativeNumbers]=\"!!input.allowNegatives\"\n        [inputTransformFn]=\"inputTransformFn\"\n        [maxlength]=\"maxLength\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix.text{padding-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputNumberComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-number" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint || (isFocused && hintText)) {\n        <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n    }\n\n    <!-- CURRENCY -->\n    @if (input.suffix) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>{{ input.suffix }}</span>\n        </span>\n    }\n\n    <!-- ICON -->\n    @if (input.showIcon && !input.suffix) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>&nbsp;</span>\n            <mat-icon>tag</mat-icon>\n        </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [maskito]=\"maskitoOptions\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix.text{padding-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-number' }, imports: [
                         FormsModule,
@@ -1448,12 +1622,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatIcon,
                         MatIconButton,
                         MatInputModule,
-                        NgxMaskDirective,
+                        MaskitoDirective,
                         AutoCompleteDirective,
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], providers: [provideNgxMask()], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint|| (isFocused && hintText)) { <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint> }\n\n    <!-- CURRENCY -->\n    @if (input.suffix) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>{{ input.suffix }}</span>\n    </span>\n    }\n\n    <!-- ICON -->\n    @if (input.showIcon && !input.suffix) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>tag</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"\n            input.fractionDigits === true\n                ? 'separator.3'\n                : !!input.fractionDigits && input.fractionDigits > 0\n                ? 'separator.' + input.fractionDigits.toString()\n                : 'separator.0'\n        \"\n        thousandSeparator=\",\"\n        decimalMarker=\".\"\n        [allowNegativeNumbers]=\"!!input.allowNegatives\"\n        [inputTransformFn]=\"inputTransformFn\"\n        [maxlength]=\"maxLength\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix.text{padding-right:.5rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint || (isFocused && hintText)) {\n        <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n    }\n\n    <!-- CURRENCY -->\n    @if (input.suffix) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>{{ input.suffix }}</span>\n        </span>\n    }\n\n    <!-- ICON -->\n    @if (input.showIcon && !input.suffix) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>&nbsp;</span>\n            <mat-icon>tag</mat-icon>\n        </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [maskito]=\"maskitoOptions\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix.text{padding-right:.5rem}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1516,10 +1690,10 @@ class InputOptionListComponent {
         this.options.splice(index, 1);
         this.setValue();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputOptionListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-option-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus", "placeholder"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputOptionListComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-option-list" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: ListInputComponent, selector: "list-input", inputs: ["english", "disabled", "autoFocus", "placeholder"], outputs: ["onFocus", "onInput"] }, { kind: "component", type: ListItemComponent, selector: "list-item", inputs: ["value", "english", "disabled", "disableSort"], outputs: ["onUpdate", "onDelete"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputOptionListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputOptionListComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-option-list' }, imports: [
                         DragDropModule,
@@ -1532,7 +1706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MultiLinePipe,
                         ListInputComponent,
                         ListItemComponent,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"focused ? 'always' : 'auto'\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <!-- OPTIONS -->\n    @if (options.length > 0) {\n    <div\n        class=\"options\"\n        cdkDropList\n        (cdkDropListDropped)=\"dropOption($event)\"\n        [style.border-color]=\"formControl.disabled ? 'var(--outline-variant)' : 'var(--outline)'\"\n    >\n        @for (item of options; track $index) {\n        <list-item\n            cdkDrag\n            cdkDragLockAxis=\"y\"\n            cdkDragBoundary=\".options\"\n            [cdkDragDisabled]=\"input.disableSort\"\n            class=\"option\"\n            [value]=\"item.title\"\n            [english]=\"!!input.english\"\n            [disabled]=\"!!formControl.disabled\"\n            [disableSort]=\"!!input.disableSort\"\n            (onUpdate)=\"updateOption($index, $event)\"\n            (onDelete)=\"deleteOption($index)\"\n        ></list-item>\n        }\n    </div>\n    }\n    <!-- INPUT -->\n    <list-input\n        [english]=\"!!input.english\"\n        [disabled]=\"!!formControl.disabled\"\n        [autoFocus]=\"config.autoFocus === input.name\"\n        [placeholder]=\"input.placeholder\"\n        (onFocus)=\"focused = $event\"\n        (onInput)=\"addOption($event)\"\n    ></list-input>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".options{margin-bottom:5px;border-bottom:1px solid var(--outline)}.options.cdk-drop-list-dragging .option:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--surface-container);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1572,10 +1746,10 @@ class InputPasswordComponent {
     values;
     isButtonDisabled;
     showPassword = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputPasswordComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-password" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u06A9\u0644\u0645\u0647 \u0639\u0628\u0648\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SHOW PASSWORD -->\n    <span\n        matTextSuffix\n        class=\"ngx-form-m3-input-suffix click\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"showPassword = !showPassword\"\n    >\n        <span>&nbsp;</span>\n        <mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        [type]=\"showPassword ? 'text' : 'password'\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputPasswordComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-password" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u06A9\u0644\u0645\u0647 \u0639\u0628\u0648\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SHOW PASSWORD -->\n    <span\n        matTextSuffix\n        class=\"ngx-form-m3-input-suffix click\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"showPassword = !showPassword\"\n    >\n        <span>&nbsp;</span>\n        <mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        [type]=\"showPassword ? 'text' : 'password'\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputPasswordComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-password' }, imports: [
                         ReactiveFormsModule,
@@ -1586,7 +1760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u06A9\u0644\u0645\u0647 \u0639\u0628\u0648\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SHOW PASSWORD -->\n    <span\n        matTextSuffix\n        class=\"ngx-form-m3-input-suffix click\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"showPassword = !showPassword\"\n    >\n        <span>&nbsp;</span>\n        <mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        [type]=\"showPassword ? 'text' : 'password'\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u06A9\u0644\u0645\u0647 \u0639\u0628\u0648\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SHOW PASSWORD -->\n    <span\n        matTextSuffix\n        class=\"ngx-form-m3-input-suffix click\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"showPassword = !showPassword\"\n    >\n        <span>&nbsp;</span>\n        <mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        [type]=\"showPassword ? 'text' : 'password'\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1619,13 +1793,28 @@ class InputPriceComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    maxLength = 15;
     hintText;
     isFocused = false;
-    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
+    maskitoOptions;
     ngOnInit() {
-        if (!this.input.fractionDigits && this.input.maximum)
-            this.maxLength = Helper.NUMBER.format(this.input.maximum, 'EN').length;
+        const numberOptions = maskitoNumber({
+            thousandSeparator: ',',
+            // Fraction Digits
+            decimalSeparator: '.',
+            maximumFractionDigits: this.input.fractionDigits === true ? 10 : this.input.fractionDigits || 0,
+            // Allow Negatives
+            minusSign: '-',
+            min: 0,
+            max: 999_999_999_999_999,
+        });
+        this.maskitoOptions = {
+            ...numberOptions,
+            preprocessors: [
+                // CHANGE PERSIAN NUMBERS
+                ({ elementState, data }) => ({ elementState, data: Helper.STRING.changeNumbers(data.toString(), 'EN') }),
+                ...(numberOptions.preprocessors || []),
+            ],
+        };
         this.updateHint();
     }
     setValue(input) {
@@ -1640,10 +1829,10 @@ class InputPriceComponent {
                 ? undefined
                 : Helper.NUMBER.getTitle(Math.abs(value)) + (this.input.currency ? ` ${this.input.currency}` : '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPriceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputPriceComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-price" } }, providers: [provideNgxMask()], ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint|| (isFocused && hintText)) { <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint> }\n\n    <!-- CURRENCY -->\n    @if (input.currency) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>{{ input.currency }}</span>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"\n            input.fractionDigits === true\n                ? 'separator.3'\n                : !!input.fractionDigits && input.fractionDigits > 0\n                ? 'separator.' + input.fractionDigits.toString()\n                : 'separator.0'\n        \"\n        thousandSeparator=\",\"\n        decimalMarker=\".\"\n        [allowNegativeNumbers]=\"false\"\n        [inputTransformFn]=\"inputTransformFn\"\n        [maxlength]=\"maxLength\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputPriceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputPriceComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-price" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint || (isFocused && hintText)) {\n        <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n    }\n\n    <!-- CURRENCY -->\n    @if (input.currency) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>{{ input.currency }}</span>\n        </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [maskito]=\"maskitoOptions\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPriceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputPriceComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-price' }, imports: [
                         FormsModule,
@@ -1652,12 +1841,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatIcon,
                         MatIconButton,
                         MatInputModule,
-                        NgxMaskDirective,
+                        MaskitoDirective,
                         AutoCompleteDirective,
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], providers: [provideNgxMask()], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint|| (isFocused && hintText)) { <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint> }\n\n    <!-- CURRENCY -->\n    @if (input.currency) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>{{ input.currency }}</span>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"\n            input.fractionDigits === true\n                ? 'separator.3'\n                : !!input.fractionDigits && input.fractionDigits > 0\n                ? 'separator.' + input.fractionDigits.toString()\n                : 'separator.0'\n        \"\n        thousandSeparator=\",\"\n        decimalMarker=\".\"\n        [allowNegativeNumbers]=\"false\"\n        [inputTransformFn]=\"inputTransformFn\"\n        [maxlength]=\"maxLength\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n    @if (formControl.invalid) {\n        <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n    }\n\n    <!-- HINT -->\n    @if (input.hint || (isFocused && hintText)) {\n        <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n    }\n\n    <!-- CURRENCY -->\n    @if (input.currency) {\n        <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n            <span>{{ input.currency }}</span>\n        </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n        <span matIconSuffix>\n            <button\n                mat-icon-button\n                type=\"button\"\n                [disabled]=\"isButtonDisabled\"\n                (click)=\"input.button.onClick(values)\"\n                [tabIndex]=\"-1\"\n            >\n                <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                    {{ input.button.icon }}\n                </mat-icon>\n            </button>\n        </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        class=\"ngx-form-m3-en\"\n        [ngModel]=\"formControl.value?.toString() || ''\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [maskito]=\"maskitoOptions\"\n        (input)=\"setValue(numberInput.value); updateHint()\"\n        [disabled]=\"formControl.disabled\"\n        (focus)=\"isFocused = true; updateHint()\"\n        (blur)=\"isFocused = false\"\n        #numberInput\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n        <div\n            class=\"ngx-form-m3-input-description\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n            [innerHTML]=\"input.description | MultiLinePipe\"\n        ></div>\n    }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"] }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1714,10 +1903,10 @@ class InputRouteComponent {
         this.formControl.setValue(null);
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRouteComponent, deps: [{ token: i1$2.NgxHelperRouteService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputRouteComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-route" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"route.length > 0 ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0633\u06CC\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"route.length > 0 ? resetRoute() : setRoute(); formControl.markAsTouched()\">\n            {{ route.length > 0 ? 'close' : 'call_split' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-route-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"setRoute()\"\n    >\n        <div class=\"distance\">{{ route.length > 0 ? (distance.length | ngxHelperNumber) + ' \u0645\u062A\u0631' : '&nbsp;' }}</div>\n        <div class=\"point\">{{ route.length > 0 ? (route.length | ngxHelperNumber) + ' \u0646\u0642\u0637\u0647' : '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: NgxHelperNumberPipe, name: "ngxHelperNumber" }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputRouteComponent, deps: [{ token: i1$2.NgxHelperRouteService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputRouteComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-route" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"route.length > 0 ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0633\u06CC\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"route.length > 0 ? resetRoute() : setRoute(); formControl.markAsTouched()\">\n            {{ route.length > 0 ? 'close' : 'call_split' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-route-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"setRoute()\"\n    >\n        <div class=\"distance\">{{ route.length > 0 ? (distance.length | ngxHelperNumber) + ' \u0645\u062A\u0631' : '&nbsp;' }}</div>\n        <div class=\"point\">{{ route.length > 0 ? (route.length | ngxHelperNumber) + ' \u0646\u0642\u0637\u0647' : '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: NgxHelperNumberPipe, name: "ngxHelperNumber" }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRouteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputRouteComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-route' }, imports: [
                         ReactiveFormsModule,
@@ -1728,7 +1917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgxHelperNumberPipe,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"route.length > 0 ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0633\u06CC\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"route.length > 0 ? resetRoute() : setRoute(); formControl.markAsTouched()\">\n            {{ route.length > 0 ? 'close' : 'call_split' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-route-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"setRoute()\"\n    >\n        <div class=\"distance\">{{ route.length > 0 ? (distance.length | ngxHelperNumber) + ' \u0645\u062A\u0631' : '&nbsp;' }}</div>\n        <div class=\"point\">{{ route.length > 0 ? (route.length | ngxHelperNumber) + ' \u0646\u0642\u0637\u0647' : '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"route.length > 0 ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0645\u0633\u06CC\u0631' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"route.length > 0 ? resetRoute() : setRoute(); formControl.markAsTouched()\">\n            {{ route.length > 0 ? 'close' : 'call_split' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div\n        class=\"ngx-helper-form-m3-route-input\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        (click)=\"setRoute()\"\n    >\n        <div class=\"distance\">{{ route.length > 0 ? (distance.length | ngxHelperNumber) + ' \u0645\u062A\u0631' : '&nbsp;' }}</div>\n        <div class=\"point\">{{ route.length > 0 ? (route.length | ngxHelperNumber) + ' \u0646\u0642\u0637\u0647' : '&nbsp;' }}</div>\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgxHelperRouteService }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1761,10 +1950,10 @@ class InputSelectComponent {
     getTitle() {
         return this.input.options.find((option) => option.id === this.formControl.value)?.title || '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-select" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (closed)=\"searchInput.value = ''; searchQuery = ''\"\n    >\n        <!-- SEARCH -->\n        <div\n            class=\"ngx-helper-form-m3-select-input\"\n            [style.display]=\"!input.hideSearch && input.options.length > 10 ? '' : 'none'\"\n        >\n            <input\n                type=\"text\"\n                [class.ngx-form-m3-en]=\"input.english\"\n                placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n                (input)=\"searchQuery = searchInput.value.trim()\"\n                #searchInput\n            />\n        </div>\n\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ getTitle() }}</div>\n        </mat-select-trigger>\n\n        <!-- OPTIONS -->\n        @for (option of input.options; track $index) {\n        <!-- CHECK SEARCH QUERY -->\n        @if (!searchQuery || option.title.includes(searchQuery)) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        } }\n    </mat-select>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-select" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (closed)=\"searchInput.value = ''; searchQuery = ''\"\n    >\n        <!-- SEARCH -->\n        <div\n            class=\"ngx-helper-form-m3-select-input\"\n            [style.display]=\"!input.hideSearch && input.options.length > 10 ? '' : 'none'\"\n        >\n            <input\n                type=\"text\"\n                [class.ngx-form-m3-en]=\"input.english\"\n                placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n                (input)=\"searchQuery = searchInput.value.trim()\"\n                #searchInput\n            />\n        </div>\n\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ getTitle() }}</div>\n        </mat-select-trigger>\n\n        <!-- OPTIONS -->\n        @for (option of input.options; track $index) {\n        <!-- CHECK SEARCH QUERY -->\n        @if (!searchQuery || option.title.includes(searchQuery)) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        } }\n    </mat-select>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-select' }, imports: [
                         NgClass,
@@ -1777,7 +1966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (closed)=\"searchInput.value = ''; searchQuery = ''\"\n    >\n        <!-- SEARCH -->\n        <div\n            class=\"ngx-helper-form-m3-select-input\"\n            [style.display]=\"!input.hideSearch && input.options.length > 10 ? '' : 'none'\"\n        >\n            <input\n                type=\"text\"\n                [class.ngx-form-m3-en]=\"input.english\"\n                placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n                (input)=\"searchQuery = searchInput.value.trim()\"\n                #searchInput\n            />\n        </div>\n\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ getTitle() }}</div>\n        </mat-select-trigger>\n\n        <!-- OPTIONS -->\n        @for (option of input.options; track $index) {\n        <!-- CHECK SEARCH QUERY -->\n        @if (!searchQuery || option.title.includes(searchQuery)) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        } }\n    </mat-select>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (closed)=\"searchInput.value = ''; searchQuery = ''\"\n    >\n        <!-- SEARCH -->\n        <div\n            class=\"ngx-helper-form-m3-select-input\"\n            [style.display]=\"!input.hideSearch && input.options.length > 10 ? '' : 'none'\"\n        >\n            <input\n                type=\"text\"\n                [class.ngx-form-m3-en]=\"input.english\"\n                placeholder=\"\u062C\u0633\u062A\u062C\u0648\"\n                (input)=\"searchQuery = searchInput.value.trim()\"\n                #searchInput\n            />\n        </div>\n\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ getTitle() }}</div>\n        </mat-select-trigger>\n\n        <!-- OPTIONS -->\n        @for (option of input.options; track $index) {\n        <!-- CHECK SEARCH QUERY -->\n        @if (!searchQuery || option.title.includes(searchQuery)) {\n        <mat-option [value]=\"option.id\">\n            <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n        </mat-option>\n        } }\n    </mat-select>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1806,7 +1995,8 @@ class InputTagComponent {
     values;
     isButtonDisabled;
     separatorKeysCodes = [ENTER, COMMA, PERIOD];
-    inputValue = model('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    inputValue = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
     tags = Array.isArray(this.formControl.value) ? this.formControl.value : [];
     filteredTags = computed(() => {
         let options = this.input.tags
@@ -1816,7 +2006,8 @@ class InputTagComponent {
             options = options.sort((t1, t2) => t1.localeCompare(t2));
         const value = this.inputValue().toLowerCase();
         return value ? options.filter((option) => option.toLowerCase().includes(value)) : options;
-    }, ...(ngDevMode ? [{ debugName: "filteredTags" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredTags" }] : /* istanbul ignore next */ []));
     setValues() {
         this.tags = this.tags.sort((t1, t2) => t1.localeCompare(t2));
         this.formControl.setValue(this.tags.length === 0 ? null : this.tags);
@@ -1844,10 +2035,10 @@ class InputTagComponent {
         this.setValues();
         event.option.deselect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputTagComponent, isStandalone: true, selector: "ng-component", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: true, transformFunction: null }, isButtonDisabled: { classPropertyName: "isButtonDisabled", publicName: "isButtonDisabled", isSignal: false, isRequired: true, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange" }, host: { attributes: { "selector": "input-tag" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            enterkeyhint=\"done\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputTagComponent, isStandalone: true, selector: "ng-component", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: true, transformFunction: null }, isButtonDisabled: { classPropertyName: "isButtonDisabled", publicName: "isButtonDisabled", isSignal: false, isRequired: true, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange" }, host: { attributes: { "selector": "input-tag" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            enterkeyhint=\"done\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTagComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-tag' }, imports: [
                         ReactiveFormsModule,
@@ -1862,7 +2053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            enterkeyhint=\"done\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n    <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n        @for (tag of tags; track $index) {\n        <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n            <span class=\"tag\">{{ tag }}</span>\n            <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n        }\n        <input\n            type=\"text\"\n            name=\"inputValue\"\n            [(ngModel)]=\"inputValue\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            enterkeyhint=\"done\"\n            #tagInput\n        />\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n        @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n    </mat-autocomplete>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1893,10 +2084,10 @@ class InputTextComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputTextComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-text" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [readonly]=\"input.readonly\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputTextComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-text" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [readonly]=\"input.readonly\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-text' }, imports: [
                         NgClass,
@@ -1909,7 +2100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [readonly]=\"input.readonly\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [readonly]=\"input.readonly\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1944,10 +2135,10 @@ class InputTextareaComponent {
     values;
     isButtonDisabled;
     isFocused = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputTextareaComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-textarea" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- COUNTER -->\n    @if (isFocused && input.counter) {\n    <mat-hint [align]=\"'end'\">\n        {{ formControl.value?.length || 0 | number }}{{ input.maxLength ? ' \u0627\u0632 ' + (input.maxLength | number) : '' }}\n    </mat-hint>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <textarea\n        matInput\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.height]=\"input.height ? input.height.toString() + 'px' : '75px'\"\n        [style.resize]=\"'none'\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [AutoHeightDirective]=\"!!input.autoHeight\"\n        [minHeight]=\"input.height || 75\"\n        [maxHeight]=\"input.maxHeight || 0\"\n        (focus)=\"isFocused = true\"\n        (blur)=\"isFocused = false\"\n    ></textarea>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "directive", type: AutoHeightDirective, selector: "[AutoHeightDirective]", inputs: ["AutoHeightDirective", "minHeight", "maxHeight"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputTextareaComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-textarea" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- COUNTER -->\n    @if (isFocused && input.counter) {\n    <mat-hint [align]=\"'end'\">\n        {{ formControl.value?.length || 0 | number }}{{ input.maxLength ? ' \u0627\u0632 ' + (input.maxLength | number) : '' }}\n    </mat-hint>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <textarea\n        matInput\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.height]=\"input.height ? input.height.toString() + 'px' : '75px'\"\n        [style.resize]=\"'none'\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [AutoHeightDirective]=\"!!input.autoHeight\"\n        [minHeight]=\"input.height || 75\"\n        [maxHeight]=\"input.maxHeight || 0\"\n        (focus)=\"isFocused = true\"\n        (blur)=\"isFocused = false\"\n    ></textarea>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "directive", type: AutoHeightDirective, selector: "[AutoHeightDirective]", inputs: ["AutoHeightDirective", "minHeight", "maxHeight"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-textarea' }, imports: [
                         DecimalPipe,
@@ -1961,7 +2152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoHeightDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- COUNTER -->\n    @if (isFocused && input.counter) {\n    <mat-hint [align]=\"'end'\">\n        {{ formControl.value?.length || 0 | number }}{{ input.maxLength ? ' \u0627\u0632 ' + (input.maxLength | number) : '' }}\n    </mat-hint>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <textarea\n        matInput\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.height]=\"input.height ? input.height.toString() + 'px' : '75px'\"\n        [style.resize]=\"'none'\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [AutoHeightDirective]=\"!!input.autoHeight\"\n        [minHeight]=\"input.height || 75\"\n        [maxHeight]=\"input.maxHeight || 0\"\n        (focus)=\"isFocused = true\"\n        (blur)=\"isFocused = false\"\n    ></textarea>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- COUNTER -->\n    @if (isFocused && input.counter) {\n    <mat-hint [align]=\"'end'\">\n        {{ formControl.value?.length || 0 | number }}{{ input.maxLength ? ' \u0627\u0632 ' + (input.maxLength | number) : '' }}\n    </mat-hint>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <textarea\n        matInput\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.height]=\"input.height ? input.height.toString() + 'px' : '75px'\"\n        [style.resize]=\"'none'\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [AutoHeightDirective]=\"!!input.autoHeight\"\n        [minHeight]=\"input.height || 75\"\n        [maxHeight]=\"input.maxHeight || 0\"\n        (focus)=\"isFocused = true\"\n        (blur)=\"isFocused = false\"\n    ></textarea>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2042,10 +2233,10 @@ class InputTimeComponent {
         this.second = second;
         this.setValue();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputTimeComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-time" } }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'access_time' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-time-input\">\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"hourMenu\"\n            [disabled]=\"formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        >\n            {{ hour }}\n        </button>\n        <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\" [xPosition]=\"'before'\">\n            @for (h of hours; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setHour(h)\"\n                [class.selected]=\"h === hour\"\n                [disabled]=\"h === hour || formControl.disabled\"\n            >\n                <span class=\"hour\">{{ h }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"minuteMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ minute }}\n        </button>\n        <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\" [xPosition]=\"'before'\">\n            @for (m of minutes; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setMinute(m)\"\n                [class.selected]=\"m === minute\"\n                [disabled]=\"m === minute || formControl.disabled\"\n            >\n                <span class=\"minute\" [style.color]=\"+m % 5 === 0 ? 'var(--secondary)' : ''\">{{ m }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <!-- SECOND -->\n        @if (input.showSeconds) {\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"secondMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ second }}\n        </button>\n        <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\" [xPosition]=\"'before'\">\n            @for (s of seconds; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setSecond(s)\"\n                [class.selected]=\"s === second\"\n                [disabled]=\"s === second || formControl.disabled\"\n            >\n                <span class=\"second\" [style.color]=\"+s % 5 === 0 ? 'var(--secondary)' : ''\">{{ s }}</span>\n            </button>\n            }\n        </mat-menu>\n        }\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputTimeComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-time" } }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'access_time' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-time-input\">\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"hourMenu\"\n            [disabled]=\"formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        >\n            {{ hour }}\n        </button>\n        <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\" [xPosition]=\"'before'\">\n            @for (h of hours; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setHour(h)\"\n                [class.selected]=\"h === hour\"\n                [disabled]=\"h === hour || formControl.disabled\"\n            >\n                <span class=\"hour\">{{ h }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"minuteMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ minute }}\n        </button>\n        <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\" [xPosition]=\"'before'\">\n            @for (m of minutes; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setMinute(m)\"\n                [class.selected]=\"m === minute\"\n                [disabled]=\"m === minute || formControl.disabled\"\n            >\n                <span class=\"minute\" [style.color]=\"+m % 5 === 0 ? 'var(--secondary)' : ''\">{{ m }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <!-- SECOND -->\n        @if (input.showSeconds) {\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"secondMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ second }}\n        </button>\n        <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\" [xPosition]=\"'before'\">\n            @for (s of seconds; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setSecond(s)\"\n                [class.selected]=\"s === second\"\n                [disabled]=\"s === second || formControl.disabled\"\n            >\n                <span class=\"second\" [style.color]=\"+s % 5 === 0 ? 'var(--secondary)' : ''\">{{ s }}</span>\n            </button>\n            }\n        </mat-menu>\n        }\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTimeComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-time' }, imports: [
                         ReactiveFormsModule,
@@ -2058,7 +2249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatSelectModule,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'access_time' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-time-input\">\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"hourMenu\"\n            [disabled]=\"formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        >\n            {{ hour }}\n        </button>\n        <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\" [xPosition]=\"'before'\">\n            @for (h of hours; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setHour(h)\"\n                [class.selected]=\"h === hour\"\n                [disabled]=\"h === hour || formControl.disabled\"\n            >\n                <span class=\"hour\">{{ h }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"minuteMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ minute }}\n        </button>\n        <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\" [xPosition]=\"'before'\">\n            @for (m of minutes; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setMinute(m)\"\n                [class.selected]=\"m === minute\"\n                [disabled]=\"m === minute || formControl.disabled\"\n            >\n                <span class=\"minute\" [style.color]=\"+m % 5 === 0 ? 'var(--secondary)' : ''\">{{ m }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <!-- SECOND -->\n        @if (input.showSeconds) {\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"secondMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ second }}\n        </button>\n        <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\" [xPosition]=\"'before'\">\n            @for (s of seconds; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setSecond(s)\"\n                [class.selected]=\"s === second\"\n                [disabled]=\"s === second || formControl.disabled\"\n            >\n                <span class=\"second\" [style.color]=\"+s % 5 === 0 ? 'var(--secondary)' : ''\">{{ s }}</span>\n            </button>\n            }\n        </mat-menu>\n        }\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n    <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!--  SUFFIX -->\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n            {{ formControl.value ? 'close' : 'access_time' }}\n        </mat-icon>\n    </span>\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-time-input\">\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"hourMenu\"\n            [disabled]=\"formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        >\n            {{ hour }}\n        </button>\n        <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\" [xPosition]=\"'before'\">\n            @for (h of hours; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setHour(h)\"\n                [class.selected]=\"h === hour\"\n                [disabled]=\"h === hour || formControl.disabled\"\n            >\n                <span class=\"hour\">{{ h }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"minuteMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ minute }}\n        </button>\n        <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\" [xPosition]=\"'before'\">\n            @for (m of minutes; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setMinute(m)\"\n                [class.selected]=\"m === minute\"\n                [disabled]=\"m === minute || formControl.disabled\"\n            >\n                <span class=\"minute\" [style.color]=\"+m % 5 === 0 ? 'var(--secondary)' : ''\">{{ m }}</span>\n            </button>\n            }\n        </mat-menu>\n\n        <!-- SECOND -->\n        @if (input.showSeconds) {\n        <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n        <button\n            mat-button\n            type=\"button\"\n            [matMenuTriggerFor]=\"secondMenu\"\n            [disabled]=\"hour === '--' || formControl.disabled\"\n            [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n        >\n            {{ second }}\n        </button>\n        <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\" [xPosition]=\"'before'\">\n            @for (s of seconds; track $index) {\n            <button\n                mat-menu-item\n                (click)=\"setSecond(s)\"\n                [class.selected]=\"s === second\"\n                [disabled]=\"s === second || formControl.disabled\"\n            >\n                <span class=\"second\" [style.color]=\"+s % 5 === 0 ? 'var(--secondary)' : ''\">{{ s }}</span>\n            </button>\n            }\n        </mat-menu>\n        }\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2083,10 +2274,10 @@ class InputUrlComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputUrlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputUrlComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-url" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0633\u0627\u06CC\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>link</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputUrlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputUrlComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-url" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0633\u0627\u06CC\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>link</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputUrlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputUrlComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-url' }, imports: [
                         ReactiveFormsModule,
@@ -2098,7 +2289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0633\u0627\u06CC\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>link</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0633\u0627\u06CC\u062A' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <span>&nbsp;</span>\n        <mat-icon>link</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        inputmode=\"url\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        class=\"ngx-form-m3-en\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2124,10 +2315,10 @@ class InputUsernameComponent {
     config = inject(INPUT_CONFIG);
     values;
     isButtonDisabled;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputUsernameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputUsernameComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-username" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"'ngx-form-m3-en'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputUsernameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputUsernameComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-username" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"'ngx-form-m3-en'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputUsernameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputUsernameComponent, decorators: [{
             type: Component,
             args: [{ host: { selector: 'input-username' }, imports: [
                         NgClass,
@@ -2140,7 +2331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         AutoFocusDirective,
                         InputErrorPipe,
                         MultiLinePipe,
-                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"'ngx-form-m3-en'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\u06CC' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <input\n        matInput\n        type=\"text\"\n        [name]=\"input.name\"\n        [formControl]=\"formControl\"\n        [ngClass]=\"'ngx-form-m3-en'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
         }], propDecorators: { values: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2184,12 +2375,12 @@ class InputComponent {
                 !!this.input.button &&
                 (formControl?.disabled || !!this.input.button.disableOn?.(this.values));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: InputComponent, isStandalone: true, selector: "form-input", inputs: { formGroup: "formGroup", input: "input", config: "config", values: "values" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n    *ngComponentOutlet=\"inputInfo[input.type].component; inputs: { values, isButtonDisabled }; injector: injector\"\n></ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: InputComponent, isStandalone: true, selector: "form-input", inputs: { formGroup: "formGroup", input: "input", config: "config", values: "values" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n    *ngComponentOutlet=\"inputInfo[input.type].component; inputs: { values, isButtonDisabled }; injector: injector\"\n></ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'form-input', imports: [NgComponentOutlet], template: "<ng-container\n    *ngComponentOutlet=\"inputInfo[input.type].component; inputs: { values, isButtonDisabled }; injector: injector\"\n></ng-container>\n" }]
+            args: [{ selector: 'form-input', imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.Eager, template: "<ng-container\n    *ngComponentOutlet=\"inputInfo[input.type].component; inputs: { values, isButtonDisabled }; injector: injector\"\n></ng-container>\n" }]
         }], propDecorators: { formGroup: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2220,6 +2411,7 @@ const InputInfo = {
     EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
     FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
     ICON: { title: 'آیکون', methods: new InputIconMethods(), component: InputIconComponent },
+    ID: { title: 'شناسه', methods: new InputIdMethods(), component: InputIdComponent },
     IP: { title: 'آدرس آی‌پی', methods: new InputIpMethods(), component: InputIpComponent },
     'ITEM-LIST': { title: 'لیست مقادیر', methods: new InputItemListMethods(), component: InputItemListComponent },
     MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
@@ -2526,12 +2718,12 @@ class NgxFormComponent {
         else
             this.router.navigate(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$5.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { ngxForm: "ngxForm" }, outputs: { onInit: "onInit", onSubmit: "onSubmit", onChange: "onChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: ["formObject"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n    <section class=\"sections\">\n        @for (section of sections; track $index) {\n        <!-- CHECK SECTION VIEW -->\n        @if (showSection(section)) {\n        <!-- SECTION HEADER -->\n        @if (section.header) {\n        <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n        }\n\n        <div class=\"section\" [class.section-mobile]=\"isMobile\">\n            <!-- SECTIONS -->\n            @for (column of section.columns; track $index) {\n            <!-- CHECK COLUMN VIEW -->\n            @if (showColumn(column)) {\n            <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n                <!-- COLUMN HEADER -->\n                @if (column.header) {\n                <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n                }\n\n                <!-- ROWS -->\n                @for (row of column.rows; track $index) {\n                <!-- CHECK Row VIEW -->\n                @if (showRow(row)) {\n                <!-- ROW HEADER -->\n                @if (row.header) {\n                <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n                }\n\n                <div class=\"inputs\">\n                    <!-- INPUTS -->\n                    @for (input of row.inputs; track $index) {\n                    <!-- CHECK Row VIEW -->\n                    @if (showInput(input)) {\n                    <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n                        <form-input\n                            [formGroup]=\"formGroup\"\n                            [input]=\"input\"\n                            [config]=\"inputConfig\"\n                            [values]=\"values\"\n                        ></form-input>\n                    </div>\n                    } }\n                </div>\n                } }\n            </div>\n            } }\n        </div>\n        } }\n    </section>\n\n    <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n        <!-- EXTRA BUTTONS -->\n        @for (item of (ngxForm.buttons || []); track $index) {\n        <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n        }\n        <!-- SUBMIT BUTTON -->\n        <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n    </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: InputComponent, selector: "form-input", inputs: ["formGroup", "input", "config", "values"] }, { kind: "directive", type: FormErrorDirective, selector: "form.ngx-form" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$5.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { ngxForm: "ngxForm" }, outputs: { onInit: "onInit", onSubmit: "onSubmit", onChange: "onChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: ["formObject"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n    <section class=\"sections\">\n        @for (section of sections; track $index) {\n        <!-- CHECK SECTION VIEW -->\n        @if (showSection(section)) {\n        <!-- SECTION HEADER -->\n        @if (section.header) {\n        <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n        }\n\n        <div class=\"section\" [class.section-mobile]=\"isMobile\">\n            <!-- SECTIONS -->\n            @for (column of section.columns; track $index) {\n            <!-- CHECK COLUMN VIEW -->\n            @if (showColumn(column)) {\n            <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n                <!-- COLUMN HEADER -->\n                @if (column.header) {\n                <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n                }\n\n                <!-- ROWS -->\n                @for (row of column.rows; track $index) {\n                <!-- CHECK Row VIEW -->\n                @if (showRow(row)) {\n                <!-- ROW HEADER -->\n                @if (row.header) {\n                <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n                }\n\n                <div class=\"inputs\">\n                    <!-- INPUTS -->\n                    @for (input of row.inputs; track $index) {\n                    <!-- CHECK Row VIEW -->\n                    @if (showInput(input)) {\n                    <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n                        <form-input\n                            [formGroup]=\"formGroup\"\n                            [input]=\"input\"\n                            [config]=\"inputConfig\"\n                            [values]=\"values\"\n                        ></form-input>\n                    </div>\n                    } }\n                </div>\n                } }\n            </div>\n            } }\n        </div>\n        } }\n    </section>\n\n    <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n        <!-- EXTRA BUTTONS -->\n        @for (item of (ngxForm.buttons || []); track $index) {\n        <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n        }\n        <!-- SUBMIT BUTTON -->\n        <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n    </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: InputComponent, selector: "form-input", inputs: ["formGroup", "input", "config", "values"] }, { kind: "directive", type: FormErrorDirective, selector: "form.ngx-form" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-form', imports: [ReactiveFormsModule, MatButton, InputComponent, FormErrorDirective], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n    <section class=\"sections\">\n        @for (section of sections; track $index) {\n        <!-- CHECK SECTION VIEW -->\n        @if (showSection(section)) {\n        <!-- SECTION HEADER -->\n        @if (section.header) {\n        <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n        }\n\n        <div class=\"section\" [class.section-mobile]=\"isMobile\">\n            <!-- SECTIONS -->\n            @for (column of section.columns; track $index) {\n            <!-- CHECK COLUMN VIEW -->\n            @if (showColumn(column)) {\n            <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n                <!-- COLUMN HEADER -->\n                @if (column.header) {\n                <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n                }\n\n                <!-- ROWS -->\n                @for (row of column.rows; track $index) {\n                <!-- CHECK Row VIEW -->\n                @if (showRow(row)) {\n                <!-- ROW HEADER -->\n                @if (row.header) {\n                <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n                }\n\n                <div class=\"inputs\">\n                    <!-- INPUTS -->\n                    @for (input of row.inputs; track $index) {\n                    <!-- CHECK Row VIEW -->\n                    @if (showInput(input)) {\n                    <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n                        <form-input\n                            [formGroup]=\"formGroup\"\n                            [input]=\"input\"\n                            [config]=\"inputConfig\"\n                            [values]=\"values\"\n                        ></form-input>\n                    </div>\n                    } }\n                </div>\n                } }\n            </div>\n            } }\n        </div>\n        } }\n    </section>\n\n    <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n        <!-- EXTRA BUTTONS -->\n        @for (item of (ngxForm.buttons || []); track $index) {\n        <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n        }\n        <!-- SUBMIT BUTTON -->\n        <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n    </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"] }]
+            args: [{ selector: 'ngx-form', imports: [ReactiveFormsModule, MatButton, InputComponent, FormErrorDirective], changeDetection: ChangeDetectionStrategy.Eager, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n    <section class=\"sections\">\n        @for (section of sections; track $index) {\n        <!-- CHECK SECTION VIEW -->\n        @if (showSection(section)) {\n        <!-- SECTION HEADER -->\n        @if (section.header) {\n        <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n        }\n\n        <div class=\"section\" [class.section-mobile]=\"isMobile\">\n            <!-- SECTIONS -->\n            @for (column of section.columns; track $index) {\n            <!-- CHECK COLUMN VIEW -->\n            @if (showColumn(column)) {\n            <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n                <!-- COLUMN HEADER -->\n                @if (column.header) {\n                <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n                }\n\n                <!-- ROWS -->\n                @for (row of column.rows; track $index) {\n                <!-- CHECK Row VIEW -->\n                @if (showRow(row)) {\n                <!-- ROW HEADER -->\n                @if (row.header) {\n                <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n                }\n\n                <div class=\"inputs\">\n                    <!-- INPUTS -->\n                    @for (input of row.inputs; track $index) {\n                    <!-- CHECK Row VIEW -->\n                    @if (showInput(input)) {\n                    <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n                        <form-input\n                            [formGroup]=\"formGroup\"\n                            [input]=\"input\"\n                            [config]=\"inputConfig\"\n                            [values]=\"values\"\n                        ></form-input>\n                    </div>\n                    } }\n                </div>\n                } }\n            </div>\n            } }\n        </div>\n        } }\n    </section>\n\n    <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n        <!-- EXTRA BUTTONS -->\n        @for (item of (ngxForm.buttons || []); track $index) {\n        <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n        }\n        <!-- SUBMIT BUTTON -->\n        <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n    </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.Router }, { type: undefined, decorators: [{
                     type: Optional
                 }, {