@zeedhi/common 1.49.0 → 1.52.0

package/dist/zd-common.esm.js

@@ -2317,7 +2317,12 @@ class Container extends ComponentRender {
          * Removes viewport maximum-width size breakpoints.
          */
         this.fluid = true;
+        /**
+         * Define if the container is a scroll view
+         */
+        this.scrollView = false;
         this.fluid = this.getInitValue('fluid', props.fluid, this.fluid);
+        this.scrollView = this.getInitValue('scrollView', props.scrollView, this.scrollView);
         this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.height = this.getInitValue('height', props.height, this.height);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
@@ -2813,6 +2818,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
@@ -3103,7 +3118,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);
@@ -3131,13 +3146,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();
         }
@@ -4452,8 +4461,8 @@ class Frame extends ComponentRender {
                     this.metadata = this.overrideNamedPropsFunc(this.metadata);
                 }
             }
-            catch (_a) {
-                this.notFoundError();
+            catch (e) {
+                this.notFoundError(e);
             }
             finally {
                 this.loading = false;
@@ -4474,7 +4483,10 @@ 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) {
@@ -4500,6 +4512,8 @@ class Frame extends ComponentRender {
      * @param element
      */
     afterLoad(event, element) {
+        if (this.resolveLoad)
+            this.resolveLoad(this.metadata);
         this.callEvent('onAfterLoad', {
             event, element, component: this,
         });
@@ -4540,6 +4554,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';
 
@@ -4553,8 +4579,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);
     }
     /**
@@ -4776,6 +4802,23 @@ class ColumnNotFoundError extends Error {
     }
 }
 
+class IterableController {
+    constructor(iterable) {
+        this.searchInValue = undefined;
+        this.columns = iterable.columns;
+    }
+    get searchIn() {
+        return this.searchInValue || this.columns.reduce((result, column) => {
+            if (column.type !== 'action' && column.isVisible)
+                result.push(column.name);
+            return result;
+        }, []);
+    }
+    set searchIn(value) {
+        this.searchInValue = value;
+    }
+}
+
 /**
  * Base class for Iterable components.
  */
@@ -4811,16 +4854,14 @@ class Iterable extends ComponentRender {
          */
         this.actionsApplied = {};
         this.columns = this.getColumns(props.columns || this.columns);
-        this.datasource = DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || this.getSearchColumns() }));
+        this.createController();
+        this.datasource = DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || `{{IterableController_${this.name}.searchIn}}` }));
         this.pageSizes = this.getInitValue('pageSizes', props.pageSizes, this.pageSizes);
         this.virtualScroll = this.getInitValue('virtualScroll', props.virtualScroll, this.virtualScroll);
     }
-    getSearchColumns() {
-        return this.columns.reduce((result, column) => {
-            if (column.type !== 'action')
-                result.push(column.name);
-            return result;
-        }, []);
+    createController() {
+        const controller = new IterableController(this);
+        Loader.addController(`IterableController_${this.name}`, controller);
     }
     /**
      * Retrieves columns instances
@@ -5631,6 +5672,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) {
@@ -5678,6 +5720,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
@@ -9060,7 +9106,9 @@ class TreeDataStructure {
                 originalData.splice(index + 1, 0, ...data);
                 this.originalDatasource.data = originalData;
                 this.originalDatasource.currentRow = this.clearRow(row);
+                return data;
             }
+            return undefined;
         });
     }
     /**
@@ -9248,6 +9296,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);
@@ -9266,6 +9319,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];
@@ -9302,7 +9356,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); });
@@ -9322,7 +9376,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 = [];
@@ -9357,15 +9420,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;
     }
@@ -9391,6 +9457,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) {
@@ -9401,7 +9487,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);
@@ -9420,7 +9506,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
@@ -9429,6 +9515,7 @@ class SelectTree extends TextInput {
         if (value !== this.lastInputValue) {
             this.lastInputValue = value;
             this.callInputEvent({ element, component: this });
+            this.searchChange(value, element);
         }
     }
     get searchValue() {
@@ -9468,6 +9555,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;
+                    }
+                }
+            });
+        });
+    }
 }
 
 /**
@@ -9887,9 +9990,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();
     }
 }
@@ -10540,6 +10645,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;
         });
@@ -10614,6 +10723,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',
@@ -10624,31 +10734,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) {
@@ -10782,7 +10905,7 @@ class Tree extends ComponentRender {
     }
     getParentNode(node) {
         const hasParent = Array.isArray(node.path) && node.path.length > 1;
-        if (node.path && hasParent) {
+        if (hasParent) {
             return this.tree.getNode(node.path.slice(0, -1));
         }
         return undefined;
@@ -11135,8 +11258,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

@@ -2324,7 +2324,12 @@
            * Removes viewport maximum-width size breakpoints.
            */
           this.fluid = true;
+          /**
+           * Define if the container is a scroll view
+           */
+          this.scrollView = false;
           this.fluid = this.getInitValue('fluid', props.fluid, this.fluid);
+          this.scrollView = this.getInitValue('scrollView', props.scrollView, this.scrollView);
           this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
           this.height = this.getInitValue('height', props.height, this.height);
           this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
@@ -2820,6 +2825,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
@@ -3110,7 +3125,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);
@@ -3138,13 +3153,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();
           }
@@ -4459,8 +4468,8 @@
                       this.metadata = this.overrideNamedPropsFunc(this.metadata);
                   }
               }
-              catch (_a) {
-                  this.notFoundError();
+              catch (e) {
+                  this.notFoundError(e);
               }
               finally {
                   this.loading = false;
@@ -4481,7 +4490,10 @@
               this.getMetadata();
           });
       }
