@zeedhi/common 1.46.0 → 1.48.1

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, Mask, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, 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';
@@ -40,6 +40,10 @@ class Component {
          * Set css in line with cssStyle.
          */
         this.cssStyle = '';
+        /**
+         * Directives registered to the component.
+         */
+        this.directives = {};
         /**
          * Events registered to the component.
          */
@@ -70,12 +74,16 @@ class Component {
         this.events = Event.factory(props.events || this.events);
         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);
         this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
         this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.light = this.getInitValue('light', props.light, this.light);
         this.children = Array.isArray(props.children) ? props.children : this.children;
         this.keyMap = KeyMap.factory(props.keyMap || this.keyMap);
         this.createAccessors();
+        Object.keys(this.directives).forEach((key) => {
+            this.directives[key] = Event.factory(this.directives[key]);
+        });
     }
     setViewFocus(viewFocus) {
         this.viewFocus = viewFocus;
@@ -1649,10 +1657,6 @@ class Input extends ComponentRender {
          * Used to watch a value from store.
          */
         this.storePath = '';
-        /**
-        * Internal input value.
-        */
-        this.value = null;
         /**
          * Input validations.
          */
@@ -1663,6 +1667,8 @@ class Input extends ComponentRender {
         this.parsedValidations = {};
         this.formatterFn = FormatterParserProvider.getFormatter('ZdInput');
         this.parserFn = FormatterParserProvider.getParser('ZdInput');
+        this.internalDisplayValue = '';
+        this.internalValue = null;
         this.lastInputValue = undefined;
         this.callInputEvent = debounce(({ event, element, component }) => {
             this.callEvent('input', { event, element, component });
@@ -1767,14 +1773,39 @@ class Input extends ComponentRender {
         this.rules = Object.values(this.parsedValidations)
             .map((validation) => () => validation(this.value));
     }
+    /**
+     * Input value.
+     */
+    get value() {
+        return this.internalValue;
+    }
+    set value(value) {
+        if (this.internalValue !== value) {
+            this.internalDisplayValue = this.formatter(value);
+            this.internalValue = value;
+        }
+    }
     /**
      * Input displayed value.
      */
     get displayValue() {
-        return this.formatter(this.value);
+        return this.internalDisplayValue;
     }
     set displayValue(value) {
-        this.value = this.parser(value);
+        if (this.internalDisplayValue !== value) {
+            this.internalValue = this.parser(value);
+            let { mask } = this;
+            if (mask) {
+                if (typeof mask === 'function') {
+                    mask = mask(this.internalValue);
+                }
+                this.internalDisplayValue = Mask.convertAll(mask, value);
+                this.internalValue = this.parser(this.internalDisplayValue);
+            }
+            else {
+                this.internalDisplayValue = value;
+            }
+        }
     }
     /**
      * Retrieves a formatted value.
@@ -2863,6 +2894,7 @@ class Dashboard extends ComponentRender {
         this.cards = [];
         /* Card ID to be deleted */
         this.deleteCardId = '';
+        this.overrideNamedProps = {};
         /* Remove the paddings of the dashboard */
         this.removePadding = false;
         /* Height of the dashboard */
@@ -3071,6 +3103,7 @@ class Dashboard extends ComponentRender {
         this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
         this.moveMode = this.getInitValue('moveMode', props.moveMode, this.moveMode);
         this.cards = props.cards || this.cards;
+        this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
         this.removePadding = this.getInitValue('removePadding', props.removePadding, this.removePadding);
         this.height = this.getInitValue('height', props.height, this.height);
         this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
@@ -3208,6 +3241,7 @@ class Dashboard extends ComponentRender {
             component: 'ZdFrame',
             path: card.path,
             local: card.local,
+            overrideNamedProps: card.overrideNamedProps,
         };
     }
     /* Return footer rightSlot props for view layer */
@@ -3316,6 +3350,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.
          */
@@ -3324,6 +3366,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);
@@ -3339,6 +3383,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';
         }
@@ -3376,12 +3422,12 @@ class Date$1 extends TextInput {
         }
     }
     get displayValue() {
-        return this.formatter(this.value);
+        return this.internalDisplayValue;
     }
     set displayValue(newValue) {
         this.dateError = false;
-        const dateValue = newValue;
-        this.value = this.parser(dateValue);
+        this.internalDisplayValue = newValue;
+        this.internalValue = this.parser(newValue);
     }
     /**
      * Assign the updated mask to mask property
@@ -3406,14 +3452,16 @@ class Date$1 extends TextInput {
     setDateValue(displayValue) {
         const lastValue = this.displayValue;
         if (this.isValidDate(displayValue, this.displayFormat)) {
-            this.displayValue = displayValue;
+            this.internalDisplayValue = displayValue;
+            this.internalValue = this.parser(displayValue);
             this.dateError = false;
             if (lastValue !== this.displayValue)
                 this.change(this.value);
         }
         else {
             if (!displayValue) {
-                this.displayValue = displayValue;
+                this.internalDisplayValue = displayValue;
+                this.internalValue = null;
                 if (lastValue !== this.displayValue)
                     this.change(this.value);
             }
@@ -3457,7 +3505,7 @@ class Date$1 extends TextInput {
     }
     blur(event, element) {
         this.removeDateMask();
-        this.setDateValue(this.displayValue);
+        this.setDateValue(this.formatter(this.value));
         super.blur(event, element);
         this.showDatePicker = false;
     }
@@ -3473,6 +3521,7 @@ class Date$1 extends TextInput {
             return;
         setTimeout(() => {
             this.mask = this.initialMask;
+            this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.inputFormat || this.displayFormat);
         });
     }
     /**
@@ -3515,6 +3564,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) {
@@ -3644,10 +3707,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);
@@ -3663,6 +3736,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();
@@ -3689,15 +3764,15 @@ class DateRange extends TextInput {
     formatter(value) { return this.formatterFn(value, this); }
     parser(value) { return this.parserFn(value, this); }
     get displayValue() {
-        return this.formatter(this.value);
+        return this.internalDisplayValue;
     }
     set displayValue(newValue) {
         this.dateError = false;
-        const dateValue = newValue;
-        if (dateValue)
-            this.value = this.parser(dateValue);
+        this.internalDisplayValue = newValue;
+        if (newValue)
+            this.internalValue = this.parser(newValue);
         else
-            this.value = [];
+            this.internalValue = [];
     }
     /**
       * Assign the updated mask to mask property
@@ -3723,14 +3798,16 @@ class DateRange extends TextInput {
         const lastValue = this.displayValue;
         const values = this.splitValues(displayValue);
         if (this.isValidDateArray(this.displayFormat, values)) {
-            this.displayValue = displayValue;
+            this.internalDisplayValue = displayValue;
+            this.internalValue = this.parser(displayValue);
             this.dateError = false;
             if (lastValue !== this.displayValue)
                 this.change(this.value);
         }
         else {
             if (!displayValue) {
-                this.displayValue = displayValue;
+                this.internalDisplayValue = displayValue;
+                this.internalValue = [];
                 if (lastValue !== this.displayValue)
                     this.change(this.value);
             }
@@ -3806,11 +3883,13 @@ class DateRange extends TextInput {
         }
     }
     blur(event, element) {
-        this.value = this.sortDates(this.value);
-        this.removeDateMask();
-        this.setDateValue(this.displayValue);
-        super.blur(event, element);
-        this.showDatePicker = false;
+        if (this.value) {
+            this.value = this.sortDates(this.value);
+            this.removeDateMask();
+            this.setDateValue(this.formatter(this.value));
+            super.blur(event, element);
+            this.showDatePicker = false;
+        }
     }
     focus(event, element) {
         this.addDateMask();
@@ -3824,6 +3903,13 @@ class DateRange extends TextInput {
             return;
         setTimeout(() => {
             this.mask = this.initialMask;
+            const firstDate = this.value[0]
+                ? dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                : '';
+            const lastDate = this.value[1]
+                ? dayjs(this.value[1], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                : '';
+            this.internalDisplayValue = `${firstDate}${lastDate ? this.splitter : ''}${lastDate}`;
         });
     }
     /**
@@ -3866,6 +3952,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])) {
@@ -4312,6 +4412,7 @@ class Frame extends ComponentRender {
         this.local = false;
         this.metadata = {};
         this.override = {};
+        this.overrideNamedProps = {};
         this.cache = false;
         this.cacheDuration = 2 * 60 * 60 * 1000;
         this.height = 'auto';
@@ -4321,6 +4422,7 @@ class Frame extends ComponentRender {
         this.path = props.path;
         this.local = props.local === true;
         this.override = props.override || this.override;
+        this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
         this.cache = props.cache || this.cache;
         this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
         this.height = this.getInitValue('height', props.height, this.height);
@@ -4336,6 +4438,9 @@ class Frame extends ComponentRender {
                 if (typeof page !== 'object')
                     throw new Error();
                 this.metadata = merge(page, this.override);
+                if (Object.keys(this.overrideNamedProps).length !== 0) {
+                    this.metadata = this.overrideNamedPropsFunc(this.metadata);
+                }
             }
             catch (_a) {
                 this.notFoundError();
@@ -4346,6 +4451,13 @@ class Frame extends ComponentRender {
             }
         });
     }
+    overrideNamedPropsFunc(metadata) {
+        let strMatadata = JSON.stringify(metadata);
+        Object.keys(this.overrideNamedProps).forEach((key) => {
+            strMatadata = strMatadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
+        });
+        return JSON.parse(strMatadata);
+    }
     reload() {
         return __awaiter(this, void 0, void 0, function* () {
             this.loading = true;
@@ -6216,6 +6328,10 @@ class Select extends TextInput {
          * Maximum height of select menu
          */
         this.menuMaxHeight = 304;
+        /**
+         * Maximum width of select menu
+         */
+        this.menuMaxWidth = 'auto';
         /**
          * Input select value
          */
@@ -6275,6 +6391,7 @@ class Select extends TextInput {
         this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
         this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
         this.menuMaxHeight = this.getInitValue('menuMaxHeight', props.menuMaxHeight, this.menuMaxHeight);
+        this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
         this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
@@ -6370,8 +6487,10 @@ class Select extends TextInput {
     getItemsBySearchValue(value, searchIn) {
         return __awaiter(this, void 0, void 0, function* () {
             const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true });
+            this.datasource.loading = true;
             const datasource = DatasourceFactory.factory(config);
             const items = yield datasource.get();
+            this.datasource.loading = false;
             datasource.destroy();
             return items.find(this.getCondition(value));
         });
@@ -9320,23 +9439,21 @@ class SelectTree extends TextInput {
         return this.selectValue;
     }
     set value(value) {
-        this.selectValue = value;
+        this.setValue(value);
     }
     setValue(value) {
-        if (this.returnObject) {
-            if (typeof value !== 'object') {
-                this.value = { id: value };
-            }
-            else {
-                this.value = { id: value[this.dataValue] };
-            }
+        let val = value;
+        if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+            val = value[this.dataValue];
         }
-        else if (typeof value === 'object') {
-            this.value = value[this.dataValue];
+        else if (!value && value !== 0) {
+            val = null;
         }
-        else {
-            this.value = value;
+        if (this.returnObject) {
+            this.selectValue = val ? { id: val } : null;
+            return;
         }
+        this.selectValue = val;
     }
 }
 
@@ -9759,6 +9876,7 @@ class Tab extends Component {
         this.tabTitle = '';
         this.tabTitle = this.getInitValue('tabTitle', props.tabTitle, this.tabTitle);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+        this.flex = this.getInitValue('flex', props.flex, this.flex);
         this.createAccessors();
     }
 }
@@ -9789,13 +9907,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));
     }

