@zeedhi/common 1.87.2 → 1.88.0

package/dist/zd-common.esm.js

@@ -4246,10 +4246,7 @@ class DateRange extends TextInput {
          * Toggles visibility of the week numbers in the body of the calendar.
          */
         this.showWeek = false;
-        /**
-         * Character that will separate the two dates
-         */
-        this.splitter = ' ~ ';
+        this.internalSplitter = ' ~ ';
         /**
          * Width of the picker.
          */
@@ -4288,7 +4285,7 @@ class DateRange extends TextInput {
         this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
         this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
         this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
-        this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
+        this.splitter = this.getInitValue('splitter', props.splitter, this.internalSplitter);
         this.width = this.getInitValue('width', props.width, this.width);
         this.mask = this.getInitValue('mask', props.mask, undefined);
         this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
@@ -4307,6 +4304,15 @@ class DateRange extends TextInput {
             }
         };
     }
+    /**
+     * Character that will separate the two dates
+     */
+    get splitter() {
+        return I18n.translate(this.internalSplitter);
+    }
+    set splitter(splitter) {
+        this.internalSplitter = splitter;
+    }
     getInitialMask() {
         if (isUndefined(this.mask)) {
             this.unitMask = this.inputFormat && this.maskFormat(this.inputFormat);
@@ -4344,7 +4350,7 @@ class DateRange extends TextInput {
       * Gets the updated masked, based on displayFormat if the initial mask is undefined
       */
     getUpdatedMask() {
-        if (isUndefined(this.initialMask)) {
+        if (isUndefined(this.getInitialMask())) {
             return this.maskFormat(`${this.displayFormat}${this.splitter}${this.displayFormat}`);
         }
         return this.mask;
@@ -4475,10 +4481,10 @@ class DateRange extends TextInput {
       * Add date mask
       */
     addDateMask() {
-        if (isUndefined(this.initialMask) || !this.value)
+        if (isUndefined(this.getInitialMask()) || !this.value)
             return;
         setTimeout(() => {
-            this.mask = this.initialMask;
+            this.mask = this.getInitialMask();
             const firstDate = this.value[0]
                 ? dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
                 : '';
@@ -4492,7 +4498,7 @@ class DateRange extends TextInput {
       * Removes the component mask if value is valid
       */
     removeDateMask() {
-        if (isUndefined(this.initialMask) || !this.value || this.dateError
+        if (isUndefined(this.getInitialMask()) || !this.value || this.dateError
             || !this.isValidDateArray(this.dateFormat, this.value)) {
             return;
         }

package/dist/zd-common.umd.js

@@ -4253,10 +4253,7 @@
            * Toggles visibility of the week numbers in the body of the calendar.
            */
           this.showWeek = false;
-          /**
-           * Character that will separate the two dates
-           */
-          this.splitter = ' ~ ';
+          this.internalSplitter = ' ~ ';
           /**
            * Width of the picker.
            */
@@ -4295,7 +4292,7 @@
           this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
           this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
           this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
-          this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
+          this.splitter = this.getInitValue('splitter', props.splitter, this.internalSplitter);
           this.width = this.getInitValue('width', props.width, this.width);
           this.mask = this.getInitValue('mask', props.mask, undefined);
           this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
@@ -4314,6 +4311,15 @@
               }
           };
       }
+      /**
+       * Character that will separate the two dates
+       */
+      get splitter() {
+          return core.I18n.translate(this.internalSplitter);
+      }
+      set splitter(splitter) {
+          this.internalSplitter = splitter;
+      }
       getInitialMask() {
           if (isUndefined__default["default"](this.mask)) {
               this.unitMask = this.inputFormat && this.maskFormat(this.inputFormat);
@@ -4351,7 +4357,7 @@
         * Gets the updated masked, based on displayFormat if the initial mask is undefined
         */
       getUpdatedMask() {
-          if (isUndefined__default["default"](this.initialMask)) {
+          if (isUndefined__default["default"](this.getInitialMask())) {
               return this.maskFormat(`${this.displayFormat}${this.splitter}${this.displayFormat}`);
           }
           return this.mask;
@@ -4482,10 +4488,10 @@
         * Add date mask
         */
       addDateMask() {
-          if (isUndefined__default["default"](this.initialMask) || !this.value)
+          if (isUndefined__default["default"](this.getInitialMask()) || !this.value)
               return;
           setTimeout(() => {
-              this.mask = this.initialMask;
+              this.mask = this.getInitialMask();
               const firstDate = this.value[0]
                   ? core.dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
                   : '';
@@ -4499,7 +4505,7 @@
         * Removes the component mask if value is valid
         */
       removeDateMask() {
-          if (isUndefined__default["default"](this.initialMask) || !this.value || this.dateError
+          if (isUndefined__default["default"](this.getInitialMask()) || !this.value || this.dateError
               || !this.isValidDateArray(this.dateFormat, this.value)) {
               return;
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.87.2",
+  "version": "1.88.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "ba49509e8854ec02eb5615c7197e7cad12d1cabe"
+  "gitHead": "b9e30e705a88fa882c1fbdf140c15cc7c47c7c87"
 }

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

@@ -48,7 +48,9 @@ export declare class DateRange extends TextInput implements IDateRange {
     /**
      * Character that will separate the two dates
      */
-    splitter: string;
+    get splitter(): string;
+    set splitter(splitter: string);
+    private internalSplitter;
     /**
      * Width of the picker.
      */