mmhglobal-dynamicform 1.1.37 → 1.1.40

package/README.md

@@ -3,36 +3,47 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog
-`1.37`<br/>
+`1.1.40`<br/> 
+[ztextarea] enhance to allow onchange.<br/>
+
+`1.1.39`<br/> 
+[zudf] added load userdefinedform.<br/>
+[zupload] enhance to allow to set MinFileSize & MaxFileSize in field attribute
+
+`1.1.38`<br/>
+[zupload] default file size restriction.<br/>
+[zupload] added clearFiles function.<br/>
+
+`1.1.37`<br/>
 [tooltipsinfo] support for setTooltipsDisplayText, setTooltipsInfoIcon.
 
-`1.36`<br/>
+`1.1.36`<br/>
 Disable zgrid session storage.
 
-`1.35`<br/>
+`1.1.35`<br/>
 Temp disable get grid setting from cookiestore when load.
 Fix and enable back grid session storage.
 
-`1.34`<br/>
+`1.1.34`<br/>
 Fix zgrid intermittent display all column.
 Fix zText tooltip issue.
 Fix zSelectMultiple virtual problem for desktop view.
 
-`1.33`<br/>
+`1.1.33`<br/>
 [zupload] - minor fix for selectFileOnly attribute. <br/>
 [zgrid] - added support for filter operator "contains" for .net core. Default as contains, to use ==, zgrid attribute add FilterContainsUsingEqual:true.
 
-`1.32`<br/>
+`1.1.32`<br/>
 [zgrid] - added getFormControlData function to retrieve incell data. <br/>
 [zgrid] - added AfterloadCallback attribute handling. <br/>
 [zgrid] - fix form control error when grid data is null. <br/>
 [zupload] - save file data to group scope. <br/>
 [zquerybuilder] - bug fix for query builder.
 
-`1.31`<br/>
+`1.1.31`<br/>
 update dynamicform module for zuploadmodule. <br/>
 
-`1.30`<br/>
+`1.1.30`<br/>
 [zupload] - support Select/Remove/Change Event. <br/>
 [zupload] - added SelectFileOnly attribute handling, to allow select file without upload. <br/>
 [zupload] - added selected file append to group scope (type+value as name). <br/>

package/bundles/mmhglobal-dynamicform.umd.js

@@ -395,11 +395,11 @@
                 onChangeWatchName: this.onChangeWatchName.bind(this),
                 getWatchName: this.getWatchName.bind(this),
                 fieldElementonEditorCodeChange: this.fieldElementonEditorCodeChange.bind(this),
-                gridActivityLogColumnFields: this.fieldService.getFormFieldCode('debugActivityLog', "FormField", null, null),
+                gridActivityLogColumnFields: this.fieldService.getFormFieldCode('debugActivityLog', "FormField", this.group, "debugActivityLogField"),
                 gridActivityLogOnItemClick: this.gridActivityLogOnItemClick.bind(this),
                 updateModel: this.updateModel.bind(this),
                 refreshWorkflowButtonData: this.loadWorkflowData.bind(this),
-                gridWorkflowButtonColumnFields: this.fieldService.getFormFieldCode('debugWorkflowButton', 'FormField', null, null),
+                gridWorkflowButtonColumnFields: this.fieldService.getFormFieldCode('debugWorkflowButton', 'FormField', this.group, "debugWorkflowButtonField"),
                 gridWorkflowButtonOnItemClick: this.gridWorkflowButtonOnItemClick.bind(this)
             });
             if (!d.zData) {
@@ -1488,10 +1488,22 @@
                 group.beforeBackNavigationPage(group).subscribe(function () {
                     group['isTriggered'] = false;
                     _this.router.navigate([group.backNavigationPage]);
+                    //if (group['reload']) {
+                    //  group['isTriggered'] = false;
+                    //  this.router.routeReuseStrategy.shouldReuseRoute = function () {
+                    //    return false;
+                    //  }
+                    //  this.router.onSameUrlNavigation = 'reload';
+                    //}
+                    //this.router.navigate([group.backNavigationPage],);
                 });
             }
             else {
                 group['isTriggered'] = false;
+                //this.router.routeReuseStrategy.shouldReuseRoute = function () {
+                //  return false;
+                //}
+                //this.router.onSameUrlNavigation = 'reload';
                 this.router.navigate([group.backNavigationPage]);
             }
         };
