@zeedhi/common 1.66.0 → 1.68.0

package/dist/zd-common.esm.js

@@ -23,6 +23,10 @@ class Component {
      * @param props Components properties
      */
     constructor(props) {
+        /**
+         * Automatically add focus to input when it's created.
+         */
+        this.autofocus = false;
         /**
          * Children component structure if the component has children.
          */
@@ -77,6 +81,7 @@ class Component {
         this.parent = props.parent;
         this.name = props.name;
         this.events = Event.factory(props.events || this.events);
+        this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
         this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
         this.directives = this.getInitValue('directives', props.directives, this.directives);
@@ -1612,10 +1617,6 @@ class Input extends ComponentRender {
          * Input auto complete.
          */
         this.autofill = true;
-        /**
-         * Automatically add focus to input when it's created.
-         */
-        this.autofocus = false;
         /**
          * Add input clear functionality if the input isn't readonly or disabled.
          */
@@ -1704,7 +1705,6 @@ class Input extends ComponentRender {
         this.align = this.getInitValue('align', props.align, this.align);
         this.alwaysShowError = this.getInitValue('alwaysShowError', props.alwaysShowError, this.alwaysShowError);
         this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-        this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
         this.color = this.getInitValue('color', props.color, this.color);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
@@ -2948,6 +2948,37 @@ class LoadingService {
     }
 }
 
+class JsonCacheService {
+    static saveJSONCache(jsonCollection) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const jsonCollectionInCache = jsonCollection.map((jsonItem) => __awaiter(this, void 0, void 0, function* () {
+                const { path } = jsonItem;
+                const metadata = yield Metadata.get(path, true);
+                localStorage.setItem(path, JSON.stringify(metadata));
+            }));
+            yield Promise.all(jsonCollectionInCache);
+        });
+    }
+    static getJSONCache(path) {
+        const getMetadaFromCache = localStorage.getItem(path);
+        let metadataValueReturn = false;
+        if (typeof getMetadaFromCache === 'string') {
+            metadataValueReturn = JSON.parse(getMetadaFromCache);
+        }
+        return metadataValueReturn;
+    }
+    static clearJSONCache(jsonCollection) {
+        jsonCollection.map((jsonItem) => __awaiter(this, void 0, void 0, function* () {
+            const { path } = jsonItem;
+            localStorage.removeItem(path);
+        }));
+    }
+}
+/**
+ * jsons collection
+ */
+JsonCacheService.jsonCollection = [];
+
 /**
  * Base class for Dashboard component.
  */
@@ -4042,19 +4073,25 @@ class DateRange extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
-    updateHelperHint() {
-        if (this.helperValue) {
+    updateHelperHint(helperValue) {
+        const previousHelperHint = this.helperValue ? DateHelper.getLabel(this.helperValue) : '';
+        if (!this.hint || previousHelperHint !== this.hint) {
             this.previousHint = this.hint;
             this.previousPersistentHint = this.persistentHint;
-            this.hint = DateHelper.getLabel(this.helperValue);
-            this.persistentHint = true;
         }
+        this.helperValue = helperValue;
+        const label = DateHelper.getLabel(helperValue);
+        if (!helperValue || !label) {
+            this.hint = this.previousHint;
+            this.persistentHint = this.previousPersistentHint;
+            return;
+        }
+        this.hint = label;
+        this.persistentHint = true;
     }
     change(event, element) {
         super.change(event, element);
-        this.helperValue = '';
-        this.hint = this.previousHint;
-        this.persistentHint = this.previousPersistentHint;
+        this.updateHelperHint('');
     }
     getMaskValue() {
         let mask = '';
@@ -4525,6 +4562,7 @@ class Frame extends ComponentRender {
         this.overrideNamedProps = {};
         this.path = '';
         this.cache = false;
+        this.JSONCache = false;
         this.cacheDuration = 2 * 60 * 60 * 1000;
         this.height = 'auto';
         this.maxHeight = 'none';
@@ -4536,6 +4574,7 @@ class Frame extends ComponentRender {
         this.override = props.override || this.override;
         this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
         this.cache = props.cache || this.cache;
+        this.JSONCache = this.getInitValue('JSONCache', props.JSONCache, this.JSONCache);
         this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
         this.height = this.getInitValue('height', props.height, this.height);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
@@ -4547,8 +4586,18 @@ class Frame extends ComponentRender {
     }
     getMetadata() {
         return __awaiter(this, void 0, void 0, function* () {
+            let page;
             try {
-                const page = yield this.requestPage();
+                if (this.JSONCache) {
+                    page = JsonCacheService.getJSONCache(this.path);
+                    if (page === false) {
+                        yield JsonCacheService.saveJSONCache([{ path: this.path }]);
+                        page = yield this.requestPage();
+                    }
+                }
+                else {
+                    page = yield this.requestPage();
+                }
                 if (typeof page !== 'object')
                     throw new Error();
                 this.metadata = merge(page, this.override);
@@ -7871,6 +7920,10 @@ class Menu extends ComponentRender {
          * Defines if the menu is an application menu
          */
         this.app = false;
+        /**
+         * Defines if the menu must be rendered inside an absolute div
+         */
+        this.absolute = false;
         /**
          * Defines if the menu should rests under the application toolbar
          */
@@ -7964,6 +8017,7 @@ class Menu extends ComponentRender {
         /** Store the current item focused */
         this.currentItem = null;
         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);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.floating = this.getInitValue('floating', props.floating, this.floating);
@@ -9230,6 +9284,7 @@ class TreeDataStructure {
         this.parentField = tree.parentField;
         this.fetchOnDemand = tree.fetchOnDemand;
         this.openLevelOnLoad = tree.openLevelOnLoad;
+        this.tree = tree;
         this.init();
     }
     /**
@@ -9249,20 +9304,20 @@ class TreeDataStructure {
             this.searchValue = this.originalDatasource.search;
             this.searchHasNoData = false;
             if (this.fetchOnDemand) {
-                if (this.originalDatasource.search) {
+                if (this.tree.detach || this.originalDatasource.search) {
                     delete this.originalDatasource.filter[this.parentField];
                 }
                 else if (!this.originalDatasource.filter[this.parentField]) {
                     this.originalDatasource.filter[this.parentField] = 'NULL';
                 }
             }
-            if (!this.fetchOnDemand && this.searchValue) {
+            if (!this.tree.detach && !this.fetchOnDemand && this.searchValue) {
                 this.searchAllData();
                 return Promise.resolve(this.originalDatasource.data);
             }
             return originalGet.call(this.originalDatasource).then((data) => {
                 if (this.searchValue) {
-                    this.searchOnDemand();
+                    this.buildDetached();
                 }
                 else {
                     this.buildTree();
@@ -9275,7 +9330,10 @@ class TreeDataStructure {
      * search data
      */
     buildTree() {
-        if (this.fetchOnDemand) {
+        if (this.tree.detach) {
+            this.buildDetached();
+        }
+        else if (this.fetchOnDemand) {
             this.buildOnDemand();
         }
         else {
@@ -9528,13 +9586,12 @@ class TreeDataStructure {
         });
     }
     /**
-     * Search tree with fetchOnDemand
-     * @param data datasource data
+     * Arrange treeData in a uniform structure
      */
-    searchOnDemand() {
+    buildDetached() {
         this.treeData = [];
         this.treeStructure = {};
-        const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: true, tree__level: 1, tree__parent: undefined })));
+        const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: !!this.searchValue, tree__level: 1, tree__parent: undefined })));
         this.treeData = childData;
         this.treeStructure['no-parent'] = childData;
     }
@@ -10999,11 +11056,15 @@ class Tooltip extends ComponentRender {
          */
         this.nudge = 0;
         /**
-         * Nudge the content to the top
+         * Open the tooltip on activator click
          */
         this.openOnClick = false;
         /**
-         * Nudge the content to the top
+         * Open the tooltip on activator focus
+         */
+        this.openOnFocus = true;
+        /**
+         * Open the tooltip on activator hover
          */
         this.openOnHover = true;
         /**
@@ -11023,6 +11084,7 @@ class Tooltip extends ComponentRender {
         this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
         this.nudge = this.getInitValue('nudge', props.nudge, this.nudge);
         this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+        this.openOnFocus = this.getInitValue('openOnFocus', props.openOnFocus, this.openOnFocus);
         this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
         this.right = this.getInitValue('right', props.right, this.right);
         this.top = this.getInitValue('top', props.top, this.top);
@@ -11452,6 +11514,10 @@ class TreeGrid extends Grid {
          * Even though all children are selected, the parent node is not
          */
         this.flat = false;
+        /**
+         * Display the rows detached from their parents
+         */
+        this.detach = false;
         this.navigationTreeKeyMapping = {
             right: {
                 event: this.navigateToggle.bind(this, false),
@@ -11469,6 +11535,7 @@ class TreeGrid extends Grid {
         this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
         this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
         this.flat = this.getInitValue('flat', props.flat, this.flat);
+        this.detach = this.getInitValue('detach', props.detach, this.detach);
         this.treeDataStructure = new TreeDataStructure(this);
         this.createAccessors();
     }
@@ -11483,17 +11550,15 @@ class TreeGrid extends Grid {
      * Build tree data
      */
     buildTree(doGet = true) {
-        if (doGet) {
-            if (this.fetchOnDemand) {
-                this.datasource.addFilter(this.parentField, 'NULL');
-            }
-            else {
-                this.datasource.get();
-            }
-        }
-        else {
+        if (!doGet) {
             this.treeDataStructure.buildTree();
+            return;
+        }
+        if (!this.fetchOnDemand) {
+            this.datasource.get();
+            return;
         }
+        this.datasource.addFilter(this.parentField, 'NULL');
     }
     /**
      * This function takes an array of objects and updates the data in the tree.
@@ -13299,4 +13364,4 @@ const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };
+export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, JsonCacheService, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };

package/dist/zd-common.umd.js

@@ -30,6 +30,10 @@
        * @param props Components properties
        */
       constructor(props) {
+          /**
+           * Automatically add focus to input when it's created.
+           */
+          this.autofocus = false;
           /**
            * Children component structure if the component has children.
            */
@@ -84,6 +88,7 @@
           this.parent = props.parent;
           this.name = props.name;
           this.events = core.Event.factory(props.events || this.events);
+          this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
           this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
           this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
           this.directives = this.getInitValue('directives', props.directives, this.directives);
@@ -1619,10 +1624,6 @@
            * Input auto complete.
            */
           this.autofill = true;
-          /**
-           * Automatically add focus to input when it's created.
-           */
-          this.autofocus = false;
           /**
            * Add input clear functionality if the input isn't readonly or disabled.
            */
@@ -1711,7 +1712,6 @@
           this.align = this.getInitValue('align', props.align, this.align);
           this.alwaysShowError = this.getInitValue('alwaysShowError', props.alwaysShowError, this.alwaysShowError);
           this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-          this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
           this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
           this.color = this.getInitValue('color', props.color, this.color);
           this.dense = this.getInitValue('dense', props.dense, this.dense);
@@ -2955,6 +2955,37 @@
       }
   }
 
+  class JsonCacheService {
+      static saveJSONCache(jsonCollection) {
+          return __awaiter(this, void 0, void 0, function* () {
+              const jsonCollectionInCache = jsonCollection.map((jsonItem) => __awaiter(this, void 0, void 0, function* () {
+                  const { path } = jsonItem;
+                  const metadata = yield core.Metadata.get(path, true);
+                  localStorage.setItem(path, JSON.stringify(metadata));
+              }));
+              yield Promise.all(jsonCollectionInCache);
+          });
+      }
+      static getJSONCache(path) {
+          const getMetadaFromCache = localStorage.getItem(path);
+          let metadataValueReturn = false;
+          if (typeof getMetadaFromCache === 'string') {
+              metadataValueReturn = JSON.parse(getMetadaFromCache);
+          }
+          return metadataValueReturn;
+      }
+      static clearJSONCache(jsonCollection) {
+          jsonCollection.map((jsonItem) => __awaiter(this, void 0, void 0, function* () {
+              const { path } = jsonItem;
+              localStorage.removeItem(path);
+          }));
+      }
+  }
+  /**
+   * jsons collection
+   */
+  JsonCacheService.jsonCollection = [];
+
   /**
    * Base class for Dashboard component.
    */
@@ -4049,19 +4080,25 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
-      updateHelperHint() {
-          if (this.helperValue) {
+      updateHelperHint(helperValue) {
+          const previousHelperHint = this.helperValue ? core.DateHelper.getLabel(this.helperValue) : '';
+          if (!this.hint || previousHelperHint !== this.hint) {
               this.previousHint = this.hint;
               this.previousPersistentHint = this.persistentHint;
-              this.hint = core.DateHelper.getLabel(this.helperValue);
-              this.persistentHint = true;
           }
+          this.helperValue = helperValue;
+          const label = core.DateHelper.getLabel(helperValue);
+          if (!helperValue || !label) {
+              this.hint = this.previousHint;
+              this.persistentHint = this.previousPersistentHint;
+              return;
+          }
+          this.hint = label;
+          this.persistentHint = true;
       }
       change(event, element) {
           super.change(event, element);
-          this.helperValue = '';
-          this.hint = this.previousHint;
-          this.persistentHint = this.previousPersistentHint;
+          this.updateHelperHint('');
       }
       getMaskValue() {
           let mask = '';
@@ -4532,6 +4569,7 @@
           this.overrideNamedProps = {};
           this.path = '';
           this.cache = false;
+          this.JSONCache = false;
           this.cacheDuration = 2 * 60 * 60 * 1000;
           this.height = 'auto';
           this.maxHeight = 'none';
@@ -4543,6 +4581,7 @@
           this.override = props.override || this.override;
           this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
           this.cache = props.cache || this.cache;
+          this.JSONCache = this.getInitValue('JSONCache', props.JSONCache, this.JSONCache);
           this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
           this.height = this.getInitValue('height', props.height, this.height);
           this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
@@ -4554,8 +4593,18 @@
       }
       getMetadata() {
           return __awaiter(this, void 0, void 0, function* () {
+              let page;
               try {
-                  const page = yield this.requestPage();
+                  if (this.JSONCache) {
+                      page = JsonCacheService.getJSONCache(this.path);
+                      if (page === false) {
+                          yield JsonCacheService.saveJSONCache([{ path: this.path }]);
+                          page = yield this.requestPage();
+                      }
+                  }
+                  else {
+                      page = yield this.requestPage();
+                  }
                   if (typeof page !== 'object')
                       throw new Error();
                   this.metadata = merge__default["default"](page, this.override);
@@ -7878,6 +7927,10 @@
            * Defines if the menu is an application menu
            */
           this.app = false;
+          /**
+           * Defines if the menu must be rendered inside an absolute div
+           */
+          this.absolute = false;
           /**
            * Defines if the menu should rests under the application toolbar
            */
@@ -7971,6 +8024,7 @@
           /** Store the current item focused */
           this.currentItem = null;
           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);
           this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
           this.floating = this.getInitValue('floating', props.floating, this.floating);
@@ -9237,6 +9291,7 @@
           this.parentField = tree.parentField;
           this.fetchOnDemand = tree.fetchOnDemand;
           this.openLevelOnLoad = tree.openLevelOnLoad;
+          this.tree = tree;
           this.init();
       }
       /**
@@ -9256,20 +9311,20 @@
               this.searchValue = this.originalDatasource.search;
               this.searchHasNoData = false;
               if (this.fetchOnDemand) {
-                  if (this.originalDatasource.search) {
+                  if (this.tree.detach || this.originalDatasource.search) {
                       delete this.originalDatasource.filter[this.parentField];
                   }
                   else if (!this.originalDatasource.filter[this.parentField]) {
                       this.originalDatasource.filter[this.parentField] = 'NULL';
                   }
               }
-              if (!this.fetchOnDemand && this.searchValue) {
+              if (!this.tree.detach && !this.fetchOnDemand && this.searchValue) {
                   this.searchAllData();
                   return Promise.resolve(this.originalDatasource.data);
               }
               return originalGet.call(this.originalDatasource).then((data) => {
                   if (this.searchValue) {
-                      this.searchOnDemand();
+                      this.buildDetached();
                   }
                   else {
                       this.buildTree();
@@ -9282,7 +9337,10 @@
        * search data
        */
       buildTree() {
-          if (this.fetchOnDemand) {
+          if (this.tree.detach) {
+              this.buildDetached();
+          }
+          else if (this.fetchOnDemand) {
               this.buildOnDemand();
           }
           else {
@@ -9535,13 +9593,12 @@
           });
       }
       /**
-       * Search tree with fetchOnDemand
-       * @param data datasource data
+       * Arrange treeData in a uniform structure
        */
-      searchOnDemand() {
+      buildDetached() {
           this.treeData = [];
           this.treeStructure = {};
-          const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: true, tree__level: 1, tree__parent: undefined })));
+          const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: !!this.searchValue, tree__level: 1, tree__parent: undefined })));
           this.treeData = childData;
           this.treeStructure['no-parent'] = childData;
       }
@@ -11006,11 +11063,15 @@
            */
           this.nudge = 0;
           /**
-           * Nudge the content to the top
+           * Open the tooltip on activator click
            */
           this.openOnClick = false;
           /**
-           * Nudge the content to the top
+           * Open the tooltip on activator focus
+           */
+          this.openOnFocus = true;
+          /**
+           * Open the tooltip on activator hover
            */
           this.openOnHover = true;
           /**
@@ -11030,6 +11091,7 @@
           this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
           this.nudge = this.getInitValue('nudge', props.nudge, this.nudge);
           this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+          this.openOnFocus = this.getInitValue('openOnFocus', props.openOnFocus, this.openOnFocus);
           this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
           this.right = this.getInitValue('right', props.right, this.right);
           this.top = this.getInitValue('top', props.top, this.top);
@@ -11459,6 +11521,10 @@
            * Even though all children are selected, the parent node is not
            */
           this.flat = false;
+          /**
+           * Display the rows detached from their parents
+           */
+          this.detach = false;
           this.navigationTreeKeyMapping = {
               right: {
                   event: this.navigateToggle.bind(this, false),
@@ -11476,6 +11542,7 @@
           this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
           this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
           this.flat = this.getInitValue('flat', props.flat, this.flat);
+          this.detach = this.getInitValue('detach', props.detach, this.detach);
           this.treeDataStructure = new TreeDataStructure(this);
           this.createAccessors();
       }
@@ -11490,17 +11557,15 @@
        * Build tree data
        */
       buildTree(doGet = true) {
-          if (doGet) {
-              if (this.fetchOnDemand) {
-                  this.datasource.addFilter(this.parentField, 'NULL');
-              }
-              else {
-                  this.datasource.get();
-              }
-          }
-          else {
+          if (!doGet) {
               this.treeDataStructure.buildTree();
+              return;
+          }
+          if (!this.fetchOnDemand) {
+              this.datasource.get();
+              return;
           }
+          this.datasource.addFilter(this.parentField, 'NULL');
       }
       /**
        * This function takes an array of objects and updates the data in the tree.
@@ -13360,6 +13425,7 @@
   exports.IterablePageInfo = IterablePageInfo;
   exports.IterablePageSize = IterablePageSize;
   exports.IterablePagination = IterablePagination;
+  exports.JsonCacheService = JsonCacheService;
   exports.List = List;
   exports.ListGroup = ListGroup;
   exports.ListItem = ListItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.66.0",
+  "version": "1.68.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -39,5 +39,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "e7d698eaa1de2b4158b12f383ffddd2707b31340"
+  "gitHead": "84cc6c01ee3c9aab7566b333f73e2aac50ad5c4f"
 }

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

@@ -4,6 +4,10 @@ import { IComponent, IComponentDirectives, IComponentEvents } from './interfaces
  * Base class for all Zeedhi components.
  */
 export declare class Component implements IComponent {
+    /**
+     * Automatically add focus to input when it's created.
+     */
+    autofocus: boolean;
     /**
      * Children component structure if the component has children.
      */

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

@@ -7,6 +7,7 @@ export interface IPropAccessor {
     };
 }
 export interface IComponent {
+    autofocus?: boolean;
     children?: IComponent[];
     componentId?: number;
     cssClass?: string;

package/types/components/zd-date/date-range.d.ts

@@ -127,7 +127,7 @@ export declare class DateRange extends TextInput implements IDateRange {
     protected isSimpleFormat(format: string): boolean;
     private previousHint;
     private previousPersistentHint;
-    updateHelperHint(): void;
+    updateHelperHint(helperValue: string): void;
     change(event?: Event, element?: any): void;
     getMaskValue(): any;
 }

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

@@ -71,12 +71,16 @@ export declare class Form extends ComponentRender implements IForm {
         [key: string]: any;
         children?: import("..").IComponentRender[] | undefined;
         component: string;
+        autofocus?: boolean | undefined;
         componentId?: number | undefined;
         cssClass?: string | undefined;
         cssStyle?: string | object | undefined;
         events?: import("..").IComponentEvents<import("@zeedhi/core").IEventParam<any>> | undefined;
         directives?: import("..").IComponentDirectives | undefined;
-        isVisible?: string | boolean | undefined;
+        isVisible?: string | boolean | undefined; /**
+         * Applies the align-items css property.
+         * Available options are start, center, end, space-between, space-around and stretch.
+         */
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;

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

@@ -12,6 +12,7 @@ export declare class Frame extends ComponentRender implements IFrame {
     overrideNamedProps: any;
     path: string;
     cache: boolean;
+    JSONCache: boolean | string;
     events: IFrameEvents;
     cacheDuration: number;
     height: number | string;

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

@@ -12,6 +12,7 @@ export interface IFrame extends IComponentRender {
     params?: any;
     overrideNamedProps?: any;
     cache?: boolean;
+    JSONCache?: boolean | string;
     cacheDuration?: number;
     height?: number | string;
     maxHeight?: number | string;

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

@@ -18,6 +18,7 @@ export declare class GridColumn extends Column implements IGridColumn {
         [key: string]: any;
         children?: import("..").IComponentRender[] | undefined;
         component: string;
+        autofocus?: boolean | undefined;
         componentId?: number | undefined;
         cssClass?: string | undefined;
         cssStyle?: string | object | undefined;
@@ -27,10 +28,7 @@ export declare class GridColumn extends Column implements IGridColumn {
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;
-        name: string; /**
-         * Creates a new Grid Column.
-         * @param props Grid column properties
-         */
+        name: string;
         parent?: import("..").Component | undefined;
         tabStop?: boolean | undefined;
     }[];

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

@@ -17,10 +17,6 @@ export declare class Input extends ComponentRender implements IInput {
      * Input auto complete.
      */
     autofill: boolean;
-    /**
-     * Automatically add focus to input when it's created.
-     */
-    autofocus: boolean;
     /**
      * Add input clear functionality if the input isn't readonly or disabled.
      */

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

@@ -12,7 +12,6 @@ export interface IInput extends IComponentRender {
     align?: string;
     alwaysShowError?: boolean;
     autofill?: boolean;
-    autofocus?: boolean;
     clearable?: boolean;
     color?: string;
     dark?: boolean;

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

@@ -9,6 +9,7 @@ export declare type IMenuLinkEvents = IComponentEvents<IMenuLinkEvent>;
  */
 export interface IMenu extends IComponentRender {
     app?: boolean | string;
+    absolute?: boolean | string;
     clipped?: boolean | string;
     dense?: boolean | string;
     fixed?: boolean | string;

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

@@ -9,6 +9,10 @@ export declare class Menu extends ComponentRender implements IMenu {
      * Defines if the menu is an application menu
      */
     app: boolean | string;
+    /**
+     * Defines if the menu must be rendered inside an absolute div
+     */
+    absolute: boolean | string;
     /**
      * Defines if the menu should rests under the application toolbar
      */

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

@@ -12,6 +12,7 @@ export interface ITooltip extends IComponentRender {
     minWidth?: number | string;
     nudge?: number | string;
     openOnClick?: boolean;
+    openOnFocus?: boolean;
     openOnHover?: boolean;
     right?: boolean;
     top?: boolean;

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

@@ -34,11 +34,15 @@ export declare class Tooltip extends ComponentRender implements ITooltip {
      */
     nudge: number | string;
     /**
-     * Nudge the content to the top
+     * Open the tooltip on activator click
      */
     openOnClick: boolean;
     /**
-     * Nudge the content to the top
+     * Open the tooltip on activator focus
+     */
+    openOnFocus: boolean;
+    /**
+     * Open the tooltip on activator hover
      */
     openOnHover: boolean;
     /**

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

@@ -6,6 +6,7 @@ export interface ITreeGrid extends IGrid {
     openLevelOnLoad?: number | boolean;
     fetchOnDemand?: boolean;
     flat?: boolean;
+    detach?: boolean;
 }
 export interface ITreeGridEditable extends ITreeGrid {
     columns?: IGridColumnEditable[];

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

@@ -35,6 +35,10 @@ export declare class TreeGrid extends Grid implements ITreeGrid {
      * Even though all children are selected, the parent node is not
      */
     flat: boolean;
+    /**
+     * Display the rows detached from their parents
+     */
+    detach: boolean;
     viewUpdateScrollData?: () => void;
     /**
      * Creates a new Tree Grid.

package/types/services/index.d.ts

@@ -2,3 +2,4 @@ export * from './zd-alert/alert-service';
 export * from './zd-dialog/dialog-service';
 export * from './zd-modal/modal-service';
 export * from './zd-loading/loading-service';
+export * from './zd-json-cache/json-cache-service';

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;
+}

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

@@ -4,4 +4,5 @@ export interface ITreeDataStructure {
     parentField: string;
     openLevelOnLoad: number | boolean;
     fetchOnDemand: boolean;
+    detach?: boolean;
 }

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

@@ -29,6 +29,10 @@ export declare class TreeDataStructure {
      * Stores tree structure
      */
     private treeStructure;
+    /**
+     * Tree component
+     */
+    private tree;
     constructor(tree: ITreeDataStructure);
     /**
      * Creates properties and methods
@@ -122,10 +126,9 @@ export declare class TreeDataStructure {
      */
     private reloadAndUpdateSelectedRows;
     /**
-     * Search tree with fetchOnDemand
-     * @param data datasource data
+     * Arrange treeData in a uniform structure
      */
-    private searchOnDemand;
+    buildDetached(): void;
     /**
      * Search value against a memory datasource
      */