@zeedhi/common 1.48.1 → 1.51.0

package/dist/zd-common.esm.js

@@ -1794,16 +1794,17 @@ class Input extends ComponentRender {
     set displayValue(value) {
         if (this.internalDisplayValue !== value) {
             this.internalValue = this.parser(value);
+            this.value = this.internalValue; // forces value accessor to be called if necessary
             let { mask } = this;
             if (mask) {
                 if (typeof mask === 'function') {
                     mask = mask(this.internalValue);
                 }
-                this.internalDisplayValue = Mask.convertAll(mask, value);
+                this.internalDisplayValue = Mask.convertAll(mask, this.internalValue);
                 this.internalValue = this.parser(this.internalDisplayValue);
             }
             else {
-                this.internalDisplayValue = value;
+                this.internalDisplayValue = this.internalValue;
             }
         }
     }
@@ -2812,6 +2813,16 @@ class ModalService {
             return this.create(modal);
         });
     }
+    /**
+     * Creates a new modal instance from JSON
+     * @param modal modal structure
+     */
+    static createFromJsonPost(modalPath, params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modal = yield Metadata.post(modalPath, params);
+            return this.create(modal);
+        });
+    }
     /**
      * Deletes modal
      * @param modal modal instance
@@ -3102,7 +3113,7 @@ class Dashboard extends ComponentRender {
         ];
         this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
         this.moveMode = this.getInitValue('moveMode', props.moveMode, this.moveMode);
-        this.cards = props.cards || this.cards;
+        this.cards = this.getInitValue('cards', props.cards, this.cards);
         this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
         this.removePadding = this.getInitValue('removePadding', props.removePadding, this.removePadding);
         this.height = this.getInitValue('height', props.height, this.height);
@@ -3130,13 +3141,7 @@ class Dashboard extends ComponentRender {
     addCard() {
         const addCardForm = Metadata.getInstance('addCardForm');
         if (addCardForm.validate()) {
-            const newCard = {
-                cardId: this.getCardId(),
-                path: addCardForm.value.inputPath,
-                local: addCardForm.value.inputLocal,
-                height: addCardForm.value.inputHeight,
-                width: addCardForm.value.inputWidth,
-            };
+            const newCard = Object.assign({ cardId: this.getCardId(), path: addCardForm.value.inputPath, local: addCardForm.value.inputLocal, height: addCardForm.value.inputHeight, width: addCardForm.value.inputWidth }, addCardForm.value);
             this.cards.push(newCard);
             this.modalCancelClick();
         }
@@ -3428,6 +3433,7 @@ class Date$1 extends TextInput {
         this.dateError = false;
         this.internalDisplayValue = newValue;
         this.internalValue = this.parser(newValue);
+        this.value = this.internalValue; // forces value accessor to be called if necessary
     }
     /**
      * Assign the updated mask to mask property
@@ -3467,6 +3473,7 @@ class Date$1 extends TextInput {
             }
             this.dateError = !!displayValue;
         }
+        this.value = this.internalValue; // forces value accessor to be called if necessary
     }
     isValidDate(value, format, strict = true) {
         return dayjs(value, format, strict).isValid();
@@ -3773,6 +3780,7 @@ class DateRange extends TextInput {
             this.internalValue = this.parser(newValue);
         else
             this.internalValue = [];
+        this.value = this.internalValue; // forces value accessor to be called if necessary
     }
     /**
       * Assign the updated mask to mask property
@@ -3813,6 +3821,7 @@ class DateRange extends TextInput {
             }
             this.dateError = !!displayValue;
         }
+        this.value = this.internalValue; // forces value accessor to be called if necessary
     }
     isValidDateArray(format, values) {
         if (!values || values.length === 0)
@@ -4412,14 +4421,17 @@ class Frame extends ComponentRender {
         this.local = false;
         this.metadata = {};
         this.override = {};
+        this.params = {};
         this.overrideNamedProps = {};
+        this.path = '';
         this.cache = false;
         this.cacheDuration = 2 * 60 * 60 * 1000;
         this.height = 'auto';
         this.maxHeight = 'none';
         this.minHeight = 'none';
+        this.type = 'get';
         this.headerName = 'sw-fetched-on';
-        this.path = props.path;
+        this.path = this.getInitValue('path', props.path, this.path);
         this.local = props.local === true;
         this.override = props.override || this.override;
         this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
@@ -4428,6 +4440,8 @@ class Frame extends ComponentRender {
         this.height = this.getInitValue('height', props.height, this.height);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.type = this.getInitValue('type', props.type, this.type);
+        this.params = this.getInitValue('params', props.params, this.params);
         this.createAccessors();
         this.getMetadata();
     }
@@ -4442,8 +4456,8 @@ class Frame extends ComponentRender {
                     this.metadata = this.overrideNamedPropsFunc(this.metadata);
                 }
             }
-            catch (_a) {
-                this.notFoundError();
+            catch (e) {
+                this.notFoundError(e);
             }
             finally {
                 this.loading = false;
@@ -4464,10 +4478,16 @@ class Frame extends ComponentRender {
             this.getMetadata();
         });
     }
-    notFoundError() { }
+    notFoundError(e) {
+        if (this.rejectLoad)
+            this.rejectLoad(e);
+    }
     requestPage() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.cache) {
+                if (this.type === 'post') {
+                    return Metadata.post(this.path, this.params);
+                }
                 return Metadata.get(this.path, this.local);
             }
             const url = Metadata.getMetadataUrl(this.path, this.local);
@@ -4487,6 +4507,8 @@ class Frame extends ComponentRender {
      * @param element
      */
     afterLoad(event, element) {
+        if (this.resolveLoad)
+            this.resolveLoad(this.metadata);
         this.callEvent('onAfterLoad', {
             event, element, component: this,
         });
@@ -4527,6 +4549,18 @@ class Frame extends ComponentRender {
             return caches.delete(Frame.cacheName);
         });
     }