@@ -1538,10 +1550,14 @@
         };
         MainService.prototype.newModel = function (event, group) {
             var _this = this;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                _group = group['_' + event.data.SubType];
+            }
             rxjs.of([])
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before new, zModel:", zmodel);
-                return _this.beforeNewModel(group);
+                return _this.beforeNewModel(_group);
             }), operators.tap(function () {
                 var referenceId = group.parentReferenceId || "0";
                 console.log("current url: ", _this.router.url);
@@ -1587,7 +1603,13 @@
         };
         MainService.prototype.createModel = function (event, group) {
             var _this = this;
+            var createModelres = null;
             var fg = group.form;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                fg = group['_' + event.data.SubType].form;
+                _group = group['_' + event.data.SubType];
+            }
             if (!fg.dirty) {
                 console.warn("Form is not dirty hence record is not save.");
                 return;
@@ -1597,15 +1619,14 @@
                 console.warn("Form Validation got error(s):", errors);
                 return;
             }
-            var createModelres = null;
-            rxjs.of(group.zModel)
+            rxjs.of(_group.zModel)
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before create, zModel:", zmodel);
-                return _this.beforeCreateModel(group);
+                return _this.beforeCreateModel(_group);
             }), operators.tap(function () {
-                Object.assign(group.zModel, fg.value);
+                Object.assign(_group.zModel, fg.value);
             }), operators.switchMap(function () {
-                var newModel = Object.assign({}, group.zModel);
+                var newModel = Object.assign({}, _group.zModel);
                 i3.ZComponentHelper.removeNullFields(newModel);
                 // Object.keys(newModel).forEach((key) => {
                 //   if (newModel[key] === null) {
@@ -1616,7 +1637,7 @@
                 //   newModel.Id = 0;
                 // }
                 return _this.webApiService
-                    .httpPost$(group.resourceURL, // + "/" + group.zModel.Id,
+                    .httpPost$(_group.resourceURL, // + "/" + group.zModel.Id,
                 newModel)
                     .pipe(operators.tap(function (resp) {
                     createModelres = resp;
@@ -1627,25 +1648,25 @@
                 if (zmodel) {
                     //support old and new webapi method
                     if (zmodel.Data) {
-                        Object.assign(group.zModel, zmodel.Data);
+                        Object.assign(_group.zModel, zmodel.Data);
                         fg.patchValue(zmodel.Data);
                     }
                     else if (zmodel["Id"]) {
-                        Object.assign(group.zModel, zmodel);
+                        Object.assign(_group.zModel, zmodel);
                         fg.patchValue(zmodel);
                     }
-                    group.referenceId = group.zModel.Id;
+                    _group.referenceId = _group.zModel.Id;
                     fg.markAsPristine();
                 }
-                return _this.afterCreateModel(group);
+                return _this.afterCreateModel(_group);
             }), operators.tap(function (resp) {
                 if (createModelres.ProcessingStatus == null || createModelres.ProcessingStatus == true) {
-                    if (resp && group.zModel.Id !== 0) {
-                        group.isNew = false;
-                        group.isEdit = true;
-                        group.isTriggered = false;
-                        group.cancelButtonName = "Close";
-                        Object.assign(group.zModel, resp);
+                    if (resp && _group.zModel.Id !== 0) {
+                        _group.isNew = false;
+                        _group.isEdit = true;
+                        _group.isTriggered = false;
+                        _group.cancelButtonName = "Close";
+                        Object.assign(_group.zModel, resp);
                         fg.patchValue(resp);
                     }
                     fg.markAsPristine();
@@ -1661,6 +1682,11 @@
         MainService.prototype.updateModel = function (event, group) {
             var _this = this;
             var fg = group.form;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                fg = group['_' + event.data.SubType].form;
+                _group = group['_' + event.data.SubType];
+            }
             if (!fg.dirty) {
                 console.warn("Form is not dirty hence record is not save.");
                 return;
@@ -1670,31 +1696,32 @@
                 console.warn("Form Validation got error(s):", errors);
                 return;
             }
-            rxjs.of(group.zModel)
+            rxjs.of(_group.zModel)
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before update, zModel:", zmodel);
-                return _this.beforeUpdateModel(group);
+                return _this.beforeUpdateModel(_group);
             }), operators.tap(function () {
-                Object.assign(group.zModel, fg.value);
+                Object.assign(_group.zModel, fg.value);
             }), operators.switchMap(function () {
                 return _this.webApiService
-                    .httpPut$(group.resourceURL + "/" + group.zModel.Id, group.zModel)
+                    .httpPut$(_group.resourceURL + "/" + _group.zModel.Id, _group.zModel)
                     .pipe(operators.map(function (res) { return _this.handleSuccess(res, "Record is updated successfully."); }));
             }), operators.switchMap(function (zmodel) {
                 console.log("After updated, zModel:", zmodel);
                 if (zmodel && zmodel.Data) {
-                    Object.assign(group.zModel, zmodel.Data);
+                    Object.assign(_group.zModel, zmodel.Data);
                     fg.patchValue(zmodel.Data);
                     // console.log("Done updateModel updated zModel:", fg.value);
                 }
                 else if (zmodel && zmodel["Id"]) {
-                    Object.assign(group.zModel, zmodel);
+                    Object.assign(_group.zModel, zmodel);
                     fg.patchValue(zmodel);
                     // console.log("Done updateModel updated zModel:", fg.value);
                 }
                 group.isTriggered = false;
+                _group.isTriggered = false;
                 fg.markAsPristine();
-                return _this.afterUpdateModel(group);
+                return _this.afterUpdateModel(_group);
             }))
                 .subscribe();
             // Object.assign(group.zModel, fg.value);
@@ -1708,49 +1735,51 @@
             //   });
         };
         MainService.prototype.cloneNewModel = function (event, group) {
-            Object.assign(group.zModel, group.form.value);
-            group.zModel.Id = 0;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                _group = group['_' + event.data.SubType];
+            }
+            Object.assign(_group.zModel, _group.form.value);
+            _group.zModel.Id = 0;
             var clearFields = ["WFS_DocumentId", "WFS_StatusCode", "WFS_StatusName"];
             clearFields.forEach(function (field) {
-                if (group.zModel.hasOwnProperty(field)) {
-                    group.zModel[field] = null;
+                if (_group.zModel.hasOwnProperty(field)) {
+                    _group.zModel[field] = null;
                 }
             });
             this.cacheService.setCache("cloneNewModel", group.zModel);
             this.newModel(null, group);
             group.isTriggered = false;
+            _group.isTriggered = false;
         };
         MainService.prototype.deleteModel = function (event, group) {
             var _this = this;
             var fg = group.form;
-            // if (!fg.dirty) {
-            //   console.warn('Form is not dirty hence record is not save.');
-            //   return;
-            // }
-            // if (!fg.valid) {
-            //   const errors = ZComponentHelper.getFormGroupErrors(fg);
-            //   console.warn("Form Validation got error(s):", errors);
-            //   return;
-            // }
-            rxjs.of(group.zModel)
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                fg = group['_' + event.data.SubType].form;
+                _group = group['_' + event.data.SubType];
+            }
+            rxjs.of(_group.zModel)
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before delete, zModel:", zmodel);
-                return _this.beforeDeleteModel(group);
+                return _this.beforeDeleteModel(_group);
             }), operators.switchMap(function () {
                 group.isTriggered = false;
+                _group.isTriggered = false;
                 return _this.alertService.show("Delete Record", "Are you sure?", [
                     { text: "No", cssClass: "secondary" },
                     { text: "Yes", cssClass: "primary" }
                 ]);
             }), operators.switchMap(function (reply) {
                 if (reply === "Yes") {
-                    Object.assign(group.zModel, fg.value);
-                    group.zModel.Disabled = true;
+                    Object.assign(_group.zModel, fg.value);
+                    _group.zModel.Disabled = true;
                     return _this.webApiService
-                        .httpPut$(group.resourceURL + "/" + group.zModel.Id, group.zModel)
+                        .httpPut$(_group.resourceURL + "/" + _group.zModel.Id, _group.zModel)
                         .pipe(operators.map(function (res) { return _this.handleSuccess(res, "Record is deleted successfully."); }), operators.switchMap(function (zmodel) {
                         console.log("After deleted, zModel:", zmodel);
-                        return _this.afterDeleteModel(group);
+                        return _this.afterDeleteModel(_group);
                     }), operators.tap(function (resp) {
                         _this.historyBack();
                     }));
@@ -4022,6 +4051,9 @@
                 field$.subscribe(function (data) {
                     // this.items = data;
                     data.forEach(function (button) {
+                        if (_this.data.SubType) {
+                            button.Name = _this.data.SubType + '_' + button.Name;
+                        }
                         var label = _this.getButtonLabel(button);
                         var buttonDisabled = null;
                         if (button.Disabled != "" && button.Disabled) {
@@ -4037,6 +4069,7 @@
                             iconName: button.Icon,
                             dismissType: button.DismissType,
                             disableTriggerTimer: button.DisableTriggerTimer,
+                            SubType: _this.data.SubType,
                             click: function (y) {
                                 _this.buttonClick(button);
                             }
@@ -5334,12 +5367,16 @@
             }
             return readOnlyValue;
         };
+        ZformComponent.prototype.trackByFn = function (index, item) {
+            //return item['Type'] + '-' + item['Name'];
+            return index;
+        };
         return ZformComponent;
     }());
     ZformComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zform",
-                    template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :\r\n                          ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>",
+                    template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :\r\n                          ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n",
                     styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}"]
                 },] }
     ];
@@ -9486,8 +9523,8 @@
             });
         };
         ZtextComponent.prototype.onChange = function (event) {
-            // console.log('ztext.component - onChange: ', event.target.value);
-            i3.ZComponentHelper.setModelValue(this.data.Value, event.target.value, this.group);
+            // console.log('ztext.component - onChange: ', event.target.value); 
+            i3.ZComponentHelper.setComponentModelValue(this.data, event.target.value, this.group);
             this.group.subject.next({
                 type: "onChange",
                 target: this.data.OnChange,
@@ -9653,6 +9690,12 @@
                     this.group[this.itemDataField.slice(6)] = zdataModel;
                 }
             }
+            this.group.subject.next({
+                type: "onChange",
+                target: this.data.OnChange,
+                event: event,
+                data: { value: value, field: this.data }
+            });
         };
         ZtextareaComponent.prototype.getReadOnlyValue = function () {
             var readOnlyValue = i3.ZComponentHelper.getGroupEvalValue.call(this, this.data.ReadOnly, this.group);
@@ -10681,6 +10724,158 @@
         form: [{ type: i0.Input }]
     };
 