package/dist/zd-common.umd.js

@@ -47,6 +47,10 @@
            * Set css in line with cssStyle.
            */
           this.cssStyle = '';
+          /**
+           * Directives registered to the component.
+           */
+          this.directives = {};
           /**
            * Events registered to the component.
            */
@@ -77,12 +81,16 @@
           this.events = core.Event.factory(props.events || this.events);
           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);
           this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
           this.dark = this.getInitValue('dark', props.dark, this.dark);
           this.light = this.getInitValue('light', props.light, this.light);
           this.children = Array.isArray(props.children) ? props.children : this.children;
           this.keyMap = core.KeyMap.factory(props.keyMap || this.keyMap);
           this.createAccessors();
+          Object.keys(this.directives).forEach((key) => {
+              this.directives[key] = core.Event.factory(this.directives[key]);
+          });
       }
       setViewFocus(viewFocus) {
           this.viewFocus = viewFocus;
@@ -1656,10 +1664,6 @@
            * Used to watch a value from store.
            */
           this.storePath = '';
-          /**
-          * Internal input value.
-          */
-          this.value = null;
           /**
            * Input validations.
            */
@@ -1670,6 +1674,8 @@
           this.parsedValidations = {};
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdInput');
           this.parserFn = core.FormatterParserProvider.getParser('ZdInput');
+          this.internalDisplayValue = '';
+          this.internalValue = null;
           this.lastInputValue = undefined;
           this.callInputEvent = debounce__default["default"](({ event, element, component }) => {
               this.callEvent('input', { event, element, component });
@@ -1774,14 +1780,39 @@
           this.rules = Object.values(this.parsedValidations)
               .map((validation) => () => validation(this.value));
       }
+      /**
+       * Input value.
+       */
+      get value() {
+          return this.internalValue;
+      }
+      set value(value) {
+          if (this.internalValue !== value) {
+              this.internalDisplayValue = this.formatter(value);
+              this.internalValue = value;
+          }
+      }
       /**
        * Input displayed value.
        */
       get displayValue() {
-          return this.formatter(this.value);
+          return this.internalDisplayValue;
       }
       set displayValue(value) {
-          this.value = this.parser(value);
+          if (this.internalDisplayValue !== value) {
+              this.internalValue = this.parser(value);
+              let { mask } = this;
+              if (mask) {
+                  if (typeof mask === 'function') {
+                      mask = mask(this.internalValue);
+                  }
+                  this.internalDisplayValue = core.Mask.convertAll(mask, value);
+                  this.internalValue = this.parser(this.internalDisplayValue);
+              }
+              else {
+                  this.internalDisplayValue = value;
+              }
+          }
       }
       /**
        * Retrieves a formatted value.
@@ -2870,6 +2901,7 @@
           this.cards = [];
           /* Card ID to be deleted */
           this.deleteCardId = '';
+          this.overrideNamedProps = {};
           /* Remove the paddings of the dashboard */
           this.removePadding = false;
           /* Height of the dashboard */
@@ -3078,6 +3110,7 @@
           this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
           this.moveMode = this.getInitValue('moveMode', props.moveMode, this.moveMode);
           this.cards = props.cards || this.cards;
+          this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
           this.removePadding = this.getInitValue('removePadding', props.removePadding, this.removePadding);
           this.height = this.getInitValue('height', props.height, this.height);
           this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
@@ -3215,6 +3248,7 @@
               component: 'ZdFrame',
               path: card.path,
               local: card.local,
+              overrideNamedProps: card.overrideNamedProps,
           };
       }
       /* Return footer rightSlot props for view layer */
