@zeedhi/common 1.79.1 → 1.80.1

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, MemoryDatasource, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
@@ -350,6 +350,7 @@ class Alert extends Component {
          * Stacks alert content vertically (mobile)
          */
         this.vertical = false;
+        this.id = 0;
         this.defaultValues = {
             name: this.name,
             dark: this.dark,
@@ -367,6 +368,7 @@ class Alert extends Component {
             showDismiss: this.showDismiss,
             dismissColor: this.dismissColor,
             buttonsSlot: this.buttonsSlot,
+            id: this.id,
         };
         this.assignAlertProperties(props);
         this.createAccessors();
@@ -392,6 +394,7 @@ class Alert extends Component {
         this.showDismiss = this.getInitValue('showDismiss', alert.showDismiss, this.defaultValues.showDismiss);
         this.dismissColor = this.getInitValue('dismissColor', alert.dismissColor, this.defaultValues.dismissColor);
         this.buttonsSlot = alert.buttonsSlot || this.defaultValues.buttonsSlot;
+        this.id = alert.id || this.defaultValues.id;
         this.isVisible = false;
     }
     /**
@@ -2794,12 +2797,7 @@ class Number$1 extends TextInput {
      */
     constructor(props) {
         super(props);
-        this.defaultMask = Config.masks.numberMask || {
-            decimalCharacter: ',',
-            decimalCharacterAlternative: '.',
-            decimalPlaces: 2,
-            digitGroupSeparator: '.',
-        };
+        this.defaultMask = Config.masks.numberMask || {};
         /*
          * Defines how the field content should be aligned.
          */
@@ -2826,7 +2824,7 @@ class Number$1 extends TextInput {
         this.localValue = value;
         if (this.maskValid && this.localValue !== undefined && this.localValue !== null) {
             this.formattedValue = AutoNumeric.format(this.localValue, this.mask);
-            if (this.autoNumericObj) {
+            if (this.autoNumericObj && value !== this.autoNumericObj.rawValue) {
                 this.autoNumericObj.setValue(value);
             }
         }
@@ -2896,7 +2894,7 @@ FormatterParserProvider.registerParser('ZdNumber', (value, { mask = Config.masks
 class Currency extends Number$1 {
     constructor(props) {
         super(props);
-        this.defaultMask = Config.masks.currencyMask;
+        this.defaultMask = Object.assign(Object.assign({}, Config.masks.numberMask), Config.masks.currencyMask);
         this.formatterFn = FormatterParserProvider.getFormatter('ZdCurrency');
         this.parserFn = FormatterParserProvider.getParser('ZdCurrency');
         this.mask = this.getInitValue('mask', props.mask, this.defaultMask);
@@ -2904,46 +2902,146 @@ class Currency extends Number$1 {
         this.validateMask();
     }
 }
-FormatterParserProvider.registerFormatter('ZdCurrency', (value, { mask = Config.masks.currencyMask, } = {}) => (value === null ? '' : AutoNumeric.format(value, mask)));
-FormatterParserProvider.registerParser('ZdCurrency', (value, { mask = Config.masks.currencyMask, } = {}) => (value === '' ? null : AutoNumeric.unformat(value, mask)));
+FormatterParserProvider.registerFormatter('ZdCurrency', (value, { mask = Object.assign(Object.assign({}, Config.masks.numberMask), Config.masks.currencyMask), } = {}) => {
+    let maskDef = mask;
+    if (Accessor.isAccessorDefinition(maskDef)) {
+        const [controller, accessor] = Accessor.getAccessor(maskDef);
+        maskDef = Loader.getInstance(controller)[accessor];
+    }
+    const maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.unformat(value)) : maskDef;
+    return value === null ? '' : AutoNumeric.format(value, maskValue);
+});
+FormatterParserProvider.registerParser('ZdCurrency', (value, { mask = Object.assign(Object.assign({}, Config.masks.numberMask), Config.masks.currencyMask), } = {}) => {
+    let maskDef = mask;
+    if (Accessor.isAccessorDefinition(maskDef)) {
+        const [controller, accessor] = Accessor.getAccessor(maskDef);
+        maskDef = Loader.getInstance(controller)[accessor];
+    }
+    const maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
+    return value === '' ? null : AutoNumeric.unformat(value, maskValue);
+});
+
+class AlertQueue {
+    constructor() {
+        this.queue = [];
+        this.visibleInstances = [];
+    }
+    show(alert) {
+        this.queue.push(alert);
+        if ((this.visibleInstances.length === 0 || !this.visibleInstances[0].isVisible)
+            && this.queue.length === 1) {
+            this.display(alert);
+        }
+        return 0;
+    }
+    /**
+     * Displays an alert
+     * @param alert Alert Structure
+     */
+    display(alert) {
+        if (this.visibleInstances.length === 0) {
+            this.visibleInstances.push(new Alert({ name: 'alert-instance', id: 0 }));
+        }
+        this.visibleInstances[0].assignAlertProperties(alert);
+        this.visibleInstances[0].show();
+        return 0;
+    }
+    remove(index) {
+        this.queue.splice(index, 1);
+        if (index === 0 && this.queue[0]) {
+            setTimeout(() => this.display(this.queue[0]), 200);
+        }
+    }
+}
+
+class AlertReplace extends AlertQueue {
+    show(alert) {
+        super.show(alert);
+        this.visibleInstances[0].hide();
+        this.remove(0);
+        setTimeout(() => this.display(alert), 200);
+        return 0;
+    }
+}
+
+class AlertStack {
+    constructor() {
+        this.queue = [];
+        this.visibleInstances = [];
+    }
+    show(alert) {
+        this.queue.push(alert);
+        return this.display(alert);
+    }
+    display(alert) {
+        const lastAlert = this.visibleInstances.slice(-1)[0];
+        const lastId = (lastAlert === null || lastAlert === void 0 ? void 0 : lastAlert.id) || 0;
+        const id = lastId + 1;
+        const instance = new Alert(Object.assign(Object.assign({}, alert), { id }));
+        this.visibleInstances.push(instance);
+        instance.show();
+        return id;
+    }
+    remove(index) {
+        this.queue.splice(index, 1);
+        this.visibleInstances.splice(index, 1);
+    }
+}
 
 /**
  * Alert Service Class
  */
 class AlertService {
+    static instantiateManager(multiple) {
+        if (multiple === 'queue') {
+            this.alertsManager = new AlertQueue();
+            return;
+        }
+        if (multiple === 'stack') {
+            this.alertsManager = new AlertStack();
+            return;
+        }
+        this.alertsManager = new AlertReplace();
+    }
     /**
      * Displays an alert.
      * If has an opened alert it will be closed.
      * @param alert Alert structure
      */
     static show(alert) {
-        if (this.instance.isVisible) {
-            this.hide();
-            setTimeout(() => this.display(alert), 200);
-        }
-        else {
-            this.display(alert);
-        }
+        return this.alertsManager.show(alert);
     }
     /**
-     * Hides current alert
+     * Hides alert by index. Default index is 0
      */
-    static hide() {
-        this.instance.hide();
+    static hide(index = 0) {
+        this.alertsManager.visibleInstances[index].hide();
+        this.remove(index);
     }
     /**
-     * Displays an alert
-     * @param alert Alert Structure
+     * Hides alert by alert id (returned by the `show` method)
+     * @param id
      */
-    static display(alert) {
-        this.instance.assignAlertProperties(alert);
-        this.instance.show();
+    static hideById(id) {
+        const index = this.alertsManager.visibleInstances.findIndex((instance) => instance.id === id);
+        this.hide(index);
     }
-}
-/**
- * Current alert
- */
-AlertService.instance = new Alert({ name: 'alert-instance' });
+    /**
+     * Hides all of the alerts
+     */
+    static hideAll() {
+        const { length } = this.alertsManager.visibleInstances;
+        for (let i = 0; i < length; i += 1)
+            this.remove(0);
+    }
+    /**
+     * Removes an alert from the alert queue
+     * @param index index of the alert to be removed
+     */
+    static remove(index) {
+        this.alertsManager.remove(index);
+    }
+}
 
 /**
  * Base class for Dialog component.
@@ -3746,6 +3844,14 @@ class Date$1 extends TextInput {
          * Helper value.
          */
         this.helperValue = '';
+        /**
+         * Max value allowed.
+         */
+        this.max = '';
+        /**
+         * Min value allowed.
+         */
+        this.min = '';
         /**
          * Width of the picker.
          */
@@ -3773,6 +3879,8 @@ class Date$1 extends TextInput {
         this.pickerType = this.getInitValue('pickerType', props.pickerType, this.pickerType);
         this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
         this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+        this.min = this.getInitValue('min', props.min, this.min);
+        this.max = this.getInitValue('max', props.max, this.max);
         this.width = this.getInitValue('width', props.width, this.width);
         this.mask = this.getInitValue('mask', props.mask, undefined);
         this.createAccessors();
@@ -3856,6 +3964,28 @@ class Date$1 extends TextInput {
         this.value = this.internalValue; // forces value accessor to be called if necessary
     }
     isValidDate(value, format, strict = true) {
+        const date = dayjs(value, format, strict);
+        const isValidFormat = date.isValid();
+        if (!isValidFormat)
+            return false;
+        const minDate = this.min ? dayjs(this.min, this.dateFormat) : null;
+        const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+        if (!isValidMin)
+            return false;
+        const maxDate = this.max ? dayjs(this.max, this.dateFormat) : null;
+        const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+        if (!isValidMax)
+            return false;
+        const isAllowedDate = this.allowedDates === undefined
+            || (this.allowedDates instanceof Function
+                && this.allowedDates(dayjs(value, format).format(this.dateFormat)))
+            || (Array.isArray(this.allowedDates)
+                && this.allowedDates.indexOf(dayjs(value, format).format(this.dateFormat)) !== -1);
+        if (!isAllowedDate)
+            return false;
+        return true;
+    }
+    isValidFormatDate(value, format, strict = true) {
         return dayjs(value, format, strict).isValid();
     }
     get isoValue() {
@@ -3869,13 +3999,13 @@ class Date$1 extends TextInput {
             this.change(this.value);
     }
     formatISODateValue(value) {
-        if (value && this.isValidDate(value, this.dateFormat)) {
+        if (value && this.isValidFormatDate(value, this.dateFormat)) {
             return dayjs(value, this.dateFormat).format(this.isoFormat);
         }
         return '';
     }
     parseISODateValue(value) {
-        if (value && this.isValidDate(value, this.isoFormat)) {
+        if (value && this.isValidFormatDate(value, this.isoFormat)) {
             return dayjs(value, this.isoFormat).format(this.dateFormat);
         }
         return null;
@@ -4100,6 +4230,14 @@ class DateRange extends TextInput {
          * Helper options.
          */
         this.helperOptions = [];
+        /**
+          * Max value allowed.
+          */
+        this.max = '';
+        /**
+          * Min value allowed.
+          */
+        this.min = '';
         /**
          * Helper value.
          */
@@ -4127,6 +4265,8 @@ class DateRange extends TextInput {
         this.mask = this.getInitValue('mask', props.mask, undefined);
         this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
         this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+        this.min = this.getInitValue('min', props.min, this.min);
+        this.max = this.getInitValue('max', props.max, this.max);
         this.createAccessors();
         this.unitMask = this.mask;
         this.initialMask = this.getInitialMask();
@@ -4223,6 +4363,21 @@ class DateRange extends TextInput {
         return [value];
     }
     isValidDate(value, format, strict = true) {
+        const date = dayjs(value, format, strict);
+        const isValidFormat = date.isValid();
+        if (!isValidFormat)
+            return false;
+        const minDate = this.min ? dayjs(this.min, this.dateFormat) : null;
+        const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+        if (!isValidMin)
+            return false;
+        const maxDate = this.max ? dayjs(this.max, this.dateFormat) : null;
+        const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+        if (!isValidMax)
+            return false;
+        return true;
+    }
+    isValidFormatDate(value, format, strict = true) {
         return dayjs(value, format, strict).isValid();
     }
     get isoRangeValue() {
@@ -4243,7 +4398,7 @@ class DateRange extends TextInput {
             splitedValue = this.splitValues(dates);
         const formattedValue = [];
         splitedValue.forEach((value) => {
-            if (value && this.isValidDate(value, this.dateFormat)) {
+            if (value && this.isValidFormatDate(value, this.dateFormat)) {
                 formattedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
             }
         });
@@ -4253,7 +4408,7 @@ class DateRange extends TextInput {
         const parsedValue = [];
         if (values.length) {
             values.forEach((value) => {
-                if (value && this.isValidDate(value, this.isoFormat)) {
+                if (value && this.isValidFormatDate(value, this.isoFormat)) {
                     parsedValue.push(dayjs(value, this.isoFormat, true).format(this.dateFormat));
                 }
             });
@@ -6065,6 +6220,7 @@ class Grid extends Iterable {
             const instance = Metadata.updateInstance(instanceName, updatedComponent);
             if (newClickEvt)
                 instance.events.click = newClickEvt;
+            return instance;
         }
         catch (e) {
             if (!newComponent.events) {
@@ -6072,8 +6228,8 @@ class Grid extends Iterable {
             }
             if (newClickEvt)
                 newComponent.events.click = newClickEvt;
+            return newComponent;
         }
-        return newComponent;
     }
     changeDefaultSlotNames(slot) {
         const strMetadata = JSON.stringify(slot);
@@ -6526,7 +6682,13 @@ class GridEditable extends Grid {
      */
     addNewRow(row, position = 'end') {
         return __awaiter(this, void 0, void 0, function* () {
-            const { data } = this.datasource;
+            let data;
+            if (this.datasource instanceof MemoryDatasource) {
+                data = this.datasource.allData;
+            }
+            else {
+                data = this.datasource.data;
+            }
             row[this.newRowIdentifier] = true;
             if (position === 'start') {
                 data.unshift(row);
@@ -11183,12 +11345,17 @@ class Tabs extends ComponentRender {
          * Set component height to fill all space available
          */
         this.fillHeight = false;
+        /**
+         * Disable touch support.
+         */
+        this.touchless = false;
         this.tabs = this.getTabs(props.tabs || []);
         this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
         this.height = this.getInitValue('height', props.height, this.height);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.touchless = this.getInitValue('touchless', props.touchless, this.touchless);
         this.createAccessors();
     }
     get activeTab() {
@@ -11294,6 +11461,7 @@ class Text extends ComponentRender {
         this.compile = props.compile === true;
         this.tag = this.getInitValue('tag', props.tag, this.tag);
         this.text = this.getInitValue('text', props.text, this.text);
+        this.textResize = this.getInitValue('textResize', props.textResize, this.textResize);
         this.createAccessors();
     }
 }

package/dist/zd-common.umd.js

@@ -357,6 +357,7 @@
            * Stacks alert content vertically (mobile)
            */
           this.vertical = false;
+          this.id = 0;
           this.defaultValues = {
               name: this.name,
               dark: this.dark,
@@ -374,6 +375,7 @@
               showDismiss: this.showDismiss,
               dismissColor: this.dismissColor,
               buttonsSlot: this.buttonsSlot,
+              id: this.id,
           };
           this.assignAlertProperties(props);
           this.createAccessors();
@@ -399,6 +401,7 @@
           this.showDismiss = this.getInitValue('showDismiss', alert.showDismiss, this.defaultValues.showDismiss);
           this.dismissColor = this.getInitValue('dismissColor', alert.dismissColor, this.defaultValues.dismissColor);
           this.buttonsSlot = alert.buttonsSlot || this.defaultValues.buttonsSlot;
+          this.id = alert.id || this.defaultValues.id;
           this.isVisible = false;
       }
       /**
@@ -2801,12 +2804,7 @@
        */
       constructor(props) {
           super(props);
-          this.defaultMask = core.Config.masks.numberMask || {
-              decimalCharacter: ',',
-              decimalCharacterAlternative: '.',
-              decimalPlaces: 2,
-              digitGroupSeparator: '.',
-          };
+          this.defaultMask = core.Config.masks.numberMask || {};
           /*
            * Defines how the field content should be aligned.
            */
@@ -2833,7 +2831,7 @@
           this.localValue = value;
           if (this.maskValid && this.localValue !== undefined && this.localValue !== null) {
               this.formattedValue = AutoNumeric.format(this.localValue, this.mask);
-              if (this.autoNumericObj) {
+              if (this.autoNumericObj && value !== this.autoNumericObj.rawValue) {
                   this.autoNumericObj.setValue(value);
               }
           }
@@ -2903,7 +2901,7 @@
   class Currency extends Number$1 {
       constructor(props) {
           super(props);
-          this.defaultMask = core.Config.masks.currencyMask;
+          this.defaultMask = Object.assign(Object.assign({}, core.Config.masks.numberMask), core.Config.masks.currencyMask);
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdCurrency');
           this.parserFn = core.FormatterParserProvider.getParser('ZdCurrency');
           this.mask = this.getInitValue('mask', props.mask, this.defaultMask);
@@ -2911,46 +2909,146 @@
           this.validateMask();
       }
   }
-  core.FormatterParserProvider.registerFormatter('ZdCurrency', (value, { mask = core.Config.masks.currencyMask, } = {}) => (value === null ? '' : AutoNumeric.format(value, mask)));
-  core.FormatterParserProvider.registerParser('ZdCurrency', (value, { mask = core.Config.masks.currencyMask, } = {}) => (value === '' ? null : AutoNumeric.unformat(value, mask)));
+  core.FormatterParserProvider.registerFormatter('ZdCurrency', (value, { mask = Object.assign(Object.assign({}, core.Config.masks.numberMask), core.Config.masks.currencyMask), } = {}) => {
+      let maskDef = mask;
+      if (core.Accessor.isAccessorDefinition(maskDef)) {
+          const [controller, accessor] = core.Accessor.getAccessor(maskDef);
+          maskDef = core.Loader.getInstance(controller)[accessor];
+      }
+      const maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.unformat(value)) : maskDef;
+      return value === null ? '' : AutoNumeric.format(value, maskValue);
+  });
+  core.FormatterParserProvider.registerParser('ZdCurrency', (value, { mask = Object.assign(Object.assign({}, core.Config.masks.numberMask), core.Config.masks.currencyMask), } = {}) => {
+      let maskDef = mask;
+      if (core.Accessor.isAccessorDefinition(maskDef)) {
+          const [controller, accessor] = core.Accessor.getAccessor(maskDef);
+          maskDef = core.Loader.getInstance(controller)[accessor];
+      }
+      const maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
+      return value === '' ? null : AutoNumeric.unformat(value, maskValue);
+  });
+
+  class AlertQueue {
+      constructor() {
+          this.queue = [];
+          this.visibleInstances = [];
+      }
+      show(alert) {
+          this.queue.push(alert);
+          if ((this.visibleInstances.length === 0 || !this.visibleInstances[0].isVisible)
+              && this.queue.length === 1) {
+              this.display(alert);
+          }
+          return 0;
+      }
+      /**
+       * Displays an alert
+       * @param alert Alert Structure
+       */
+      display(alert) {
+          if (this.visibleInstances.length === 0) {
+              this.visibleInstances.push(new Alert({ name: 'alert-instance', id: 0 }));
+          }
+          this.visibleInstances[0].assignAlertProperties(alert);
+          this.visibleInstances[0].show();
+          return 0;
+      }
+      remove(index) {
+          this.queue.splice(index, 1);
+          if (index === 0 && this.queue[0]) {
+              setTimeout(() => this.display(this.queue[0]), 200);
+          }
+      }
+  }
+
+  class AlertReplace extends AlertQueue {
+      show(alert) {
+          super.show(alert);
+          this.visibleInstances[0].hide();
+          this.remove(0);
+          setTimeout(() => this.display(alert), 200);
+          return 0;
+      }
+  }
+
+  class AlertStack {
+      constructor() {
+          this.queue = [];
+          this.visibleInstances = [];
+      }
+      show(alert) {
+          this.queue.push(alert);
+          return this.display(alert);
+      }
+      display(alert) {
+          const lastAlert = this.visibleInstances.slice(-1)[0];
+          const lastId = (lastAlert === null || lastAlert === void 0 ? void 0 : lastAlert.id) || 0;
+          const id = lastId + 1;
+          const instance = new Alert(Object.assign(Object.assign({}, alert), { id }));
+          this.visibleInstances.push(instance);
+          instance.show();
+          return id;
+      }
+      remove(index) {
+          this.queue.splice(index, 1);
+          this.visibleInstances.splice(index, 1);
+      }
+  }
 
   /**
    * Alert Service Class
    */
   class AlertService {
+      static instantiateManager(multiple) {
+          if (multiple === 'queue') {
+              this.alertsManager = new AlertQueue();
+              return;
+          }
+          if (multiple === 'stack') {
+              this.alertsManager = new AlertStack();
+              return;
+          }
+          this.alertsManager = new AlertReplace();
+      }
       /**
        * Displays an alert.
        * If has an opened alert it will be closed.
        * @param alert Alert structure
        */
       static show(alert) {
-          if (this.instance.isVisible) {
-              this.hide();
-              setTimeout(() => this.display(alert), 200);
-          }
-          else {
-              this.display(alert);
-          }
+          return this.alertsManager.show(alert);
       }
       /**
-       * Hides current alert
+       * Hides alert by index. Default index is 0
        */
-      static hide() {
-          this.instance.hide();
+      static hide(index = 0) {
+          this.alertsManager.visibleInstances[index].hide();
+          this.remove(index);
       }
       /**
-       * Displays an alert
-       * @param alert Alert Structure
+       * Hides alert by alert id (returned by the `show` method)
+       * @param id
        */
-      static display(alert) {
-          this.instance.assignAlertProperties(alert);
-          this.instance.show();
+      static hideById(id) {
+          const index = this.alertsManager.visibleInstances.findIndex((instance) => instance.id === id);
+          this.hide(index);
       }
-  }
-  /**
-   * Current alert
-   */
-  AlertService.instance = new Alert({ name: 'alert-instance' });
+      /**
+       * Hides all of the alerts
+       */
+      static hideAll() {
+          const { length } = this.alertsManager.visibleInstances;
+          for (let i = 0; i < length; i += 1)
+              this.remove(0);
+      }
+      /**
+       * Removes an alert from the alert queue
+       * @param index index of the alert to be removed
+       */
+      static remove(index) {
+          this.alertsManager.remove(index);
+      }
+  }
 
   /**
    * Base class for Dialog component.
@@ -3753,6 +3851,14 @@
            * Helper value.
            */
           this.helperValue = '';
+          /**
+           * Max value allowed.
+           */
+          this.max = '';
+          /**
+           * Min value allowed.
+           */
+          this.min = '';
           /**
            * Width of the picker.
            */
@@ -3780,6 +3886,8 @@
           this.pickerType = this.getInitValue('pickerType', props.pickerType, this.pickerType);
           this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
           this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+          this.min = this.getInitValue('min', props.min, this.min);
+          this.max = this.getInitValue('max', props.max, this.max);
           this.width = this.getInitValue('width', props.width, this.width);
           this.mask = this.getInitValue('mask', props.mask, undefined);
           this.createAccessors();
@@ -3863,6 +3971,28 @@
           this.value = this.internalValue; // forces value accessor to be called if necessary
       }
       isValidDate(value, format, strict = true) {
+          const date = core.dayjs(value, format, strict);
+          const isValidFormat = date.isValid();
+          if (!isValidFormat)
+              return false;
+          const minDate = this.min ? core.dayjs(this.min, this.dateFormat) : null;
+          const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+          if (!isValidMin)
+              return false;
+          const maxDate = this.max ? core.dayjs(this.max, this.dateFormat) : null;
+          const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+          if (!isValidMax)
+              return false;
+          const isAllowedDate = this.allowedDates === undefined
+              || (this.allowedDates instanceof Function
+                  && this.allowedDates(core.dayjs(value, format).format(this.dateFormat)))
+              || (Array.isArray(this.allowedDates)
+                  && this.allowedDates.indexOf(core.dayjs(value, format).format(this.dateFormat)) !== -1);
+          if (!isAllowedDate)
+              return false;
+          return true;
+      }
+      isValidFormatDate(value, format, strict = true) {
           return core.dayjs(value, format, strict).isValid();
       }
       get isoValue() {
@@ -3876,13 +4006,13 @@
               this.change(this.value);
       }
       formatISODateValue(value) {
-          if (value && this.isValidDate(value, this.dateFormat)) {
+          if (value && this.isValidFormatDate(value, this.dateFormat)) {
               return core.dayjs(value, this.dateFormat).format(this.isoFormat);
           }
           return '';
       }
       parseISODateValue(value) {
-          if (value && this.isValidDate(value, this.isoFormat)) {
+          if (value && this.isValidFormatDate(value, this.isoFormat)) {
               return core.dayjs(value, this.isoFormat).format(this.dateFormat);
           }
           return null;
@@ -4107,6 +4237,14 @@
            * Helper options.
            */
           this.helperOptions = [];
+          /**
+            * Max value allowed.
+            */
+          this.max = '';
+          /**
+            * Min value allowed.
+            */
+          this.min = '';
           /**
            * Helper value.
            */
@@ -4134,6 +4272,8 @@
           this.mask = this.getInitValue('mask', props.mask, undefined);
           this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
           this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+          this.min = this.getInitValue('min', props.min, this.min);
+          this.max = this.getInitValue('max', props.max, this.max);
           this.createAccessors();
           this.unitMask = this.mask;
           this.initialMask = this.getInitialMask();
@@ -4230,6 +4370,21 @@
           return [value];
       }
       isValidDate(value, format, strict = true) {
+          const date = core.dayjs(value, format, strict);
+          const isValidFormat = date.isValid();
+          if (!isValidFormat)
+              return false;
+          const minDate = this.min ? core.dayjs(this.min, this.dateFormat) : null;
+          const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+          if (!isValidMin)
+              return false;
+          const maxDate = this.max ? core.dayjs(this.max, this.dateFormat) : null;
+          const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+          if (!isValidMax)
+              return false;
+          return true;
+      }
+      isValidFormatDate(value, format, strict = true) {
           return core.dayjs(value, format, strict).isValid();
       }
       get isoRangeValue() {
@@ -4250,7 +4405,7 @@
               splitedValue = this.splitValues(dates);
           const formattedValue = [];
           splitedValue.forEach((value) => {
-              if (value && this.isValidDate(value, this.dateFormat)) {
+              if (value && this.isValidFormatDate(value, this.dateFormat)) {
                   formattedValue.push(core.dayjs(value, this.dateFormat, true).format(this.isoFormat));
               }
           });
@@ -4260,7 +4415,7 @@
           const parsedValue = [];
           if (values.length) {
               values.forEach((value) => {
-                  if (value && this.isValidDate(value, this.isoFormat)) {
+                  if (value && this.isValidFormatDate(value, this.isoFormat)) {
                       parsedValue.push(core.dayjs(value, this.isoFormat, true).format(this.dateFormat));
                   }
               });
@@ -6072,6 +6227,7 @@
               const instance = core.Metadata.updateInstance(instanceName, updatedComponent);
               if (newClickEvt)
                   instance.events.click = newClickEvt;
+              return instance;
           }
           catch (e) {
               if (!newComponent.events) {
@@ -6079,8 +6235,8 @@
               }
               if (newClickEvt)
                   newComponent.events.click = newClickEvt;
+              return newComponent;
           }
-          return newComponent;
       }
       changeDefaultSlotNames(slot) {
           const strMetadata = JSON.stringify(slot);
@@ -6533,7 +6689,13 @@
        */
       addNewRow(row, position = 'end') {
           return __awaiter(this, void 0, void 0, function* () {
-              const { data } = this.datasource;
+              let data;
+              if (this.datasource instanceof core.MemoryDatasource) {
+                  data = this.datasource.allData;
+              }
+              else {
+                  data = this.datasource.data;
+              }
               row[this.newRowIdentifier] = true;
               if (position === 'start') {
                   data.unshift(row);
@@ -11190,12 +11352,17 @@
            * Set component height to fill all space available
            */
           this.fillHeight = false;
+          /**
+           * Disable touch support.
+           */
+          this.touchless = false;
           this.tabs = this.getTabs(props.tabs || []);
           this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
           this.height = this.getInitValue('height', props.height, this.height);
           this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
           this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
           this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+          this.touchless = this.getInitValue('touchless', props.touchless, this.touchless);
           this.createAccessors();
       }
       get activeTab() {
@@ -11301,6 +11468,7 @@
           this.compile = props.compile === true;
           this.tag = this.getInitValue('tag', props.tag, this.tag);
           this.text = this.getInitValue('text', props.text, this.text);
+          this.textResize = this.getInitValue('textResize', props.textResize, this.textResize);
           this.createAccessors();
       }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.79.1",
+  "version": "1.80.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -41,5 +41,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "b4bf265016337a00b453394e11176f0ce770b63f"
+  "gitHead": "a8219aae6129d4d736eb08a28ef2763b6dcd9a36"
 }

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

@@ -60,6 +60,7 @@ export declare class Alert extends Component implements IAlert {
      * Stacks alert content vertically (mobile)
      */
     vertical: boolean;
+    id: number;
     protected defaultValues: {
         name: string;
         dark: boolean;
@@ -77,6 +78,7 @@ export declare class Alert extends Component implements IAlert {
         showDismiss: boolean;
         dismissColor: string;
         buttonsSlot: IButton[];
+        id: number;
     };
     /**
      * Creates a new Alert

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

@@ -1,6 +1,7 @@
 import { IComponent } from '../zd-component/interfaces';
 import { IButton } from '../zd-button/interfaces';
 export interface IAlert extends IComponent {
+    id?: number;
     color?: string;
     text?: string;
     timeout?: number;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/types/services/zd-alert/alert-queue.d.ts

@@ -0,0 +1,13 @@
+import { Alert, IAlert } from '../../components';
+import { IAlertsManager } from './interfaces';
+export declare class AlertQueue implements IAlertsManager {
+    protected queue: IAlert[];
+    visibleInstances: Alert[];
+    show(alert: IAlert): number;
+    /**
+     * Displays an alert
+     * @param alert Alert Structure
+     */
+    protected display(alert: IAlert): number;
+    remove(index: number): void;
+}

package/types/services/zd-alert/alert-replace.d.ts

@@ -0,0 +1,5 @@
+import { IAlert } from '../../components';
+import { AlertQueue } from './alert-queue';
+export declare class AlertReplace extends AlertQueue {
+    show(alert: IAlert): number;
+}

package/types/services/zd-alert/alert-service.d.ts

@@ -1,26 +1,34 @@
-import { Alert } from '../../components/zd-alert/alert';
 import { IAlert } from '../../components/zd-alert/interfaces';
+import { IAlertsManager } from './interfaces';
+export declare type Multiple = 'replace' | 'stack' | 'queue';
 /**
  * Alert Service Class
  */
 export declare class AlertService {
-    /**
-     * Current alert
-     */
-    static instance: Alert;
+    static alertsManager: IAlertsManager;
+    static instantiateManager(multiple: Multiple): void;
     /**
      * Displays an alert.
      * If has an opened alert it will be closed.
      * @param alert Alert structure
      */
-    static show(alert: IAlert): void;
+    static show(alert: IAlert): number;
+    /**
+     * Hides alert by index. Default index is 0
+     */
+    static hide(index?: number): void;
+    /**
+     * Hides alert by alert id (returned by the `show` method)
+     * @param id
+     */
+    static hideById(id: number): void;
     /**
-     * Hides current alert
+     * Hides all of the alerts
      */
-    static hide(): void;
+    static hideAll(): void;
     /**
-     * Displays an alert
-     * @param alert Alert Structure
+     * Removes an alert from the alert queue
+     * @param index index of the alert to be removed
      */
-    private static display;
+    static remove(index: number): void;
 }

package/types/services/zd-alert/alert-stack.d.ts

@@ -0,0 +1,9 @@
+import { Alert, IAlert } from '../../components';
+import { IAlertsManager } from './interfaces';
+export declare class AlertStack implements IAlertsManager {
+    protected queue: IAlert[];
+    visibleInstances: Alert[];
+    show(alert: IAlert): number;
+    private display;
+    remove(index: number): void;
+}

package/types/services/zd-alert/interfaces.d.ts

@@ -0,0 +1,6 @@
+import { Alert, IAlert } from '../../components';
+export interface IAlertsManager {
+    visibleInstances: Alert[];
+    show(alert: IAlert): number;
+    remove(index: number): void;
+}