+    /********** Angular **********/
+    var ZudfComponent = /** @class */ (function () {
+        function ZudfComponent(alertService, authService, fieldService, resourceApiService, toastService, webApiService) {
+            var _this = this;
+            this.alertService = alertService;
+            this.authService = authService;
+            this.fieldService = fieldService;
+            this.resourceApiService = resourceApiService;
+            this.toastService = toastService;
+            this.webApiService = webApiService;
+            this.componentProperties = new i3.ZComponentProperties();
+            this.setEnable = function (status) {
+                _this.componentProperties.isReadOnly = !status;
+            };
+            this.setVisible = function (status) {
+                _this.componentProperties.isVisible = status;
+                _this.data.Visible = status;
+            };
+            this.setRequire = function (status) {
+                _this.componentProperties.isRequired = status;
+                i3.ZComponentHelper.changeValidator(status, _this.group, _this.data.Value, _this.componentProperties, forms.Validators.required);
+            };
+        }
+        ZudfComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            i3.ZComponentHelper.setComponentProperties(this);
+            i3.ZComponentHelper.registerComponent(this);
+            rxjs.of(true).pipe(operators.concatMap(function (fieldElements) {
+                var asyncSubject = new rxjs.AsyncSubject();
+                _this.fieldService.getFormFieldCode(_this.data.Value, 'FormField', _this, 'fields').pipe(operators.map(function (formFieldResult) {
+                    // rename add prefix to all udf field to prevent duplicate from main form
+                    _this.appendPrefix(formFieldResult, 'zudf');
+                    // change the value to the result field form 
+                    _this.data.Value = formFieldResult;
+                    // change zudf to zdiv
+                    _this.data.Type = 'zdiv';
+                    // end subject
+                    asyncSubject.next(true);
+                    asyncSubject.complete();
+                })).subscribe();
+                return asyncSubject.asObservable();
+            }), operators.tap(function () {
+                if (!_this.group._zudf) {
+                    _this.group._zudf = new i3.ZGroup;
+                }
+                _this.group._zudf.zModel = {};
+                // create as new Form Group
+                _this.form = _this.toFormGroup(_this.data.Value);
+                // set to zGroup scope
+                _this.group._zudf.form = _this.form;
+            }), operators.tap(function () {
+                // set to formField for display
+                _this.formField = _this.data.Value;
+            })).subscribe(function () {
+                // set Field div class
+                i3.ZComponentHelper.setFieldsDivClass(_this.group._projectName, _this.group.fieldName, _this.data, _this.authService);
+                // get saved record
+                _this.getFormFieldzModel();
+            });
+        };
+        ZudfComponent.prototype.getFormFieldzModel = function () {
+            var form = this.group._zudf.form;
+            var zModel = this.group._zudf.zModel;
+            var url = this.resourceApiService.getURL('field');
+            var respData = { 'parentFormId': 5722, 'zudf_Name': 'test' };
+            Object.assign(zModel, respData);
+            form.patchValue(zModel);
+            form.markAsPristine();
+            //return this.webApiService.httpGet$(url, { name: this.group.fieldName, type: 'FormField' }).pipe(
+            //  tap((respData: any) => {
+            //    debugger;
+            //    Object.assign(zModel, respData);
+            //    form.patchValue(zModel);
+            //    form.markAsPristine();
+            //  })
+            //);
+        };
+        ZudfComponent.prototype.toFormGroup = function (fieldElements) {
+            var formControls = {};
+            this.getFormControls(fieldElements, formControls);
+            var newFormGroup = new forms.FormGroup(formControls);
+            return newFormGroup;
+        };
+        ZudfComponent.prototype.getFormControls = function (fieldArray, formControls) {
+            var _this = this;
+            fieldArray.forEach(function (field) {
+                if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
+                    if (['zgrid', 'ztree', 'zimg', 'textareajson'].indexOf(field.Type) === -1) {
+                        console.warn("FormControl - invalid field value", field.Value);
+                    }
+                }
+                else {
+                    if (Array.isArray(field.Value)) {
+                        _this.getFormControls(field.Value, formControls);
+                    }
+                    else {
+                        var isFormControl = i3.ZComponentHelper.isFormControl(field);
+                        var isVisible = i3.ZComponentHelper.isVisibleFormControl(_this, field);
+                        var isRequired = i3.ZComponentHelper.isRequiredFormControl(_this, field);
+                        if (isFormControl === true) {
+                            var validators = i3.ZComponentHelper.getValidators(field, isVisible, isRequired);
+                            formControls[field.Value] = new forms.FormControl(_this.group._zudf.zModel[field.Value], validators);
+                            if (i3.ZComponentHelper.hasCCField(field.Type)) {
+                                var ccValidators = i3.ZComponentHelper.getCCValidators(field, isVisible, isRequired);
+                                formControls[field.CCValue] = new forms.FormControl(_this.group._zudf.zModel[field.CCValue], ccValidators);
+                            }
+                        }
+                    }
+                }
+            });
+        };
+        ZudfComponent.prototype.appendPrefix = function (fields, prefix) {
+            var _this = this;
+            fields.forEach(function (field) {
+                if (Array.isArray(field.Value)) {
+                    _this.appendPrefix(field.Value, prefix);
+                }
+                else {
+                    field.Name = prefix + '_' + field.Name;
+                    if (field.Type != 'zbuttons') {
+                        field.Value = prefix + '_' + field.Value;
+                    }
+                    field.SubType = prefix;
+                }
+            });
+        };
+        ZudfComponent.prototype.ComponentIsVisible = function (field) {
+            return i3.ZComponentHelper.ComponentIsVisible(field, this.group);
+        };
+        return ZudfComponent;
+    }());
+    ZudfComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-zudf',
+                    template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                    [field]=\"field\"\r\n                    [group]=\"group\"\r\n                    [form]=\"form\"\r\n                    id=\"zudf-{{field.Type}}-{{field.Name}}\">\r\n  </app-zformcontrol> \r\n</div>\r\n",
+                    styles: ["#div1,#div2{float:left;width:100px;height:35px;margin:10px;padding:10px;border:1px solid #000}"]
+                },] }
+    ];
+    ZudfComponent.ctorParameters = function () { return [
+        { type: i3.AlertService },
+        { type: i3.AuthService },
+        { type: i3.FieldService },
+        { type: i3.ResourceApiService },
+        { type: i3.ToastService },
+        { type: i3.WebApiService }
+    ]; };
+    ZudfComponent.propDecorators = {
+        data: [{ type: i0.Input }],
+        group: [{ type: i0.Input }],
+        form: [{ type: i0.Input }]
+    };
+
     /********** Angular **********/
     var ZunknownComponent = /** @class */ (function () {
         function ZunknownComponent() {
@@ -10745,6 +10940,8 @@
             this.showFileList = true;
             this.fileList = [];
             this.restrictions = {
+                minFileSize: 1,
+                maxFileSize: 4194304,
                 allowedExtensions: [
                     "jpg",
                     "jpeg",
@@ -10792,6 +10989,12 @@
                 this.restrictions.allowedExtensions = this.data
                     .SelectOptions;
             }
+            if (this.data.MinFileSize) {
+                this.restrictions.minFileSize = this.data.MinFileSize;
+            }
+            if (this.data.MaxFileSize) {
+                this.restrictions.maxFileSize = this.data.MaxFileSize;
+            }
             this.isAutoUpload = this.data.AutoUpload || false;
             if (!this.data.AllowRemove) {
                 this.uploadRemoveUrl = "";
@@ -11026,17 +11229,21 @@
                             } // file type check
                         }); // loop each file
                     } // imagecompression check
-                    // add to group scope 
+                    // add to group scope
                     me.group['zupload_' + me.data.Value] = e.files;
                 }
             }
         };
