@zeedhi/common 1.94.3 → 1.96.0

package/dist/zd-common.esm.js

@@ -83,6 +83,7 @@ class Component {
          * Return if component can receive focus using tab
          */
         this.tabStop = true;
+        this.userProperties = {};
         this.accessorManager = new AccessorManager();
         this.parent = props.parent;
         this.name = props.name;
@@ -96,6 +97,7 @@ class Component {
         this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.light = this.getInitValue('light', props.light, this.light);
         this.tabStop = this.getInitValue('tabStop', props.tabStop, this.tabStop);
+        this.userProperties = this.getInitValue('userProperties', props.userProperties, this.userProperties);
         this.children = Array.isArray(props.children) ? props.children : this.children;
         this.keyMap = KeyMap.factory(props.keyMap || this.keyMap);
         this.createAccessors();
@@ -1973,7 +1975,9 @@ class Input extends ComponentRender {
      */
     addValidation(name, config) {
         const validation = Validation.get(name)(config);
-        this.validations[name] = config;
+        if (config) {
+            this.validations[name] = config;
+        }
         this.parsedValidations[name] = validation;
         this.updateRules();
     }
@@ -4931,7 +4935,37 @@ class FileInput extends TextInput {
             }
         }
     }
-}
+    setViewGetFileSizes(getFileSizes) {
+        this.viewGetFileSizes = getFileSizes;
+    }
+    updateRules() {
+        this.rules = Object.keys(this.parsedValidations)
+            .map((key) => {
+            const validation = this.parsedValidations[key];
+            if (key !== 'maxFileSize')
+                return () => validation(this.value);
+            return () => {
+                if (this.viewGetFileSizes) {
+                    const fileSizes = this.viewGetFileSizes();
+                    return validation(fileSizes);
+                }
+                return true;
+            };
+        });
+    }
+}
+Validation.register('maxFileSize', (config) => (fileSizes) => {
+    let fileError = '';
+    Object.keys(fileSizes).some((fileName) => {
+        if (fileSizes[fileName] > config.limit) {
+            fileError = fileName;
+            return true;
+        }
+        return false;
+    });
+    const message = I18n.translate((config.message || 'VALIDATION_FILE_SIZE'), { fileError });
+    return (fileError === '') || message;
+});
 
 /**
  * Base class for Footer component.
@@ -7210,6 +7244,10 @@ class Image extends ComponentRender {
         this.validImage = true;
         this.srcValue = src;
     }
+    load(event, element) {
+        this.loadImage();
+        this.callEvent('load', { event, element, component: this });
+    }
 }
 
 /**
@@ -7493,6 +7531,12 @@ class Select extends TextInput {
                     [searchIn]: value,
                 },
             }),
+            DYNAMIC_FILTER: (value, search_in) => {
+                const arrayValue = Array.isArray(value) ? value : Array.of(value);
+                const filter = arrayValue.map((item) => ({ operation: 'EQUALS', relation: 'OR', value: item }));
+                const dynamicFilter = { [search_in]: filter };
+                return { dynamicFilter };
+            },
         };
         /**
          * Input search value
@@ -7635,13 +7679,16 @@ class Select extends TextInput {
      */
     getItemsBySearchValue(value, searchIn) {
         return __awaiter(this, void 0, void 0, function* () {
-            const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true });
+            const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true, loadAll: Array.isArray(value) });
             this.datasource.loading = true;
             const datasource = DatasourceFactory.factory(config);
             const items = yield datasource.get();
             this.datasource.loading = false;
             datasource.destroy();
