@webilix/ngx-form-m3 0.0.13 → 0.0.15

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

@@ -128,23 +128,21 @@ class FormErrorDirective {
     elementRef;
     formGroupDirective;
     onSubmit() {
-        if (this.formGroupDirective && this.formGroupDirective.control.invalid) {
-            const invalidControl = this.elementRef.nativeElement.querySelector('.ng-invalid');
+        setTimeout(() => {
+            const invalidControl = this.elementRef.nativeElement.querySelector('.mat-form-field-invalid');
             if (invalidControl)
                 return this.scrollToElement(invalidControl);
-        }
-        const invalidControl = this.elementRef.nativeElement.querySelector('.ngx-form-invalid');
-        if (invalidControl)
-            this.scrollToElement(invalidControl);
+        }, 150);
     }
     constructor(elementRef, formGroupDirective) {
         this.elementRef = elementRef;
         this.formGroupDirective = formGroupDirective;
     }
+    getElementTop(element) {
+        return element.getBoundingClientRect().top + window.scrollY - 100;
+    }
     scrollToElement(element) {
-        const labelOffset = 150;
-        const top = element.getBoundingClientRect().top + window.scrollY - labelOffset;
-        window.scroll({ top, left: 0, behavior: 'smooth' });
+        window.scroll({ top: this.getElementTop(element), behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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.5", type: FormErrorDirective, isStandalone: true, selector: "form.ngx-form", host: { listeners: { "submit": "onSubmit()" } }, ngImport: i0 });
@@ -193,6 +191,10 @@ class InputErrorPipe {
                 return `زمان باید برابر یا بعد از ${value} انتخاب شده باشد.`;
             case 'maxmoment':
                 return `زمان باید برابر یا قبل از ${value} انتخاب شده باشد.`;
+            case 'mincount':
+                return `انتخاب حداقل ${Helper.NUMBER.format(value)} گزینه الزامی است.`;
+            case 'maxcount':
+                return `امکان انتخاب بیشتر از ${Helper.NUMBER.format(value)} گزینه وجود ندارد.`;
             case 'pattern':
                 switch (type) {
                     case 'EMAIL':
@@ -467,6 +469,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: [{ required: true }]
             }] } });
 
+const MaxCountValidator = (max) => {
+    return (formControl) => {
+        const value = Array.isArray(formControl.value) ? formControl.value : [];
+        return value.length > max ? { maxcount: max } : null;
+    };
+};
+
+const MinCountValidator = (min) => {
+    return (formControl) => {
+        const value = Array.isArray(formControl.value) ? formControl.value : [];
+        return value.length === 0 ? { required: true } : value.length < min ? { mincount: min } : null;
+    };
+};
+
 const MaxDateValidator = (max) => {
     const jalali = JalaliDateTime();
     return (formControl) => {
@@ -654,6 +670,45 @@ class InputFileMethods extends InputMethods {
     }
 }
 
+class InputIconComponent {
+    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: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputIconComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-icon" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.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: InputIconComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-icon' }, imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatIcon,
+                        MatIconButton,
+                        MatInputModule,
+                        AutoCompleteDirective,
+                        AutoFocusDirective,
+                        InputErrorPipe,
+                        MultiLinePipe,
+                    ], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    <mat-label>{{ input.title || '\u0622\u06CC\u06A9\u0648\u0646' }}</mat-label>\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <div class=\"ngx-helper-form-m3-icon-input\">\n        @if (formControl.value) {\n        <mat-icon>{{ formControl.value }}</mat-icon>\n        }\n        <input\n            matInput\n            type=\"text\"\n            inputmode=\"url\"\n            [name]=\"input.name\"\n            [formControl]=\"formControl\"\n            class=\"ngx-form-m3-en\"\n            [dir]=\"'ltr'\"\n            [AutoFocusDirective]=\"config.autoFocus === input.name\"\n        />\n    </div>\n\n    <!-- DESCRIPTION -->\n    @if (input.description) {\n    <div\n        class=\"ngx-form-m3-input-description\"\n        [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n        [innerHTML]=\"input.description | MultiLinePipe\"\n    ></div>\n    }\n</mat-form-field>\n" }]
+        }], propDecorators: { values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputIconMethods extends InputMethods {
+    control(input, validators) {
+        return new FormControl(input.value || null, validators);
+    }
+    value(value, input) {
+        return typeof value === 'string' && value !== '' ? value : null;
+    }
+}
+
 class InputIpComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -796,6 +851,59 @@ class InputMomentMethods extends InputMethods {
     }
 }
 
