@zeedhi/common 1.50.0 → 1.51.0

package/dist/zd-common.esm.js

@@ -4456,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;
@@ -4478,7 +4478,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) {
@@ -4504,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,
         });
@@ -4544,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';
 
@@ -4557,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);
     }
     /**
@@ -5635,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) {
@@ -5682,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
@@ -9258,6 +9280,7 @@ class SelectTree extends TextInput {
          * 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);
@@ -9334,7 +9357,7 @@ class SelectTree extends TextInput {
     }
     createNodeFromRow(row) {
         let children;
-        if (this.fetchOnDemand) {
+        if (this.fetchOnDemand && !this.datasource.search) {
             children = null;
         }
         else {
@@ -9414,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) {
@@ -9443,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
@@ -9452,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() {
@@ -9926,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();
     }
 }
@@ -11192,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

@@ -4463,8 +4463,8 @@
                       this.metadata = this.overrideNamedPropsFunc(this.metadata);
                   }
               }
-              catch (_a) {
-                  this.notFoundError();
+              catch (e) {
+                  this.notFoundError(e);
               }
               finally {
                   this.loading = false;
@@ -4485,7 +4485,10 @@
               this.getMetadata();
           });
       }
-      notFoundError() { }
+      notFoundError(e) {
+          if (this.rejectLoad)
+              this.rejectLoad(e);
+      }
       requestPage() {
           return __awaiter(this, void 0, void 0, function* () {
               if (!this.cache) {
@@ -4511,6 +4514,8 @@
        * @param element
        */
       afterLoad(event, element) {
+          if (this.resolveLoad)
+              this.resolveLoad(this.metadata);
           this.callEvent('onAfterLoad', {
               event, element, component: this,
           });
@@ -4551,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';
 
@@ -4564,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);
       }
       /**
@@ -5642,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) {
@@ -5689,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
@@ -9265,6 +9287,7 @@
            * 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);
@@ -9341,7 +9364,7 @@
       }
       createNodeFromRow(row) {
           let children;
-          if (this.fetchOnDemand) {
+          if (this.fetchOnDemand && !this.datasource.search) {
               children = null;
           }
           else {
@@ -9421,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) {
@@ -9450,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
@@ -9459,6 +9502,7 @@
           if (value !== this.lastInputValue) {
               this.lastInputValue = value;
               this.callInputEvent({ element, component: this });
+              this.searchChange(value, element);
           }
       }
       get searchValue() {
@@ -9933,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();
       }
   }
@@ -11199,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.50.0",
+  "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": "47f7e1870055d3ad9bba54c0f96b1e34176b70b6"
+  "gitHead": "be07d7f99d3351043e08a98b52a5736ab686dd30"
 }

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-select-tree/select-tree.d.ts

@@ -117,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

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-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;
     /**