mmhglobal-dynamicform 1.1.43 → 1.1.44

package/README.md

@@ -3,6 +3,11 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog
+`1.1.44`<br/> 
+[zudf] - enhance zudf<br/>
+[zcard] - enhance to handle disablecollapse<br/>
+[zbutton] - enhance to have kendo color, fill<br/>
+
 `1.1.43`<br/> 
 [ztree] - enhance to have expand & select 1 node and collapse 1 node<br/>
 

package/bundles/mmhglobal-dynamicform.umd.js

@@ -4069,6 +4069,8 @@
                         if (button.Disabled != "" && button.Disabled) {
                             buttonDisabled = button.Disabled === 'true' ? true : i3.ZComponentHelper.getGroupEvalValue.call(_this, button.Disabled);
                         }
+                        var fill = button['Fill'] ? button['Fill'] : 'outline';
+                        var color = button.Color ? button.Color : 'dark';
                         _this.items.push({
                             name: button.Name,
                             text: label,
@@ -4079,6 +4081,8 @@
                             iconName: button.Icon,
                             dismissType: button.DismissType,
                             disableTriggerTimer: button.DisableTriggerTimer,
+                            fill: fill,
+                            color: color,
                             SubType: _this.data.SubType,
                             click: function (y) {
                                 _this.buttonClick(button);
@@ -4129,14 +4133,19 @@
             });
         };
         ZbuttonsComponent.prototype.getButtonLabel = function (button) {
-            var labelExpr = button.Label.match(/^{{.*}}$/gi);
-            if (labelExpr) {
-                labelExpr = labelExpr[0].slice(2, -2);
-                var label = i3.ZComponentHelper.getGroupValue(labelExpr, this.group);
-                return label;
+            if (button.Label) {
+                var labelExpr = button.Label.match(/^{{.*}}$/gi);
+                if (labelExpr) {
+                    labelExpr = labelExpr[0].slice(2, -2);
+                    var label = i3.ZComponentHelper.getGroupValue(labelExpr, this.group);
+                    return label;
+                }
+                else {
+                    return button.Label;
+                }
             }
             else {
-                return button.Label;
+                return null;
             }
         };
         ZbuttonsComponent.prototype.getButtonRole = function (button, label) {
@@ -4167,7 +4176,7 @@
     ZbuttonsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zbuttons",
-                    template: "<!-- <p>\r\n  zbuttons {{data.Value}}\r\n</p> -->\r\n<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\">\r\n\r\n  <div class=\"ion-margin-vertical\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span>{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" style=\"padding: 10px 0px;\" [class]=\"data.DivClass\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"BtnClick(item.clickEvent)\"\r\n    kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n    style=\"margin-right: 5px;\">{{item.text}}</button> -->\r\n    <ion-button fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                [expand]=\"expand\"\r\n                *ngFor=\"let item of items; let i = index\"\r\n                class=\"button-container\"\r\n                (click)=\"BtnClick(item)\"\r\n                [hidden]=\"!isBtnVisible(item.visible)\"\r\n                [disabled]=\"group.isTriggered || item.disabled\">\r\n      <fa-icon [icon]=\"getFontAwesome(item.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{item.text}}</span>\r\n    </ion-button>\r\n  </div>\r\n</div>\r\n",
+                    template: "<!-- <p>\r\n  zbuttons {{data.Value}}\r\n</p> -->\r\n<div *ngIf=\"data.AlignButton\" style=\"padding-top: 13px\"></div>\r\n<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\">\r\n\r\n  <div class=\"ion-margin-vertical\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span>{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" style=\"padding: 10px 0px;\" [class]=\"data.DivClass\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"BtnClick(item.clickEvent)\"\r\n    kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n    style=\"margin-right: 5px;\">{{item.text}}</button> -->\r\n    <ion-button *ngFor=\"let item of items; let i = index\"\r\n                [fill]=\"item.fill\"\r\n                [color]=\"item.color\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                (click)=\"BtnClick(item)\"\r\n                [expand]=\"expand\"\r\n                [hidden]=\"!isBtnVisible(item.visible)\"\r\n                [disabled]=\"group.isTriggered || item.disabled\">\r\n      <fa-icon [icon]=\"getFontAwesome(item.icon)\"></fa-icon>\r\n      <div *ngIf=\"item.text\" style=\"padding-right: 5px;\"></div>\r\n      <span class=\"ion-text-capitalize\">{{item.text}}</span>\r\n    </ion-button>\r\n  </div>\r\n</div>\r\n",
                     styles: [".ripple-parent{position:relative;overflow:hidden}:host ::ng-deep span.ion-text-capitalize{font-weight:600}.button-container,.button:hover{font-size:12px;height:30px}.button:hover{border-radius:5px}"]
                 },] }
     ];
