@zeedhi/common 1.69.0 → 1.70.0

package/dist/zd-common.esm.js

@@ -9985,8 +9985,9 @@ class SelectTree extends TextInput {
     }
     setValue(value) {
         let val = value;
+        const key = this.datasource ? this.dataValue : 'id';
         if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
-            val = value[this.dataValue];
+            val = value[key];
         }
         else if (!value && value !== 0) {
             val = null;
@@ -10042,9 +10043,14 @@ class SelectTreeMultiple extends SelectTree {
          * Changes the behavior of checked nodes that will be displayed in the array of values
          */
         this.valueConsistsOf = 'LEAF_PRIORITY';
+        /**
+         * Show the selectAll option
+         */
+        this.showSelectAll = false;
         this.flat = this.getInitValue('flat', props.flat, this.flat);
         this.limit = this.getInitValue('limit', props.limit, this.limit);
         this.valueConsistsOf = this.getInitValue('valueConsistsOf', props.valueConsistsOf, this.valueConsistsOf);
+        this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
         this.createAccessors();
     }
     /**
@@ -10070,22 +10076,56 @@ class SelectTreeMultiple extends SelectTree {
     }
     setValue(value) {
         const arrValue = Array.isArray(value) ? value : [value];
-        if (this.returnObject) {
-            this.value = arrValue.map((item) => {
-                if (typeof item !== 'object') {
-                    return { id: item };
-                }
-                return { id: item[this.dataValue] };
-            });
-        }
-        else {
+        const key = this.datasource ? this.dataValue : 'id';
+        if (!this.returnObject) {
             this.value = arrValue.map((item) => {
                 if (typeof item === 'object') {
-                    return item[this.dataValue];
+                    return item[key];
                 }
                 return item;
             });
+            return;
         }
+        this.value = arrValue.map((item) => {
+            if (typeof item !== 'object') {
+                return { id: item };
+            }
+            return { id: item[key] };
+        });
+    }
+    getAllNodes(nodes = this.nodes) {
+        let result = nodes;
+        nodes.forEach((node) => {
+            if (!node.children)
+                return;
+            const childNodes = this.getAllNodes(node.children);
+            result = [...result, ...childNodes];
+        });
+        return result;
+    }
+    /**
+     * Dispatches select/unselect event
+     */
+    onSelectAll(isSelected, event, element) {
+        if (isSelected) {
+            this.callEvent('selectedAll', { event, element, component: this });
+            if (!event.defaultPrevented) {
+                this.selectAllItems();
+            }
+        }
+        else {
+            this.callEvent('unselectedAll', { event, element, component: this });
+            if (!event.defaultPrevented) {
+                this.unSelectAllItems();
+            }
+        }
+    }
+    selectAllItems() {
+        const allNodes = this.datasource ? this.datasource.data : this.getAllNodes();
+        this.setValue(allNodes);
+    }
+    unSelectAllItems() {
+        this.setValue([]);
     }
 }
 
@@ -10660,6 +10700,27 @@ class Textarea extends TextInput {
     }
 }
 
+/**
+ * Selects the time format by the rule:
+ * non-common format > common format
+ * and if the format is a common format, it will be overriden by timeFormat
+ */
+class TimeFormatSelector {
+    getFormat(format, timeFormat, useSeconds) {
+        const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
+        const seconds = useSeconds ? ':ss' : '';
+        const defaultFormats = {
+            ampm: `hh:mm${seconds} A`,
+            '24hr': `HH:mm${seconds}`,
+        };
+        const timeFormats = ['ampm', '24hr'];
+        if (commonsDisplay.includes(format) && timeFormats.includes(timeFormat)) {
+            return defaultFormats[timeFormat];
+        }
+        return format;
+    }
+}
+
 /**
  * Base class for Time Picker component.
  */
@@ -10748,21 +10809,20 @@ class Time extends TextInput {
         this.initialMask = this.getInitialMask();
         this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
     }
