mmhglobal-dynamicform 1.1.42 → 1.1.43

package/README.md

@@ -3,7 +3,10 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog
-`1.1.44`<br/> 
+`1.1.43`<br/> 
+[ztree] - enhance to have expand & select 1 node and collapse 1 node<br/>
+
+`1.1.42`<br/> 
 [zselectmultiple] - enhance to support ButtonList for zselectmultiple.<br/>
 
 `1.1.41`<br/> 

package/bundles/mmhglobal-dynamicform.umd.js

@@ -9826,12 +9826,56 @@
             this.nodeCounter = 1;
             this.clickActName = null;
             this.state = { expandedkeys: [] };
+            this.itemIndex = [];
+            this.selectedKeys = [];
             this.componentProperties = new i3.ZComponentProperties();
             this.isExpanded = function (dataItem, index) {
                 // console.log(index);
                 return _this.state.expandedkeys.indexOf(index) > -1;
                 // return true;
             };
+            this.expandNode = function (field, value, setAsSelected) {
+                _this.itemIndex = [];
+                var node = _this.getItems();
+                _this.searchNodeIndex(node, value, '', field);
+                var index = _this.itemIndex;
+                if (setAsSelected) {
+                    _this.selectedKeys = index;
+                }
+                var indexArr = [];
+                index.forEach(function (i) {
+                    var arr = i.split('_');
+                    var indexs = "";
+                    arr.forEach(function (x) {
+                        indexs = indexs.concat("_").concat(x);
+                        indexArr.push(indexs.substring(1));
+                    });
+                });
+                _this.state.expandedkeys = _this.state.expandedkeys.concat(indexArr);
+            };
+            this.collapseNode = function (field, value, collapseParent) {
+                _this.itemIndex = [];
+                var node = _this.getItems();
+                _this.searchNodeIndex(node, value, '', field);
+                var index = _this.itemIndex;
+                var indexArr = [];
+                if (collapseParent) {
+                    index.forEach(function (i) {
+                        var arr = i.split('_');
+                        var indexs = "";
+                        arr.forEach(function (x) {
+                            indexs = indexs.concat("_").concat(x);
+                            indexArr.push(indexs.substring(1));
+                        });
+                    });
+                }
+                else {
+                    indexArr = index;
+                }
+                _this.state.expandedkeys = _this.state.expandedkeys.filter(function (v) {
+                    return !indexArr.includes(v);
+                });
+            };
             this.expandAll = function () {
                 var node = _this.getItems();
                 _this.expandAllNode(node, '');
@@ -9888,6 +9932,21 @@
             //   console.warn('ztree field Value is not set correctly. ', fieldValue);
             // }
         };
+        ZtreeComponent.prototype.searchNodeIndex = function (node, value, key, field) {
+            var _this = this;
+            if (key) {
+                key = key + '_';
+            }
+            node.forEach(function (d, i) {
+                if (d[field] === Number(value) || d[field] === value) {
+                    _this.itemIndex = _this.itemIndex.concat(key + '' + i);
+                }
+                if (Array.isArray(d.Value)) {
+                    var k = key + '' + i;
+                    _this.searchNodeIndex(d.Value, value, k, field);
+                }
+            });
+        };
         ZtreeComponent.prototype.expandAllNode = function (node, key) {
             var _this = this;
             if (key) {
@@ -10112,7 +10171,7 @@
     ZtreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-ztree",
-                    template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\">\r\n        <!-- <ion-icon name=\"add\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\">\r\n        <!-- <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      {{ getTemplate(dataItem, data, group) }}\r\n\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n",
+                    template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [selectedKeys]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\">\r\n        <!-- <ion-icon name=\"add\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\">\r\n        <!-- <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      {{ getTemplate(dataItem, data, group) }}\r\n\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n",
                     styles: [":host{--ion-color-primary:#479400;--ion-color-primary-rgb:56,128,255;--ion-color-primary-contrast:#fff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3171e0;--ion-color-primary-tint:#4c8dff}:host ::ng-deep .k-treeview .k-in{border-radius:2px;border:1px solid #c8dbf5;background-color:#e3ecf8}:host ::ng-deep .k-treeview .k-in,:host ::ng-deep .k-treeview .k-in.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-in.k-state-selected{border-radius:2px;background-color:#a9c3e8}:host ::ng-deep .k-treeview .k-in.k-state-hover,:host ::ng-deep .k-treeview .k-in:hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}"]
                 },] }
     ];