+    waitLoading() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                if (!this.loading) {
+                    resolve(this.metadata);
+                    return;
+                }
+                this.resolveLoad = resolve;
+                this.rejectLoad = reject;
+            });
+        });
+    }
 }
 Frame.cacheName = 'zd-frame-cache';
 
@@ -4540,8 +4574,8 @@ class FramePage extends Frame {
         this.notFoundRoute = this.getInitValue('notFoundRoute', props.notFoundRoute, this.notFoundRoute);
         this.createAccessors();
     }
-    notFoundError() {
-        super.notFoundError();
+    notFoundError(e) {
+        super.notFoundError(e);
         Router.replace(this.notFoundRoute);
     }
     /**
@@ -5618,6 +5652,7 @@ class GridEditable extends Grid {
                     });
                 }
             } });
+        this.updateOriginalRow(key, row);
         return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false });
     }
     checkLookupData(column, row, componentProps) {
@@ -5665,6 +5700,10 @@ class GridEditable extends Grid {
             this.editedRows = rows;
         }
     }
+    updateOriginalRow(key, row) {
+        if (this.editedRows[key] !== undefined)
+            this.editedRows[key].originalRow = row;
+    }
     /**
      * Checks if column is edited
      * @param column Column
@@ -9047,7 +9086,9 @@ class TreeDataStructure {
                 originalData.splice(index + 1, 0, ...data);
                 this.originalDatasource.data = originalData;
                 this.originalDatasource.currentRow = this.clearRow(row);
+                return data;
             }
+            return undefined;
         });
     }
     /**
@@ -9235,6 +9276,11 @@ class SelectTree extends TextInput {
          */
         this.lazyLoad = true;
         this.selectValue = null;
+        /**
+         * Uses delayed loading to load tree branches
+         */
+        this.fetchOnDemand = false;
+        this.savedNodes = undefined;
         this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
         this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
         this.flattenSearchResults = this.getInitValue('flattenSearchResults', props.flattenSearchResults, this.flattenSearchResults);
@@ -9253,6 +9299,7 @@ class SelectTree extends TextInput {
         this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
         this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
+        this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
         if (props.datasource && Object.keys(props.datasource).length) {
             this.lazyLoad = props.datasource.lazyLoad !== false;
             const searchFields = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
@@ -9289,7 +9336,7 @@ class SelectTree extends TextInput {
             datasource: this.datasource,
             parentField: this.parentField,
             openLevelOnLoad: false,
-            fetchOnDemand: false,
+            fetchOnDemand: this.fetchOnDemand,
         });
         if (!this.lazyLoad) {
             this.datasource.get().then(() => { this.createNodesFromDatasource(false); });
@@ -9309,7 +9356,16 @@ class SelectTree extends TextInput {
         }
     }
     createNodeFromRow(row) {
-        const children = this.createChildrenNodes(row.tree__children);
+        let children;
+        if (this.fetchOnDemand && !this.datasource.search) {
+            children = null;
+        }
+        else {
+            children = this.createChildrenNodes(row.tree__children);
+            if (!children.length) {
+                children = undefined;
+            }
+        }
         const dataTextArr = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
         const dataTextNames = [];
         const masks = [];
@@ -9344,15 +9400,18 @@ class SelectTree extends TextInput {
         return {
             id: row[this.dataValue],
             label: dataText,
-            children: children.length ? children : undefined,
+            children,
             row,
         };
     }
     createChildrenNodes(rows) {
         const newNodes = [];
         rows.forEach((row) => {
-            const newNode = this.createNodeFromRow(row);
-            newNodes.push(newNode);
+            if (Object.keys(row).length > 0) {
+                const newNode = this.createNodeFromRow(row);
+                row.tree__node = newNode;
+                newNodes.push(newNode);
+            }
         });
         return newNodes;
     }
@@ -9378,6 +9437,26 @@ class SelectTree extends TextInput {
      * Triggered after the search query changes
      */
     searchChange(searchQuery, element) {
+        if (this.fetchOnDemand) {
+            if (!searchQuery && this.savedNodes) {
+                this.nodes = this.savedNodes;
+                this.savedNodes = undefined;
+                this.datasource.search = '';
+            }
+            else {
+                if (!this.savedNodes) {
+                    this.savedNodes = [...this.nodes];
+                }
+                this.datasource.setSearch(searchQuery).then(() => {
+                    const treeData = this.treeDataStructure.treeData.map((item) => {
+                        delete item[this.parentField];
+                        item.tree__children = [];
+                        return item;
+                    });
+                    this.nodes = this.createChildrenNodes(treeData);
+                });
+            }
+        }
         this.callEvent('onSearchChange', { element, component: this, searchQuery });
     }
     isDisable(node) {
@@ -9388,7 +9467,7 @@ class SelectTree extends TextInput {
         return this.disabledItems.indexOf(node.id) !== -1;
     }
     getDisabledNodes(nodes) {
-        return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : undefined })));
+        return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : node.children })));
     }
     getNodes() {
         return this.getDisabledNodes(this.nodes);
@@ -9407,7 +9486,7 @@ class SelectTree extends TextInput {
         return !hasError;
     }
     /**
-     * Triggered when the data is inputted.
+     * Triggered when the data is inputed.
      * @param value search value
      * @param event DOM event
      * @param element Element focused
@@ -9416,6 +9495,7 @@ class SelectTree extends TextInput {
         if (value !== this.lastInputValue) {
             this.lastInputValue = value;
             this.callInputEvent({ element, component: this });
+            this.searchChange(value, element);
         }
     }
     get searchValue() {
@@ -9455,6 +9535,22 @@ class SelectTree extends TextInput {
         }
         this.selectValue = val;
     }
+    loadChildren(parentNode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.treeDataStructure.toggleExpand(parentNode.row).then((data) => {
+                const node = parentNode.row.tree__node;
+                if (node) {
+                    if (!data || data.length === 0) {
+                        node.children = undefined;
+                    }
+                    else {
+                        const nodes = this.createChildrenNodes(data);
+                        node.children = nodes;
+                    }
+                }
+            });
+        });
+    }
 }
 
 /**
@@ -9874,9 +9970,11 @@ class Tab extends Component {
         super(props);
         this.disabled = false;
         this.tabTitle = '';
+        this.lazyLoad = true;
         this.tabTitle = this.getInitValue('tabTitle', props.tabTitle, this.tabTitle);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
         this.flex = this.getInitValue('flex', props.flex, this.flex);
+        this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
         this.createAccessors();
     }
 }
@@ -10527,6 +10625,10 @@ class Tree extends ComponentRender {
                 children: [],
             };
             newNode = merge(newNode, node, override);
+            if (typeof node.isLeaf === 'undefined') {
+                const hasChildren = newNode.children.length > 0;
+                newNode.isLeaf = !hasChildren;
+            }
             newNode.children = this.initNodes(node.children || [], override);
             return newNode;
         });
@@ -10601,6 +10703,7 @@ class Tree extends ComponentRender {
     insertNode(newNode) {
         const initNode = this.initNodes([newNode])[0];
         if (this.selectedNodes.length) {
+            this.updateNodeData(this.selectedNodes[0], { isLeaf: false });
             const cursorPosition = {
                 node: this.selectedNodes[0],
                 placement: 'inside',
@@ -10611,31 +10714,44 @@ class Tree extends ComponentRender {
             this.nodes.push(initNode);
         }
     }
+    /** Import multiples nodes by the current cursor position */
     importNodes(nodes) {
         if (this.selectedNodes.length) {
-            const cursorPosition = {
-                node: this.selectedNodes[0],
-                placement: 'inside',
-            };
             nodes.reverse().forEach((node) => {
-                this.tree.insert(cursorPosition, node);
+                this.insertNode(node);
             });
         }
         else {
             nodes.forEach((node) => {
-                this.nodes.push(node);
+                this.insertNode(node);
             });
         }
     }
     /** Remove selected node */
     removeSelected() {
+        const parentNodesPath = [];
         if (this.selectedNodes.length) {
-            const selectedPaths = this.selectedNodes.map((item) => item.path);
+            const selectedPaths = this.selectedNodes.map((item) => {
+                const parent = this.getParentNode(item);
+                if (parent) {
+                    parentNodesPath.push(parent.path);
+                }
+                return item.path;
+            });
             this.tree.remove(selectedPaths);
+            parentNodesPath.forEach((path) => {
+                const parent = this.getNode(path);
+                if (parent && parent.children && parent.children.length === 0) {
+                    this.tree.updateNode(path, { isLeaf: true });
+                }
+            });
         }
     }
     /** Update selected node */
     updateNodeData(node, value) {
+        if (node.children && node.children.length === 0) {
+            this.tree.updateNode(node.path, { isLeaf: true });
+        }
         this.tree.updateNode(node.path, value);
     }
     setTree(tree) {
@@ -10768,8 +10884,11 @@ class Tree extends ComponentRender {
         return this.searchPath(this.nodes, path);
     }
     getParentNode(node) {
-        var _a;
-        return this.tree.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+        const hasParent = Array.isArray(node.path) && node.path.length > 1;
+        if (hasParent) {
+            return this.tree.getNode(node.path.slice(0, -1));
+        }
+        return undefined;
     }
     searchPath(nodes, path) {
         const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
@@ -11119,8 +11238,13 @@ class TreeGridEditable extends TreeGrid {
                     });
                 }
             } });