+class InputMultiSelectComponent {
+    listHeight;
+    formControl = inject(INPUT_CONTROL);
+    input = inject(INPUT_TYPE);
+    config = inject(INPUT_CONFIG);
+    values;
+    isButtonDisabled;
+    ids = this.formControl.value || [];
+    ngOnInit() {
+        this.listHeight = `${this.input.listMaxHeight || 310}px`;
+    }
+    toggleValue(id) {
+        if (!this.ids.includes(id))
+            this.ids.push(id);
+        else
+            this.ids = this.ids.filter((i) => i !== id);
+        this.formControl.setValue(this.ids.length === 0 ? null : this.ids);
+        this.formControl.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputMultiSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-multi-select" }, properties: { "style.--listHeight": "this.listHeight" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"title\">{{ input.title }}</div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon>{{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n\n    <!-- 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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.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: InputMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ host: { selector: 'input-multi-select' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatIconButton, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n    @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n    <!-- HINT -->\n    @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n    <!-- BUTTON -->\n    @if (input.button) {\n    <span matIconSuffix>\n        <button\n            mat-icon-button\n            type=\"button\"\n            [disabled]=\"isButtonDisabled\"\n            (click)=\"input.button.onClick(values)\"\n            [tabIndex]=\"-1\"\n        >\n            <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n                {{ input.button.icon }}\n            </mat-icon>\n        </button>\n    </span>\n    }\n\n    <!-- INPUT -->\n    <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n    <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n        <div class=\"title\">{{ input.title }}</div>\n        <div class=\"options\">\n            @for (item of input.options; track $index) {\n            <div>\n                <div class=\"option\" (click)=\"toggleValue(item.id)\">\n                    <mat-icon>{{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n                    <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n\n    <!-- 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: { listHeight: [{
+                type: HostBinding,
+                args: ['style.--listHeight']
+            }], values: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isButtonDisabled: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class InputMultiSelectMethods extends InputMethods {
+    control(input, validators) {
+        const ids = input.options.map((option) => option.id);
+        const value = (input.value || []).filter((id) => ids.includes(id));
+        if (input.minCount)
+            validators.push(MinCountValidator(input.minCount));
+        if (input.maxCount)
+            validators.push(MaxCountValidator(input.maxCount));
+        return new FormControl(value, validators);
+    }
+    value(value, input) {
+        const ids = input.options.map((option) => option.id);
+        value = (Array.isArray(value) ? value : []).filter((id) => ids.includes(id));
+        return value.length > 0 ? value : null;
+    }
+}
+
 class InputNameComponent {
     formControl = inject(INPUT_CONTROL);
     input = inject(INPUT_TYPE);
@@ -1212,9 +1320,11 @@ const InputInfo = {
     DATE: { title: 'تاریخ', methods: new InputDateMethods(), component: InputDateComponent },
     EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
     FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
+    ICON: { title: 'آیکون', methods: new InputIconMethods(), component: InputIconComponent },
     IP: { title: 'آدرس آی‌پی', methods: new InputIpMethods(), component: InputIpComponent },
     MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
     MOMENT: { title: 'زمان', methods: new InputMomentMethods(), component: InputMomentComponent },
+    'MULTI-SELECT': { title: 'چند انتخابی', methods: new InputMultiSelectMethods(), component: InputMultiSelectComponent },
     NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
     NUMBER: { title: 'مقدار عددی', methods: new InputNumberMethods(), component: InputNumberComponent },
     PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
@@ -1415,7 +1525,7 @@ class NgxFormComponent {
     }
     setInput(input) {
         const name = input.name;
-        const validators = input.optional || ('readonly' in input && input.readonly) ? [] : [Validators.required];
+        const validators = !('optional' in input) || input.optional || ('readonly' in input && input.readonly) ? [] : [Validators.required];
         this.formGroup.setControl(name, InputInfo[input.type].methods.control(input, validators));
     }
     checkInputs() {