mmhglobal-dynamicform 2.7.2 → 2.8.0

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -163,16 +163,14 @@ class ComponentErrorHandlerService {
                 errorMessage = `Enter a valid email address for {{T_FieldName}}`;
                 break;
             case 'min':
-            case 'max':
-                errorMessage = '';
-                break;
             case 'minError':
                 errorMessage = `{{T_FieldName}} must be equal or more than {{T_MinValue}}`;
-                Object.assign(translationVariables, { T_MinValue: errorDetail[errorType].minValue });
+                Object.assign(translationVariables, { T_MinValue: errorDetail[errorType].minValue || errorDetail[errorType].min });
                 break;
+            case 'max':
             case 'maxError':
                 errorMessage = `{{T_FieldName}} must be equal or less than {{T_MaxValue}}`;
-                Object.assign(translationVariables, { T_MaxValue: errorDetail[errorType].maxValue });
+                Object.assign(translationVariables, { T_MaxValue: errorDetail[errorType].maxValue || errorDetail[errorType].max });
                 break;
             default:
                 console.warn(`Field Error is not properly handled : ${ZComponentHelper.getFieldLabel(fields, controlName)}`);
@@ -497,11 +495,13 @@ class FieldBase {
             }
         };
     }
-    initComponent() {
+    initComponent(options) {
         this.isLoading = true;
         this.componentProperties = this.componentProperties || new ZComponentProperties();
         ZComponentHelper.setComponentProperties(this);
-        ZComponentHelper.registerComponent(this);
+        if (!(options && options.isRegisterComponent == false)) {
+            ZComponentHelper.registerComponent(this);
+        }
         this.componentService.setComponentAdditionalProperties(this);
         this.componentService.setCompStylesByIndex(this);
         this.data.ComponentStyleType = this.data.ComponentStyleType || "style1";
@@ -5565,6 +5565,12 @@ class InputFieldBase extends FieldBase {
     setAddOnValue(addOns) {
         this.triggerContainerEvent.emit({ type: 'setAddOnValue', data: addOns });
     }
+    setMinValue(newValue) {
+        this.triggerContainerEvent.emit({ type: 'setMinValue', newValue: newValue });
+    }
+    setMaxValue(newValue) {
+        this.triggerContainerEvent.emit({ type: 'setMaxValue', newValue: newValue });
+    }
     triggerEvent(type, target, event, fieldValue) {
         if (target) {
             this.group.subject.next({
@@ -7457,10 +7463,12 @@ class ZnumericComponent extends InputFieldBase {
     }
     ngOnInit() {
         super.setupInnerField();
-        this.minValue = this.data.MinValue;
-        this.maxValue = this.data.MaxValue;
+        this.setInitMinAndMaxValue();
         super.focusOnDefault(this.focus.bind(this));
     }
+    ngOnDestroy() {
+        this.removeMinAndMaxValidator();
+    }
     ngAfterViewInit() {
         this.componentService.decrementComponentCounterForField(this.data);
     }
@@ -7483,6 +7491,50 @@ class ZnumericComponent extends InputFieldBase {
         }
         return false;
     }
+    setInitMinAndMaxValue() {
+        if (typeof this.data.MinValue == 'string' && this.data.MinValue.toString().startsWith('group.')) {
+            this.minValue = ZComponentHelper.getGroupValue(this.data.MinValue.toString(), this.group);
+        }
+        else {
+            this.minValue = this.data.MinValue;
+        }
+        if (typeof this.data.MaxValue == 'string' && this.data.MaxValue.toString().startsWith('group.')) {
+            this.maxValue = ZComponentHelper.getGroupValue(this.data.MaxValue.toString(), this.group);
+        }
+        else {
+            this.maxValue = this.data.MaxValue;
+        }
+        this.addMinAndMaxValidator();
+    }
+    addMinAndMaxValidator() {
+        // Setup form validator for ionic components only (Kendo component will be auto setup)
+        if (this.isMobileScreen()) {
+            const control = this.form.controls[this.data.Value];
+            if (this.minValue != undefined) {
+                this.minValidator = Validators.min(Number(this.minValue));
+                control.addValidators(this.minValidator);
+            }
+            if (this.maxValue != undefined) {
+                this.maxValidator = Validators.max(Number(this.maxValue));
+                control.addValidators(this.maxValidator);
+            }
+            control.updateValueAndValidity();
+        }
+    }
+    removeMinAndMaxValidator() {
+        this.minValue = null;
+        this.maxValue = null;
+        const control = this.form.controls[this.data.Value];
+        if (this.isMobileScreen()) {
+            if (control.hasValidator(this.minValidator)) {
+                control.removeValidators(this.minValidator);
+            }
+            if (control.hasValidator(this.maxValidator)) {
+                control.removeValidators(this.maxValidator);
+            }
+        }
+        control.updateValueAndValidity();
+    }
 }
 ZnumericComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZnumericComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
 ZnumericComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZnumericComponent, selector: "app-znumeric", viewQueries: [{ propertyName: "numeric", first: true, predicate: ["numeric"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"znumeric-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-input *ngIf=\"isMobileScreen()\" #znumericField [id]=\"data.Value\" type=\"number\"\r\n             [autocorrect]=\"data.AutoCorrect ? 'on' : 'off'\"\r\n             [min]=\"minValue\"\r\n             [max]=\"maxValue\"\r\n             [step]=\"data.StepValue\"\r\n             [inputmode]=\"inputMode\"\r\n             [formControlName]=\"data.Value\"\r\n             [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             [placeholder]=\"data.PlaceHolder\"\r\n             [value]=\"0 | znumeric : form : data\"\r\n             [class.left-aligned]=\"this.data.RightAlign === false\"\r\n             [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </ion-input>\r\n  <kendo-numerictextbox *ngIf=\"!isMobileScreen()\"\r\n                        [spinners]=\"data.ShowSpinners\"\r\n                        [autoCorrect]=\"data.AutoCorrect\"\r\n                        [formControlName]=\"data.Value\"\r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [min]=\"minValue\"\r\n                        [max]=\"maxValue\"\r\n                        [step]=\"data.StepValue\"\r\n                        [format]=\"data.FormatOptions\" [id]=\"data.Value\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        class=\"input-field e1tag-style1\"\r\n                        [value]=\"0 | znumeric : form : data\"\r\n                        (valueChange)=\"onChange(null, $event)\"\r\n                        [style]=\"componentProperties.style.style1\"\r\n                        [decimals]=\"data.DecimalPlace\"\r\n                        [class.left-aligned]=\"this.data.RightAlign === false\"\r\n                        #numeric>\r\n  </kendo-numerictextbox>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-numerictextbox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-numerictextbox>input{text-align:right}:host ::ng-deep kendo-numerictextbox.left-aligned>input{text-align:left}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-numerictextbox{color:var(--z-text-color)}\n"], components: [{ type: i2$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i3$4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NumericValueAccessor, selector: "ion-input[type=number]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "znumeric": ZNumericParser } });
@@ -8118,7 +8170,7 @@ class ZInputContainerComponent extends FieldBase {
         this.ztexteditor_type = ['ztexteditor'];
     }
     ngOnInit() {
-        super.initComponent().pipe(tap(() => {
+        super.initComponent({ isRegisterComponent: false }).pipe(tap(() => {
             this.setAddOnValue();
             this.componentService.setEditMode(this);
             this.data.zlayout = this.data.zlayout || (this.containerField ? this.containerField.zlayout : "row");