@zeedhi/common 1.46.0 → 1.47.0

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, DateHelper, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
@@ -3316,6 +3316,14 @@ class Date$1 extends TextInput {
          * Determines the type of the picker - date for date picker, month for month picker.
          */
         this.pickerType = 'date';
+        /**
+         * Helper options.
+         */
+        this.helperOptions = [];
+        /**
+         * Helper value.
+         */
+        this.helperValue = '';
         /**
          * Width of the picker.
          */
@@ -3324,6 +3332,8 @@ class Date$1 extends TextInput {
         this.dateError = false;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdDate');
         this.parserFn = FormatterParserProvider.getParser('ZdDate');
+        this.previousHint = '';
+        this.previousPersistentHint = false;
         this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
@@ -3339,6 +3349,8 @@ class Date$1 extends TextInput {
         this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
         this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
         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);
         if (this.pickerType === 'month') {
             this.isoFormat = 'YYYY-MM';
         }
@@ -3515,6 +3527,20 @@ class Date$1 extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
+    updateHelperHint() {
+        if (this.helperValue) {
+            this.previousHint = this.hint;
+            this.previousPersistentHint = this.persistentHint;
+            this.hint = DateHelper.getLabel(this.helperValue);
+            this.persistentHint = true;
+        }
+    }
+    change(event, element) {
+        super.change(event, element);
+        this.helperValue = '';
+        this.hint = this.previousHint;
+        this.persistentHint = this.previousPersistentHint;
+    }
 }
 FormatterParserProvider.registerFormatter('ZdDate', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
@@ -3644,10 +3670,20 @@ class DateRange extends TextInput {
          * Width of the picker.
          */
         this.width = 248;
+        /**
+         * Helper options.
+         */
+        this.helperOptions = [];
+        /**
+         * Helper value.
+         */
+        this.helperValue = '';
         this.isoFormat = 'YYYY-MM-DD';
         this.dateError = false;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
         this.parserFn = FormatterParserProvider.getParser('ZdDateRange');
+        this.previousHint = '';
+        this.previousPersistentHint = false;
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
@@ -3663,6 +3699,8 @@ class DateRange extends TextInput {
         this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
         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);
+        this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
         this.createAccessors();
         this.unitMask = this.mask;
         this.initialMask = this.getInitialMask();
@@ -3866,6 +3904,20 @@ class DateRange extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
+    updateHelperHint() {
+        if (this.helperValue) {
+            this.previousHint = this.hint;
+            this.previousPersistentHint = this.persistentHint;
+            this.hint = DateHelper.getLabel(this.helperValue);
+            this.persistentHint = true;
+        }
+    }
+    change(event, element) {
+        super.change(event, element);
+        this.helperValue = '';
+        this.hint = this.previousHint;
+        this.persistentHint = this.previousPersistentHint;
+    }
 }
 FormatterParserProvider.registerFormatter('ZdDateRange', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, initialMask, splitter = ' ~ ', unitMask = '', mask = '', isSimpleDisplay = false, } = {}) => {
     if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
@@ -9789,13 +9841,26 @@ class Tabs extends ComponentRender {
      */
     constructor(props) {
         super(props);
-        this.activeTab = 0;
+        this.activeTabValue = 0;
         this.tabs = [];
         this.tabs = this.getTabs(props.tabs || []);
-        this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTab);
+        this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
         this.height = this.getInitValue('height', props.height, this.height);
         this.createAccessors();
     }
+    get activeTab() {
+        var _a;
+        if (this.activeTabValue >= 0 && !((_a = this.tabs[this.activeTabValue]) === null || _a === void 0 ? void 0 : _a.isVisible)) {
+            const firstTabIndex = this.tabs.findIndex((tab) => tab.isVisible);
+            if (firstTabIndex > -1) {
+                this.activeTabValue = firstTabIndex;
+            }
+        }
+        return this.activeTabValue;
+    }
+    set activeTab(index) {
+        this.activeTabValue = index;
+    }
     getTabs(tabs) {
         return tabs.map((tab) => new Tab(tab));
     }

package/dist/zd-common.umd.js

@@ -3323,6 +3323,14 @@
            * Determines the type of the picker - date for date picker, month for month picker.
            */
           this.pickerType = 'date';
+          /**
+           * Helper options.
+           */
+          this.helperOptions = [];
+          /**
+           * Helper value.
+           */
+          this.helperValue = '';
           /**
            * Width of the picker.
            */
@@ -3331,6 +3339,8 @@
           this.dateError = false;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdDate');
           this.parserFn = core.FormatterParserProvider.getParser('ZdDate');
+          this.previousHint = '';
+          this.previousPersistentHint = false;
           this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
@@ -3346,6 +3356,8 @@
           this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
           this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
           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);
           if (this.pickerType === 'month') {
               this.isoFormat = 'YYYY-MM';
           }
@@ -3522,6 +3534,20 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
+      updateHelperHint() {
+          if (this.helperValue) {
+              this.previousHint = this.hint;
+              this.previousPersistentHint = this.persistentHint;
+              this.hint = core.DateHelper.getLabel(this.helperValue);
+              this.persistentHint = true;
+          }
+      }
+      change(event, element) {
+          super.change(event, element);
+          this.helperValue = '';
+          this.hint = this.previousHint;
+          this.persistentHint = this.previousPersistentHint;
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdDate', (value, { dateFormat = core.Config.dateFormat, displayFormat = core.Config.displayFormat, inputFormat = core.Config.dateInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
@@ -3651,10 +3677,20 @@
            * Width of the picker.
            */
           this.width = 248;
+          /**
+           * Helper options.
+           */
+          this.helperOptions = [];
+          /**
+           * Helper value.
+           */
+          this.helperValue = '';
           this.isoFormat = 'YYYY-MM-DD';
           this.dateError = false;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdDateRange');
           this.parserFn = core.FormatterParserProvider.getParser('ZdDateRange');
+          this.previousHint = '';
+          this.previousPersistentHint = false;
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
           this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
@@ -3670,6 +3706,8 @@
           this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
           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);
+          this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
           this.createAccessors();
           this.unitMask = this.mask;
           this.initialMask = this.getInitialMask();
@@ -3873,6 +3911,20 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
+      updateHelperHint() {
+          if (this.helperValue) {
+              this.previousHint = this.hint;
+              this.previousPersistentHint = this.persistentHint;
+              this.hint = core.DateHelper.getLabel(this.helperValue);
+              this.persistentHint = true;
+          }
+      }
+      change(event, element) {
+          super.change(event, element);
+          this.helperValue = '';
+          this.hint = this.previousHint;
+          this.persistentHint = this.previousPersistentHint;
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdDateRange', (value, { dateFormat = core.Config.dateFormat, displayFormat = core.Config.displayFormat, inputFormat = core.Config.dateInputFormat, initialMask, splitter = ' ~ ', unitMask = '', mask = '', isSimpleDisplay = false, } = {}) => {
       if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
@@ -9796,13 +9848,26 @@
        */
       constructor(props) {
           super(props);
-          this.activeTab = 0;
+          this.activeTabValue = 0;
           this.tabs = [];
           this.tabs = this.getTabs(props.tabs || []);
-          this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTab);
+          this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
           this.height = this.getInitValue('height', props.height, this.height);
           this.createAccessors();
       }
+      get activeTab() {
+          var _a;
+          if (this.activeTabValue >= 0 && !((_a = this.tabs[this.activeTabValue]) === null || _a === void 0 ? void 0 : _a.isVisible)) {
+              const firstTabIndex = this.tabs.findIndex((tab) => tab.isVisible);
+              if (firstTabIndex > -1) {
+                  this.activeTabValue = firstTabIndex;
+              }
+          }
+          return this.activeTabValue;
+      }
+      set activeTab(index) {
+          this.activeTabValue = index;
+      }
       getTabs(tabs) {
           return tabs.map((tab) => new Tab(tab));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "0133e8028e0b9b5876c2bb24b9a8c4d687d22dd8"
+  "gitHead": "69b4f8f97adbd991270b536b5fa59fa8fa138aa7"
 }

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

@@ -53,6 +53,14 @@ export declare class DateRange extends TextInput implements IDateRange {
      * Width of the picker.
      */
     width: number | string;
+    /**
+     * Helper options.
+     */
+    helperOptions?: string[];
+    /**
+     * Helper value.
+     */
+    helperValue?: string;
     protected isoFormat: string;
     protected dateError: boolean;
     protected formatterFn: Function;
@@ -117,4 +125,8 @@ export declare class DateRange extends TextInput implements IDateRange {
      * @returns true if it is simple, false otherwise
      */
     protected isSimpleFormat(format: string): boolean;
+    private previousHint;
+    private previousPersistentHint;
+    updateHelperHint(): void;
+    change(event?: Event, element?: any): void;
 }

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

@@ -56,6 +56,14 @@ export declare class Date extends TextInput implements IDate {
      * Determines the type of the picker - date for date picker, month for month picker.
      */
     pickerType: string;
+    /**
+     * Helper options.
+     */
+    helperOptions?: string[];
+    /**
+     * Helper value.
+     */
+    helperValue?: string;
     /**
      * Width of the picker.
      */
@@ -126,4 +134,8 @@ export declare class Date extends TextInput implements IDate {
      * @returns true if it is simple, false otherwise
      */
     protected isSimpleFormat(format: string): boolean;
+    private previousHint;
+    private previousPersistentHint;
+    updateHelperHint(): void;
+    change(event?: Event, element?: any): void;
 }

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

@@ -22,6 +22,8 @@ export interface IDate extends ITextInput {
     showWeek?: boolean;
     width?: number | string;
     orderedDates?: boolean;
+    helperOptions?: string[];
+    helperValue?: string;
 }
 export interface IDateRange extends IDate {
     splitter?: string;

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

@@ -5,7 +5,7 @@ import { ComponentRender } from '../zd-component/component-render';
  * Base class for Tabs component.
  */
 export declare class Tabs extends ComponentRender implements ITabs {
-    activeTab: number;
+    activeTabValue: number;
     events: ITabsEvents;
     tabs: Tab[];
     /**
@@ -17,6 +17,8 @@ export declare class Tabs extends ComponentRender implements ITabs {
      * @param props Tabs properties
      */
     constructor(props: ITabs);
+    get activeTab(): number;
+    set activeTab(index: number);
     private getTabs;
     getTab(name: string): Tab;
     /**