+    getFormat(format, timeFormat) {
+        const timeFormatSelector = new TimeFormatSelector();
+        const selectedFormat = timeFormatSelector.getFormat(format, timeFormat, this.useSeconds);
+        return selectedFormat;
+    }
     get displayFormat() {
-        const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
-        if (commonsDisplay.includes(this.displayFormatInternal)) {
-            this.displayFormatInternal = this.defaultFormats[this.timeFormat];
-        }
+        this.displayFormatInternal = this.getFormat(this.displayFormatInternal, this.timeFormat);
         return this.displayFormatInternal;
     }
     set displayFormat(value) {
         this.displayFormatInternal = value;
     }
     get valueFormat() {
-        const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
-        if (commonsDisplay.includes(this.valueFormatInternal)) {
-            this.valueFormatInternal = this.defaultFormats['24hr'];
-        }
+        this.valueFormatInternal = this.getFormat(this.valueFormatInternal, '24hr');
         return this.valueFormatInternal;
     }
     set valueFormat(value) {
@@ -10772,13 +10832,6 @@ class Time extends TextInput {
         this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
         return this.isoFormatValue;
     }
-    get defaultFormats() {
-        const seconds = this.useSeconds ? ':ss' : '';
-        return {
-            ampm: `hh:mm${seconds} A`,
-            '24hr': `HH:mm${seconds}`,
-        };
-    }
     getInitialMask() {
         if (isUndefined(this.mask)) {
             this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
@@ -10985,45 +11038,51 @@ class Time extends TextInput {
         this.change(this.value);
     }
 }
-FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = Config.valueTimeFormat, displayFormat = Config.displayTimeFormat, inputFormat = Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
+FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = Config.valueTimeFormat, displayFormat = Config.displayTimeFormat, inputFormat = Config.timeInputFormat, timeFormat = Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
         return '';
     }
-    const isTimeValid = dayjs(value, valueFormat, true).isValid();
+    const timeFormatSelector = new TimeFormatSelector();
+    const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
+    const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
+    const isTimeValid = dayjs(value, timeValueFormat, true).isValid();
     if (!isTimeValid) {
         return value;
     }
     if (mask && initialMask) {
         if (inputFormat) {
-            return dayjs(value, valueFormat).format(inputFormat);
+            return dayjs(value, timeValueFormat).format(inputFormat);
         }
         let valueToUnmask = value;
         if (isSimpleDisplay) {
-            valueToUnmask = dayjs(value, valueFormat).format(displayFormat);
+            valueToUnmask = dayjs(value, timeValueFormat).format(timeDisplayFormat);
         }
         const unmasked = Mask.getValueWithoutMask(valueToUnmask);
         const masked = Mask.getValueWithMask(unmasked, mask);
         return masked;
     }
-    return dayjs(value, valueFormat).format(displayFormat);
+    return dayjs(value, timeValueFormat).format(timeDisplayFormat);
 });
-FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayTimeFormat, valueFormat = Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
+FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayTimeFormat, valueFormat = Config.valueTimeFormat, timeFormat = Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, } = {}) => {
     if (!value) {
         return null;
     }
-    if (dayjs(value, displayFormat, true).isValid()) {
-        return dayjs(value, displayFormat).format(valueFormat);
+    const timeFormatSelector = new TimeFormatSelector();
+    const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
+    const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
+    if (dayjs(value, timeDisplayFormat, true).isValid()) {
+        return dayjs(value, timeDisplayFormat).format(timeValueFormat);
     }
     if (mask && Mask.checkMask(value, mask)) {
         const unmasked = Mask.getValueWithoutMask(value);
         let masked;
         if (!initialMask) {
-            const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+            const displayFmtMask = timeDisplayFormat.replace(/[A-Za-z]/gi, '#');
             masked = Mask.getValueWithMask(unmasked, displayFmtMask);
         }
-        const timeFmtMask = valueFormat.replace(/[A-Za-z]/gi, '#');
+        const timeFmtMask = timeValueFormat.replace(/[A-Za-z]/gi, '#');
         masked = Mask.getValueWithMask(unmasked, timeFmtMask);
-        if (dayjs(masked, valueFormat, true).format(valueFormat) === masked) {
+        if (dayjs(masked, timeValueFormat, true).format(timeValueFormat) === masked) {
             return masked;
         }
     }

package/dist/zd-common.umd.js

@@ -9992,8 +9992,9 @@
       }
       setValue(value) {
           let val = value;
+          const key = this.datasource ? this.dataValue : 'id';
           if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
-              val = value[this.dataValue];
+              val = value[key];
           }
           else if (!value && value !== 0) {
               val = null;
@@ -10049,9 +10050,14 @@
            * Changes the behavior of checked nodes that will be displayed in the array of values
            */
           this.valueConsistsOf = 'LEAF_PRIORITY';
+          /**
+           * Show the selectAll option
+           */
+          this.showSelectAll = false;
           this.flat = this.getInitValue('flat', props.flat, this.flat);
           this.limit = this.getInitValue('limit', props.limit, this.limit);
           this.valueConsistsOf = this.getInitValue('valueConsistsOf', props.valueConsistsOf, this.valueConsistsOf);
+          this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
           this.createAccessors();
       }
       /**
@@ -10077,22 +10083,56 @@
       }
       setValue(value) {
           const arrValue = Array.isArray(value) ? value : [value];
-          if (this.returnObject) {
-              this.value = arrValue.map((item) => {
-                  if (typeof item !== 'object') {
-                      return { id: item };
-                  }
-                  return { id: item[this.dataValue] };
-              });
-          }
-          else {
+          const key = this.datasource ? this.dataValue : 'id';
+          if (!this.returnObject) {
               this.value = arrValue.map((item) => {
                   if (typeof item === 'object') {
-                      return item[this.dataValue];
+                      return item[key];
                   }
                   return item;
               });
+              return;
           }
+          this.value = arrValue.map((item) => {
+              if (typeof item !== 'object') {
+                  return { id: item };
+              }
+              return { id: item[key] };
+          });
+      }
+      getAllNodes(nodes = this.nodes) {
+          let result = nodes;
+          nodes.forEach((node) => {
+              if (!node.children)
+                  return;
+              const childNodes = this.getAllNodes(node.children);
+              result = [...result, ...childNodes];
+          });
+          return result;
+      }
+      /**
+       * Dispatches select/unselect event
+       */
+      onSelectAll(isSelected, event, element) {
+          if (isSelected) {
+              this.callEvent('selectedAll', { event, element, component: this });
+              if (!event.defaultPrevented) {
+                  this.selectAllItems();
+              }
+          }
+          else {
+              this.callEvent('unselectedAll', { event, element, component: this });
+              if (!event.defaultPrevented) {
+                  this.unSelectAllItems();
+              }
+          }
+      }
+      selectAllItems() {
+          const allNodes = this.datasource ? this.datasource.data : this.getAllNodes();
+          this.setValue(allNodes);
+      }
+      unSelectAllItems() {
+          this.setValue([]);
       }
   }
 
@@ -10667,6 +10707,27 @@
       }
   }
 
+  /**
+   * Selects the time format by the rule:
+   * non-common format > common format
+   * and if the format is a common format, it will be overriden by timeFormat
+   */
+  class TimeFormatSelector {
+      getFormat(format, timeFormat, useSeconds) {
+          const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
+          const seconds = useSeconds ? ':ss' : '';
+          const defaultFormats = {
+              ampm: `hh:mm${seconds} A`,
+              '24hr': `HH:mm${seconds}`,
+          };
+          const timeFormats = ['ampm', '24hr'];
+          if (commonsDisplay.includes(format) && timeFormats.includes(timeFormat)) {
+              return defaultFormats[timeFormat];
+          }
+          return format;
+      }
+  }
+
   /**
    * Base class for Time Picker component.
    */
