@zeedhi/common 1.79.0 → 1.80.0

package/dist/zd-common.esm.js

@@ -1,5 +1,6 @@
-import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, DateHelper, Utils, Router, InstanceNotFoundError, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, MemoryDatasource, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
+import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
 import set from 'lodash.set';
@@ -526,6 +527,7 @@ class ApexChart extends ComponentRender {
                 },
             },
         };
+        this.drillHistory = [];
         this.chartType = this.getInitValue('chartType', props.chartType, this.chartType);
         this.options = merge(this.defaultOptions, this.getInitValue('options', this.translateOptions(props.options), this.options));
         this.series = this.getInitValue('series', this.translateSeries(props.series), this.series);
@@ -625,7 +627,11 @@ class ApexChart extends ComponentRender {
      */
     updateChart(options) {
         merge(this.options, options);
+        if (options.labels) {
+            this.options.labels = options.labels;
+        }
         if (options.series) {
+            this.options.series = options.series;
             this.series = this.options.series;
         }
         if (this.viewUpdate) {
@@ -879,6 +885,20 @@ class ApexChart extends ComponentRender {
         }
         return newOptions;
     }
+    drillDown(options) {
+        this.drillHistory.push(cloneDeep(this.options));
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(this.updateChart(options));
+            }, 200);
+        });
+    }
+    drillUp() {
+        if (this.drillHistory.length === 0)
+            return Promise.resolve();
+        const options = this.drillHistory.pop();
+        return this.updateChart(options);
+    }
 }
 
 /**
@@ -3726,6 +3746,14 @@ class Date$1 extends TextInput {
          * Helper value.
          */
         this.helperValue = '';
+        /**
+         * Max value allowed.
+         */
+        this.max = '';
+        /**
+         * Min value allowed.
+         */
+        this.min = '';
         /**
          * Width of the picker.
          */
