@zeedhi/common 1.47.0 → 1.48.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, DateHelper, 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 */
@@ -3388,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
@@ -3418,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);
             }
@@ -3469,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;
     }
@@ -3485,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);
         });
     }
     /**
@@ -3727,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
@@ -3761,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);
             }
@@ -3844,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();
@@ -3862,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}`;
         });
     }
     /**
@@ -4364,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';
@@ -4373,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);
@@ -4388,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();
@@ -4398,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;
@@ -6268,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
          */
@@ -6327,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);
@@ -6422,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));
         });
@@ -9372,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;
     }
 }
 
@@ -9811,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();
     }
 }

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 */
@@ -3395,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
@@ -3425,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);
               }
@@ -3476,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;
       }
@@ -3492,6 +3528,7 @@
               return;
           setTimeout(() => {
               this.mask = this.initialMask;
+              this.internalDisplayValue = core.dayjs(this.value, this.dateFormat).format(this.inputFormat || this.displayFormat);
           });
       }
       /**
@@ -3734,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
@@ -3768,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);
               }
@@ -3851,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();
@@ -3869,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}`;
           });
       }
       /**
@@ -4371,6 +4419,7 @@
           this.local = false;
           this.metadata = {};
           this.override = {};
+          this.overrideNamedProps = {};
           this.cache = false;
           this.cacheDuration = 2 * 60 * 60 * 1000;
           this.height = 'auto';
@@ -4380,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);
@@ -4395,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();
@@ -4405,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;
@@ -6275,6 +6335,10 @@
            * Maximum height of select menu
            */
           this.menuMaxHeight = 304;
+          /**
+           * Maximum width of select menu
+           */
+          this.menuMaxWidth = 'auto';
           /**
            * Input select value
            */
@@ -6334,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);
@@ -6429,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));
           });
@@ -9379,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;
       }
   }
 
@@ -9818,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();
       }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.47.0",
+  "version": "1.48.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": "69b4f8f97adbd991270b536b5fa59fa8fa138aa7"
+  "gitHead": "8f588b928efe593c47681477f44ac419b28fbabc"
 }

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-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