@zeedhi/common 1.45.0 → 1.47.0

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, DateHelper, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
@@ -495,7 +495,7 @@ class ApexChart extends ComponentRender {
      * @param options New options
      */
     updateChart(options) {
-        this.options = Object.assign(Object.assign({}, this.options), options);
+        merge(this.options, options);
         if (options.series) {
             this.series = this.options.series;
         }
@@ -1757,7 +1757,8 @@ class Input extends ComponentRender {
      * Removes all input validation.
      */
     clearValidations() {
-        Object.keys(this.validations).forEach((name) => this.removeValidation(name));
+        this.validations = {};
+        this.rules = [];
     }
     /**
      * Updates input rules.
@@ -3315,6 +3316,14 @@ class Date$1 extends TextInput {
          * Determines the type of the picker - date for date picker, month for month picker.
          */
         this.pickerType = 'date';
+        /**
+         * Helper options.
+         */
+        this.helperOptions = [];
+        /**
+         * Helper value.
+         */
+        this.helperValue = '';
         /**
          * Width of the picker.
          */
@@ -3323,6 +3332,8 @@ class Date$1 extends TextInput {
         this.dateError = false;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdDate');
         this.parserFn = FormatterParserProvider.getParser('ZdDate');
+        this.previousHint = '';
+        this.previousPersistentHint = false;
         this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
@@ -3338,6 +3349,8 @@ class Date$1 extends TextInput {
         this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
         this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
         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);
         if (this.pickerType === 'month') {
             this.isoFormat = 'YYYY-MM';
         }
@@ -3514,6 +3527,20 @@ class Date$1 extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
+    updateHelperHint() {
+        if (this.helperValue) {
+            this.previousHint = this.hint;
+            this.previousPersistentHint = this.persistentHint;
+            this.hint = DateHelper.getLabel(this.helperValue);
+            this.persistentHint = true;
+        }
+    }
+    change(event, element) {
+        super.change(event, element);
+        this.helperValue = '';
+        this.hint = this.previousHint;
+        this.persistentHint = this.previousPersistentHint;
+    }
 }
 FormatterParserProvider.registerFormatter('ZdDate', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
@@ -3643,10 +3670,20 @@ class DateRange extends TextInput {
          * Width of the picker.
          */
         this.width = 248;
+        /**
+         * Helper options.
+         */
+        this.helperOptions = [];
+        /**
+         * Helper value.
+         */
+        this.helperValue = '';
         this.isoFormat = 'YYYY-MM-DD';
         this.dateError = false;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
         this.parserFn = FormatterParserProvider.getParser('ZdDateRange');
+        this.previousHint = '';
+        this.previousPersistentHint = false;
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
@@ -3662,6 +3699,8 @@ class DateRange extends TextInput {
         this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
         this.width = this.getInitValue('width', props.width, this.width);
         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.createAccessors();
         this.unitMask = this.mask;
         this.initialMask = this.getInitialMask();
@@ -3865,6 +3904,20 @@ class DateRange extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
+    updateHelperHint() {
+        if (this.helperValue) {
+            this.previousHint = this.hint;
+            this.previousPersistentHint = this.persistentHint;
+            this.hint = DateHelper.getLabel(this.helperValue);
+            this.persistentHint = true;
+        }
+    }
+    change(event, element) {
+        super.change(event, element);
+        this.helperValue = '';
+        this.hint = this.previousHint;
+        this.persistentHint = this.previousPersistentHint;
+    }
 }
 FormatterParserProvider.registerFormatter('ZdDateRange', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, initialMask, splitter = ' ~ ', unitMask = '', mask = '', isSimpleDisplay = false, } = {}) => {
     if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
@@ -4947,6 +5000,9 @@ class Grid extends Iterable {
         this.toolbarSlot = [
             { name: '<<NAME>>_gridSearch', component: 'ZdSearch' },
         ];
+        this.loadingText = 'LOADING';
+        this.noDataText = 'NO_DATA';
+        this.noResultsText = 'NO_RESULT';
         /**
          * Components that will be rendered in no-data case
          */
@@ -4955,7 +5011,7 @@ class Grid extends Iterable {
                 name: '<<NAME>>_no-data',
                 component: 'ZdText',
                 cssClass: 'no-data',
-                text: 'NO_DATA',
+                text: this.noDataText,
             },
         ];
         /**
@@ -4966,7 +5022,7 @@ class Grid extends Iterable {
                 name: '<<NAME>>_no-result',
                 component: 'ZdText',
                 cssClass: 'no-result',
-                text: 'NO_RESULT',
+                text: this.noResultsText,
             },
         ];
         /**
@@ -5070,6 +5126,7 @@ class Grid extends Iterable {
         this.headerCellTextColor = this.getInitValue('headerCellTextColor', props.headerCellTextColor, this.headerCellTextColor);
         this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
         this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+        this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
         this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
         this.footerSlot = props.footerSlot || this.footerSlot;
         this.noDataSlot = props.noDataSlot || this.noDataSlot;
@@ -5079,6 +5136,8 @@ class Grid extends Iterable {
         this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
         this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
         this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+        this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
+        this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
         this.createAccessors();
     }
     onMounted(element) {
@@ -8267,6 +8326,12 @@ class RangeSlider extends Input {
         this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
         this.createAccessors();
     }
+    get value() {
+        return this.rangeSliderValue === null ? undefined : this.rangeSliderValue;
+    }
+    set value(value) {
+        this.rangeSliderValue = value;
+    }
 }
 
 /**
@@ -8310,11 +8375,16 @@ class SelectMultiple extends Select {
          * Number of hidden items
          */
         this.moreChip = 0;
+        /**
+         * Max number of rows the component can have
+         */
+        this.maxRows = undefined;
         this.showSelectAll = 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.createAccessors();
     }
     afterFocus() {
@@ -8490,6 +8560,21 @@ class SelectMultiple extends Select {
     removePushedValue() {
         this.removeInserts();
     }
+    doSearch(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.manualMode || value) {
+                yield this.updateSearch(value);
+            }
+            else {
+                if (!this.manualMode) {
+                    this.datasource.data = [...this.cachedData];
+                    this.datasource.total = this.cachedTotal;
+                }
+                this.removeInserts();
+                this.insertSelected();
+            }
+        });
+    }
     /**
      * Removes unselected inserts from datasource
      */
@@ -9756,13 +9841,26 @@ class Tabs extends ComponentRender {
      */
     constructor(props) {
         super(props);
-        this.activeTab = 0;
+        this.activeTabValue = 0;
         this.tabs = [];
         this.tabs = this.getTabs(props.tabs || []);
-        this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTab);
+        this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
         this.height = this.getInitValue('height', props.height, this.height);
         this.createAccessors();
     }
+    get activeTab() {
+        var _a;
+        if (this.activeTabValue >= 0 && !((_a = this.tabs[this.activeTabValue]) === null || _a === void 0 ? void 0 : _a.isVisible)) {
+            const firstTabIndex = this.tabs.findIndex((tab) => tab.isVisible);
+            if (firstTabIndex > -1) {
+                this.activeTabValue = firstTabIndex;
+            }
+        }
+        return this.activeTabValue;
+    }
+    set activeTab(index) {
+        this.activeTabValue = index;
+    }
     getTabs(tabs) {
         return tabs.map((tab) => new Tab(tab));
     }
@@ -10296,6 +10394,8 @@ class Tree extends ComponentRender {
         this.titleField = '';
         /** Datasource data field */
         this.dataField = '';
+        /** Datasource checked field */
+        this.checkedField = 'checked';
         /**
          * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
          */
@@ -10314,7 +10414,6 @@ class Tree extends ComponentRender {
         this.appliedConditions = {};
         /* Conditions of tree */
         this.factoredConditions = {};
-        this.nodes = this.initNodes(props.nodes || this.nodes);
         this.itemIconName = this.getInitValue('itemIconName', props.itemIconName, this.itemIconName);
         this.groupIconName = this.getInitValue('groupIconName', props.groupIconName, this.groupIconName);
         this.openedIconName = this.getInitValue('openedIconName', props.openedIconName, this.openedIconName);
@@ -10324,6 +10423,7 @@ class Tree extends ComponentRender {
         this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
         this.titleField = this.getInitValue('titleField', props.titleField, this.titleField);
         this.dataField = this.getInitValue('dataField', props.dataField, this.dataField);
+        this.checkedField = this.getInitValue('checkedField', props.checkedField, this.checkedField);
         this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
         this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
         this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
@@ -10341,29 +10441,46 @@ class Tree extends ComponentRender {
             this.createDataStructure();
         }
         this.createAccessors();
+        this.nodes = props.nodes || this.nodes;
     }
     /**
      * Initialize all the properties of the declared nodes (reactivity)
      */
-    initNodes(nodes) {
-        return nodes.map((node) => (Object.assign(Object.assign({ isLeaf: false, isExpanded: true, isSelected: false, isDraggable: true, isSelectable: true, isChecked: false }, node), { children: this.initNodes(node.children || []) })));
+    initNodes(nodes, override) {
+        return nodes.map((node) => {
+            let newNode = {
+                title: '',
+                isLeaf: false,
+                isExpanded: true,
+                isSelected: false,
+                isDraggable: true,
+                isSelectable: true,
+                data: {
+                    [this.checkedField]: false,
+                },
+                children: [],
+            };
+            newNode = merge(newNode, node, override);
+            newNode.children = this.initNodes(node.children || [], override);
+            return newNode;
+        });
     }
     /** Nodes */
     get nodes() {
         return this.nodesValue;
     }
     set nodes(value) {
+        let override = {};
         if (!this.allowDragDrop) {
-            this.removeDraggable(value);
+            override = { isDraggable: false };
         }
-        this.nodesValue = value;
+        this.nodesValue = this.initNodes(value, override);
     }
     getCheckedNodes() {
         const selectedNodes = [];
         this.tree.traverse((node) => {
-            const instanceNode = this.getNode(node.path || []);
-            if (instanceNode === null || instanceNode === void 0 ? void 0 : instanceNode.isChecked) {
-                selectedNodes.push(instanceNode);
+            if (node.data && node.data[this.checkedField]) {
+                selectedNodes.push(node);
             }
         });
         return selectedNodes;
@@ -10416,15 +10533,16 @@ class Tree extends ComponentRender {
     }
     /** Insert nodes by the current cursor position */
     insertNode(newNode) {
+        const initNode = this.initNodes([newNode])[0];
         if (this.selectedNodes.length) {
             const cursorPosition = {
                 node: this.selectedNodes[0],
                 placement: 'inside',
             };
-            this.tree.insert(cursorPosition, newNode);
+            this.tree.insert(cursorPosition, initNode);
         }
         else {
-            this.nodes.push(newNode);
+            this.nodes.push(initNode);
         }
     }
     importNodes(nodes) {
@@ -10454,15 +10572,6 @@ class Tree extends ComponentRender {
     updateNodeData(node, value) {
         this.tree.updateNode(node.path, value);
     }
-    removeDraggable(items) {
-        items.forEach((item) => {
-            var _a;
-            item.isDraggable = false;
-            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
-                this.removeDraggable(item.children);
-            }
-        });
-    }
     setTree(tree) {
         this.tree = tree;
     }
@@ -10594,7 +10703,7 @@ class Tree extends ComponentRender {
     }
     getParentNode(node) {
         var _a;
-        return this.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+        return this.tree.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
     }
     searchPath(nodes, path) {
         const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
@@ -10789,6 +10898,7 @@ class TreeGridEditable extends TreeGrid {
             },
         };
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+        this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
         this.createAccessors();
     }
     onMounted(element) {

package/dist/zd-common.umd.js

@@ -502,7 +502,7 @@
        * @param options New options
        */
       updateChart(options) {
-          this.options = Object.assign(Object.assign({}, this.options), options);
+          merge__default["default"](this.options, options);
           if (options.series) {
               this.series = this.options.series;
           }
@@ -1764,7 +1764,8 @@
        * Removes all input validation.
        */
       clearValidations() {
-          Object.keys(this.validations).forEach((name) => this.removeValidation(name));
+          this.validations = {};
+          this.rules = [];
       }
       /**
        * Updates input rules.
@@ -3322,6 +3323,14 @@
            * Determines the type of the picker - date for date picker, month for month picker.
            */
           this.pickerType = 'date';
+          /**
+           * Helper options.
+           */
+          this.helperOptions = [];
+          /**
+           * Helper value.
+           */
+          this.helperValue = '';
           /**
            * Width of the picker.
            */
@@ -3330,6 +3339,8 @@
           this.dateError = false;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdDate');
           this.parserFn = core.FormatterParserProvider.getParser('ZdDate');
+          this.previousHint = '';
+          this.previousPersistentHint = false;
           this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
@@ -3345,6 +3356,8 @@
           this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
           this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
           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);
           if (this.pickerType === 'month') {
               this.isoFormat = 'YYYY-MM';
           }
@@ -3521,6 +3534,20 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
+      updateHelperHint() {
+          if (this.helperValue) {
+              this.previousHint = this.hint;
+              this.previousPersistentHint = this.persistentHint;
+              this.hint = core.DateHelper.getLabel(this.helperValue);
+              this.persistentHint = true;
+          }
+      }
+      change(event, element) {
+          super.change(event, element);
+          this.helperValue = '';
+          this.hint = this.previousHint;
+          this.persistentHint = this.previousPersistentHint;
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdDate', (value, { dateFormat = core.Config.dateFormat, displayFormat = core.Config.displayFormat, inputFormat = core.Config.dateInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
@@ -3650,10 +3677,20 @@
            * Width of the picker.
            */
           this.width = 248;
+          /**
+           * Helper options.
+           */
+          this.helperOptions = [];
+          /**
+           * Helper value.
+           */
+          this.helperValue = '';
           this.isoFormat = 'YYYY-MM-DD';
           this.dateError = false;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdDateRange');
           this.parserFn = core.FormatterParserProvider.getParser('ZdDateRange');
+          this.previousHint = '';
+          this.previousPersistentHint = false;
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
           this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
@@ -3669,6 +3706,8 @@
           this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
           this.width = this.getInitValue('width', props.width, this.width);
           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.createAccessors();
           this.unitMask = this.mask;
           this.initialMask = this.getInitialMask();
@@ -3872,6 +3911,20 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
+      updateHelperHint() {
+          if (this.helperValue) {
+              this.previousHint = this.hint;
+              this.previousPersistentHint = this.persistentHint;
+              this.hint = core.DateHelper.getLabel(this.helperValue);
+              this.persistentHint = true;
+          }
+      }
+      change(event, element) {
+          super.change(event, element);
+          this.helperValue = '';
+          this.hint = this.previousHint;
+          this.persistentHint = this.previousPersistentHint;
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdDateRange', (value, { dateFormat = core.Config.dateFormat, displayFormat = core.Config.displayFormat, inputFormat = core.Config.dateInputFormat, initialMask, splitter = ' ~ ', unitMask = '', mask = '', isSimpleDisplay = false, } = {}) => {
       if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
@@ -4954,6 +5007,9 @@
           this.toolbarSlot = [
               { name: '<<NAME>>_gridSearch', component: 'ZdSearch' },
           ];
+          this.loadingText = 'LOADING';
+          this.noDataText = 'NO_DATA';
+          this.noResultsText = 'NO_RESULT';
           /**
            * Components that will be rendered in no-data case
            */
@@ -4962,7 +5018,7 @@
                   name: '<<NAME>>_no-data',
                   component: 'ZdText',
                   cssClass: 'no-data',
-                  text: 'NO_DATA',
+                  text: this.noDataText,
               },
           ];
           /**
@@ -4973,7 +5029,7 @@
                   name: '<<NAME>>_no-result',
                   component: 'ZdText',
                   cssClass: 'no-result',
-                  text: 'NO_RESULT',
+                  text: this.noResultsText,
               },
           ];
           /**
@@ -5077,6 +5133,7 @@
           this.headerCellTextColor = this.getInitValue('headerCellTextColor', props.headerCellTextColor, this.headerCellTextColor);
           this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
           this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+          this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
           this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
           this.footerSlot = props.footerSlot || this.footerSlot;
           this.noDataSlot = props.noDataSlot || this.noDataSlot;
@@ -5086,6 +5143,8 @@
           this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
           this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
           this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+          this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
+          this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
           this.createAccessors();
       }
       onMounted(element) {
@@ -8274,6 +8333,12 @@
           this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
           this.createAccessors();
       }
+      get value() {
+          return this.rangeSliderValue === null ? undefined : this.rangeSliderValue;
+      }
+      set value(value) {
+          this.rangeSliderValue = value;
+      }
   }
 
   /**
@@ -8317,11 +8382,16 @@
            * Number of hidden items
            */
           this.moreChip = 0;
+          /**
+           * Max number of rows the component can have
+           */
+          this.maxRows = undefined;
           this.showSelectAll = 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.createAccessors();
       }
       afterFocus() {
@@ -8497,6 +8567,21 @@
       removePushedValue() {
           this.removeInserts();
       }
+      doSearch(value) {
+          return __awaiter(this, void 0, void 0, function* () {
+              if (this.manualMode || value) {
+                  yield this.updateSearch(value);
+              }
+              else {
+                  if (!this.manualMode) {
+                      this.datasource.data = [...this.cachedData];
+                      this.datasource.total = this.cachedTotal;
+                  }
+                  this.removeInserts();
+                  this.insertSelected();
+              }
+          });
+      }
       /**
        * Removes unselected inserts from datasource
        */
@@ -9763,13 +9848,26 @@
        */
       constructor(props) {
           super(props);
-          this.activeTab = 0;
+          this.activeTabValue = 0;
           this.tabs = [];
           this.tabs = this.getTabs(props.tabs || []);
-          this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTab);
+          this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
           this.height = this.getInitValue('height', props.height, this.height);
           this.createAccessors();
       }
+      get activeTab() {
+          var _a;
+          if (this.activeTabValue >= 0 && !((_a = this.tabs[this.activeTabValue]) === null || _a === void 0 ? void 0 : _a.isVisible)) {
+              const firstTabIndex = this.tabs.findIndex((tab) => tab.isVisible);
+              if (firstTabIndex > -1) {
+                  this.activeTabValue = firstTabIndex;
+              }
+          }
+          return this.activeTabValue;
+      }
+      set activeTab(index) {
+          this.activeTabValue = index;
+      }
       getTabs(tabs) {
           return tabs.map((tab) => new Tab(tab));
       }
@@ -10303,6 +10401,8 @@
           this.titleField = '';
           /** Datasource data field */
           this.dataField = '';
+          /** Datasource checked field */
+          this.checkedField = 'checked';
           /**
            * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
            */
@@ -10321,7 +10421,6 @@
           this.appliedConditions = {};
           /* Conditions of tree */
           this.factoredConditions = {};
-          this.nodes = this.initNodes(props.nodes || this.nodes);
           this.itemIconName = this.getInitValue('itemIconName', props.itemIconName, this.itemIconName);
           this.groupIconName = this.getInitValue('groupIconName', props.groupIconName, this.groupIconName);
           this.openedIconName = this.getInitValue('openedIconName', props.openedIconName, this.openedIconName);
@@ -10331,6 +10430,7 @@
           this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
           this.titleField = this.getInitValue('titleField', props.titleField, this.titleField);
           this.dataField = this.getInitValue('dataField', props.dataField, this.dataField);
+          this.checkedField = this.getInitValue('checkedField', props.checkedField, this.checkedField);
           this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
           this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
           this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
@@ -10348,29 +10448,46 @@
               this.createDataStructure();
           }
           this.createAccessors();
+          this.nodes = props.nodes || this.nodes;
       }
       /**
        * Initialize all the properties of the declared nodes (reactivity)
        */
-      initNodes(nodes) {
-          return nodes.map((node) => (Object.assign(Object.assign({ isLeaf: false, isExpanded: true, isSelected: false, isDraggable: true, isSelectable: true, isChecked: false }, node), { children: this.initNodes(node.children || []) })));
+      initNodes(nodes, override) {
+          return nodes.map((node) => {
+              let newNode = {
+                  title: '',
+                  isLeaf: false,
+                  isExpanded: true,
+                  isSelected: false,
+                  isDraggable: true,
+                  isSelectable: true,
+                  data: {
+                      [this.checkedField]: false,
+                  },
+                  children: [],
+              };
+              newNode = merge__default["default"](newNode, node, override);
+              newNode.children = this.initNodes(node.children || [], override);
+              return newNode;
+          });
       }
       /** Nodes */
       get nodes() {
           return this.nodesValue;
       }
       set nodes(value) {
+          let override = {};
           if (!this.allowDragDrop) {
-              this.removeDraggable(value);
+              override = { isDraggable: false };
           }
-          this.nodesValue = value;
+          this.nodesValue = this.initNodes(value, override);
       }
       getCheckedNodes() {
           const selectedNodes = [];
           this.tree.traverse((node) => {
-              const instanceNode = this.getNode(node.path || []);
-              if (instanceNode === null || instanceNode === void 0 ? void 0 : instanceNode.isChecked) {
-                  selectedNodes.push(instanceNode);
+              if (node.data && node.data[this.checkedField]) {
+                  selectedNodes.push(node);
               }
           });
           return selectedNodes;
@@ -10423,15 +10540,16 @@
       }
       /** Insert nodes by the current cursor position */
       insertNode(newNode) {
+          const initNode = this.initNodes([newNode])[0];
           if (this.selectedNodes.length) {
               const cursorPosition = {
                   node: this.selectedNodes[0],
                   placement: 'inside',
               };
-              this.tree.insert(cursorPosition, newNode);
+              this.tree.insert(cursorPosition, initNode);
           }
           else {
-              this.nodes.push(newNode);
+              this.nodes.push(initNode);
           }
       }
       importNodes(nodes) {
@@ -10461,15 +10579,6 @@
       updateNodeData(node, value) {
           this.tree.updateNode(node.path, value);
       }
-      removeDraggable(items) {
-          items.forEach((item) => {
-              var _a;
-              item.isDraggable = false;
-              if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
-                  this.removeDraggable(item.children);
-              }
-          });
-      }
       setTree(tree) {
           this.tree = tree;
       }
@@ -10601,7 +10710,7 @@
       }
       getParentNode(node) {
           var _a;
-          return this.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+          return this.tree.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
       }
       searchPath(nodes, path) {
           const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
@@ -10796,6 +10905,7 @@
               },
           };
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+          this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
           this.createAccessors();
       }
       onMounted(element) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.45.0",
+  "version": "1.47.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "b5841549f61c539c52f2438b72e21ccd72156f73"
+  "gitHead": "69b4f8f97adbd991270b536b5fa59fa8fa138aa7"
 }

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

@@ -53,6 +53,14 @@ export declare class DateRange extends TextInput implements IDateRange {
      * Width of the picker.
      */
     width: number | string;
+    /**
+     * Helper options.
+     */
+    helperOptions?: string[];
+    /**
+     * Helper value.
+     */
+    helperValue?: string;
     protected isoFormat: string;
     protected dateError: boolean;
     protected formatterFn: Function;
@@ -117,4 +125,8 @@ export declare class DateRange extends TextInput implements IDateRange {
      * @returns true if it is simple, false otherwise
      */
     protected isSimpleFormat(format: string): boolean;
+    private previousHint;
+    private previousPersistentHint;
+    updateHelperHint(): void;
+    change(event?: Event, element?: any): void;
 }

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

@@ -56,6 +56,14 @@ export declare class Date extends TextInput implements IDate {
      * Determines the type of the picker - date for date picker, month for month picker.
      */
     pickerType: string;
+    /**
+     * Helper options.
+     */
+    helperOptions?: string[];
+    /**
+     * Helper value.
+     */
+    helperValue?: string;
     /**
      * Width of the picker.
      */
@@ -126,4 +134,8 @@ export declare class Date extends TextInput implements IDate {
      * @returns true if it is simple, false otherwise
      */
     protected isSimpleFormat(format: string): boolean;
+    private previousHint;
+    private previousPersistentHint;
+    updateHelperHint(): void;
+    change(event?: Event, element?: any): void;
 }

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

@@ -22,6 +22,8 @@ export interface IDate extends ITextInput {
     showWeek?: boolean;
     width?: number | string;
     orderedDates?: boolean;
+    helperOptions?: string[];
+    helperValue?: string;
 }
 export interface IDateRange extends IDate {
     splitter?: string;

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

@@ -11,6 +11,9 @@ export declare class Grid extends Iterable implements IGrid {
      * Components that will be rendered on toolbar slot
      */
     toolbarSlot: IComponentRender[];
+    loadingText: string;
+    noDataText: string;
+    noResultsText: string;
     /**
      * Components that will be rendered in no-data case
      */
@@ -163,5 +166,5 @@ export declare class Grid extends Iterable implements IGrid {
     protected navigatePageDown(): void;
     deleteRows(): Promise<any[]>;
     getActionComponent(actionComponent: IComponent, column: GridColumn, row: IDictionary, parentPath?: string): IComponent;
-    private changeDefaultSlotNames;
+    protected changeDefaultSlotNames(slot: IComponentRender[]): IComponentRender[];
 }

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

@@ -37,6 +37,9 @@ export interface IGrid extends IIterable {
     toolbarSlot?: IComponentRender[];
     dragColumns?: boolean;
     resizeColumns?: boolean;
+    loadingText?: string;
+    noDataText?: string;
+    noResultsText?: string;
 }
 export interface IGridColumn extends IColumn {
     children?: IChildrenActionColumn[];

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

@@ -58,9 +58,12 @@ export declare class RangeSlider extends Input implements IRangeSlider {
      * Defines the range-slider ticks
      */
     ticks: IRangeSliderTicks;
+    private rangeSliderValue;
     /**
      * Create a new Range Slider
      * @param props Range Slider properties
      */
     constructor(props: IRangeSlider);
+    get value(): any;
+    set value(value: any);
 }

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

@@ -176,7 +176,7 @@ export declare class Select extends TextInput implements ISelect {
      * Update datasource items
      */
     updateItems(items: (string | number)[]): Promise<any>;
-    private doSearch;
+    protected doSearch(value: string): Promise<void>;
     private debounceSearch;
     /**
      * Load more data

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

@@ -11,4 +11,5 @@ export interface ISelectMultiple extends ISelect {
     moreChip?: number;
     showSelectAll?: boolean;
     events?: ISelectMultipleEvents;
+    maxRows?: string | number;
 }

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

@@ -15,6 +15,10 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
      * Number of hidden items
      */
     moreChip: number;
+    /**
+     * Max number of rows the component can have
+     */
+    maxRows?: string | number;
     protected afterFocus(): Promise<void>;
     private setCache;
     showSelectAll: boolean;
@@ -61,6 +65,7 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
      */
     private insertSelected;
     protected removePushedValue(): void;
+    protected doSearch(value: string): Promise<void>;
     /**
      * Removes unselected inserts from datasource
      */

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

@@ -5,7 +5,7 @@ import { ComponentRender } from '../zd-component/component-render';
  * Base class for Tabs component.
  */
 export declare class Tabs extends ComponentRender implements ITabs {
-    activeTab: number;
+    activeTabValue: number;
     events: ITabsEvents;
     tabs: Tab[];
     /**
@@ -17,6 +17,8 @@ export declare class Tabs extends ComponentRender implements ITabs {
      * @param props Tabs properties
      */
     constructor(props: ITabs);
+    get activeTab(): number;
+    set activeTab(index: number);
     private getTabs;
     getTab(name: string): Tab;
     /**

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

@@ -9,7 +9,6 @@ export interface ITreeNodeModel<T> {
     isSelected?: boolean;
     isDraggable?: boolean;
     isSelectable?: boolean;
-    isChecked?: boolean;
     data?: T;
 }
 export interface ITreeNode<T> extends ITreeNodeModel<T> {
@@ -62,6 +61,7 @@ export interface ITree extends IComponentRender {
     parentField?: string;
     titleField?: string;
     dataField?: string;
+    checkedField?: string;
     openLevelOnLoad?: number | boolean;
     checkbox?: boolean;
 }

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

@@ -37,6 +37,8 @@ export declare class Tree extends ComponentRender implements ITree {
     titleField: string;
     /** Datasource data field */
     dataField: string;
+    /** Datasource checked field */
+    checkedField: string;
     /**
      * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
      */
@@ -66,11 +68,11 @@ export declare class Tree extends ComponentRender implements ITree {
     /**
      * Initialize all the properties of the declared nodes (reactivity)
      */
-    protected initNodes(nodes: ITreeNodeModel<IDictionary>[]): ITreeNodeModel<IDictionary>[];
+    protected initNodes(nodes: ITreeNodeModel<IDictionary>[], override?: IDictionary): ITreeNodeModel<IDictionary>[];
     /** Nodes */
     get nodes(): ITreeNodeModel<IDictionary>[];
     set nodes(value: ITreeNodeModel<IDictionary>[]);
-    getCheckedNodes(): ITreeNodeModel<IDictionary<any>>[];
+    getCheckedNodes(): ITreeNode<IDictionary<any>>[];
     /** Returns the selected nodes */
     get selectedNodes(): ITreeNode<IDictionary>[];
     private createDataStructure;
@@ -85,7 +87,6 @@ export declare class Tree extends ComponentRender implements ITree {
     removeSelected(): void;
     /** Update selected node */
     updateNodeData(node: ITreeNode<IDictionary>, value: IDictionary): void;
-    private removeDraggable;
     setTree(tree: any): void;
     /**
      * Return plain conditions object
@@ -110,6 +111,6 @@ export declare class Tree extends ComponentRender implements ITree {
     nodeCheck(node: ITreeNode<IDictionary>, event?: Event, element?: HTMLElement): void;
     clearSelection(nodes?: ITreeNodeModel<IDictionary<any>>[]): void;
     getNode(path: number[]): ITreeNodeModel<IDictionary<any>> | undefined;
-    getParentNode(node: ITreeNode<IDictionary>): ITreeNodeModel<IDictionary<any>> | undefined;
+    getParentNode(node: ITreeNode<IDictionary>): any;
     private searchPath;
 }