-            return items.find(this.getCondition(value));
+            if (Array.isArray(value)) {
+                return items.filter((item) => value.includes(item[this.dataValue]));
+            }
+            return items.filter(this.getCondition(value));
         });
     }
     getCondition(filterValue) {
@@ -7746,7 +7793,7 @@ class Select extends TextInput {
             const foundInData = this.datasource.data.find(this.getCondition(filterValue));
             let searchValue = foundInData;
             if (!foundInData && !this.manualMode) {
-                searchValue = yield this.getItemsBySearchValue(filterValue, searchIn);
+                [searchValue] = yield this.getItemsBySearchValue(filterValue, searchIn);
             }
             if (!searchValue) {
                 this.setFieldRowValue(null);
@@ -8907,6 +8954,8 @@ class Menu extends ComponentRender {
         /** Store the current item focused */
         this.currentItem = null;
         this.cache = false;
+        /** Disable watcher that close menu when route changes */
+        this.disableRouteWatcher = false;
         this.app = this.getInitValue('app', props.app, this.app);
         this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
         this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
@@ -8926,8 +8975,9 @@ class Menu extends ComponentRender {
         this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
         this.width = this.getInitValue('width', props.width, this.width);
         this.cache = this.getInitValue('cache', props.cache, this.cache);
+        this.disableRouteWatcher = this.getInitValue('disableRouteWatcher', props.disableRouteWatcher, this.disableRouteWatcher);
         this.mobileBreakpoint = this.getInitValue('mobileBreakpoint', props.mobileBreakpoint, this.mobileBreakpoint);
-        this.drawer = window.innerWidth > this.mobileBreakpoint;
+        this.drawer = window.innerWidth > parseInt(this.mobileBreakpoint.toString(), 10);
         this.openedInitialValue = this.getInitValue('opened', props.opened, this.opened);
         if (this.openedInitialValue !== undefined) {
             this.opened = this.openedInitialValue;
@@ -9008,7 +9058,7 @@ class Menu extends ComponentRender {
      * Toggle menu
      */
     toggleMenu() {
-        const isMobile = window.innerWidth <= this.mobileBreakpoint;
+        const isMobile = window.innerWidth <= parseInt(this.mobileBreakpoint.toString(), 10);
         if (this.closeToMini && !isMobile) {
             this.miniState = !this.miniState;
             if (this.miniState) {
@@ -9843,12 +9893,16 @@ class SelectMultiple extends Select {
          */
         this.limit = null;
         this.showSelectAll = false;
+        this.showCheckboxAll = false;
+        this.checkboxAllValue = false;
         if (!this.selectedValue) {
             this.selectedValue = [];
         }
         this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
         this.maxRows = this.getInitValue('maxRows', props.maxRows, this.maxRows);
         this.limit = this.getInitValue('limit', props.limit, this.limit);
+        this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
+        this.checkboxAll = this.getInitValue('checkboxAll', props.checkboxAll, this.checkboxAll);
         if (!Array.isArray(this.dataText))
             this.dataText = [this.dataText];
         this.internalDisplayValue = this.getDisplayValue();
@@ -9878,6 +9932,13 @@ class SelectMultiple extends Select {
         this.selectedValue = rows;
         this.setFieldValue(this.getValues(rows));
     }
+    get checkboxAll() {
+        return this.checkboxAllValue;
+    }
+    set checkboxAll(value) {
+        this.disabled = value;
+        this.checkboxAllValue = value;
+    }
     /**
      * Removes item from array a and add it to array b if condition is satisfied
      */
@@ -9889,8 +9950,8 @@ class SelectMultiple extends Select {
     }
     setFieldValue(value) {
         return __awaiter(this, void 0, void 0, function* () {
-            const promises = [];
-            const searchValues = [];
+            const foundValues = [];
+            const searchedValues = [];
             let pushed = false;
             value.forEach((row) => {
                 let filterValue;
@@ -9900,27 +9961,37 @@ class SelectMultiple extends Select {
                 else {
                     filterValue = row;
                 }
-                const searchIn = this.dataValue;
                 const foundInData = this.datasource.data.find(this.getCondition(filterValue));
                 if (foundInData) {
-                    searchValues.push(foundInData);
+                    foundValues.push(foundInData);
                 }
                 else if (!this.manualMode) {
-                    promises.push(this.getItemsBySearchValue(filterValue, searchIn).then((item) => {
-                        if (item) {
-                            searchValues.push(item);
-                            this.datasource.data.unshift(item);
-                            this.insertedValues.push(item);
-                            pushed = true;
-                        }
-                    }));
+                    searchedValues.push(filterValue);
                 }
             });
-            if (promises.length) {
+            const insertItem = (item) => __awaiter(this, void 0, void 0, function* () {
+                if (!item)
+                    return;
+                foundValues.push(item);
+                this.datasource.data.unshift(item);
+                this.insertedValues.push(item);
+                pushed = true;
+            });
+            // using filter/find/dynamicFilter should make only 1 request
+            // using normal search should make one request per search value
+            if (this.searchParam !== 'SEARCH') {
+                const items = yield this.getItemsBySearchValue(searchedValues, this.dataValue);
+                items.forEach(insertItem);
+            }
+            else {
+                const promises = searchedValues.map((searchedValue) => __awaiter(this, void 0, void 0, function* () {
+                    const [item] = yield this.getItemsBySearchValue(searchedValue, this.dataValue);
+                    insertItem(item);
+                }));
                 yield Promise.all(promises);
             }
-            if (searchValues.length > 0) {
-                this.setFieldRowValue(searchValues);
+            if (foundValues.length > 0) {
+                this.setFieldRowValue(foundValues);
             }
             else {
                 this.setFieldRowValue([]);
@@ -10169,6 +10240,18 @@ class SelectMultiple extends Select {
         }
         this.cachedTotal = this.datasource.total;
     }
+    /**
+     * Updates input rules.
+     */
+    updateRules() {
+        this.rules = Object.keys(this.parsedValidations)
+            .map((key) => () => {
+            const validation = this.parsedValidations[key];
+            if (key !== 'required')
+                return validation(this.value);
+            return validation((this.checkboxAll && 'all') || this.value);
+        });
+    }
 }
 
 class TreeDataStructure {

package/dist/zd-common.umd.js

@@ -90,6 +90,7 @@
            * Return if component can receive focus using tab
            */
           this.tabStop = true;
+          this.userProperties = {};
           this.accessorManager = new core.AccessorManager();
           this.parent = props.parent;
           this.name = props.name;
@@ -103,6 +104,7 @@
           this.dark = this.getInitValue('dark', props.dark, this.dark);
           this.light = this.getInitValue('light', props.light, this.light);
           this.tabStop = this.getInitValue('tabStop', props.tabStop, this.tabStop);
+          this.userProperties = this.getInitValue('userProperties', props.userProperties, this.userProperties);
           this.children = Array.isArray(props.children) ? props.children : this.children;
           this.keyMap = core.KeyMap.factory(props.keyMap || this.keyMap);
           this.createAccessors();
@@ -1980,7 +1982,9 @@
        */
       addValidation(name, config) {
           const validation = core.Validation.get(name)(config);
-          this.validations[name] = config;
+          if (config) {
+              this.validations[name] = config;
+          }
           this.parsedValidations[name] = validation;
           this.updateRules();
       }
@@ -4938,7 +4942,37 @@
               }
           }
       }
-  }
+      setViewGetFileSizes(getFileSizes) {
+          this.viewGetFileSizes = getFileSizes;
+      }
+      updateRules() {
+          this.rules = Object.keys(this.parsedValidations)
+              .map((key) => {
+              const validation = this.parsedValidations[key];
+              if (key !== 'maxFileSize')
+                  return () => validation(this.value);
+              return () => {
+                  if (this.viewGetFileSizes) {
+                      const fileSizes = this.viewGetFileSizes();
+                      return validation(fileSizes);
+                  }
+                  return true;
+              };
+          });
+      }
+  }
+  core.Validation.register('maxFileSize', (config) => (fileSizes) => {
+      let fileError = '';
+      Object.keys(fileSizes).some((fileName) => {
+          if (fileSizes[fileName] > config.limit) {
+              fileError = fileName;
+              return true;
+          }
+          return false;
+      });
+      const message = core.I18n.translate((config.message || 'VALIDATION_FILE_SIZE'), { fileError });
+      return (fileError === '') || message;
+  });
 
   /**
    * Base class for Footer component.
@@ -7217,6 +7251,10 @@
           this.validImage = true;
           this.srcValue = src;
       }
+      load(event, element) {
+          this.loadImage();
+          this.callEvent('load', { event, element, component: this });
+      }
   }
 
   /**
@@ -7500,6 +7538,12 @@
                       [searchIn]: value,
                   },
               }),
+              DYNAMIC_FILTER: (value, search_in) => {
+                  const arrayValue = Array.isArray(value) ? value : Array.of(value);
+                  const filter = arrayValue.map((item) => ({ operation: 'EQUALS', relation: 'OR', value: item }));
+                  const dynamicFilter = { [search_in]: filter };
+                  return { dynamicFilter };
+              },
           };
           /**
            * Input search value
@@ -7642,13 +7686,16 @@
        */
       getItemsBySearchValue(value, searchIn) {
           return __awaiter(this, void 0, void 0, function* () {
-              const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true });
+              const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true, loadAll: Array.isArray(value) });
               this.datasource.loading = true;
               const datasource = core.DatasourceFactory.factory(config);
               const items = yield datasource.get();
               this.datasource.loading = false;
               datasource.destroy();
-              return items.find(this.getCondition(value));
+              if (Array.isArray(value)) {
+                  return items.filter((item) => value.includes(item[this.dataValue]));
+              }
+              return items.filter(this.getCondition(value));
           });
       }
       getCondition(filterValue) {
@@ -7753,7 +7800,7 @@
               const foundInData = this.datasource.data.find(this.getCondition(filterValue));
               let searchValue = foundInData;
               if (!foundInData && !this.manualMode) {
-                  searchValue = yield this.getItemsBySearchValue(filterValue, searchIn);
+                  [searchValue] = yield this.getItemsBySearchValue(filterValue, searchIn);
               }
               if (!searchValue) {
                   this.setFieldRowValue(null);
@@ -8914,6 +8961,8 @@
           /** Store the current item focused */
           this.currentItem = null;
           this.cache = false;
+          /** Disable watcher that close menu when route changes */
+          this.disableRouteWatcher = false;
           this.app = this.getInitValue('app', props.app, this.app);
           this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
           this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
@@ -8933,8 +8982,9 @@
           this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
           this.width = this.getInitValue('width', props.width, this.width);
           this.cache = this.getInitValue('cache', props.cache, this.cache);
+          this.disableRouteWatcher = this.getInitValue('disableRouteWatcher', props.disableRouteWatcher, this.disableRouteWatcher);
           this.mobileBreakpoint = this.getInitValue('mobileBreakpoint', props.mobileBreakpoint, this.mobileBreakpoint);
-          this.drawer = window.innerWidth > this.mobileBreakpoint;
+          this.drawer = window.innerWidth > parseInt(this.mobileBreakpoint.toString(), 10);
           this.openedInitialValue = this.getInitValue('opened', props.opened, this.opened);
           if (this.openedInitialValue !== undefined) {
               this.opened = this.openedInitialValue;
@@ -9015,7 +9065,7 @@
        * Toggle menu
        */
       toggleMenu() {
-          const isMobile = window.innerWidth <= this.mobileBreakpoint;
+          const isMobile = window.innerWidth <= parseInt(this.mobileBreakpoint.toString(), 10);
           if (this.closeToMini && !isMobile) {
               this.miniState = !this.miniState;
               if (this.miniState) {
@@ -9850,12 +9900,16 @@
            */
           this.limit = null;
           this.showSelectAll = false;
+          this.showCheckboxAll = false;
+          this.checkboxAllValue = false;
           if (!this.selectedValue) {
               this.selectedValue = [];
           }
           this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
           this.maxRows = this.getInitValue('maxRows', props.maxRows, this.maxRows);
           this.limit = this.getInitValue('limit', props.limit, this.limit);
+          this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
+          this.checkboxAll = this.getInitValue('checkboxAll', props.checkboxAll, this.checkboxAll);
           if (!Array.isArray(this.dataText))
               this.dataText = [this.dataText];
           this.internalDisplayValue = this.getDisplayValue();
@@ -9885,6 +9939,13 @@
           this.selectedValue = rows;
           this.setFieldValue(this.getValues(rows));
       }
+      get checkboxAll() {
+          return this.checkboxAllValue;
+      }
+      set checkboxAll(value) {
+          this.disabled = value;
+          this.checkboxAllValue = value;
+      }
       /**
        * Removes item from array a and add it to array b if condition is satisfied
        */
@@ -9896,8 +9957,8 @@
       }
       setFieldValue(value) {
           return __awaiter(this, void 0, void 0, function* () {
-              const promises = [];
-              const searchValues = [];
+              const foundValues = [];
+              const searchedValues = [];
               let pushed = false;
               value.forEach((row) => {
                   let filterValue;
@@ -9907,27 +9968,37 @@
                   else {
                       filterValue = row;
                   }
-                  const searchIn = this.dataValue;
                   const foundInData = this.datasource.data.find(this.getCondition(filterValue));
                   if (foundInData) {
-                      searchValues.push(foundInData);
+                      foundValues.push(foundInData);
                   }
                   else if (!this.manualMode) {
-                      promises.push(this.getItemsBySearchValue(filterValue, searchIn).then((item) => {
-                          if (item) {
-                              searchValues.push(item);
-                              this.datasource.data.unshift(item);
-                              this.insertedValues.push(item);
-                              pushed = true;
-                          }
-                      }));
+                      searchedValues.push(filterValue);
                   }
               });
-              if (promises.length) {
+              const insertItem = (item) => __awaiter(this, void 0, void 0, function* () {
+                  if (!item)
+                      return;
+                  foundValues.push(item);
+                  this.datasource.data.unshift(item);
+                  this.insertedValues.push(item);
+                  pushed = true;
+              });
+              // using filter/find/dynamicFilter should make only 1 request
+              // using normal search should make one request per search value
+              if (this.searchParam !== 'SEARCH') {
+                  const items = yield this.getItemsBySearchValue(searchedValues, this.dataValue);
+                  items.forEach(insertItem);
+              }
+              else {
+                  const promises = searchedValues.map((searchedValue) => __awaiter(this, void 0, void 0, function* () {
+                      const [item] = yield this.getItemsBySearchValue(searchedValue, this.dataValue);
+                      insertItem(item);
+                  }));
                   yield Promise.all(promises);
               }
-              if (searchValues.length > 0) {
-                  this.setFieldRowValue(searchValues);
+              if (foundValues.length > 0) {
+                  this.setFieldRowValue(foundValues);
               }
               else {
                   this.setFieldRowValue([]);
@@ -10176,6 +10247,18 @@
           }
           this.cachedTotal = this.datasource.total;
       }
+      /**
+       * Updates input rules.
+       */
+      updateRules() {
+          this.rules = Object.keys(this.parsedValidations)
+              .map((key) => () => {
+              const validation = this.parsedValidations[key];
+              if (key !== 'required')
+                  return validation(this.value);
+              return validation((this.checkboxAll && 'all') || this.value);
+          });
+      }
   }
 
   class TreeDataStructure {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.94.3",
+  "version": "1.96.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "753118fca0f43c2904aba5e10d22c518a1a67339"
+  "gitHead": "4df47f4fde302b75598f5744945c86fb3aad4b6a"
 }

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

@@ -1,4 +1,4 @@
-import { IKeyMap } from '@zeedhi/core';
+import { IKeyMap, IDictionary } from '@zeedhi/core';
 import { IComponent, IComponentDirectives, IComponentEvents } from './interfaces';
 /**
  * Base class for all Zeedhi components.
@@ -75,6 +75,7 @@ export declare class Component implements IComponent {
      * Return if component can receive focus using tab
      */
     tabStop: boolean;
+    userProperties: IDictionary<any>;
     /**
      * Properties accessors to controller.
      */

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

@@ -1,4 +1,4 @@
-import { IEvent, IEvents, IEventParam, IKeyMap } from '@zeedhi/core';
+import { IEvent, IEvents, IEventParam, IKeyMap, IDictionary } from '@zeedhi/core';
 import { Component } from './component';
 export interface IPropAccessor {
     [key: string]: {
@@ -22,6 +22,7 @@ export interface IComponent {
     name: string;
     parent?: Component;
     tabStop?: boolean;
+    userProperties?: IDictionary;
     [key: string]: any;
 }
 export interface IComponentRender extends IComponent {

package/types/components/zd-file-input/file-input.d.ts

@@ -65,6 +65,7 @@ export declare class FileInput extends TextInput implements IFileInput {
      */
     protected internalValue: any;
     selectFileButton: IButton;
+    private viewGetFileSizes;
     /**
      * Create a new FileInput
      * @param props FileInput definition
@@ -95,4 +96,6 @@ export declare class FileInput extends TextInput implements IFileInput {
      * @param files File array
      */
     dropFiles(files: File[]): void;
+    setViewGetFileSizes(getFileSizes: () => object): void;
+    protected updateRules(): void;
 }

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

@@ -115,6 +115,7 @@ export declare class Form extends ComponentRender implements IForm {
         name: string;
         parent?: import("..").Component | undefined;
         tabStop?: boolean | undefined;
+        userProperties?: IDictionary<any> | undefined;
     }[];
     /**
      * Grid system for each child.

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

@@ -32,6 +32,7 @@ export declare class GridColumn extends Column implements IGridColumn {
         name: string;
         parent?: import("..").Component | undefined;
         tabStop?: boolean | undefined;
+        userProperties?: IDictionary<any> | undefined;
     }[];
     /**
      * Get the Column without the conditions object

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

@@ -135,7 +135,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param column Column
      * @param row Row
      */
-    isValid(column: IGridColumnEditable, row: IDictionary, revalidate?: boolean): boolean;
+    isValid(column: IGridColumnEditable, row: IDictionary, revalidate?: boolean): string | boolean;
     private newRowIdentifier;
     /**
      * Cancels all edited rows and enable grid components

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

@@ -1,4 +1,4 @@
-import { IImage } from './interfaces';
+import { IImage, IImageEvents } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
 /**
  * The Image component <code>zd-image</code> is used to show images.
@@ -62,6 +62,10 @@ export declare class Image extends ComponentRender implements IImage {
      */
     private srcValue;
     validImage: any;
+    /**
+     * Defines image events.
+     */
+    events: IImageEvents;
     /**
      * Creates a new Image.
      * @param props Image properties
@@ -77,4 +81,5 @@ export declare class Image extends ComponentRender implements IImage {
     errorImage(): void;
     get src(): string;
     set src(src: string);
+    load(event?: Event, element?: HTMLElement): void;
 }

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

@@ -1,7 +1,10 @@
 import { IEventParam } from '@zeedhi/core';
 import { Image } from './image';
-import { IComponentRender } from '../zd-component/interfaces';
+import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
 export declare type IImageEvent = IEventParam<Image>;
+export interface IImageEvents<T = IEventParam<any>> extends IComponentEvents<T> {
+    load?: EventDef<T>;
+}
 export interface IImage extends IComponentRender {
     alt?: string;
     errorImagePath?: string;
@@ -15,4 +18,5 @@ export interface IImage extends IComponentRender {
     width?: number | string;
     maxWidth?: number | string;
     minWidth?: number | string;
+    events?: IImageEvents;
 }

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

@@ -110,7 +110,7 @@ export declare class Input extends ComponentRender implements IInput {
     /**
      * Parsed field rules.
      */
-    private parsedValidations;
+    protected parsedValidations: IDictionary<((value: any) => boolean | string)>;
     protected formatterFn: Function;
     protected parserFn: Function;
     protected internalDisplayValue: string;
@@ -124,11 +124,11 @@ export declare class Input extends ComponentRender implements IInput {
     /**
     * Validates input.
     */
-    validate(): boolean;
+    validate(): string | boolean;
     /**
      * Sets view validation method.
      */
-    setViewValidate(viewValidate: () => boolean): void;
+    setViewValidate(viewValidate: () => boolean | string): void;
     /**
      * Sets view reset validation method.
      */
@@ -161,7 +161,7 @@ export declare class Input extends ComponentRender implements IInput {
     /**
      * Updates input rules.
      */
-    private updateRules;
+    protected updateRules(): void;
     /**
      * Input value.
      */

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

@@ -27,6 +27,7 @@ export interface IMenu extends IComponentRender {
     width?: number | string;
     mobileBreakpoint?: number | string;
     cache?: boolean;
+    disableRouteWatcher?: boolean;
 }
 /**
  * Interface for menu itens

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

@@ -118,6 +118,8 @@ export declare class Menu extends ComponentRender implements IMenu {
     /** Store the current item focused */
     currentItem: IMenuItem | null;
     cache?: boolean;
+    /** Disable watcher that close menu when route changes */
+    disableRouteWatcher?: boolean;
     /**
      * Creates a new Menu.
      * @param props Menu properties

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

@@ -1,7 +1,7 @@
 import { IDatasource } from '@zeedhi/core';
 import { ITextInput } from '../zd-text-input/interfaces';
 import { IComponentRender } from '../zd-component/interfaces';
-export declare type SearchParam = 'SEARCH' | 'FILTER' | 'FIND';
+export declare type SearchParam = 'SEARCH' | 'FILTER' | 'FIND' | 'DYNAMIC_FILTER';
 export interface ISelect extends ITextInput {
     autocomplete?: boolean;
     autoSelection?: boolean;

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

@@ -97,6 +97,15 @@ export declare class Select extends TextInput implements ISelect {
                 [x: string]: any;
             };
         };
+        DYNAMIC_FILTER: (value: unknown, search_in: string) => {
+            dynamicFilter: {
+                [x: string]: {
+                    operation: string;
+                    relation: string;
+                    value: any;
+                }[];
+            };
+        };
     };
     /**
      * Input search value
@@ -135,7 +144,7 @@ export declare class Select extends TextInput implements ISelect {
      * Finds and retrieves items searching by value
      * @param value Default value
      */
-    protected getItemsBySearchValue(value: any, searchIn: string): Promise<any>;
+    protected getItemsBySearchValue(value: any, searchIn: string): Promise<any[]>;
     protected getCondition(filterValue: any): (row: any) => boolean;
     focus(event: Event, element: any): Promise<void>;
     protected afterFocus(): Promise<void>;

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

@@ -13,4 +13,6 @@ export interface ISelectMultiple extends ISelect {
     events?: ISelectMultipleEvents;
     maxRows?: string | number;
     limit?: number | null;
+    showCheckboxAll?: boolean;
+    checkboxAll?: boolean;
 }

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

@@ -24,6 +24,7 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
      */
     limit: number | null;
     showSelectAll: boolean;
+    showCheckboxAll: boolean;
     /**
      * Create a new Select.
      * @param props Select properties
@@ -34,6 +35,9 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
      */
     get selectValue(): IDictionary<any>[];
     set selectValue(rows: IDictionary<any>[]);
+    private checkboxAllValue;
+    get checkboxAll(): boolean;
+    set checkboxAll(value: boolean);
     /**
      * Removes item from array a and add it to array b if condition is satisfied
      */
@@ -104,4 +108,8 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
     protected checkValueOnBlur(): void;
     protected afterFocus(): Promise<void>;
     private setCache;
+    /**
+     * Updates input rules.
+     */
+    protected updateRules(): void;
 }

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

@@ -126,7 +126,7 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
      * @param column Column
      * @param row Row
      */
-    isValid(column: IGridColumnEditable, row: IDictionary, revalidate?: boolean): boolean;
+    isValid(column: IGridColumnEditable, row: IDictionary, revalidate?: boolean): string | boolean;
     /**
      * Cancels all edited rows and enable grid components
      */

package/types/services/zd-json-cache/json-cache-service.d.ts

@@ -0,0 +1,12 @@
+export interface IJSONObject {
+    path: string;
+}
+export declare class JsonCacheService {
+    /**
+     * jsons collection
+     */
+    static jsonCollection: IJSONObject[];
+    static saveJSONCache(jsonCollection: IJSONObject[]): Promise<void>;
+    static getJSONCache(path: string): any;
+    static clearJSONCache(jsonCollection: IJSONObject[]): void;
+}