@@ -3753,6 +3781,8 @@ class Date$1 extends TextInput {
         this.pickerType = this.getInitValue('pickerType', props.pickerType, this.pickerType);
         this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
         this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+        this.min = this.getInitValue('min', props.min, this.min);
+        this.max = this.getInitValue('max', props.max, this.max);
         this.width = this.getInitValue('width', props.width, this.width);
         this.mask = this.getInitValue('mask', props.mask, undefined);
         this.createAccessors();
@@ -3836,6 +3866,28 @@ class Date$1 extends TextInput {
         this.value = this.internalValue; // forces value accessor to be called if necessary
     }
     isValidDate(value, format, strict = true) {
+        const date = dayjs(value, format, strict);
+        const isValidFormat = date.isValid();
+        if (!isValidFormat)
+            return false;
+        const minDate = this.min ? dayjs(this.min, this.dateFormat) : null;
+        const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+        if (!isValidMin)
+            return false;
+        const maxDate = this.max ? dayjs(this.max, this.dateFormat) : null;
+        const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+        if (!isValidMax)
+            return false;
+        const isAllowedDate = this.allowedDates === undefined
+            || (this.allowedDates instanceof Function
+                && this.allowedDates(dayjs(value, format).format(this.dateFormat)))
+            || (Array.isArray(this.allowedDates)
+                && this.allowedDates.indexOf(dayjs(value, format).format(this.dateFormat)) !== -1);
+        if (!isAllowedDate)
+            return false;
+        return true;
+    }
+    isValidFormatDate(value, format, strict = true) {
         return dayjs(value, format, strict).isValid();
     }
     get isoValue() {
@@ -3849,13 +3901,13 @@ class Date$1 extends TextInput {
             this.change(this.value);
     }
     formatISODateValue(value) {
-        if (value && this.isValidDate(value, this.dateFormat)) {
+        if (value && this.isValidFormatDate(value, this.dateFormat)) {
             return dayjs(value, this.dateFormat).format(this.isoFormat);
         }
         return '';
     }
     parseISODateValue(value) {
-        if (value && this.isValidDate(value, this.isoFormat)) {
+        if (value && this.isValidFormatDate(value, this.isoFormat)) {
             return dayjs(value, this.isoFormat).format(this.dateFormat);
         }
         return null;
@@ -3874,7 +3926,9 @@ class Date$1 extends TextInput {
         this.removeDateMask();
         this.setDateValue(this.formatter(this.value));
         super.blur(event, element);
-        this.showDatePicker = false;
+        if (!Utils.isMobile()) {
+            this.showDatePicker = false;
+        }
     }
     focus(event, element) {
         this.addDateMask();
@@ -4078,6 +4132,14 @@ class DateRange extends TextInput {
          * Helper options.
          */
         this.helperOptions = [];
+        /**
+          * Max value allowed.
+          */
+        this.max = '';
+        /**
+          * Min value allowed.
+          */
+        this.min = '';
         /**
          * Helper value.
          */
@@ -4105,6 +4167,8 @@ class DateRange extends TextInput {
         this.mask = this.getInitValue('mask', props.mask, undefined);
         this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
         this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+        this.min = this.getInitValue('min', props.min, this.min);
+        this.max = this.getInitValue('max', props.max, this.max);
         this.createAccessors();
         this.unitMask = this.mask;
         this.initialMask = this.getInitialMask();
@@ -4201,6 +4265,21 @@ class DateRange extends TextInput {
         return [value];
     }
     isValidDate(value, format, strict = true) {
+        const date = dayjs(value, format, strict);
+        const isValidFormat = date.isValid();
+        if (!isValidFormat)
+            return false;
+        const minDate = this.min ? dayjs(this.min, this.dateFormat) : null;
+        const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+        if (!isValidMin)
+            return false;
+        const maxDate = this.max ? dayjs(this.max, this.dateFormat) : null;
+        const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+        if (!isValidMax)
+            return false;
+        return true;
+    }
+    isValidFormatDate(value, format, strict = true) {
         return dayjs(value, format, strict).isValid();
     }
     get isoRangeValue() {
@@ -4221,7 +4300,7 @@ class DateRange extends TextInput {
             splitedValue = this.splitValues(dates);
         const formattedValue = [];
         splitedValue.forEach((value) => {
-            if (value && this.isValidDate(value, this.dateFormat)) {
+            if (value && this.isValidFormatDate(value, this.dateFormat)) {
                 formattedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
             }
         });
@@ -4231,7 +4310,7 @@ class DateRange extends TextInput {
         const parsedValue = [];
         if (values.length) {
             values.forEach((value) => {
-                if (value && this.isValidDate(value, this.isoFormat)) {
+                if (value && this.isValidFormatDate(value, this.isoFormat)) {
                     parsedValue.push(dayjs(value, this.isoFormat, true).format(this.dateFormat));
                 }
             });
@@ -4257,6 +4336,8 @@ class DateRange extends TextInput {
             this.removeDateMask();
             this.setDateValue(this.formatter(this.value));
             super.blur(event, element);
+        }
+        if (!Utils.isMobile()) {
             this.showDatePicker = false;
         }
     }
@@ -4890,6 +4971,7 @@ class Frame extends ComponentRender {
     overrideNamedPropsFunc(metadata) {
         let strMetadata = JSON.stringify(metadata);
         Object.keys(this.overrideNamedProps).forEach((key) => {
+            strMetadata = strMetadata.replace(RegExp(`"<<${key}>>"`, 'g'), JSON.stringify(this.overrideNamedProps[key]));
             strMetadata = strMetadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
         });
         return JSON.parse(strMetadata);
@@ -6501,7 +6583,13 @@ class GridEditable extends Grid {
      */
     addNewRow(row, position = 'end') {
         return __awaiter(this, void 0, void 0, function* () {
-            const { data } = this.datasource;
+            let data;
+            if (this.datasource instanceof MemoryDatasource) {
+                data = this.datasource.allData;
+            }
+            else {
+                data = this.datasource.data;
+            }
             row[this.newRowIdentifier] = true;
             if (position === 'start') {
                 data.unshift(row);
@@ -7114,6 +7202,10 @@ class Select extends TextInput {
          * Defines if data handling should be manual or automatic
          */
         this.manualMode = false;
+        /**
+         * Specifies which DOM element that this component should detach to.
+         */
+        this.attach = false;
         /**
          * Defines if data handling should be manual or automatic
          */
@@ -7158,6 +7250,7 @@ class Select extends TextInput {
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
         this.manualMode = this.getInitValue('manualMode', props.manualMode, this.manualMode);
+        this.attach = this.getInitValue('attach', props.attach, this.attach);
         this.searchParam = this.getInitValue('searchParam', props.searchParam, this.searchParam);
         if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
             this.dataValue = 'value';
@@ -9800,11 +9893,13 @@ class TreeDataStructure {
          * Stores tree structure
          */
         this.treeStructure = {};
+        this.fieldHasChild = '';
         this.searchValue = '';
         this.originalDatasource = tree.datasource;
         this.parentField = tree.parentField;
         this.fetchOnDemand = tree.fetchOnDemand;
         this.openLevelOnLoad = tree.openLevelOnLoad;
+        this.fieldHasChild = tree.fieldHasChild;
         this.tree = tree;
         this.init();
     }
@@ -10166,6 +10261,33 @@ class TreeDataStructure {
         });
         return result;
     }
+    /**
+     * Checks if a row has async children that are yet to be loaded
+     * @param row
+     * @returns `false` if the row has no children to be loaded, `true` if it does or if fieldHasChild is not defined
+     */
+    hasChildOnDemand(row) {
+        if (!this.fieldHasChild)
+            return true;
+        const rowHasChild = row[this.fieldHasChild];
+        let isVisibleChevron = true;
+        switch (rowHasChild) {
+            case '0':
+            case false:
+            case 0:
+                isVisibleChevron = false;
+                break;
+            case '1':
+            case true:
+            case 1:
+                isVisibleChevron = true;
+                break;
+            default:
+                isVisibleChevron = true;
+                break;
+        }
+        return isVisibleChevron;
+    }
 }
 
 /**
@@ -10258,6 +10380,10 @@ class SelectTree extends TextInput {
          * Uses delayed loading to load tree branches
          */
         this.fetchOnDemand = false;
+        /**
+         * Defines if the node tree has child
+         */
+        this.fieldHasChild = '';
         this.savedNodes = undefined;
         this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
         this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
@@ -10278,6 +10404,7 @@ class SelectTree extends TextInput {
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
         this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
         this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
+        this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
         this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
         if (props.datasource && Object.keys(props.datasource).length) {
             this.lazyLoad = props.datasource.lazyLoad !== false;
@@ -10316,6 +10443,7 @@ class SelectTree extends TextInput {
             parentField: this.parentField,
             openLevelOnLoad: false,
             fetchOnDemand: this.fetchOnDemand,
+            fieldHasChild: this.fieldHasChild,
         });
         if (!this.lazyLoad) {
             this.datasource.get().then(() => { this.createNodesFromDatasource(false); });
@@ -10446,7 +10574,14 @@ class SelectTree extends TextInput {
         return this.disabledItems.indexOf(node.id) !== -1;
     }
     getDisabledNodes(nodes) {
-        return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : node.children })));
+        return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: this.getNodeChildren(node) })));
+    }
+    getNodeChildren(node) {
+        if (node.children)
+            return this.getDisabledNodes(node.children);
+        if (!this.fieldHasChild || !this.treeDataStructure)
+            return node.children;
+        return node.row && this.treeDataStructure.hasChildOnDemand(node.row) ? null : undefined;
     }
     getNodes() {
         return this.getDisabledNodes(this.nodes);
@@ -10464,6 +10599,9 @@ class SelectTree extends TextInput {
         });
         return !hasError;
     }
+    resetValidation() {
+        this.validationError = '';
+    }
     /**
      * Triggered when the data is inputed.
      * @param value search value
@@ -11108,12 +11246,17 @@ class Tabs extends ComponentRender {
          * Set component height to fill all space available
          */
         this.fillHeight = false;
+        /**
+         * Disable touch support.
+         */
+        this.touchless = false;
         this.tabs = this.getTabs(props.tabs || []);
         this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
         this.height = this.getInitValue('height', props.height, this.height);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.touchless = this.getInitValue('touchless', props.touchless, this.touchless);
         this.createAccessors();
     }
     get activeTab() {
@@ -11219,6 +11362,7 @@ class Text extends ComponentRender {
         this.compile = props.compile === true;
         this.tag = this.getInitValue('tag', props.tag, this.tag);
         this.text = this.getInitValue('text', props.text, this.text);
+        this.textResize = this.getInitValue('textResize', props.textResize, this.textResize);
         this.createAccessors();
     }
 }
@@ -11577,7 +11721,6 @@ class Time extends TextInput {
         this.removeTimeMask();
         this.setTimeValue(this.formatter(this.value));
         super.blur(event, element);
-        this.showTimePicker = false;
     }
     focus(event, element) {
         this.addTimeMask();
@@ -12926,6 +13069,8 @@ class Icons {
 }
 Icons.mdiIcons = {
     alertOctagon: 'mdi-alert-octagon',
+    arrowLeft: 'mdi-arrow-left',
+    arrowRight: 'mdi-arrow-right',
     cancel: 'mdi-close-circle',
     calendar: 'mdi-calendar',
     checkboxIndeterminate: 'mdi-minus-box',
@@ -12983,6 +13128,8 @@ Icons.mdiIcons = {
 };
 Icons.faIcons = {
     alertOctagon: 'fa fa-exclamation-circle',
+    arrowLeft: 'fa fa-arrow-left',
+    arrowRight: 'fa fa-arrow-right',
     cancel: 'fa fa-times-circle',
     calendar: 'fa fa-calendar-o',
     checkboxIndeterminate: 'fa fa-minus-square',

package/dist/zd-common.umd.js

@@ -1,12 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set'), require('lodash.get')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.debounce', 'lodash.isundefined', 'lodash.set', 'lodash.get'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.debounce, global.isUndefined, global.set, global.get));
-})(this, (function (exports, core, merge, debounce, isUndefined, set, get) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.clonedeep'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set'), require('lodash.get')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.clonedeep', 'lodash.debounce', 'lodash.isundefined', 'lodash.set', 'lodash.get'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.cloneDeep, global.debounce, global.isUndefined, global.set, global.get));
+})(this, (function (exports, core, merge, cloneDeep, debounce, isUndefined, set, get) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
+  var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);
   var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
@@ -533,6 +534,7 @@
                   },
               },
           };
+          this.drillHistory = [];
           this.chartType = this.getInitValue('chartType', props.chartType, this.chartType);
           this.options = merge__default["default"](this.defaultOptions, this.getInitValue('options', this.translateOptions(props.options), this.options));
           this.series = this.getInitValue('series', this.translateSeries(props.series), this.series);
@@ -632,7 +634,11 @@
        */
       updateChart(options) {
           merge__default["default"](this.options, options);
+          if (options.labels) {
+              this.options.labels = options.labels;
+          }
           if (options.series) {
+              this.options.series = options.series;
               this.series = this.options.series;
           }
           if (this.viewUpdate) {
@@ -886,6 +892,20 @@
           }
           return newOptions;
       }
+      drillDown(options) {
+          this.drillHistory.push(cloneDeep__default["default"](this.options));
+          return new Promise((resolve) => {
+              setTimeout(() => {
+                  resolve(this.updateChart(options));
+              }, 200);
+          });
+      }
+      drillUp() {
+          if (this.drillHistory.length === 0)
+              return Promise.resolve();
+          const options = this.drillHistory.pop();
+          return this.updateChart(options);
+      }
   }
 
   /**
@@ -3733,6 +3753,14 @@
            * Helper value.
            */
           this.helperValue = '';
+          /**
+           * Max value allowed.
+           */
+          this.max = '';
+          /**
+           * Min value allowed.
+           */
+          this.min = '';
           /**
            * Width of the picker.
            */
@@ -3760,6 +3788,8 @@
           this.pickerType = this.getInitValue('pickerType', props.pickerType, this.pickerType);
           this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
           this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+          this.min = this.getInitValue('min', props.min, this.min);
+          this.max = this.getInitValue('max', props.max, this.max);
           this.width = this.getInitValue('width', props.width, this.width);
           this.mask = this.getInitValue('mask', props.mask, undefined);
           this.createAccessors();
@@ -3843,6 +3873,28 @@
           this.value = this.internalValue; // forces value accessor to be called if necessary
       }
       isValidDate(value, format, strict = true) {
+          const date = core.dayjs(value, format, strict);
+          const isValidFormat = date.isValid();
+          if (!isValidFormat)
+              return false;
+          const minDate = this.min ? core.dayjs(this.min, this.dateFormat) : null;
+          const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+          if (!isValidMin)
+              return false;
+          const maxDate = this.max ? core.dayjs(this.max, this.dateFormat) : null;
+          const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+          if (!isValidMax)
+              return false;
+          const isAllowedDate = this.allowedDates === undefined
+              || (this.allowedDates instanceof Function
+                  && this.allowedDates(core.dayjs(value, format).format(this.dateFormat)))
+              || (Array.isArray(this.allowedDates)
+                  && this.allowedDates.indexOf(core.dayjs(value, format).format(this.dateFormat)) !== -1);
+          if (!isAllowedDate)
+              return false;
+          return true;
+      }
+      isValidFormatDate(value, format, strict = true) {
           return core.dayjs(value, format, strict).isValid();
       }
       get isoValue() {
@@ -3856,13 +3908,13 @@
               this.change(this.value);
       }
       formatISODateValue(value) {
-          if (value && this.isValidDate(value, this.dateFormat)) {
+          if (value && this.isValidFormatDate(value, this.dateFormat)) {
               return core.dayjs(value, this.dateFormat).format(this.isoFormat);
           }
           return '';
       }
       parseISODateValue(value) {
-          if (value && this.isValidDate(value, this.isoFormat)) {
+          if (value && this.isValidFormatDate(value, this.isoFormat)) {
               return core.dayjs(value, this.isoFormat).format(this.dateFormat);
           }
           return null;
@@ -3881,7 +3933,9 @@
           this.removeDateMask();
           this.setDateValue(this.formatter(this.value));
           super.blur(event, element);
-          this.showDatePicker = false;
+          if (!core.Utils.isMobile()) {
+              this.showDatePicker = false;
+          }
       }
       focus(event, element) {
           this.addDateMask();
@@ -4085,6 +4139,14 @@
            * Helper options.
            */
           this.helperOptions = [];
+          /**
+            * Max value allowed.
+            */
+          this.max = '';
+          /**
+            * Min value allowed.
+            */
+          this.min = '';
           /**
            * Helper value.
            */
@@ -4112,6 +4174,8 @@
           this.mask = this.getInitValue('mask', props.mask, undefined);
           this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
           this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+          this.min = this.getInitValue('min', props.min, this.min);
+          this.max = this.getInitValue('max', props.max, this.max);
           this.createAccessors();
           this.unitMask = this.mask;
           this.initialMask = this.getInitialMask();
@@ -4208,6 +4272,21 @@
           return [value];
       }
       isValidDate(value, format, strict = true) {
+          const date = core.dayjs(value, format, strict);
+          const isValidFormat = date.isValid();
+          if (!isValidFormat)
+              return false;
+          const minDate = this.min ? core.dayjs(this.min, this.dateFormat) : null;
+          const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+          if (!isValidMin)
+              return false;
+          const maxDate = this.max ? core.dayjs(this.max, this.dateFormat) : null;
+          const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+          if (!isValidMax)
+              return false;
+          return true;
+      }
+      isValidFormatDate(value, format, strict = true) {
           return core.dayjs(value, format, strict).isValid();
       }
       get isoRangeValue() {
@@ -4228,7 +4307,7 @@
               splitedValue = this.splitValues(dates);
           const formattedValue = [];
           splitedValue.forEach((value) => {
-              if (value && this.isValidDate(value, this.dateFormat)) {
+              if (value && this.isValidFormatDate(value, this.dateFormat)) {
                   formattedValue.push(core.dayjs(value, this.dateFormat, true).format(this.isoFormat));
               }
           });
@@ -4238,7 +4317,7 @@
           const parsedValue = [];
           if (values.length) {
               values.forEach((value) => {
-                  if (value && this.isValidDate(value, this.isoFormat)) {
+                  if (value && this.isValidFormatDate(value, this.isoFormat)) {
                       parsedValue.push(core.dayjs(value, this.isoFormat, true).format(this.dateFormat));
                   }
               });
@@ -4264,6 +4343,8 @@
               this.removeDateMask();
               this.setDateValue(this.formatter(this.value));
               super.blur(event, element);
+          }
+          if (!core.Utils.isMobile()) {
               this.showDatePicker = false;
           }
       }
@@ -4897,6 +4978,7 @@
       overrideNamedPropsFunc(metadata) {
           let strMetadata = JSON.stringify(metadata);
           Object.keys(this.overrideNamedProps).forEach((key) => {
+              strMetadata = strMetadata.replace(RegExp(`"<<${key}>>"`, 'g'), JSON.stringify(this.overrideNamedProps[key]));
               strMetadata = strMetadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
           });
           return JSON.parse(strMetadata);
@@ -6508,7 +6590,13 @@
        */
       addNewRow(row, position = 'end') {
           return __awaiter(this, void 0, void 0, function* () {
-              const { data } = this.datasource;
+              let data;
+              if (this.datasource instanceof core.MemoryDatasource) {
+                  data = this.datasource.allData;
+              }
+              else {
+                  data = this.datasource.data;
+              }
               row[this.newRowIdentifier] = true;
               if (position === 'start') {
                   data.unshift(row);
@@ -7121,6 +7209,10 @@
            * Defines if data handling should be manual or automatic
            */
           this.manualMode = false;
+          /**
+           * Specifies which DOM element that this component should detach to.
+           */
+          this.attach = false;
           /**
            * Defines if data handling should be manual or automatic
            */
@@ -7165,6 +7257,7 @@
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
           this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
           this.manualMode = this.getInitValue('manualMode', props.manualMode, this.manualMode);
+          this.attach = this.getInitValue('attach', props.attach, this.attach);
           this.searchParam = this.getInitValue('searchParam', props.searchParam, this.searchParam);
           if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
               this.dataValue = 'value';
@@ -9807,11 +9900,13 @@
            * Stores tree structure
            */
           this.treeStructure = {};
+          this.fieldHasChild = '';
           this.searchValue = '';
           this.originalDatasource = tree.datasource;
           this.parentField = tree.parentField;
           this.fetchOnDemand = tree.fetchOnDemand;
           this.openLevelOnLoad = tree.openLevelOnLoad;
+          this.fieldHasChild = tree.fieldHasChild;
           this.tree = tree;
           this.init();
       }
@@ -10173,6 +10268,33 @@
           });
           return result;
       }
+      /**
+       * Checks if a row has async children that are yet to be loaded
+       * @param row
+       * @returns `false` if the row has no children to be loaded, `true` if it does or if fieldHasChild is not defined
+       */
+      hasChildOnDemand(row) {
+          if (!this.fieldHasChild)
+              return true;
+          const rowHasChild = row[this.fieldHasChild];
+          let isVisibleChevron = true;
+          switch (rowHasChild) {
+              case '0':
+              case false:
+              case 0:
+                  isVisibleChevron = false;
+                  break;
+              case '1':
+              case true:
+              case 1:
+                  isVisibleChevron = true;
+                  break;
+              default:
+                  isVisibleChevron = true;
+                  break;
+          }
+          return isVisibleChevron;
+      }
   }
 
   /**
@@ -10265,6 +10387,10 @@
            * Uses delayed loading to load tree branches
            */
           this.fetchOnDemand = false;
+          /**
+           * Defines if the node tree has child
+           */
+          this.fieldHasChild = '';
           this.savedNodes = undefined;
           this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
           this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
@@ -10285,6 +10411,7 @@
           this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
           this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
           this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
+          this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
           this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
           if (props.datasource && Object.keys(props.datasource).length) {
               this.lazyLoad = props.datasource.lazyLoad !== false;
@@ -10323,6 +10450,7 @@
               parentField: this.parentField,
               openLevelOnLoad: false,
               fetchOnDemand: this.fetchOnDemand,
+              fieldHasChild: this.fieldHasChild,
           });
           if (!this.lazyLoad) {
               this.datasource.get().then(() => { this.createNodesFromDatasource(false); });
@@ -10453,7 +10581,14 @@
           return this.disabledItems.indexOf(node.id) !== -1;
       }
       getDisabledNodes(nodes) {
-          return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : node.children })));
+          return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: this.getNodeChildren(node) })));
+      }
+      getNodeChildren(node) {
+          if (node.children)
+              return this.getDisabledNodes(node.children);
+          if (!this.fieldHasChild || !this.treeDataStructure)
+              return node.children;
+          return node.row && this.treeDataStructure.hasChildOnDemand(node.row) ? null : undefined;
       }
       getNodes() {
           return this.getDisabledNodes(this.nodes);
@@ -10471,6 +10606,9 @@
           });
           return !hasError;
       }
