@webilix/ngx-form-m3 0.0.9 → 0.0.11

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Directive, HostBinding, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, makeEnvironmentProviders, EventEmitter, Inject, ViewChild, Output } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
+import { ReactiveFormsModule, FormControl, Validators, FormsModule, FormGroup } from '@angular/forms';
+import { MatIconButton, MatButton } from '@angular/material/button';
 import * as i3 from '@angular/material/form-field';
 import { MatFormField } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
@@ -173,6 +173,12 @@ class InputErrorPipe {
                 return 'مقدار الزامی است.';
             case 'length':
                 return `مقدار باید داری ${Helper.NUMBER.format(value)} کاراکتر باشد.`;
+            case 'minimum':
+                return `مقدار نمی‌تواند کوچکتر از ${Helper.NUMBER.format(value)} باشد.`;
+            case 'maximum':
+                return `مقدار نمی‌تواند بزرگتر از ${Helper.NUMBER.format(value)} باشد.`;
+            case 'multiplyOf':
+                return `مقدار باید مضربی از ${Helper.NUMBER.format(value)} باشد.`;
             case 'minlength':
                 return `مقدار باید حداقل داری ${Helper.NUMBER.format(value.requiredLength)} کاراکتر باشد.`;
             case 'maxlength':
@@ -246,17 +252,59 @@ const INPUT_CONTROL = new InjectionToken('NGX-FORM-INPUT-CONTROL');
 const INPUT_TYPE = new InjectionToken('NGX-FORM-INPUT-TYPE');
 const INPUT_CONFIG = new InjectionToken('NGX-FORM-INPUT-CONFIG');
 
+class InputCheckboxComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    toggleValue() {
+        const value = !!this.formControl.value;
+        this.formControl.setValue(!value);
+        this.formControl.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputCheckboxMethods extends InputMethods {
+    control(input, validators) {
+        return new FormControl(!!input.value, validators);
+    }
+    value(value, input) {
+        return !!value;
+    }
+}
+
 class InputColorComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputColorComponent, isStandalone: true, selector: "ng-component", 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    <!-- 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputColorComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-color' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, 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    <!-- 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], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputColorMethods extends InputMethods {
     control(input, validators) {
@@ -275,6 +323,8 @@ class InputComponentComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     injector = Injector.create({
         providers: [
             { provide: NGX_FORM_CONTROL, useValue: this.formControl },
@@ -285,12 +335,27 @@ class InputComponentComponent {
         ],
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputComponentComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-component" } }, 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    <!-- 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: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputComponentComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-component" } }, 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputComponentComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-component' }, imports: [NgComponentOutlet, ReactiveFormsModule, MatFormField, 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    <!-- 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" }]
-        }] });
+            args: [{ host: { selector: 'input-component' }, imports: [
+                        NgComponentOutlet,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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" }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputComponentMethods extends InputMethods {
     control(input, validators) {
@@ -307,6 +372,8 @@ class InputDateComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     constructor(ngxCalendarService) {
         this.ngxCalendarService = ngxCalendarService;
     }
@@ -323,12 +390,27 @@ class InputDateComponent {
         }, () => this.formControl.markAsTouched());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputDateComponent, deps: [{ token: i1$2.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputDateComponent, isStandalone: true, selector: "ng-component", 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    <!-- 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\"\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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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\"\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputDateComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-date' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, 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    <!-- 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\"\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.NgxCalendarService }] });
+            args: [{ host: { selector: 'input-date' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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\"\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.NgxCalendarService }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 const MaxDateValidator = (max) => {
     const jalali = JalaliDateTime();
@@ -380,6 +462,33 @@ const MinMomentValidator = (min) => {
     };
 };
 
+const MaxNumberValidator = (maximum) => {
+    return (formControl) => {
+        const value = Helper.IS.string(formControl.value) ? +formControl.value.replace(/,/g, '') : formControl.value;
+        if (Helper.IS.empty(value) || !Helper.IS.number(value))
+            return null;
+        return value <= maximum ? null : { maximum };
+    };
+};
+
+const MinNumberValidator = (minimum) => {
+    return (formControl) => {
+        const value = Helper.IS.string(formControl.value) ? +formControl.value.replace(/,/g, '') : formControl.value;
+        if (Helper.IS.empty(value) || !Helper.IS.number(value))
+            return null;
+        return value >= minimum ? null : { minimum };
+    };
+};
+
+const MultiplyOfNumberValidator = (multiplyOf) => {
+    return (formControl) => {
+        const value = Helper.IS.string(formControl.value) ? +formControl.value.replace(/,/g, '') : formControl.value;
+        if (Helper.IS.empty(value) || !Helper.IS.number(value))
+            return null;
+        return value % multiplyOf === 0 ? null : { multiplyOf };
+    };
+};
+
 const LengthValidator = (length) => {
     return (formControl) => {
         const value = formControl.value;
@@ -407,8 +516,10 @@ class InputEmailComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputEmailComponent, isStandalone: true, selector: "ng-component", 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    <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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
@@ -416,13 +527,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         MatFormField,
                         MatIcon,
+                        MatIconButton,
                         MatInputModule,
                         AutoCompleteDirective,
                         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    <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" }]
-        }] });
+                    ], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputEmailMethods extends InputMethods {
     control(input, validators) {
@@ -439,6 +557,8 @@ class InputFileComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     setFile(event) {
         if (this.formControl.disabled)
             return;
@@ -448,7 +568,7 @@ class InputFileComponent {
         this.formControl.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputFileComponent, isStandalone: true, selector: "ng-component", 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    <!-- 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
@@ -456,12 +576,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         MatFormField,
                         MatIcon,
+                        MatIconButton,
                         MatInputModule,
                         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    <!-- 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" }]
-        }] });
+                    ], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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" }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputFileMethods extends InputMethods {
     control(input, validators) {
@@ -476,9 +603,11 @@ class InputMobileComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputMobileComponent, isStandalone: true, selector: "ng-component", 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    <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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMobileComponent, decorators: [{
             type: Component,
@@ -486,14 +615,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         MatFormField,
                         MatIcon,
+                        MatIconButton,
                         MatInputModule,
                         NgxMaskDirective,
                         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    <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" }]
-        }] });
+                    ], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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" }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputMobileMethods extends InputMethods {
     control(input, validators) {
@@ -510,6 +646,8 @@ class InputMomentComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     constructor(ngxCalendarService) {
         this.ngxCalendarService = ngxCalendarService;
     }
@@ -526,12 +664,27 @@ class InputMomentComponent {
         }, () => this.formControl.markAsTouched());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMomentComponent, deps: [{ token: i1$2.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputMomentComponent, isStandalone: true, selector: "ng-component", 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    <!-- 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: '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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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: '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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMomentComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-moment' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, 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    <!-- 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: '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$2.NgxCalendarService }] });