@@ -10755,21 +10816,20 @@
           this.initialMask = this.getInitialMask();
           this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
       }
+      getFormat(format, timeFormat) {
+          const timeFormatSelector = new TimeFormatSelector();
+          const selectedFormat = timeFormatSelector.getFormat(format, timeFormat, this.useSeconds);
+          return selectedFormat;
+      }
       get displayFormat() {
-          const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
-          if (commonsDisplay.includes(this.displayFormatInternal)) {
-              this.displayFormatInternal = this.defaultFormats[this.timeFormat];
-          }
+          this.displayFormatInternal = this.getFormat(this.displayFormatInternal, this.timeFormat);
           return this.displayFormatInternal;
       }
       set displayFormat(value) {
           this.displayFormatInternal = value;
       }
       get valueFormat() {
-          const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
-          if (commonsDisplay.includes(this.valueFormatInternal)) {
-              this.valueFormatInternal = this.defaultFormats['24hr'];
-          }
+          this.valueFormatInternal = this.getFormat(this.valueFormatInternal, '24hr');
           return this.valueFormatInternal;
       }
       set valueFormat(value) {
@@ -10779,13 +10839,6 @@
           this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
           return this.isoFormatValue;
       }
-      get defaultFormats() {
-          const seconds = this.useSeconds ? ':ss' : '';
-          return {
-              ampm: `hh:mm${seconds} A`,
-              '24hr': `HH:mm${seconds}`,
-          };
-      }
       getInitialMask() {
           if (isUndefined__default["default"](this.mask)) {
               this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
@@ -10992,45 +11045,51 @@
           this.change(this.value);
       }
   }
-  core.FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = core.Config.valueTimeFormat, displayFormat = core.Config.displayTimeFormat, inputFormat = core.Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
+  core.FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = core.Config.valueTimeFormat, displayFormat = core.Config.displayTimeFormat, inputFormat = core.Config.timeInputFormat, timeFormat = core.Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
           return '';
       }
-      const isTimeValid = core.dayjs(value, valueFormat, true).isValid();
+      const timeFormatSelector = new TimeFormatSelector();
+      const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
+      const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
+      const isTimeValid = core.dayjs(value, timeValueFormat, true).isValid();
       if (!isTimeValid) {
           return value;
       }
       if (mask && initialMask) {
           if (inputFormat) {
-              return core.dayjs(value, valueFormat).format(inputFormat);
+              return core.dayjs(value, timeValueFormat).format(inputFormat);
           }
           let valueToUnmask = value;
           if (isSimpleDisplay) {
-              valueToUnmask = core.dayjs(value, valueFormat).format(displayFormat);
+              valueToUnmask = core.dayjs(value, timeValueFormat).format(timeDisplayFormat);
           }
           const unmasked = core.Mask.getValueWithoutMask(valueToUnmask);
           const masked = core.Mask.getValueWithMask(unmasked, mask);
           return masked;
       }
-      return core.dayjs(value, valueFormat).format(displayFormat);
+      return core.dayjs(value, timeValueFormat).format(timeDisplayFormat);
   });