+      resetValidation() {
+          this.validationError = '';
+      }
       /**
        * Triggered when the data is inputed.
        * @param value search value
@@ -11115,12 +11253,17 @@
            * Set component height to fill all space available
            */
           this.fillHeight = false;
+          /**
+           * Disable touch support.
+           */
+          this.touchless = false;
           this.tabs = this.getTabs(props.tabs || []);
           this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
           this.height = this.getInitValue('height', props.height, this.height);
           this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
           this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
           this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+          this.touchless = this.getInitValue('touchless', props.touchless, this.touchless);
           this.createAccessors();
       }
       get activeTab() {
@@ -11226,6 +11369,7 @@
           this.compile = props.compile === true;
           this.tag = this.getInitValue('tag', props.tag, this.tag);
           this.text = this.getInitValue('text', props.text, this.text);
+          this.textResize = this.getInitValue('textResize', props.textResize, this.textResize);
           this.createAccessors();
       }
   }
@@ -11584,7 +11728,6 @@
           this.removeTimeMask();
           this.setTimeValue(this.formatter(this.value));
           super.blur(event, element);
-          this.showTimePicker = false;
       }
       focus(event, element) {
           this.addTimeMask();
@@ -12933,6 +13076,8 @@
   }
   Icons.mdiIcons = {
       alertOctagon: 'mdi-alert-octagon',
+      arrowLeft: 'mdi-arrow-left',
+      arrowRight: 'mdi-arrow-right',
       cancel: 'mdi-close-circle',
       calendar: 'mdi-calendar',
       checkboxIndeterminate: 'mdi-minus-box',
@@ -12990,6 +13135,8 @@
   };
   Icons.faIcons = {
       alertOctagon: 'fa fa-exclamation-circle',
+      arrowLeft: 'fa fa-arrow-left',
+      arrowRight: 'fa fa-arrow-right',
       cancel: 'fa fa-times-circle',
       calendar: 'fa fa-calendar-o',
       checkboxIndeterminate: 'fa fa-minus-square',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.79.0",
+  "version": "1.80.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -19,7 +19,9 @@
     "watch": "npm run build -- -w"
   },
   "dependencies": {
+    "@types/lodash.clonedeep": "^4.5.7",
     "@zeedhi/autonumeric": "*",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "4.0.*",
     "lodash.get": "4.4.*",
     "lodash.isundefined": "3.0.*",
@@ -39,5 +41,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "c98be433e557f6f044b0a1f644c9b8558c389180"
+  "gitHead": "475e792a47bd61e8b083078ea84dbae954992339"
 }