@@ -4232,8 +4241,8 @@
     ZcardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zcard",
-                    template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <kendo-panelbar keepItemContent=\"true\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"!data.Icon\">\r\n          <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title\">{{options.Title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <div class=\"ion-row\" style=\"padding: 6px 12px;\">\r\n          <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ? field.DivClass : 'flex-hide')\"\r\n                            *ngFor=\"let field of data.Value\"\r\n                            [field]=\"field\"\r\n                            [group]=\"group\"\r\n                            [form]=\"form\"\r\n                            id=\"{{field.Type}}-{{field.Name}}\">\r\n          </app-zformcontrol>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n",
-                    styles: [".zcard-header-icon{color:#fff!important;padding-right:3px;font-size:11pt}.zcard-header-title{color:#fff!important;font-weight:500;font-size:11pt}"]
+                    template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <kendo-panelbar keepItemContent=\"true\" *ngIf=\"!data.DisableCollapse\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"!data.Icon\">\r\n          <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title\">{{options.Title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <div class=\"ion-row\" style=\"padding: 6px 12px;\">\r\n          <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ? field.DivClass : 'flex-hide')\"\r\n                            *ngFor=\"let field of data.Value\"\r\n                            [field]=\"field\"\r\n                            [group]=\"group\"\r\n                            [form]=\"form\"\r\n                            id=\"{{field.Type}}-{{field.Name}}\">\r\n          </app-zformcontrol>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n\r\n  <kendo-card *ngIf=\"data.DisableCollapse\" width=\"100%\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"!data.Icon\">\r\n          <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n        </span>\r\n        <ion-label class=\"card-header-title\">{{options.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <div class=\"ion-row\">\r\n        <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ? field.DivClass : 'flex-hide')\"\r\n                          *ngFor=\"let field of data.Value\"\r\n                          [field]=\"field\"\r\n                          [group]=\"group\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\">\r\n        </app-zformcontrol>\r\n      </div>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n",
+                    styles: [".zcard-header-icon{color:#fff!important;padding-right:3px;font-size:11pt}:host ::ng-deep kendo-card-header{background-color:#5596e6;color:#fff}.card-header-title{font-weight:500;font-size:10.5pt}"]
                 },] }
     ];
     ZcardComponent.ctorParameters = function () { return [
@@ -9878,8 +9887,9 @@
             };
             this.expandAll = function () {
                 var node = _this.getItems();
-                _this.expandAllNode(node, '');
-                console.log(_this.state.expandedkeys);
+                if (node) {
+                    _this.expandAllNode(node, '');
+                }
             };
             this.collapseAll = function () {
                 _this.state.expandedkeys = [];
@@ -9899,14 +9909,14 @@
         ZtreeComponent.prototype.ngOnInit = function () {
             i3.ZComponentHelper.setComponentProperties(this);
             i3.ZComponentHelper.registerComponent(this);
+            if (this.data.TreeviewExpandAll) {
+                this.expandAll();
+            }
         };
         ZtreeComponent.prototype.ngAfterViewInit = function () {
             // const componentId = ZComponentHelper.getComponentId(this.data);
             // this.group.zComponents[componentId] = this;
             i3.ZComponentHelper.registerComponent(this);
-            if (this.data.TreeviewExpandAll) {
-                this.expandAll();
-            }
         };
         ZtreeComponent.prototype.getItems = function () {
             // if (this.modelName) {
@@ -10831,45 +10841,86 @@
             };
         }
         ZudfComponent.prototype.ngOnInit = function () {
-            var _this = this;
             i3.ZComponentHelper.setComponentProperties(this);
             i3.ZComponentHelper.registerComponent(this);
+            // keep data Value
+            this.initialDataValue = this.data.Value;
+            if (i3.ZComponentHelper.isNullUndefinedEmpty(this.data.Value)) {
+                this.loadEmptyForm();
+            }
+            else {
+                this.loadZudfForm();
+            }
+        };
+        ZudfComponent.prototype.loadEmptyForm = function () {
+            var _this = this;
+            rxjs.of(true).pipe(operators.tap(function () {
+                _this.data.SubType = 'zudf';
+                // change the value to the result field form 
+                _this.data.Value = [];
+                // change zudf to zdiv
+                //this.data.Type = 'zdiv';
+            }), operators.tap(function () {
+                if (!_this.group['_zudf_' + _this.data.Name]) {
+                    _this.group['_zudf_' + _this.data.Name] = new i3.ZGroup;
+                }
+                var grp = _this.group['_zudf_' + _this.data.Name];
+                grp.zModel = {};
+                // create as new Form Group
+                _this.form = _this.toFormGroup(_this.data.Value);
+                // set to zGroup scope
+                grp.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);
+            });
+        };
+        ZudfComponent.prototype.loadZudfForm = function () {
+            var _this = 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');
+                    _this.appendPrefix(formFieldResult, 'zudf_' + _this.data.Name);
                     // change the value to the result field form 
                     _this.data.Value = formFieldResult;
                     // change zudf to zdiv
-                    _this.data.Type = '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;
+                if (!_this.group['_zudf_' + _this.data.Name]) {
+                    _this.group['_zudf_' + _this.data.Name] = new i3.ZGroup;
                 }
-                _this.group._zudf.zModel = {};
+                var grp = _this.group['_zudf_' + _this.data.Name];
+                grp.zModel = {};
                 // create as new Form Group
                 _this.form = _this.toFormGroup(_this.data.Value);
                 // set to zGroup scope
-                _this.group._zudf.form = _this.form;
+                grp.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();
+                // TODO: get saved record
+                //this.getFormFieldzModel();
+                // change back the data.Value
+                if (_this.data['DisableReplaceValue']) {
+                    _this.data.Value = _this.initialDataValue;
+                }
             });
         };
         ZudfComponent.prototype.getFormFieldzModel = function () {
-            var form = this.group._zudf.form;
-            var zModel = this.group._zudf.zModel;
+            var form = this.group['_zudf_' + this.data.Name].form;
+            var zModel = this.group['_zudf_' + this.data.Name].zModel;
             var url = this.resourceApiService.getURL('field');
             var respData = { 'parentFormId': 5722, 'zudf_Name': 'test' };
             Object.assign(zModel, respData);
@@ -10908,10 +10959,10 @@
                         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);