-      notFoundError() { }
+      notFoundError(e) {
+          if (this.rejectLoad)
+              this.rejectLoad(e);
+      }
       requestPage() {
           return __awaiter(this, void 0, void 0, function* () {
               if (!this.cache) {
@@ -4507,6 +4519,8 @@
        * @param element
        */
       afterLoad(event, element) {
+          if (this.resolveLoad)
+              this.resolveLoad(this.metadata);
           this.callEvent('onAfterLoad', {
               event, element, component: this,
           });
@@ -4547,6 +4561,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';
 
@@ -4560,8 +4586,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);
       }
       /**
@@ -4783,6 +4809,23 @@
       }
   }
 
+  class IterableController {
+      constructor(iterable) {
+          this.searchInValue = undefined;
+          this.columns = iterable.columns;
+      }
+      get searchIn() {
+          return this.searchInValue || this.columns.reduce((result, column) => {
+              if (column.type !== 'action' && column.isVisible)
+                  result.push(column.name);
+              return result;
+          }, []);
+      }
+      set searchIn(value) {
+          this.searchInValue = value;
+      }
+  }
+
   /**
    * Base class for Iterable components.
    */
@@ -4818,16 +4861,14 @@
            */
           this.actionsApplied = {};
           this.columns = this.getColumns(props.columns || this.columns);
-          this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || this.getSearchColumns() }));
+          this.createController();
+          this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || `{{IterableController_${this.name}.searchIn}}` }));
           this.pageSizes = this.getInitValue('pageSizes', props.pageSizes, this.pageSizes);
           this.virtualScroll = this.getInitValue('virtualScroll', props.virtualScroll, this.virtualScroll);
       }
-      getSearchColumns() {
-          return this.columns.reduce((result, column) => {
-              if (column.type !== 'action')
-                  result.push(column.name);
-              return result;
-          }, []);
+      createController() {
+          const controller = new IterableController(this);
+          core.Loader.addController(`IterableController_${this.name}`, controller);
       }
       /**
        * Retrieves columns instances
@@ -5638,6 +5679,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) {
@@ -5685,6 +5727,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
@@ -9067,7 +9113,9 @@
                   originalData.splice(index + 1, 0, ...data);
                   this.originalDatasource.data = originalData;
                   this.originalDatasource.currentRow = this.clearRow(row);
+                  return data;
               }
+              return undefined;
           });
       }
       /**
@@ -9255,6 +9303,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);
@@ -9273,6 +9326,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];
@@ -9309,7 +9363,7 @@
               datasource: this.datasource,
               parentField: this.parentField,
               openLevelOnLoad: false,
-              fetchOnDemand: false,
+              fetchOnDemand: this.fetchOnDemand,
           });
           if (!this.lazyLoad) {
               this.datasource.get().then(() => { this.createNodesFromDatasource(false); });
@@ -9329,7 +9383,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 = [];
@@ -9364,15 +9427,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;
       }
@@ -9398,6 +9464,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) {
@@ -9408,7 +9494,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);
@@ -9427,7 +9513,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
@@ -9436,6 +9522,7 @@
           if (value !== this.lastInputValue) {
               this.lastInputValue = value;
               this.callInputEvent({ element, component: this });
+              this.searchChange(value, element);
           }
       }
       get searchValue() {
@@ -9475,6 +9562,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;
+                      }
+                  }
+              });
+          });
+      }
   }
 
   /**
@@ -9894,9 +9997,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();
       }
   }
@@ -10547,6 +10652,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;
           });
@@ -10621,6 +10730,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',
@@ -10631,31 +10741,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) {
@@ -10789,7 +10912,7 @@
       }
       getParentNode(node) {
           const hasParent = Array.isArray(node.path) && node.path.length > 1;
-          if (node.path && hasParent) {
+          if (hasParent) {
               return this.tree.getNode(node.path.slice(0, -1));
           }
           return undefined;
@@ -11142,8 +11265,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.49.0",
+  "version": "1.52.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": "c470a0a057bc8e1c5b97197258b551b9b158b744"
+  "gitHead": "7831436c706ebc6f781d756f5f80f393bf053b9b"
 }

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

@@ -24,6 +24,10 @@ export declare class Container extends ComponentRender implements IContainer {
      * Removes viewport maximum-width size breakpoints.
      */
     fluid: boolean;
+    /**
+     * Define if the container is a scroll view
+     */
+    scrollView: boolean;
     /**
      * Creates a new Container.
      * @param props Container properties

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

@@ -5,4 +5,5 @@ export interface IContainer extends IComponentRender {
     height?: number | string;
     maxHeight?: number | string;
     minHeight?: number | string;
+    scrollView?: boolean;
 }

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

@@ -20,6 +20,8 @@ export declare class Frame extends ComponentRender implements IFrame {
     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
@@ -28,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.
@@ -52,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-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-iterable/iterable-controller.d.ts

@@ -0,0 +1,8 @@
+import { Iterable } from './iterable';
+export declare class IterableController {
+    private columns;
+    private searchInValue?;
+    constructor(iterable: Iterable);
+    get searchIn(): string[] | undefined;
+    set searchIn(value: string[] | undefined);
+}

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

@@ -41,7 +41,7 @@ export declare class Iterable extends ComponentRender implements IIterable {
      * @param props Iterable properties
      */
     constructor(props: IIterable);
-    protected getSearchColumns(): string[];
+    protected createController(): void;
     /**
      * Retrieves columns instances
      * @param columns Columns property

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