+        this.updateOriginalRow(key, row);
         return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false });
     }
+    updateOriginalRow(key, row) {
+        if (this.editedRows[key] !== undefined)
+            this.editedRows[key].originalRow = row;
+    }
     checkLookupData(column, row, componentProps) {
         if (row[column.name] && column.lookupData && componentProps.datasource) {
             componentProps.datasource.data = componentProps.datasource.data || [];

package/dist/zd-common.umd.js

@@ -1801,16 +1801,17 @@
       set displayValue(value) {
           if (this.internalDisplayValue !== value) {
               this.internalValue = this.parser(value);
+              this.value = this.internalValue; // forces value accessor to be called if necessary
               let { mask } = this;
               if (mask) {
                   if (typeof mask === 'function') {
                       mask = mask(this.internalValue);
                   }
-                  this.internalDisplayValue = core.Mask.convertAll(mask, value);
+                  this.internalDisplayValue = core.Mask.convertAll(mask, this.internalValue);
                   this.internalValue = this.parser(this.internalDisplayValue);
               }
               else {
-                  this.internalDisplayValue = value;
+                  this.internalDisplayValue = this.internalValue;
               }
           }
       }
@@ -2819,6 +2820,16 @@
               return this.create(modal);
           });
       }
+      /**
+       * Creates a new modal instance from JSON
+       * @param modal modal structure
+       */
+      static createFromJsonPost(modalPath, params) {
+          return __awaiter(this, void 0, void 0, function* () {
+              const modal = yield core.Metadata.post(modalPath, params);
+              return this.create(modal);
+          });
+      }
       /**
        * Deletes modal
        * @param modal modal instance
@@ -3109,7 +3120,7 @@
           ];
           this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
           this.moveMode = this.getInitValue('moveMode', props.moveMode, this.moveMode);
-          this.cards = props.cards || this.cards;
+          this.cards = this.getInitValue('cards', props.cards, this.cards);
           this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
           this.removePadding = this.getInitValue('removePadding', props.removePadding, this.removePadding);
           this.height = this.getInitValue('height', props.height, this.height);
@@ -3137,13 +3148,7 @@
       addCard() {
           const addCardForm = core.Metadata.getInstance('addCardForm');
           if (addCardForm.validate()) {
-              const newCard = {
-                  cardId: this.getCardId(),
-                  path: addCardForm.value.inputPath,
-                  local: addCardForm.value.inputLocal,
-                  height: addCardForm.value.inputHeight,
-                  width: addCardForm.value.inputWidth,
-              };
+              const newCard = Object.assign({ cardId: this.getCardId(), path: addCardForm.value.inputPath, local: addCardForm.value.inputLocal, height: addCardForm.value.inputHeight, width: addCardForm.value.inputWidth }, addCardForm.value);
               this.cards.push(newCard);
               this.modalCancelClick();
           }
@@ -3435,6 +3440,7 @@
           this.dateError = false;
           this.internalDisplayValue = newValue;
           this.internalValue = this.parser(newValue);
+          this.value = this.internalValue; // forces value accessor to be called if necessary
       }
       /**
        * Assign the updated mask to mask property
@@ -3474,6 +3480,7 @@
               }
               this.dateError = !!displayValue;
           }
+          this.value = this.internalValue; // forces value accessor to be called if necessary
       }
       isValidDate(value, format, strict = true) {
           return core.dayjs(value, format, strict).isValid();
@@ -3780,6 +3787,7 @@
               this.internalValue = this.parser(newValue);
           else
               this.internalValue = [];
+          this.value = this.internalValue; // forces value accessor to be called if necessary
       }
       /**
         * Assign the updated mask to mask property
@@ -3820,6 +3828,7 @@
               }
               this.dateError = !!displayValue;
           }
+          this.value = this.internalValue; // forces value accessor to be called if necessary
       }
       isValidDateArray(format, values) {
           if (!values || values.length === 0)
@@ -4419,14 +4428,17 @@
           this.local = false;
           this.metadata = {};
           this.override = {};
+          this.params = {};
           this.overrideNamedProps = {};
+          this.path = '';
           this.cache = false;
           this.cacheDuration = 2 * 60 * 60 * 1000;
           this.height = 'auto';
           this.maxHeight = 'none';
           this.minHeight = 'none';
+          this.type = 'get';
           this.headerName = 'sw-fetched-on';
-          this.path = props.path;
+          this.path = this.getInitValue('path', props.path, this.path);
           this.local = props.local === true;
           this.override = props.override || this.override;
           this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
@@ -4435,6 +4447,8 @@
           this.height = this.getInitValue('height', props.height, this.height);
           this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
           this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+          this.type = this.getInitValue('type', props.type, this.type);
+          this.params = this.getInitValue('params', props.params, this.params);
           this.createAccessors();
           this.getMetadata();
       }
@@ -4449,8 +4463,8 @@
                       this.metadata = this.overrideNamedPropsFunc(this.metadata);
                   }
               }
-              catch (_a) {
-                  this.notFoundError();
+              catch (e) {
+                  this.notFoundError(e);
               }
               finally {
                   this.loading = false;
@@ -4471,10 +4485,16 @@
               this.getMetadata();
           });
       }
-      notFoundError() { }
+      notFoundError(e) {
+          if (this.rejectLoad)
+              this.rejectLoad(e);
+      }
       requestPage() {
           return __awaiter(this, void 0, void 0, function* () {
               if (!this.cache) {
+                  if (this.type === 'post') {
+                      return core.Metadata.post(this.path, this.params);
+                  }
                   return core.Metadata.get(this.path, this.local);
               }
               const url = core.Metadata.getMetadataUrl(this.path, this.local);
@@ -4494,6 +4514,8 @@
        * @param element
        */
       afterLoad(event, element) {
+          if (this.resolveLoad)
+              this.resolveLoad(this.metadata);
           this.callEvent('onAfterLoad', {
               event, element, component: this,
           });
@@ -4534,6 +4556,18 @@
               return caches.delete(Frame.cacheName);
           });
       }
