@webilix/ngx-form-m3 0.0.1

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

@@ -0,0 +1,964 @@
+import * as i0 from '@angular/core';
+import { Directive, HostBinding, Input, HostListener, Optional, Pipe, Component, Inject, Injector, InjectionToken, makeEnvironmentProviders, EventEmitter, ViewChild, Output } from '@angular/core';
+import { NgClass, DecimalPipe, NgComponentOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, Validators, FormControl, FormGroup } from '@angular/forms';
+import { 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';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { Helper } from '@webilix/helper-library';
+import * as i1$1 from '@angular/platform-browser';
+import * as i4 from '@angular/cdk/bidi';
+import { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
+import * as i4$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/core';
+import * as i1$2 from '@angular/router';
+
+class AutoCompleteDirective {
+    autocomplete = 'one-time-code';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AutoCompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AutoCompleteDirective, isStandalone: true, selector: "input[type=\"text\"]", host: { properties: { "attr.autocomplete": "this.autocomplete" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AutoCompleteDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'input[type="text"]' }]
+        }], propDecorators: { autocomplete: [{
+                type: HostBinding,
+                args: ['attr.autocomplete']
+            }] } });
+
+class AutoFocusDirective {
+    elementRef;
+    AutoFocusDirective;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        if (!this.AutoFocusDirective || !this.elementRef)
+            return;
+        const input = this.elementRef.nativeElement;
+        if (!input)
+            return;
+        setTimeout(() => {
+            if (input.focus)
+                input.focus();
+            if (input.select)
+                input.select();
+        }, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AutoFocusDirective, isStandalone: true, selector: "[AutoFocusDirective]", inputs: { AutoFocusDirective: "AutoFocusDirective" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[AutoFocusDirective]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { AutoFocusDirective: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class AutoHeightDirective {
+    elementRef;
+    renderer2;
+    AutoHeightDirective;
+    minHeight;
+    maxHeight = 0;
+    _focused = false;
+    focus() {
+        this._focused = true;
+    }
+    blur() {
+        this._focused = false;
+    }
+    constructor(elementRef, renderer2) {
+        this.elementRef = elementRef;
+        this.renderer2 = renderer2;
+    }
+    ngAfterViewInit() {
+        this.resize(true);
+    }
+    resize(forced) {
+        if (this.AutoHeightDirective !== true || (!forced && !this._focused))
+            return;
+        const textarea = this.elementRef.nativeElement;
+        const borderHeight = textarea.offsetHeight - textarea.clientHeight;
+        this.setHeight('auto');
+        let height = textarea.scrollHeight + borderHeight;
+        if (this.minHeight && this.minHeight > height)
+            height = this.minHeight;
+        if (this.maxHeight && this.maxHeight < height)
+            height = this.maxHeight;
+        this.setHeight(`${height}px`);
+    }
+    setHeight(value) {
+        this.renderer2.setStyle(this.elementRef.nativeElement, 'height', value);
+        this.renderer2.setStyle(this.elementRef.nativeElement, 'overflow', 'auto');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AutoHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AutoHeightDirective, isStandalone: true, selector: "[AutoHeightDirective]", inputs: { AutoHeightDirective: "AutoHeightDirective", minHeight: "minHeight", maxHeight: "maxHeight" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "input": "resize()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AutoHeightDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[AutoHeightDirective]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { AutoHeightDirective: [{
+                type: Input,
+                args: [{ required: true }]
+            }], minHeight: [{
+                type: Input,
+                args: [{ required: true }]
+            }], maxHeight: [{
+                type: Input,
+                args: [{ required: false }]
+            }], focus: [{
+                type: HostListener,
+                args: ['focus']
+            }], blur: [{
+                type: HostListener,
+                args: ['blur']
+            }], resize: [{
+                type: HostListener,
+                args: ['input']
+            }] } });
+
+class FormErrorDirective {
+    elementRef;
+    formGroupDirective;
+    onSubmit() {
+        if (this.formGroupDirective && this.formGroupDirective.control.invalid) {
+            const invalidControl = this.elementRef.nativeElement.querySelector('.ng-invalid');
+            if (invalidControl)
+                return this.scrollToElement(invalidControl);
+        }
+        const invalidControl = this.elementRef.nativeElement.querySelector('.ngx-form-invalid');
+        if (invalidControl)
+            this.scrollToElement(invalidControl);
+    }
+    constructor(elementRef, formGroupDirective) {
+        this.elementRef = elementRef;
+        this.formGroupDirective = formGroupDirective;
+    }
+    scrollToElement(element) {
+        const labelOffset = 150;
+        const top = element.getBoundingClientRect().top + window.scrollY - labelOffset;
+        window.scroll({ top, left: 0, behavior: 'smooth' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: FormErrorDirective, isStandalone: true, selector: "form.ngx-form", host: { listeners: { "submit": "onSubmit()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FormErrorDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'form.ngx-form' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { onSubmit: [{
+                type: HostListener,
+                args: ['submit']
+            }] } });
+
+class InputErrorPipe {
+    transform(errors, type) {
+        if (errors === null || errors === undefined)
+            return '';
+        const keys = Object.keys(errors);
+        if (keys.length === 0)
+            return '';
+        const error = keys[0];
+        const value = errors[error];
+        switch (error) {
+            case 'required':
+                return 'مقدار الزامی است.';
+            case 'length':
+                return `مقدار باید داری ${Helper.NUMBER.format(value)} کاراکتر باشد.`;
+            case 'minlength':
+                return `مقدار باید حداقل داری ${Helper.NUMBER.format(value.requiredLength)} کاراکتر باشد.`;
+            case 'maxlength':
+                return `مقدار می‌تواند حداکثر داری ${Helper.NUMBER.format(value.requiredLength)} کاراکتر باشد.`;
+            case 'pattern':
+                switch (type) {
+                    case 'EMAIL':
+                        return 'فرمت استاندارد ایمیل رعایت نشده است.';
+                    case 'PASSWORD':
+                        switch (true) {
+                            case value.requiredPattern.includes('[0-9]'):
+                                return 'مقدار باید شامل اعداد انگلیسی باشد.';
+                            case value.requiredPattern.includes('[a-z]'):
+                                return 'مقدار باید شامل حروف انگلیسی کوچک باشد.';
+                            case value.requiredPattern.includes('[A-Z]'):
+                                return 'مقدار باید شامل حروف انگلیسی بزرگ باشد.';
+                        }
+                        return 'کاراکترهای الزامی در کلمه عبور استفاده نشده‌اند.';
+                }
+                break;
+            case 'mask':
+                switch (type) {
+                    case 'MOBILE':
+                        return 'شماره موبایل دارای ۱۱ رقم است.';
+                }
+                break;
+        }
+        return 'مقدار وارد شده صحیح نیست.';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: InputErrorPipe, isStandalone: true, name: "InputErrorPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputErrorPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'InputErrorPipe' }]
+        }] });
+
+class MultiLinePipe {
+    sanitizer;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value, config) {
+        if (!Helper.IS.string(value) || value === '')
+            return '';
+        return config?.html
+            ? this.sanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
+            : Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: MultiLinePipe, isStandalone: true, name: "MultiLinePipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MultiLinePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'MultiLinePipe' }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+
+class InputEmailComponent {
+    formControl;
+    input;
+    config;
+    focused = false;
+    constructor(formControl, input, config) {
+        this.formControl = formControl;
+        this.input = input;
+        this.config = config;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEmailComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n        <span [ngClass]=\"config.enClass\">&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        [ngClass]=\"config.enClass\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".suffix{display:inline-flex}.suffix mat-icon{padding-right:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEmailComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-email' }, imports: [
+                        NgClass,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON -->\n\n    @if (input.showIcon) {\n    <span matTextSuffix class=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n        <span [ngClass]=\"config.enClass\">&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        [ngClass]=\"config.enClass\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".suffix{display:inline-flex}.suffix mat-icon{padding-right:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormControl, decorators: [{
+                    type: Inject,
+                    args: ['formControl']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['input']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }] });
+
+class InputMethods {
+}
+
+class InputEmailMethods extends InputMethods {
+    control(input, validators) {
+        validators.push(Validators.pattern(Helper.RE.EMAIL.get()));
+        const value = input.value === undefined ? null : Helper.RE.EMAIL.verify(input.value) ? input.value.toLowerCase() : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return typeof value === 'string' && Helper.RE.EMAIL.verify(value) ? value.toLowerCase() : null;
+    }
+}
+
+class InputMobileComponent {
+    formControl;
+    input;
+    config;
+    focused = false;
+    inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
+    constructor(formControl, input, config) {
+        this.formControl = formControl;
+        this.input = input;
+        this.config = config;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputMobileComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON & SUFFIX -->\n    <span matTextSuffix class=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n        <span [ngClass]=\"config.enClass\">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        [ngClass]=\"config.enClass\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"'00-000-0000'\"\n        [inputTransformFn]=\"inputTransformFn\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".suffix{display:inline-flex}.suffix mat-icon{padding-right:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 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: 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"], 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.3", ngImport: i0, type: InputMobileComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-mobile' }, imports: [
+                        NgClass,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- ICON & SUFFIX -->\n    <span matTextSuffix class=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n        <span [ngClass]=\"config.enClass\">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        [ngClass]=\"config.enClass\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        [mask]=\"'00-000-0000'\"\n        [inputTransformFn]=\"inputTransformFn\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".suffix{display:inline-flex}.suffix mat-icon{padding-right:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormControl, decorators: [{
+                    type: Inject,
+                    args: ['formControl']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['input']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }] });
+
+class InputMobileMethods extends InputMethods {
+    control(input, validators) {
+        const value = input.value === undefined ? null : Helper.RE.MOBILE.verify(input.value) ? input.value.substring(2) : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return typeof value === 'string' && Helper.RE.MOBILE.verify(`09${value}`) ? `09${value}` : null;
+    }
+}
+
+class InputNameComponent {
+    formControl;
+    input;
+    config;
+    firstFormControl;
+    lastFormControl;
+    constructor(formControl, input, config) {
+        this.formControl = formControl;
+        this.input = input;
+        this.config = config;
+    }
+    ngOnInit() {
+        const value = this.formControl.value;
+        const first = value?.first || null;
+        const last = value?.last || null;
+        this.firstFormControl = new FormControl(first, this.input.optional ? [] : [Validators.required]);
+        this.lastFormControl = new FormControl(last, this.input.optional ? [] : [Validators.required]);
+        this.formControl.statusChanges.subscribe({
+            next: () => {
+                if (this.formControl.disabled) {
+                    this.firstFormControl.disable();
+                    this.lastFormControl.disable();
+                }
+                else {
+                    this.firstFormControl.enable();
+                    this.lastFormControl.enable();
+                }
+            },
+        });
+    }
+    setName() {
+        const first = (this.firstFormControl.value || '').trim();
+        const last = (this.lastFormControl.value || '').trim();
+        const value = first !== '' && last !== '' ? { first, last } : null;
+        this.formControl.setValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputNameComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: InputNameComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-name" } }, ngImport: i0, template: "<!-- INPUT -->\n<input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"columns\">\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: [".columns{display:flex;column-gap:1rem}.columns mat-form-field{flex:1}\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: "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.3", ngImport: i0, type: InputNameComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-name' }, imports: [ReactiveFormsModule, MatFormField, MatInputModule, AutoCompleteDirective, AutoFocusDirective, InputErrorPipe], template: "<!-- INPUT -->\n<input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"columns\">\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: [".columns{display:flex;column-gap:1rem}.columns mat-form-field{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormControl, decorators: [{
+                    type: Inject,
+                    args: ['formControl']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['input']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }] });
+
+class InputNameMethods extends InputMethods {
+    control(input, validators) {
+        const value = input.value && Helper.IS.object(input.value) && !!input.value.first && !!input.value.last ? input.value : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return Helper.IS.object(value) ? value : null;
+    }
+}
+
+class InputPasswordComponent {
+    formControl;
+    input;
+    config;
+    focused = false;
+    showPassword = false;
+    constructor(formControl, input, config) {
+        this.formControl = formControl;
+        this.input = input;
+        this.config = config;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputPasswordComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SHOW PASSWORD -->\n    <span\n        matTextSuffix\n        class=\"suffix\"\n        (click)=\"showPassword = !showPassword\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n    >\n        <span [ngClass]=\"config.enClass\">&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        [ngClass]=\"config.enClass\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".suffix{display:inline-flex}.suffix mat-icon{cursor:pointer;padding-right:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 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: 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.3", ngImport: i0, type: InputPasswordComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-password' }, imports: [
+                        NgClass,
+                        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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- SHOW PASSWORD -->\n    <span\n        matTextSuffix\n        class=\"suffix\"\n        (click)=\"showPassword = !showPassword\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n    >\n        <span [ngClass]=\"config.enClass\">&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        [ngClass]=\"config.enClass\"\n        [dir]=\"'ltr'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".suffix{display:inline-flex}.suffix mat-icon{cursor:pointer;padding-right:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormControl, decorators: [{
+                    type: Inject,
+                    args: ['formControl']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['input']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }] });
+
+class InputPasswordMethods extends InputMethods {
+    control(input, validators) {
+        if (input.verify) {
+            validators.push(Validators.minLength(input.verify.minLength));
+            if (input.verify.forceLowerCase)
+                validators.push(Validators.pattern(Helper.RE.PASSWORD.get(input.verify.minLength, true, false, false)));
+            if (input.verify.forceUpperCase)
+                validators.push(Validators.pattern(Helper.RE.PASSWORD.get(input.verify.minLength, false, true, false)));
+            if (input.verify.forceNumber)
+                validators.push(Validators.pattern(Helper.RE.PASSWORD.get(input.verify.minLength, false, false, true)));
+        }
+        return new FormControl(null, validators);
+    }
+    value(value, input) {
+        return Helper.IS.string(value) && value !== '' ? value : null;
+    }
+}
+
+class InputSelectComponent {
+    formControl;
+    input;
+    config;
+    focused = false;
+    constructor(formControl, input, config) {
+        this.formControl = formControl;
+        this.input = input;
+        this.config = config;
+    }
+    getTitle() {
+        return this.input.options.find((option) => option.id === this.formControl.value)?.title || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputSelectComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? config.enClass : ''\"\n        [dir]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    >\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? ['english', config.enClass] : ''\">{{ 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 ? ['english', config.enClass] : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".english{display:inline-block;direction:ltr}\n"], 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: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.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.3", ngImport: i0, type: InputSelectComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-select' }, imports: [
+                        NgClass,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <mat-select\n        [formControl]=\"formControl\"\n        [ngClass]=\"input.english ? config.enClass : ''\"\n        [dir]=\"'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    >\n        <!-- OPTIONAL -->\n        @if (!!input.optional) { <mat-option></mat-option> }\n\n        <!-- TRIGGER -->\n        <mat-select-trigger>\n            <div [ngClass]=\"input.english ? ['english', config.enClass] : ''\">{{ 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 ? ['english', config.enClass] : ''\">{{ option.title }}</div>\n        </mat-option>\n        }\n    </mat-select>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [".english{display:inline-block;direction:ltr}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormControl, decorators: [{
+                    type: Inject,
+                    args: ['formControl']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['input']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }] });
+
+class InputSelectMethods extends InputMethods {
+    control(input, validators) {
+        const ids = input.options.map((option) => option.id);
+        const value = input.value && ids.includes(input.value) ? input.value : null;
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        return value && input.options.find((option) => option.id === value) ? value : null;
+    }
+}
+
+class InputTextComponent {
+    formControl;
+    input;
+    config;
+    focused = false;
+    constructor(formControl, input, config) {
+        this.formControl = formControl;
+        this.input = input;
+        this.config = config;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && 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 ? config.enClass : ''\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [dir]=\"input.english ? 'ltr' : 'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\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: 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.3", ngImport: i0, type: InputTextComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-text' }, imports: [
+                        NgClass,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        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 (focused && 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 ? config.enClass : ''\"\n        [maxLength]=\"input.maxLength || 524288\"\n        [dir]=\"input.english ? 'ltr' : 'rtl'\"\n        [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\"\n    />\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormControl, decorators: [{
+                    type: Inject,
+                    args: ['formControl']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['input']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }] });
+
+const LengthValidator = (length) => {
+    return (formControl) => {
+        const value = formControl.value;
+        if (Helper.IS.empty(value) || !Helper.IS.string(value))
+            return null;
+        return value.length !== length ? { length } : null;
+    };
+};
+
+class InputTextMethods extends InputMethods {
+    control(input, validators) {
+        const minLength = input.minLength && input.minLength > 0 ? input.minLength : null;
+        const maxLength = input.maxLength && input.maxLength > 0 ? input.maxLength : null;
+        if (minLength && maxLength && minLength === maxLength)
+            validators.push(LengthValidator(minLength));
+        else {
+            if (minLength && minLength > 0)
+                validators.push(Validators.minLength(minLength));
+            if (maxLength && maxLength > 0)
+                validators.push(Validators.maxLength(maxLength));
+        }
+        return new FormControl(input.value || null, validators);
+    }
+    value(value, input) {
+        return Helper.IS.string(value) && value !== '' ? value : null;
+    }
+}
+
+class InputTextareaComponent {
+    formControl;
+    input;
+    config;
+    focused = false;
+    constructor(formControl, input, config) {
+        this.formControl = formControl;
+        this.input = input;
+        this.config = config;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextareaComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && 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 ? config.enClass : ''\"\n        [dir]=\"input.english ? 'ltr' : 'rtl'\"\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        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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.3", ngImport: i0, type: InputTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-textarea' }, imports: [
+                        DecimalPipe,
+                        NgClass,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        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 (focused && 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 ? config.enClass : ''\"\n        [dir]=\"input.english ? 'ltr' : 'rtl'\"\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        [ngClass]=\"config.descriptionClass\"\n        [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormControl, decorators: [{
+                    type: Inject,
+                    args: ['formControl']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['input']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }] });
+
+class InputTextareaMethods extends InputMethods {
+    control(input, validators) {
+        const maxLength = input.maxLength && input.maxLength > 0 ? input.maxLength : null;
+        if (maxLength && maxLength > 0)
+            validators.push(Validators.maxLength(maxLength));
+        return new FormControl(input.value || null, validators);
+    }
+    value(value, input) {
+        return Helper.IS.string(value) && value !== '' ? value : null;
+    }
+}
+
+class InputComponent {
+    formGroup;
+    input;
+    config;
+    inputInfo = InputInfo;
+    injector;
+    ngOnInit() {
+        const formControl = this.formGroup.get(this.input.name);
+        this.injector = Injector.create({
+            providers: [
+                { provide: 'formControl', useValue: formControl },
+                { provide: 'input', useValue: this.input },
+                { provide: 'config', useValue: this.config },
+            ],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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" }]
+        }], propDecorators: { formGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }], input: [{
+                type: Input,
+                args: [{ required: true }]
+            }], config: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+const InputInfo = {
+    EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
+    MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
+    NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
+    PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
+    SELECT: { title: 'لیست کشویی', methods: new InputSelectMethods(), component: InputSelectComponent },
+    TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
+    TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
+};
+
+const NGX_FORM_CONFIG = new InjectionToken('NGX-FORM-CONFIG');
+const provideNgxFormConfig = (config) => {
+    const providers = [{ provide: NGX_FORM_CONFIG, useValue: config }];
+    return makeEnvironmentProviders(providers);
+};
+
+class NgxFormComponent {
+    router;
+    config;
+    ngForm;
+    onResize = (event) => this.setSize();
+    ngxForm;
+    onInit = new EventEmitter();
+    onSubmit = new EventEmitter();
+    onChange = new EventEmitter();
+    formGroup;
+    sections = [];
+    hiddenInputs = [];
+    lastValues = {};
+    lastSubmit;
+    isMobile = false;
+    headerClass;
+    inputConfig;
+    constructor(router, config) {
+        this.router = router;
+        this.config = config;
+    }
+    ngOnInit() {
+        this.headerClass = this.config?.headerClass || 'ngx-form-header';
+        this.inputConfig = {
+            appearance: this.ngxForm.appearance || 'fill',
+            enClass: this.config?.enClass || 'ngx-form-en',
+            descriptionClass: this.config?.descriptionClass || 'ngx-form-description',
+        };
+        this.formGroup = new FormGroup({});
+        const inputs = this.getInputs();
+        // SET FORM GROUP INPUTS
+        inputs.forEach((input) => this.setInput(input));
+        // CHECK AUTO FOCUS
+        let autoFocus = undefined;
+        inputs.forEach((input) => {
+            if (!('autoFocus' in input) || !input.autoFocus || autoFocus)
+                return;
+            if (!input.disableOn && !input.hideOn)
+                autoFocus = input.name;
+        });
+        this.inputConfig = { ...this.inputConfig, autoFocus };
+        // REGISTER VALUE CHANGE
+        this.formGroup.valueChanges.subscribe({
+            next: () => {
+                const changedInputs = [];
+                [...Object.keys(this.lastValues), ...Object.keys(this.formGroup.value)]
+                    .filter((key, index, arr) => arr.indexOf(key) === index)
+                    .forEach((key) => {
+                    if (this.formGroup.value[key] !== this.lastValues[key])
+                        changedInputs.push(key);
+                });
+                if (changedInputs.length === 0)
+                    return;
+                this.lastValues = { ...this.formGroup.value };
+                this.checkInputs();
+                if (this.ngxForm.updateValues) {
+                    const values = this.getValues();
+                    const changes = this.ngxForm.updateValues(values);
+                    Object.keys(changes)
+                        .filter((key) => !changedInputs.includes(key))
+                        .forEach((key) => {
+                        const input = this.getInputs().find((i) => i.name === key);
+                        if (!input)
+                            return;
+                        const formInput = this.formGroup.get(key);
+                        if (!formInput)
+                            return;
+                        const value = InputInfo[input.type].methods.value(changes[key], input);
+                        formInput.setValue(value);
+                    });
+                    this.lastValues = { ...this.formGroup.value };
+                }
+                this.onChange.next(this.getValues());
+            },
+        });
+        this.checkInputs();
+        this.setSize();
+    }
+    ngOnChanges(changes) {
+        this.sections = [];
+        this.ngxForm.inputs.forEach((inputs) => {
+            // SECTION
+            if ('columns' in inputs) {
+                this.sections.push({
+                    header: inputs.header || '',
+                    columns: inputs.columns.map((column) => {
+                        return {
+                            header: column.header || '',
+                            rows: column.rows.map((row) => 'inputs' in row
+                                ? {
+                                    header: row.header || '',
+                                    inputs: row.inputs,
+                                    flex: row.inputs.map((_, i) => row.flex?.[i] || 1),
+                                }
+                                : 'input' in row
+                                    ? { header: row.header, inputs: [row.input], flex: [1] }
+                                    : { header: '', inputs: [row], flex: [1] }),
+                            flex: [],
+                        };
+                    }),
+                    flex: inputs.columns.map((_, c) => inputs.flex?.[c] || 1),
+                });
+                return;
+            }
+            // INPUTS
+            if ('inputs' in inputs) {
+                this.sections.push({
+                    header: inputs.header || '',
+                    columns: [
+                        {
+                            header: '',
+                            rows: [
+                                {
+                                    header: '',
+                                    inputs: inputs.inputs,
+                                    flex: inputs.inputs.map((_, i) => inputs.flex?.[i] || 1),
+                                },
+                            ],
+                        },
+                    ],
+                    flex: [1],
+                });
+                return;
+            }
+            // HEADER
+            if ('input' in inputs) {
+                this.sections.push({
+                    header: inputs.header || '',
+                    columns: [{ header: '', rows: [{ header: '', inputs: [inputs.input], flex: [1] }] }],
+                    flex: [1],
+                });
+                return;
+            }
+            // INPUT
+            this.sections.push({
+                header: '',
+                columns: [{ header: '', rows: [{ header: '', inputs: [inputs], flex: [1] }] }],
+                flex: [1],
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.onInit.next({ formGroup: this.formGroup, ngForm: this.ngForm });
+    }
+    getInputs() {
+        const list = [];
+        this.ngxForm.inputs.forEach((inputs) => {
+            // SECTION
+            if ('columns' in inputs) {
+                inputs.columns.forEach((column) => {
+                    column.rows.forEach((row) => {
+                        if ('inputs' in row)
+                            list.push(...row.inputs);
+                        else
+                            list.push('input' in row ? row.input : row);
+                    });
+                });
+                return;
+            }
+            // INPUTS
+            if ('inputs' in inputs)
+                list.push(...inputs.inputs);
+            else
+                list.push('input' in inputs ? inputs.input : inputs);
+        });
+        return list;
+    }
+    getValues() {
+        const inputs = this.getInputs();
+        const values = {};
+        const getValue = (input) => {
+            if (this.hiddenInputs.includes(input.name))
+                return null;
+            const formInput = this.formGroup.get(input.name);
+            if (!formInput || formInput.disabled || formInput.errors !== null)
+                return null;
+            const value = InputInfo[input.type].methods.value(formInput.value, input);
+            return value;
+        };
+        inputs.forEach((input) => {
+            values[input.name] = getValue(input);
+        });
+        return values;
+    }
+    setInput(input) {
+        const name = input.name;
+        const validators = input.optional ? [] : [Validators.required];
+        this.formGroup.setControl(name, InputInfo[input.type].methods.control(input, validators));
+    }
+    checkInputs() {
+        const inputs = this.getInputs();
+        const values = this.getValues();
+        // CHECK DISABLED INPUTS
+        inputs.forEach((input) => {
+            if (!('disableOn' in input) || !input.disableOn)
+                return;
+            const formInput = this.formGroup.get(input.name);
+            if (!formInput)
+                return;
+            const disabled = input.disableOn(values);
+            disabled ? formInput.disable() : formInput.enable();
+        });
+        // CHECK HIDDEN INPUTS
+        this.hiddenInputs = [];
+        inputs.forEach((input) => {
+            if (!('hideOn' in input) || !input.hideOn)
+                return;
+            const formInput = this.formGroup.get(input.name);
+            if (!formInput)
+                return;
+            const hidden = input.hideOn(values);
+            hidden ? formInput.disable() : formInput.enable();
+            if (hidden)
+                this.hiddenInputs.push(input.name);
+        });
+    }
+    checkSubmit() {
+        this.formGroup.markAllAsTouched();
+        if (this.formGroup.invalid)
+            return;
+        const submitTimeout = this.config?.submitTimeout;
+        if (!!submitTimeout && this.lastSubmit) {
+            const timeout = submitTimeout * 1000;
+            const duration = new Date().getTime() - this.lastSubmit.getTime();
+            if (duration < timeout)
+                return;
+        }
+        this.onSubmit.next(this.getValues());
+        this.lastSubmit = new Date();
+    }
+    setSize() {
+        const mobileWidth = this.config?.mobileWidth || 600;
+        this.isMobile = this.ngxForm.mobileView || window.innerWidth <= mobileWidth;
+    }
+    showSection(section) {
+        for (let c = 0; c < section.columns.length; c++) {
+            if (this.showColumn(section.columns[c]))
+                return true;
+        }
+        return false;
+    }
+    showColumn(column) {
+        for (let r = 0; r < column.rows.length; r++) {
+            if (this.showRow(column.rows[r]))
+                return true;
+        }
+        return false;
+    }
+    showRow(row) {
+        for (let i = 0; i < row.inputs.length; i++) {
+            if (this.showInput(row.inputs[i]))
+                return true;
+        }
+        return false;
+    }
+    showInput(input) {
+        return !this.hiddenInputs.includes(input.name);
+    }
+    onClick(action) {
+        if (typeof action === 'function')
+            action();
+        else
+            this.router.navigate(action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$2.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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    <div 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 [ngClass]=\"[headerClass, '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 [ngClass]=\"[headerClass, '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 [ngClass]=\"[headerClass, '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    </div>\n\n    <div class=\"buttons\" [class.buttons-mobile]=\"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    </div>\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}.buttons{display:flex;align-items:center;justify-content:flex-end;column-gap:1rem;margin-top:1rem}.buttons-mobile button[type=submit]{flex:1}: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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-form', imports: [NgClass, ReactiveFormsModule, MatButton, InputComponent, FormErrorDirective], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n    <div 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 [ngClass]=\"[headerClass, '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 [ngClass]=\"[headerClass, '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 [ngClass]=\"[headerClass, '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    </div>\n\n    <div class=\"buttons\" [class.buttons-mobile]=\"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    </div>\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}.buttons{display:flex;align-items:center;justify-content:flex-end;column-gap:1rem;margin-top:1rem}.buttons-mobile button[type=submit]{flex:1}: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$2.Router }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_FORM_CONFIG]
+                }] }], propDecorators: { ngForm: [{
+                type: ViewChild,
+                args: ['formObject']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }], ngxForm: [{
+                type: Input,
+                args: [{ required: true }]
+            }], onInit: [{
+                type: Output
+            }], onSubmit: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ngx-form-m3
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGX_FORM_CONFIG, NgxFormComponent, provideNgxFormConfig };
+//# sourceMappingURL=webilix-ngx-form-m3.mjs.map