@zeedhi/common 1.80.0 → 1.81.0

package/dist/zd-common.esm.js

@@ -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.
@@ -6122,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) {
@@ -6129,8 +6228,8 @@ class Grid extends Iterable {
             }
             if (newClickEvt)
                 newComponent.events.click = newClickEvt;
+            return newComponent;
         }
-        return newComponent;
     }
     changeDefaultSlotNames(slot) {
         const strMetadata = JSON.stringify(slot);
@@ -10385,6 +10484,7 @@ class SelectTree extends TextInput {
          */
         this.fieldHasChild = '';
         this.savedNodes = undefined;
+        this.debounceSearch = debounce(this.searchChange, 500);
         this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
         this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
         this.flattenSearchResults = this.getInitValue('flattenSearchResults', props.flattenSearchResults, this.flattenSearchResults);
@@ -10612,7 +10712,7 @@ class SelectTree extends TextInput {
         if (value !== this.lastInputValue) {
             this.lastInputValue = value;
             this.callInputEvent({ element, component: this });
-            this.searchChange(value, element);
+            this.debounceSearch(value, element);
         }
     }
     get searchValue() {

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.
@@ -6129,6 +6227,7 @@
               const instance = core.Metadata.updateInstance(instanceName, updatedComponent);
               if (newClickEvt)
                   instance.events.click = newClickEvt;
+              return instance;
           }
           catch (e) {
               if (!newComponent.events) {
@@ -6136,8 +6235,8 @@
               }
               if (newClickEvt)
                   newComponent.events.click = newClickEvt;
+              return newComponent;
           }
-          return newComponent;
       }
       changeDefaultSlotNames(slot) {
           const strMetadata = JSON.stringify(slot);
@@ -10392,6 +10491,7 @@
            */
           this.fieldHasChild = '';
           this.savedNodes = undefined;
+          this.debounceSearch = debounce__default["default"](this.searchChange, 500);
           this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
           this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
           this.flattenSearchResults = this.getInitValue('flattenSearchResults', props.flattenSearchResults, this.flattenSearchResults);
@@ -10619,7 +10719,7 @@
           if (value !== this.lastInputValue) {
               this.lastInputValue = value;
               this.callInputEvent({ element, component: this });
-              this.searchChange(value, element);
+              this.debounceSearch(value, element);
           }
       }
       get searchValue() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.80.0",
+  "version": "1.81.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -41,5 +41,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "475e792a47bd61e8b083078ea84dbae954992339"
+  "gitHead": "895b0c66924cfd9a800ce45074822e4994f7cda8"
 }

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-select-tree/select-tree.d.ts

@@ -140,6 +140,7 @@ export declare class SelectTree extends TextInput implements ISelectTree {
      * @param element Element focused
      */
     searchInput(value: string, element?: any): void;
+    private debounceSearch;
     get searchValue(): any;
     protected clearRow(row: IDictionary<any>): {
         [x: string]: any;

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;
+}