+            args: [{ host: { selector: 'input-moment' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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: '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$2.NgxCalendarService }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputMomentMethods extends InputMethods {
     control(input, validators) {
@@ -551,6 +704,8 @@ class InputNameComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     firstFormControl;
     lastFormControl;
     ngOnInit() {
@@ -579,12 +734,18 @@ class InputNameComponent {
         this.formControl.setValue(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputNameComponent, isStandalone: true, selector: "ng-component", 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.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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" }]
-        }] });
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputNameMethods extends InputMethods {
     control(input, validators) {
@@ -596,18 +757,106 @@ class InputNameMethods extends InputMethods {
     }
 }
 
+class InputNumberComponent {
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    maxLength = 15;
+    hintText;
+    isFocused = false;
+    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
+    ngOnInit() {
+        if (!this.input.fractionDigits && !this.input.allowNegatives && this.input.maximum)
+            this.maxLength = Helper.NUMBER.format(this.input.maximum, 'EN').length;
+        this.updateHint();
+    }
+    setValue(input) {
+        const value = input.length === 0 ? null : +input.replace(/,/gi, '');
+        this.formControl.setValue(Helper.IS.number(value) ? value : null);
+        this.formControl.markAllAsTouched();
+    }
+    updateHint() {
+        const value = this.formControl.value;
+        if (!this.input.showText || !Helper.IS.number(value)) {
+            this.hintText = undefined;
+            return;
+        }
+        const isNegative = value < 0;
+        this.hintText = (isNegative ? 'منفی ' : '') + Helper.NUMBER.getTitle(Math.abs(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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    <!-- 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>tag</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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: [""], 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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputNumberComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-number' }, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        NgxMaskDirective,
+                        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    <!-- 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>tag</mat-icon>\n    </span>\n    }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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" }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputNumberMethods extends InputMethods {
+    control(input, validators) {
+        if (input.minimum)
+            validators.push(MinNumberValidator(input.minimum));
+        if (input.maximum)
+            validators.push(MaxNumberValidator(input.maximum));
+        if (input.multiplyOf)
+            validators.push(MultiplyOfNumberValidator(input.multiplyOf));
+        const value = input.value !== undefined && Helper.IS.number(input.value) ? input.value : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return Helper.IS.number(value) ? value : null;
+    }
+}
+
 class InputPasswordComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     showPassword = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputPasswordComponent, isStandalone: true, selector: "ng-component", 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    <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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputPasswordComponent, decorators: [{
             type: Component,
-            args: [{ host: { selector: 'input-password' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, 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    <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" }]
-        }] });
+            args: [{ host: { selector: 'input-password' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputPasswordMethods extends InputMethods {
     control(input, validators) {
@@ -631,11 +880,13 @@ class InputSelectComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     getTitle() {
         return this.input.options.find((option) => option.id === this.formControl.value)?.title || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputSelectComponent, isStandalone: true, selector: "ng-component", 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    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\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        <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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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    >\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        <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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
@@ -643,13 +894,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         NgClass,
                         ReactiveFormsModule,
                         MatFormField,
+                        MatIcon,
+                        MatIconButton,
                         MatInputModule,
                         MatSelectModule,
                         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    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n        [style.direction]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\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        <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" }]
-        }] });
+                    ], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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    >\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        <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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputSelectMethods extends InputMethods {
     control(input, validators) {
@@ -668,8 +927,10 @@ class InputTextComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputTextComponent, isStandalone: true, selector: "ng-component", 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    <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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.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" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
@@ -677,13 +938,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         NgClass,
                         ReactiveFormsModule,
                         MatFormField,
+                        MatIcon,
+                        MatIconButton,
                         MatInputModule,
                         AutoCompleteDirective,
                         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    <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" }]
-        }] });
+                    ], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputTextMethods extends InputMethods {
     control(input, validators) {
@@ -708,9 +977,11 @@ class InputTextareaComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
-    focused = false;
+    values;
+    isButtonDisabled;
+    isFocused = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputTextareaComponent, isStandalone: true, selector: "ng-component", 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 (focused && 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    <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)=\"focused = true\"\n        (blur)=\"focused = 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: "pipe", type: DecimalPipe, name: "number" }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "directive", type: AutoHeightDirective, selector: "[AutoHeightDirective]", inputs: ["AutoHeightDirective", "minHeight", "maxHeight"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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: "pipe", type: DecimalPipe, name: "number" }, { 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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
@@ -719,13 +990,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         NgClass,
                         ReactiveFormsModule,
                         MatFormField,
+                        MatIcon,
+                        MatIconButton,
                         MatInputModule,
                         AutoFocusDirective,
                         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 (focused && 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    <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)=\"focused = true\"\n        (blur)=\"focused = 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" }]
-        }] });
+                    ], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputTextareaMethods extends InputMethods {
     control(input, validators) {
@@ -743,8 +1022,10 @@ class InputUrlComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
     config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputUrlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputUrlComponent, isStandalone: true, selector: "ng-component", 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    <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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputUrlComponent, decorators: [{
             type: Component,
@@ -752,13 +1033,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         MatFormField,
                         MatIcon,
+                        MatIconButton,
                         MatInputModule,
                         AutoCompleteDirective,
                         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    <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" }]
-        }] });
+                    ], 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 mat-icon-button type=\"button\" [disabled]=\"isButtonDisabled\" (click)=\"input.button.onClick(values)\">\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 }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class InputUrlMethods extends InputMethods {
     control(input, validators) {
@@ -775,8 +1063,10 @@ class InputComponent {
     formGroup;
     input;
     config;
+    values;
     inputInfo = InputInfo;
     injector;
+    isButtonDisabled;
     ngOnInit() {
         const formControl = this.formGroup.get(this.input.name);
         this.injector = Injector.create({
@@ -787,12 +1077,19 @@ class InputComponent {
             ],
         });
     }
+    ngOnChanges(changes) {
+        const formControl = this.injector?.get(INPUT_CONTROL);
+        this.isButtonDisabled =
+            'button' in this.input &&
+                !!this.input.button &&
+                (formControl?.disabled || !!this.input.button.disableOn?.(this.values));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InputComponent, isStandalone: true, selector: "form-input", inputs: { formGroup: "formGroup", input: "input", config: "config" }, ngImport: i0, template: "<ng-container *ngComponentOutlet=\"inputInfo[input.type].component; injector: injector\"></ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'form-input', imports: [NgComponentOutlet], template: "<ng-container *ngComponentOutlet=\"inputInfo[input.type].component; injector: injector\"></ng-container>\n" }]
+            args: [{ selector: 'form-input', imports: [NgComponentOutlet], 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 }]
@@ -802,9 +1099,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }], config: [{
                 type: Input,
                 args: [{ required: true }]
+            }], values: [{
+                type: Input,
+                args: [{ required: true }]
             }] } });
 
 const InputInfo = {
+    CHECKBOX: { title: 'یک انتخابی', methods: new InputCheckboxMethods(), component: InputCheckboxComponent },
     COLOR: { title: 'رنگ', methods: new InputColorMethods(), component: InputColorComponent },
     COMPONENT: { title: 'کامپوننت', methods: new InputComponentMethods(), component: InputComponentComponent },
     DATE: { title: 'تاریخ', methods: new InputDateMethods(), component: InputDateComponent },
@@ -813,6 +1114,7 @@ const InputInfo = {
     MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
     MOMENT: { title: 'زمان', methods: new InputMomentMethods(), component: InputMomentComponent },
     NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
+    NUMBER: { title: 'مقدار عددی', methods: new InputNumberMethods(), component: InputNumberComponent },
     PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
     SELECT: { title: 'لیست کشویی', methods: new InputSelectMethods(), component: InputSelectComponent },
     TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
@@ -838,6 +1140,7 @@ class NgxFormComponent {
     formGroup;
     sections = [];
     hiddenInputs = [];
+    values = {};
     lastValues = {};
     lastSubmit;
     isMobile = false;
@@ -895,7 +1198,9 @@ class NgxFormComponent {
                     });
                     this.lastValues = { ...this.formGroup.value };
                 }
-                this.onChange.next(this.getValues());
+                this.values = this.getValues();
+                console.log(this.values);
+                this.onChange.next(this.values);
             },
         });
         this.checkInputs();
@@ -1088,11 +1393,11 @@ class NgxFormComponent {
             this.router.navigate(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$3.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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 [formGroup]=\"formGroup\" [input]=\"input\" [config]=\"inputConfig\"></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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: InputComponent, selector: "form-input", inputs: ["formGroup", "input", "config"] }, { kind: "directive", type: FormErrorDirective, selector: "form.ngx-form" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: InputComponent, selector: "form-input", inputs: ["formGroup", "input", "config", "values"] }, { kind: "directive", type: FormErrorDirective, selector: "form.ngx-form" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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 [formGroup]=\"formGroup\" [input]=\"input\" [config]=\"inputConfig\"></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], 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$3.Router }, { type: undefined, decorators: [{
                     type: Optional
                 }, {