+      waitLoading() {
+          return __awaiter(this, void 0, void 0, function* () {
+              return new Promise((resolve, reject) => {
+                  if (!this.loading) {
+                      resolve(this.metadata);
+                      return;
+                  }
+                  this.resolveLoad = resolve;
+                  this.rejectLoad = reject;
+              });
+          });
+      }
   }
   Frame.cacheName = 'zd-frame-cache';
 
@@ -4547,8 +4581,8 @@
           this.notFoundRoute = this.getInitValue('notFoundRoute', props.notFoundRoute, this.notFoundRoute);
           this.createAccessors();
       }
-      notFoundError() {
-          super.notFoundError();
+      notFoundError(e) {
+          super.notFoundError(e);
           core.Router.replace(this.notFoundRoute);
       }
       /**
@@ -5625,6 +5659,7 @@
                       });
                   }
               } });
+          this.updateOriginalRow(key, row);
           return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false });
       }
       checkLookupData(column, row, componentProps) {
@@ -5672,6 +5707,10 @@
               this.editedRows = rows;
           }
       }
+      updateOriginalRow(key, row) {
+          if (this.editedRows[key] !== undefined)
+              this.editedRows[key].originalRow = row;
+      }
       /**
        * Checks if column is edited
        * @param column Column
@@ -9054,7 +9093,9 @@
                   originalData.splice(index + 1, 0, ...data);
                   this.originalDatasource.data = originalData;
                   this.originalDatasource.currentRow = this.clearRow(row);
+                  return data;
               }
+              return undefined;
           });
       }
       /**
@@ -9242,6 +9283,11 @@
            */
           this.lazyLoad = true;
           this.selectValue = null;
+          /**
+           * Uses delayed loading to load tree branches
+           */
+          this.fetchOnDemand = false;
+          this.savedNodes = undefined;
           this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
           this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
           this.flattenSearchResults = this.getInitValue('flattenSearchResults', props.flattenSearchResults, this.flattenSearchResults);
@@ -9260,6 +9306,7 @@
           this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
           this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
           this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
+          this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
           if (props.datasource && Object.keys(props.datasource).length) {
               this.lazyLoad = props.datasource.lazyLoad !== false;
               const searchFields = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
@@ -9296,7 +9343,7 @@
               datasource: this.datasource,
               parentField: this.parentField,
               openLevelOnLoad: false,
-              fetchOnDemand: false,
+              fetchOnDemand: this.fetchOnDemand,
           });
           if (!this.lazyLoad) {
               this.datasource.get().then(() => { this.createNodesFromDatasource(false); });
@@ -9316,7 +9363,16 @@
           }
       }
       createNodeFromRow(row) {
-          const children = this.createChildrenNodes(row.tree__children);
+          let children;
+          if (this.fetchOnDemand && !this.datasource.search) {
+              children = null;
+          }
+          else {
+              children = this.createChildrenNodes(row.tree__children);
+              if (!children.length) {
+                  children = undefined;
+              }
+          }
           const dataTextArr = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
           const dataTextNames = [];
           const masks = [];
@@ -9351,15 +9407,18 @@
           return {
               id: row[this.dataValue],
               label: dataText,
-              children: children.length ? children : undefined,
+              children,
               row,
           };
       }
       createChildrenNodes(rows) {
           const newNodes = [];
           rows.forEach((row) => {
-              const newNode = this.createNodeFromRow(row);
-              newNodes.push(newNode);
+              if (Object.keys(row).length > 0) {
+                  const newNode = this.createNodeFromRow(row);
+                  row.tree__node = newNode;
+                  newNodes.push(newNode);
+              }
           });
           return newNodes;
       }