@@ -3323,6 +3357,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.
            */
@@ -3331,6 +3373,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);
@@ -3346,6 +3390,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';
           }
@@ -3383,12 +3429,12 @@
           }
       }
       get displayValue() {
-          return this.formatter(this.value);
+          return this.internalDisplayValue;
       }
       set displayValue(newValue) {
           this.dateError = false;
-          const dateValue = newValue;
-          this.value = this.parser(dateValue);
+          this.internalDisplayValue = newValue;
+          this.internalValue = this.parser(newValue);
       }
       /**
        * Assign the updated mask to mask property
@@ -3413,14 +3459,16 @@
       setDateValue(displayValue) {
           const lastValue = this.displayValue;
           if (this.isValidDate(displayValue, this.displayFormat)) {
-              this.displayValue = displayValue;
+              this.internalDisplayValue = displayValue;
+              this.internalValue = this.parser(displayValue);
               this.dateError = false;
               if (lastValue !== this.displayValue)
                   this.change(this.value);
           }
           else {
               if (!displayValue) {
-                  this.displayValue = displayValue;
+                  this.internalDisplayValue = displayValue;
+                  this.internalValue = null;
                   if (lastValue !== this.displayValue)
                       this.change(this.value);
               }
@@ -3464,7 +3512,7 @@
       }
       blur(event, element) {
           this.removeDateMask();
-          this.setDateValue(this.displayValue);
+          this.setDateValue(this.formatter(this.value));
           super.blur(event, element);
           this.showDatePicker = false;
       }
@@ -3480,6 +3528,7 @@
               return;
           setTimeout(() => {
               this.mask = this.initialMask;
+              this.internalDisplayValue = core.dayjs(this.value, this.dateFormat).format(this.inputFormat || this.displayFormat);
           });
       }
       /**
@@ -3522,6 +3571,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) {
@@ -3651,10 +3714,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);
@@ -3670,6 +3743,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();
@@ -3696,15 +3771,15 @@
       formatter(value) { return this.formatterFn(value, this); }
       parser(value) { return this.parserFn(value, this); }
       get displayValue() {
-          return this.formatter(this.value);
+          return this.internalDisplayValue;
       }
       set displayValue(newValue) {
           this.dateError = false;
-          const dateValue = newValue;
-          if (dateValue)
-              this.value = this.parser(dateValue);
+          this.internalDisplayValue = newValue;
+          if (newValue)
+              this.internalValue = this.parser(newValue);
           else
-              this.value = [];
+              this.internalValue = [];
       }
       /**
         * Assign the updated mask to mask property
@@ -3730,14 +3805,16 @@
           const lastValue = this.displayValue;
           const values = this.splitValues(displayValue);
           if (this.isValidDateArray(this.displayFormat, values)) {
-              this.displayValue = displayValue;
+              this.internalDisplayValue = displayValue;
+              this.internalValue = this.parser(displayValue);
               this.dateError = false;
               if (lastValue !== this.displayValue)
                   this.change(this.value);
           }
           else {
               if (!displayValue) {
-                  this.displayValue = displayValue;
+                  this.internalDisplayValue = displayValue;
+                  this.internalValue = [];
                   if (lastValue !== this.displayValue)
                       this.change(this.value);
               }
@@ -3813,11 +3890,13 @@
           }
       }
       blur(event, element) {
-          this.value = this.sortDates(this.value);
-          this.removeDateMask();
-          this.setDateValue(this.displayValue);
-          super.blur(event, element);
-          this.showDatePicker = false;
+          if (this.value) {
+              this.value = this.sortDates(this.value);
+              this.removeDateMask();
+              this.setDateValue(this.formatter(this.value));
+              super.blur(event, element);
+              this.showDatePicker = false;
+          }
       }
       focus(event, element) {
           this.addDateMask();
@@ -3831,6 +3910,13 @@
               return;
           setTimeout(() => {
               this.mask = this.initialMask;
+              const firstDate = this.value[0]
+                  ? core.dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                  : '';
+              const lastDate = this.value[1]
+                  ? core.dayjs(this.value[1], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                  : '';
+              this.internalDisplayValue = `${firstDate}${lastDate ? this.splitter : ''}${lastDate}`;
           });
       }
       /**
@@ -3873,6 +3959,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])) {
@@ -4319,6 +4419,7 @@
           this.local = false;
           this.metadata = {};
           this.override = {};
+          this.overrideNamedProps = {};
           this.cache = false;
           this.cacheDuration = 2 * 60 * 60 * 1000;
           this.height = 'auto';
@@ -4328,6 +4429,7 @@
           this.path = props.path;
           this.local = props.local === true;
           this.override = props.override || this.override;
+          this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
           this.cache = props.cache || this.cache;
           this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
           this.height = this.getInitValue('height', props.height, this.height);
@@ -4343,6 +4445,9 @@
                   if (typeof page !== 'object')
                       throw new Error();
                   this.metadata = merge__default["default"](page, this.override);
+                  if (Object.keys(this.overrideNamedProps).length !== 0) {
+                      this.metadata = this.overrideNamedPropsFunc(this.metadata);
+                  }
               }
               catch (_a) {
                   this.notFoundError();
@@ -4353,6 +4458,13 @@
               }
           });
       }
+      overrideNamedPropsFunc(metadata) {
+          let strMatadata = JSON.stringify(metadata);
+          Object.keys(this.overrideNamedProps).forEach((key) => {
+              strMatadata = strMatadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
+          });
+          return JSON.parse(strMatadata);
+      }
       reload() {
           return __awaiter(this, void 0, void 0, function* () {
               this.loading = true;
@@ -6223,6 +6335,10 @@
            * Maximum height of select menu
            */
           this.menuMaxHeight = 304;
