@zeedhi/common 1.50.0 → 1.53.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);
@@ -4456,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;
@@ -4478,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) {
@@ -4504,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,
         });
@@ -4544,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';
 
@@ -4557,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);
     }
     /**
@@ -4780,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.
  */
@@ -4815,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
@@ -5635,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) {
@@ -5682,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
@@ -9258,6 +9300,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 +9377,7 @@ class SelectTree extends TextInput {
     }
     createNodeFromRow(row) {
         let children;
-        if (this.fetchOnDemand) {
+        if (this.fetchOnDemand && !this.datasource.search) {
             children = null;
         }
         else {
@@ -9414,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) {
@@ -9443,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
@@ -9452,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() {
@@ -9926,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();
     }
 }
@@ -11192,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 || [];
@@ -12564,7 +12635,7 @@ class Report {
             const { route } = reportType;
             const { name, columns, datasource } = this.iterable;
             const { groupedData } = Object.assign({}, this.iterable);
-            const formattedColumns = this.removeActionColumns(columns);
+            const formattedColumns = this.removeColumns(columns);
             const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
             let dataset;
             if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
@@ -12606,8 +12677,8 @@ class Report {
             return new URL(reportFile, this.fileEndPoint).href;
         });
     }
-    removeActionColumns(columns) {
-        return columns.filter((item) => item.type !== 'action');
+    removeColumns(columns) {
+        return columns.filter((item) => (item.type !== 'action' && item.isVisible));
     }
 }
 

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);
@@ -4463,8 +4468,8 @@
                       this.metadata = this.overrideNamedPropsFunc(this.metadata);
                   }
               }
-              catch (_a) {
-                  this.notFoundError();
+              catch (e) {
+                  this.notFoundError(e);
               }
               finally {
                   this.loading = false;
@@ -4485,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) {
@@ -4511,6 +4519,8 @@
        * @param element
        */
       afterLoad(event, element) {
+          if (this.resolveLoad)
+              this.resolveLoad(this.metadata);
           this.callEvent('onAfterLoad', {
               event, element, component: this,
           });
@@ -4551,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';
 
@@ -4564,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);
       }
       /**
@@ -4787,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.
    */
@@ -4822,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
@@ -5642,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) {
@@ -5689,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
@@ -9265,6 +9307,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 +9384,7 @@
       }
       createNodeFromRow(row) {
           let children;
-          if (this.fetchOnDemand) {
+          if (this.fetchOnDemand && !this.datasource.search) {
               children = null;
           }
           else {
@@ -9421,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) {
@@ -9450,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
@@ -9459,6 +9522,7 @@
           if (value !== this.lastInputValue) {
               this.lastInputValue = value;
               this.callInputEvent({ element, component: this });
+              this.searchChange(value, element);
           }
       }
       get searchValue() {
@@ -9933,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();
       }
   }
@@ -11199,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 || [];
@@ -12571,7 +12642,7 @@
               const { route } = reportType;
               const { name, columns, datasource } = this.iterable;
               const { groupedData } = Object.assign({}, this.iterable);
-              const formattedColumns = this.removeActionColumns(columns);
+              const formattedColumns = this.removeColumns(columns);
               const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
               let dataset;
               if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
@@ -12613,8 +12684,8 @@
               return new URL(reportFile, this.fileEndPoint).href;
           });
       }
-      removeActionColumns(columns) {
-          return columns.filter((item) => item.type !== 'action');
+      removeColumns(columns) {
+          return columns.filter((item) => (item.type !== 'action' && item.isVisible));
       }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.50.0",
+  "version": "1.53.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": "ec0c81b4691fc0b6bc813f8ff7c49512a319f9e4"
 }

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

package/types/utils/report/report.d.ts

@@ -11,5 +11,5 @@ export declare class Report implements IReport {
     private getData;
     private getReportType;
     getReport(type: string, portrait?: boolean, rowObj?: any): Promise<string>;
-    private removeActionColumns;
+    private removeColumns;
 }