@@ -9385,6 +9444,26 @@
        * Triggered after the search query changes
        */
       searchChange(searchQuery, element) {
+          if (this.fetchOnDemand) {
+              if (!searchQuery && this.savedNodes) {
+                  this.nodes = this.savedNodes;
+                  this.savedNodes = undefined;
+                  this.datasource.search = '';
+              }
+              else {
+                  if (!this.savedNodes) {
+                      this.savedNodes = [...this.nodes];
+                  }
+                  this.datasource.setSearch(searchQuery).then(() => {
+                      const treeData = this.treeDataStructure.treeData.map((item) => {
+                          delete item[this.parentField];
+                          item.tree__children = [];
+                          return item;
+                      });
+                      this.nodes = this.createChildrenNodes(treeData);
+                  });
+              }
+          }
           this.callEvent('onSearchChange', { element, component: this, searchQuery });
       }
       isDisable(node) {
@@ -9395,7 +9474,7 @@
           return this.disabledItems.indexOf(node.id) !== -1;
       }
       getDisabledNodes(nodes) {
-          return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : undefined })));
+          return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : node.children })));
       }
       getNodes() {
           return this.getDisabledNodes(this.nodes);
@@ -9414,7 +9493,7 @@
           return !hasError;
       }
       /**
-       * Triggered when the data is inputted.
+       * Triggered when the data is inputed.
        * @param value search value
        * @param event DOM event
        * @param element Element focused
@@ -9423,6 +9502,7 @@
           if (value !== this.lastInputValue) {
               this.lastInputValue = value;
               this.callInputEvent({ element, component: this });
+              this.searchChange(value, element);
           }
       }
       get searchValue() {
@@ -9462,6 +9542,22 @@
           }
           this.selectValue = val;
       }
+      loadChildren(parentNode) {
+          return __awaiter(this, void 0, void 0, function* () {
+              return this.treeDataStructure.toggleExpand(parentNode.row).then((data) => {
+                  const node = parentNode.row.tree__node;
+                  if (node) {
+                      if (!data || data.length === 0) {
+                          node.children = undefined;
+                      }
+                      else {
+                          const nodes = this.createChildrenNodes(data);
+                          node.children = nodes;
+                      }
+                  }
+              });
+          });
+      }
   }
 
   /**
@@ -9881,9 +9977,11 @@
           super(props);
           this.disabled = false;
           this.tabTitle = '';
+          this.lazyLoad = true;
           this.tabTitle = this.getInitValue('tabTitle', props.tabTitle, this.tabTitle);
           this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
           this.flex = this.getInitValue('flex', props.flex, this.flex);
+          this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
           this.createAccessors();
       }
   }
@@ -10534,6 +10632,10 @@
                   children: [],
               };
               newNode = merge__default["default"](newNode, node, override);
+              if (typeof node.isLeaf === 'undefined') {
+                  const hasChildren = newNode.children.length > 0;
+                  newNode.isLeaf = !hasChildren;
+              }
               newNode.children = this.initNodes(node.children || [], override);
               return newNode;
           });
@@ -10608,6 +10710,7 @@
       insertNode(newNode) {
           const initNode = this.initNodes([newNode])[0];
           if (this.selectedNodes.length) {
+              this.updateNodeData(this.selectedNodes[0], { isLeaf: false });
               const cursorPosition = {
                   node: this.selectedNodes[0],
                   placement: 'inside',
@@ -10618,31 +10721,44 @@
               this.nodes.push(initNode);
           }
       }
+      /** Import multiples nodes by the current cursor position */
       importNodes(nodes) {
           if (this.selectedNodes.length) {
-              const cursorPosition = {
-                  node: this.selectedNodes[0],
-                  placement: 'inside',
-              };
               nodes.reverse().forEach((node) => {
-                  this.tree.insert(cursorPosition, node);
+                  this.insertNode(node);
               });
           }
           else {
               nodes.forEach((node) => {
-                  this.nodes.push(node);
+                  this.insertNode(node);
               });
           }
       }
       /** Remove selected node */
       removeSelected() {
+          const parentNodesPath = [];
           if (this.selectedNodes.length) {
-              const selectedPaths = this.selectedNodes.map((item) => item.path);
+              const selectedPaths = this.selectedNodes.map((item) => {
+                  const parent = this.getParentNode(item);
+                  if (parent) {
+                      parentNodesPath.push(parent.path);
+                  }
+                  return item.path;
+              });
               this.tree.remove(selectedPaths);
+              parentNodesPath.forEach((path) => {
+                  const parent = this.getNode(path);
+                  if (parent && parent.children && parent.children.length === 0) {
+                      this.tree.updateNode(path, { isLeaf: true });
+                  }
+              });
           }
       }
       /** Update selected node */
       updateNodeData(node, value) {
+          if (node.children && node.children.length === 0) {
+              this.tree.updateNode(node.path, { isLeaf: true });
+          }
           this.tree.updateNode(node.path, value);
       }
       setTree(tree) {
@@ -10775,8 +10891,11 @@
           return this.searchPath(this.nodes, path);
       }
       getParentNode(node) {
-          var _a;
-          return this.tree.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+          const hasParent = Array.isArray(node.path) && node.path.length > 1;
+          if (hasParent) {
+              return this.tree.getNode(node.path.slice(0, -1));
+          }
+          return undefined;
       }
       searchPath(nodes, path) {
           const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
@@ -11126,8 +11245,13 @@
                       });
                   }
               } });