+          /**
+           * Maximum width of select menu
+           */
+          this.menuMaxWidth = 'auto';
           /**
            * Input select value
            */
@@ -6282,6 +6398,7 @@
           this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
           this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
           this.menuMaxHeight = this.getInitValue('menuMaxHeight', props.menuMaxHeight, this.menuMaxHeight);
+          this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
           this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
           this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
@@ -6377,8 +6494,10 @@
       getItemsBySearchValue(value, searchIn) {
           return __awaiter(this, void 0, void 0, function* () {
               const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true });
+              this.datasource.loading = true;
               const datasource = core.DatasourceFactory.factory(config);
               const items = yield datasource.get();
+              this.datasource.loading = false;
               datasource.destroy();
               return items.find(this.getCondition(value));
           });
@@ -9327,23 +9446,21 @@
           return this.selectValue;
       }
       set value(value) {
-          this.selectValue = value;
+          this.setValue(value);
       }
       setValue(value) {
-          if (this.returnObject) {
-              if (typeof value !== 'object') {
-                  this.value = { id: value };
-              }
-              else {
-                  this.value = { id: value[this.dataValue] };
-              }
+          let val = value;
+          if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+              val = value[this.dataValue];
           }
-          else if (typeof value === 'object') {
-              this.value = value[this.dataValue];
+          else if (!value && value !== 0) {
+              val = null;
           }
-          else {
-              this.value = value;
+          if (this.returnObject) {
+              this.selectValue = val ? { id: val } : null;
+              return;
           }
+          this.selectValue = val;
       }
   }
 
@@ -9766,6 +9883,7 @@
           this.tabTitle = '';
           this.tabTitle = this.getInitValue('tabTitle', props.tabTitle, this.tabTitle);
           this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+          this.flex = this.getInitValue('flex', props.flex, this.flex);
           this.createAccessors();
       }
   }