package/types/components/zd-apex-chart/apex-chart.d.ts

@@ -251,4 +251,7 @@ export declare class ApexChart extends ComponentRender implements IApexChart {
      */
     brushScrolledEvent(chartContext?: any, config?: any): void;
     updateToolbarIcons(): any;
+    drillHistory: any[];
+    drillDown(options: any): Promise<unknown>;
+    drillUp(): Promise<any>;
 }

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

@@ -57,6 +57,14 @@ export declare class DateRange extends TextInput implements IDateRange {
      * Helper options.
      */
     helperOptions?: string[];
+    /**
+      * Max value allowed.
+      */
+    max?: string;
+    /**
+      * Min value allowed.
+      */
+    min?: string;
     /**
      * Helper value.
      */
@@ -91,6 +99,7 @@ export declare class DateRange extends TextInput implements IDateRange {
     isValidDateArray(format: string, values?: string[]): boolean;
     private splitValues;
     isValidDate(value: string, format: string, strict?: boolean): boolean;
+    isValidFormatDate(value: string, format: string, strict?: boolean): boolean;
     get isoRangeValue(): string[];
     set isoRangeValue(newValue: string[]);
     formatISODateRangeValue(dates: string[] | string): string[];

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

@@ -64,6 +64,14 @@ export declare class Date extends TextInput implements IDate {
      * Helper value.
      */
     helperValue?: string;
+    /**
+     * Max value allowed.
+     */
+    max?: string;
+    /**
+     * Min value allowed.
+     */
+    min?: string;
     /**
      * Width of the picker.
      */
@@ -101,6 +109,7 @@ export declare class Date extends TextInput implements IDate {
     protected maskFormat(format: string): string;
     setDateValue(displayValue: string): void;
     isValidDate(value: string, format: string, strict?: boolean): boolean;
+    isValidFormatDate(value: string, format: string, strict?: boolean): boolean;
     get isoValue(): string;
     set isoValue(newValue: string);
     formatISODateValue(value: string): string;

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

@@ -23,6 +23,8 @@ export interface IDate extends ITextInput {
     orderedDates?: boolean;
     helperOptions?: string[];
     helperValue?: string;
+    max?: string;
+    min?: string;
 }
 export interface IDateRange extends IDate {
     splitter?: string;

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

@@ -1,5 +1,5 @@
-import { IFrame, IFrameEvents } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
+import { IFrame, IFrameEvents } from './interfaces';
 /**
  * Base class for Frame component.
  */

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

@@ -16,5 +16,6 @@ export interface ISelect extends ITextInput {
     itemAfterSlot?: IComponentRender[];
     disabledItems?: any[];
     manualMode?: boolean;
+    attach?: boolean;
     searchParam?: string;
 }

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

@@ -66,6 +66,10 @@ export declare class Select extends TextInput implements ISelect {
      * Defines if data handling should be manual or automatic
      */
     manualMode: boolean;
+    /**
+     * Specifies which DOM element that this component should detach to.
+     */
+    attach: boolean;
     /**
      * Defines if data handling should be manual or automatic
      */

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

@@ -30,6 +30,7 @@ export interface ISelectTree extends IComponentRender {
     dataDisabled?: string;
     disabledItems?: any[];
     fetchOnDemand?: boolean;
+    fieldHasChild?: string;
     menuMaxWidth?: number;
 }
 export interface ISelectTreeCloseEvent extends IEventParam<SelectTree> {

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

@@ -94,6 +94,10 @@ export declare class SelectTree extends TextInput implements ISelectTree {
      */
     fetchOnDemand: boolean;
     menuMaxWidth?: number;
+    /**
+     * Defines if the node tree has child
+     */
+    fieldHasChild: string;
     /**
      * Creates a new instance of SelectTree
      * @param props
@@ -125,8 +129,10 @@ export declare class SelectTree extends TextInput implements ISelectTree {
     searchChange(searchQuery: string, element?: any): void;
     private isDisable;
     private getDisabledNodes;
+    private getNodeChildren;
     getNodes(): ISelectTreeNode<IDictionary>[];
     validate(): boolean;
+    resetValidation(): void;
     /**
      * Triggered when the data is inputed.
      * @param value search value

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

@@ -22,4 +22,5 @@ export interface ITabs extends IComponentRender {
     maxHeight?: number | string;
     minHeight?: number | string;
     fillHeight?: boolean;
+    touchless?: boolean;
 }

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

@@ -27,6 +27,10 @@ export declare class Tabs extends ComponentRender implements ITabs {
      * Set component height to fill all space available
      */
     fillHeight: boolean;
+    /**
+     * Disable touch support.
+     */
+    touchless: boolean;
     /**
      * Create a new Tabs.
      * @param props Tabs properties

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

@@ -6,4 +6,10 @@ export interface IText extends IComponentRender {
     tag?: string;
     text: string | string[];
     compile?: boolean;
+    textResize?: ITextResize;
+}
+export interface ITextResize {
+    fontSize?: number;
+    min?: number;
+    max?: number;
 }

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

@@ -1,4 +1,4 @@
-import { IText } from './interfaces';
+import { IText, ITextResize } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
 /**
  * Base class for Text component.
@@ -7,6 +7,7 @@ export declare class Text extends ComponentRender implements IText {
     compile: boolean;
     tag: string;
     text: string | string[];
+    textResize?: ITextResize;
     /**
      * Creates a new Text.
      * @param props Text properties

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

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

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

@@ -29,6 +29,7 @@ export declare class TreeDataStructure {
      * Stores tree structure
      */
     private treeStructure;
+    fieldHasChild?: string;
     /**
      * Tree component
      */
@@ -144,4 +145,10 @@ export declare class TreeDataStructure {
      * @param row datasource row
      */
     getChildren(row: IDictionary<any>): IDictionary<any>[];
+    /**
+     * Checks if a row has async children that are yet to be loaded
+     * @param row
+     * @returns `false` if the row has no children to be loaded, `true` if it does or if fieldHasChild is not defined
+     */
+    hasChildOnDemand(row: IDictionary<any>): boolean;
 }