+          this.updateOriginalRow(key, row);
           return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false });
       }
+      updateOriginalRow(key, row) {
+          if (this.editedRows[key] !== undefined)
+              this.editedRows[key].originalRow = row;
+      }
       checkLookupData(column, row, componentProps) {
           if (row[column.name] && column.lookupData && componentProps.datasource) {
               componentProps.datasource.data = componentProps.datasource.data || [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.48.1",
+  "version": "1.51.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "8ac65de099ea963d8d4142294dfed80025f5755d"
+  "gitHead": "be07d7f99d3351043e08a98b52a5736ab686dd30"
 }

package/types/components/zd-dashboard/interfaces.d.ts

@@ -2,7 +2,7 @@ import { IEventParam } from '@zeedhi/core';
 import { Dashboard } from './dashboard';
 import { IComponentRender, IComponentEvents } from '../zd-component/interfaces';
 import { IButton } from '../zd-button/interfaces';
-import { ICardEvents } from '../zd-card/interfaces';
+import { ICard } from '../zd-card/interfaces';
 export declare type IDashboardEventParam = IEventParam<Dashboard>;
 export declare type IDashboardLoadEvent<T> = (event: T) => Promise<any>;
 export interface IDashboardEvents<T = IEventParam<any>> extends IComponentEvents<T> {
@@ -19,13 +19,11 @@ export interface IDashboard extends IComponentRender {
     height?: string | number;
     heightAdjust?: string | number;
 }
-export interface IDashboardCard {
+export interface IDashboardCard extends Omit<ICard, 'name' | 'component'> {
     cardId: string;
     path: string;
     local: boolean;
     height: number | string;
-    width: number;
-    flat?: boolean;
-    events?: ICardEvents;
+    width: number | string;
     overrideNamedProps?: any;
 }

package/types/components/zd-frame/frame.d.ts

@@ -8,6 +8,7 @@ export declare class Frame extends ComponentRender implements IFrame {
     local: boolean;
     metadata: Object;
     override: Object;
+    params: any;
     overrideNamedProps: any;
     path: string;
     cache: boolean;
@@ -16,8 +17,11 @@ export declare class Frame extends ComponentRender implements IFrame {
     height: number | string;
     maxHeight: number | string;
     minHeight: number | string;
+    type: string;
     private readonly headerName;
     private static readonly cacheName;
+    protected resolveLoad?: (value: Object) => void;
+    protected rejectLoad?: (reason?: any) => void;
     /**
      * Creates a new Frame.
      * @param props Frame properties
@@ -26,7 +30,7 @@ export declare class Frame extends ComponentRender implements IFrame {
     private getMetadata;
     overrideNamedPropsFunc(metadata: object): any;
     reload(): Promise<void>;
-    protected notFoundError(): void;
+    protected notFoundError(e: unknown): void;
     private requestPage;
     /**
      * Triggered when frame is load.
@@ -50,4 +54,5 @@ export declare class Frame extends ComponentRender implements IFrame {
      * Deletes all frame cached requests
      */
     static deleteCache(): Promise<boolean>;
+    waitLoading(): Promise<Object>;
 }

package/types/components/zd-frame/interfaces.d.ts

@@ -6,13 +6,15 @@ export interface IFrameEvents<T = IFrameEvent> extends IComponentEvents<T> {
     onAfterLoad?: IEvent<T> | string;
 }
 export interface IFrame extends IComponentRender {
-    path: string;
+    path?: string;
     local?: boolean;
     override?: Object;
+    params?: any;
     overrideNamedProps?: any;
     cache?: boolean;
     cacheDuration?: number;
     height?: number | string;
     maxHeight?: number | string;
     minHeight?: number | string;
+    type?: string;
 }

package/types/components/zd-frame-page/frame-page.d.ts

@@ -6,7 +6,7 @@ export declare class FramePage extends Frame implements IFramePage {
      */
     notFoundRoute: string;
     constructor(props: IFramePage);
-    protected notFoundError(): void;
+    protected notFoundError(e: unknown): void;
     /**
      * Triggered before the component is destroyed.
      */

package/types/components/zd-grid/grid-editable.d.ts

@@ -103,6 +103,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * change event of editable components
      */
     private changeEditableComponent;
+    private updateOriginalRow;
     /**
      * Checks if column is edited
      * @param column Column

package/types/components/zd-select-tree/interfaces.d.ts

@@ -6,7 +6,8 @@ export interface ISelectTreeNode<T> {
     label: string;
     isDisabled?: boolean;
     isDefaultExpanded?: boolean;
-    children?: ISelectTreeNode<T>[];
+    children?: ISelectTreeNode<T>[] | null;
+    row?: IDictionary<any>;
 }
 export interface ISelectTree extends IComponentRender {
     nodes?: ISelectTreeNode<IDictionary>[];
@@ -28,6 +29,7 @@ export interface ISelectTree extends IComponentRender {
     dataText?: string | any[];
     dataDisabled?: string;
     disabledItems?: any[];
+    fetchOnDemand?: boolean;
 }
 export interface ISelectTreeCloseEvent extends IEventParam<SelectTree> {
     selectedNodes: ISelectTreeNode<IDictionary>[];

package/types/components/zd-select-tree/select-tree.d.ts

@@ -89,6 +89,10 @@ export declare class SelectTree extends TextInput implements ISelectTree {
      */
     private lazyLoad;
     selectValue: any;
+    /**
+     * Uses delayed loading to load tree branches
+     */
+    fetchOnDemand: boolean;
     /**
      * Creates a new instance of SelectTree
      * @param props
@@ -113,16 +117,17 @@ export declare class SelectTree extends TextInput implements ISelectTree {
      * Triggered after selecting an node
      */
     select(node: ISelectTreeNode<IDictionary>, element?: any): void;
+    private savedNodes?;
     /**
      * Triggered after the search query changes
      */
-    searchChange(searchQuery: String, element?: any): void;
+    searchChange(searchQuery: string, element?: any): void;
     private isDisable;
     private getDisabledNodes;
     getNodes(): ISelectTreeNode<IDictionary>[];
     validate(): boolean;
     /**
-     * Triggered when the data is inputted.
+     * Triggered when the data is inputed.
      * @param value search value
      * @param event DOM event
      * @param element Element focused
@@ -135,4 +140,5 @@ export declare class SelectTree extends TextInput implements ISelectTree {
     get value(): any;
     set value(value: any);
     setValue(value: any): void;
+    loadChildren(parentNode: ISelectTreeNode<IDictionary>): Promise<void>;
 }

package/types/components/zd-tabs/interfaces.d.ts

@@ -14,6 +14,7 @@ export interface ITab extends IComponent {
     tabTitle: string;
     disabled?: boolean;
     flex?: boolean;
+    lazyLoad?: boolean;
 }
 export interface ITabs extends IComponentRender {
     activeTab?: number;

package/types/components/zd-tabs/tab.d.ts

@@ -10,6 +10,7 @@ export declare class Tab extends Component implements ITab {
      * Defines if is flex mode.
      */
     flex?: boolean;
+    lazyLoad: boolean;
     /**
      * Create a new Tab.
      * @param props Tab properties

package/types/components/zd-tree/tree.d.ts

@@ -68,7 +68,7 @@ export declare class Tree extends ComponentRender implements ITree {
     /**
      * Initialize all the properties of the declared nodes (reactivity)
      */
-    protected initNodes(nodes: ITreeNodeModel<IDictionary>[], override?: IDictionary): ITreeNodeModel<IDictionary>[];
+    initNodes(nodes: ITreeNodeModel<IDictionary>[], override?: IDictionary): ITreeNodeModel<IDictionary>[];
     /** Nodes */
     get nodes(): ITreeNodeModel<IDictionary>[];
     set nodes(value: ITreeNodeModel<IDictionary>[]);
@@ -82,6 +82,7 @@ export declare class Tree extends ComponentRender implements ITree {
     private createChildrenNodes;
     /** Insert nodes by the current cursor position */
     insertNode(newNode: ITreeNodeModel<IDictionary>): void;
+    /** Import multiples nodes by the current cursor position */
     importNodes(nodes: ITreeNodeModel<IDictionary>[]): void;
     /** Remove selected node */
     removeSelected(): void;

package/types/components/zd-tree-grid/tree-grid-editable.d.ts

@@ -90,6 +90,7 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
         events: any;
         autofill: boolean;
     };
+    private updateOriginalRow;
     private checkLookupData;
     private checkCompValidity;
     /**

package/types/services/zd-modal/modal-service.d.ts

@@ -17,6 +17,11 @@ export declare class ModalService {
      * @param modal modal structure
      */
     static createFromJson(modalPath: string, local?: boolean): Promise<Modal>;
+    /**
+     * Creates a new modal instance from JSON
+     * @param modal modal structure
+     */
+    static createFromJsonPost(modalPath: string, params?: object): Promise<Modal>;
     /**
      * Deletes modal
      * @param modal modal instance

package/types/utils/tree-data-structure/tree-data-structure.d.ts

@@ -105,7 +105,7 @@ export declare class TreeDataStructure {
      * @param row Row object
      * @param rowIndex Row index
      */
-    toggleExpand(row: IDictionary<any>, rowIndex?: number): Promise<void>;
+    toggleExpand(row: IDictionary<any>, rowIndex?: number): Promise<IDictionary<any>[] | undefined>;
     /**
      * Return row with tree data
      * @param row datasource row