@@ -9796,13 +9914,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));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.46.0",
+  "version": "1.48.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "0133e8028e0b9b5876c2bb24b9a8c4d687d22dd8"
+  "gitHead": "8ac65de099ea963d8d4142294dfed80025f5755d"
 }

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

@@ -1,5 +1,5 @@
 import { IKeyMap } from '@zeedhi/core';
-import { IComponent, IComponentEvents } from './interfaces';
+import { IComponent, IComponentDirectives, IComponentEvents } from './interfaces';
 /**
  * Base class for all Zeedhi components.
  */
@@ -22,6 +22,10 @@ export declare class Component implements IComponent {
      * Set css in line with cssStyle.
      */
     cssStyle: string | object;
+    /**
+     * Directives registered to the component.
+     */
+    directives: IComponentDirectives;
     /**
      * Events registered to the component.
      */

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

@@ -12,6 +12,7 @@ export interface IComponent {
     cssClass?: string;
     cssStyle?: string | object;
     events?: IComponentEvents;
+    directives?: IComponentDirectives;
     isVisible?: boolean | string;
     dark?: boolean;
     light?: boolean;
@@ -34,3 +35,7 @@ export interface IComponentEvents<T = IEventParam<any>> extends IEvents<T> {
     onBeforeDestroy?: IEvent<T> | string;
     onDestroyed?: IEvent<T> | string;
 }
+export interface IComponentDirectives {
+    touch?: IComponentEvents;
+    [key: string]: IComponentEvents | undefined;
+}

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

@@ -14,6 +14,7 @@ export declare class Dashboard extends ComponentRender implements IDashboard {
     addModal?: Modal;
     editModal?: Modal;
     deleteCardId: string;
+    overrideNamedProps: any;
     removePadding: boolean;
     height: string | number;
     heightAdjust: string | number;
@@ -41,11 +42,13 @@ export declare class Dashboard extends ComponentRender implements IDashboard {
         component?: undefined;
         path?: undefined;
         local?: undefined;
+        overrideNamedProps?: undefined;
     } | {
         name: string;
         component: string;
         path: string;
         local: boolean;
+        overrideNamedProps: any;
     };
     getFooterRightSlot(cardId: string): ({
         name: string;

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

@@ -27,4 +27,5 @@ export interface IDashboardCard {
     width: number;
     flat?: boolean;
     events?: ICardEvents;
+    overrideNamedProps?: any;
 }

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-file-input/file-input.d.ts

@@ -63,7 +63,7 @@ export declare class FileInput extends TextInput implements IFileInput {
     /**
      * Field value.
      */
-    private internalValue;
+    protected internalValue: any;
     selectFileButton: IButton;
     /**
      * Create a new FileInput

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

@@ -66,22 +66,16 @@ export declare class Form extends ComponentRender implements IForm {
     get childrenProps(): {
         [key: string]: any;
         children?: import("..").IComponentRender[] | undefined;
-        component: string; /**
-         * Applies the justify-content css property.
-         * Available options are start, center, end, space-between and space-around.
-         */
+        component: string;
         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;
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;
-        /**
-         * Applies the align-items css property.
-         * Available options are start, center, end, space-between, space-around and stretch.
-         */
         name: string;
         parent?: import("..").Component | undefined;
     }[];

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

@@ -8,6 +8,7 @@ export declare class Frame extends ComponentRender implements IFrame {
     local: boolean;
     metadata: Object;
     override: Object;
+    overrideNamedProps: any;
     path: string;
     cache: boolean;
     events: IFrameEvents;
@@ -23,6 +24,7 @@ export declare class Frame extends ComponentRender implements IFrame {
      */
     constructor(props: IFrame);
     private getMetadata;
+    overrideNamedPropsFunc(metadata: object): any;
     reload(): Promise<void>;
     protected notFoundError(): void;
     private requestPage;

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

@@ -9,6 +9,7 @@ export interface IFrame extends IComponentRender {
     path: string;
     local?: boolean;
     override?: Object;
+    overrideNamedProps?: any;
     cache?: boolean;
     cacheDuration?: number;
     height?: number | string;

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

@@ -22,11 +22,15 @@ export declare class GridColumn extends Column implements IGridColumn {
         cssClass?: string | undefined;
         cssStyle?: string | object | undefined;
         events?: import("..").IComponentEvents<import("@zeedhi/core").IEventParam<any>> | undefined;
+        directives?: import("..").IComponentDirectives | undefined;
         isVisible?: string | boolean | undefined;
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;
-        name: string;
+        name: string; /**
+         * Creates a new Grid Column.
+         * @param props Grid column properties
+         */
         parent?: import("..").Component | undefined;
     }[];
     /**

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

@@ -98,10 +98,6 @@ export declare class Input extends ComponentRender implements IInput {
      * Used to watch a value from store.
      */
     storePath: string;
-    /**
-    * Internal input value.
-    */
-    value: any;
     /**
      * Input validations.
      */
@@ -120,6 +116,8 @@ export declare class Input extends ComponentRender implements IInput {
     private parsedValidations;
     protected formatterFn: Function;
     protected parserFn: Function;
+    protected internalDisplayValue: string;
+    protected internalValue: any;
     /**
      * Creates a new Input.
      * @param props Input properties
@@ -166,6 +164,11 @@ export declare class Input extends ComponentRender implements IInput {
      * Updates input rules.
      */
     private updateRules;
+    /**
+     * Input value.
+     */
+    get value(): any;
+    set value(value: any);
     /**
      * Input displayed value.
      */

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

@@ -9,6 +9,7 @@ export interface ISelect extends ITextInput {
     dataValue?: string;
     dataDisabled?: string;
     menuMaxHeight?: string | number;
+    menuMaxWidth?: string | number;
     preventLoadOnFocus?: boolean;
     returnObject?: boolean;
     itemBeforeSlot?: IComponentRender[];

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

@@ -42,6 +42,10 @@ export declare class Select extends TextInput implements ISelect {
      * Maximum height of select menu
      */
     menuMaxHeight: string | number;
+    /**
+     * Maximum width of select menu
+     */
+    menuMaxWidth: string | number;
     /**
      * Input select value
      */

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

@@ -13,6 +13,7 @@ export interface ITabsEvents<T = ITabsEventParam | ITabsBeforeChangeEventParam |
 export interface ITab extends IComponent {
     tabTitle: string;
     disabled?: boolean;
+    flex?: boolean;
 }
 export interface ITabs extends IComponentRender {
     activeTab?: number;

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

@@ -6,6 +6,10 @@ import { Component } from '../zd-component/component';
 export declare class Tab extends Component implements ITab {
     disabled: boolean;
     tabTitle: string;
+    /**
+     * Defines if is flex mode.
+     */
+    flex?: boolean;
     /**
      * Create a new Tab.
      * @param props Tab properties

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