-  core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayTimeFormat, valueFormat = core.Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
+  core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayTimeFormat, valueFormat = core.Config.valueTimeFormat, timeFormat = core.Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, } = {}) => {
       if (!value) {
           return null;
       }
-      if (core.dayjs(value, displayFormat, true).isValid()) {
-          return core.dayjs(value, displayFormat).format(valueFormat);
+      const timeFormatSelector = new TimeFormatSelector();
+      const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
+      const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
+      if (core.dayjs(value, timeDisplayFormat, true).isValid()) {
+          return core.dayjs(value, timeDisplayFormat).format(timeValueFormat);
       }
       if (mask && core.Mask.checkMask(value, mask)) {
           const unmasked = core.Mask.getValueWithoutMask(value);
           let masked;
           if (!initialMask) {
-              const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+              const displayFmtMask = timeDisplayFormat.replace(/[A-Za-z]/gi, '#');
               masked = core.Mask.getValueWithMask(unmasked, displayFmtMask);
           }
-          const timeFmtMask = valueFormat.replace(/[A-Za-z]/gi, '#');
+          const timeFmtMask = timeValueFormat.replace(/[A-Za-z]/gi, '#');
           masked = core.Mask.getValueWithMask(unmasked, timeFmtMask);
-          if (core.dayjs(masked, valueFormat, true).format(valueFormat) === masked) {
+          if (core.dayjs(masked, timeValueFormat, true).format(timeValueFormat) === masked) {
               return masked;
           }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.69.0",
+  "version": "1.70.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -39,5 +39,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "68d387623e59f31de6b04926cb0d476f2e1715a0"
+  "gitHead": "5d3e8cfdd580a87208edf3d4033e2a974161fd1a"
 }

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

@@ -13,6 +13,7 @@ export interface ISelectTreeMultiple extends ISelectTree {
     limit?: number;
     events?: ISelectTreeMultipleEvents;
     valueConsistsOf?: string;
+    showSelectAll?: boolean;
 }
 export interface ISelectTreeMultipleSelectedNodesEvent extends IEventParam<SelectTreeMultiple> {
     selectedNodes: ISelectTreeMultipleNode<IDictionary>[];
@@ -23,4 +24,6 @@ export interface ISelectTreeMultipleDeselectEvent extends IEventParam<SelectTree
 export interface ISelectTreeMultipleEvents extends ISelectTreeEvents {
     onChangeSelectedNodes?: IEvent<ISelectTreeMultipleSelectedNodesEvent> | string;
     onDeselect?: IEvent<ISelectTreeMultipleDeselectEvent> | string;
+    selectedAll?: IEvent<IEventParam<any>> | string;
+    unselectedAll?: IEvent<IEventParam<any>> | string;
 }

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

@@ -26,6 +26,10 @@ export declare class SelectTreeMultiple extends SelectTree implements ISelectTre
      * Changes the behavior of checked nodes that will be displayed in the array of values
      */
     valueConsistsOf: string;
+    /**
+     * Show the selectAll option
+     */
+    showSelectAll: boolean;
     /**
      * Creates a new instance of Select Tree Multiple
      * @param props
@@ -42,4 +46,11 @@ export declare class SelectTreeMultiple extends SelectTree implements ISelectTre
     get value(): any;
     set value(value: any);
     setValue(value: any): void;
+    getAllNodes(nodes?: import("..").ISelectTreeNode<IDictionary<any>>[]): import("..").ISelectTreeNode<IDictionary<any>>[];
+    /**
+     * Dispatches select/unselect event
+     */
+    onSelectAll(isSelected: boolean, event: Event, element: any): void;
+    selectAllItems(): void;
+    unSelectAllItems(): void;
 }

package/types/components/zd-time/time-format-selector.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Selects the time format by the rule:
+ * non-common format > common format
+ * and if the format is a common format, it will be overriden by timeFormat
+ */
+export declare class TimeFormatSelector {
+    getFormat(format: string, timeFormat: string, useSeconds: boolean): any;
+}

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

@@ -1,4 +1,3 @@
-import { IDictionary } from '@zeedhi/core';
 import { ITime } from './interfaces';
 import { TextInput } from '../zd-text-input/text-input';
 /**
@@ -78,12 +77,12 @@ export declare class Time extends TextInput implements ITime {
      * @param props Time properties
      */
     constructor(props: ITime);
+    private getFormat;
     get displayFormat(): string;
     set displayFormat(value: string);
     get valueFormat(): string;
     set valueFormat(value: string);
     private get isoFormat();
-    protected get defaultFormats(): IDictionary<string>;
     private getInitialMask;
     formatter(value: string): string;
     parser(value: string): any;