+                            formControls[field.Value] = new forms.FormControl(_this.group['_zudf_' + _this.data.Name].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);
+                                formControls[field.CCValue] = new forms.FormControl(_this.group['_zudf_' + _this.data.Name].zModel[field.CCValue], ccValidators);
                             }
                         }
                     }
@@ -10936,13 +10987,25 @@
         ZudfComponent.prototype.ComponentIsVisible = function (field) {
             return i3.ZComponentHelper.ComponentIsVisible(field, this.group);
         };
+        ZudfComponent.prototype.appendFormControl = function (zudfControlName, zudfControl, fieldData) {
+            this.form.addControl(zudfControlName, zudfControl);
+            this.formField.push(fieldData);
+        };
+        ZudfComponent.prototype.clearFormControl = function () {
+            var _this = this;
+            this.formField.forEach(function (data) {
+                _this.form.removeControl(data.Value);
+            });
+            this.data.Value = this.initialDataValue;
+            this.formField = [];
+        };
         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}"]
+                    template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n   <kendo-card *ngIf=\"data.Title\" width=\"100%\" >\r\n    <kendo-card-header  >\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <div class=\"ion-row\">\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{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n        </app-zformcontrol>\r\n      </div>\r\n    </kendo-card-body> \r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\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{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n  </app-zformcontrol>\r\n</div>\r\n",
+                    styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}"]
                 },] }
     ];
     ZudfComponent.ctorParameters = function () { return [