+        ZuploadComponent.prototype.clearFiles = function () {
+            this.uploadComponent.clearFiles();
+            this.group['zupload_' + this.data.Value] = this.fileList;
+        };
         return ZuploadComponent;
     }());
     ZuploadComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zupload",
-                    template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-upload *ngIf=\"!data.SelectFileOnly\"\r\n                    [autoUpload]=\"isAutoUpload\"\r\n                    [saveUrl]=\"uploadSaveUrl\"\r\n                    [removeUrl]=\"uploadRemoveUrl\"\r\n                    [restrictions]=\"restrictions\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [multiple]=\"isMultiple\"\r\n                    [chunkable]=\"chunkSettings\"\r\n                    [showFileList]=\"showFileList\"\r\n                    (select)=\"selectEventHandler($event)\"\r\n                    (remove)=\"onRemove($event)\"\r\n                    (success)=\"onSuccess($event)\"\r\n                    (upload)=\"uploadEventHandler($event)\">\r\n      </kendo-upload>\r\n\r\n      <kendo-fileselect *ngIf=\"data.SelectFileOnly\"\r\n                        (select)=\"selectEventHandler($event)\"\r\n                        (remove)=\"onRemove($event)\"\r\n                        (valueChange)=\"onChange($event)\"\r\n                        [restrictions]=\"restrictions\" >\r\n      </kendo-fileselect>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n  <ion-label>Enable Compression: </ion-label>\r\n  <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n  Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n  <img *ngFor=\"let image of imagePreviews\"\r\n       [src]=\"image.src\"\r\n       alt=\"image preview\"\r\n       height=\"100\"\r\n       style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n",
+                    template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-upload #uploadComponent\r\n                    *ngIf=\"!data.SelectFileOnly\"\r\n                    [id]=\"data.Value\"\r\n                    [autoUpload]=\"isAutoUpload\"\r\n                    [saveUrl]=\"uploadSaveUrl\"\r\n                    [removeUrl]=\"uploadRemoveUrl\"\r\n                    [restrictions]=\"restrictions\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [multiple]=\"isMultiple\"\r\n                    [chunkable]=\"chunkSettings\"\r\n                    [showFileList]=\"showFileList\"\r\n                    (select)=\"selectEventHandler($event)\"\r\n                    (remove)=\"onRemove($event)\" \r\n                    (success)=\"onSuccess($event)\"\r\n                    (upload)=\"uploadEventHandler($event)\">\r\n      </kendo-upload>\r\n\r\n      <kendo-fileselect #uploadComponent\r\n                        *ngIf=\"data.SelectFileOnly\"\r\n                        [id]=\"data.Value\"\r\n                        (select)=\"selectEventHandler($event)\"\r\n                        (remove)=\"onRemove($event)\" \r\n                        (valueChange)=\"onChange($event)\"\r\n                        [restrictions]=\"restrictions\" >\r\n      </kendo-fileselect>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n  <ion-label>Enable Compression: </ion-label>\r\n  <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n  Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n  <img *ngFor=\"let image of imagePreviews\"\r\n       [src]=\"image.src\"\r\n       alt=\"image preview\"\r\n       height=\"100\"\r\n       style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -11049,7 +11256,8 @@
     ZuploadComponent.propDecorators = {
         data: [{ type: i0.Input }],
         group: [{ type: i0.Input }],
-        form: [{ type: i0.Input }]
+        form: [{ type: i0.Input }],
+        uploadComponent: [{ type: i0.ViewChild, args: ["uploadComponent",] }]
     };
 
     /********** Angular **********/
@@ -11320,6 +11528,7 @@
                 ktree_list: ZtreelistComponent,
                 ztrendcard: ZtrendcardComponent,
                 unknown: ZunknownComponent,
+                zudf: ZudfComponent,
                 zupload: ZuploadComponent,
                 zworkflowbuttons: ZworkflowbuttonsComponent
                 // kdate_rangepicker: ZdaterangeComponent
@@ -11503,6 +11712,7 @@
                         ZtreelistComponent,
                         ZtrendcardComponent,
                         ZunknownComponent,
+                        ZudfComponent,
                         ZuploadComponent,
                         ZworkflowbuttonsComponent
                     ],
@@ -11602,6 +11812,7 @@
                         ZtreelistComponent,
                         ZtrendcardComponent,
                         ZunknownComponent,
+                        ZudfComponent,
                         ZuploadComponent,
                         ZworkflowbuttonsComponent
                     ],
@@ -11651,6 +11862,7 @@
                         ZtreelistComponent,
                         ZtrendcardComponent,
                         ZunknownComponent,
+                        ZudfComponent,
                         ZuploadComponent,
                         ZworkflowbuttonsComponent
                     ],
@@ -11726,6 +11938,7 @@
     exports.ZtreeComponent = ZtreeComponent;
     exports.ZtreelistComponent = ZtreelistComponent;
     exports.ZtrendcardComponent = ZtrendcardComponent;
+    exports.ZudfComponent = ZudfComponent;
     exports.ZunknownComponent = ZunknownComponent;
     exports.ZuploadComponent = ZuploadComponent;
     exports.ZworkflowbuttonsComponent = ZworkflowbuttonsComponent;