@zeedhi/common 1.40.0 → 1.41.0

package/dist/zd-common.esm.js

@@ -1,7 +1,7 @@
 import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, isEqual, Router, InstanceNotFoundError, Http, Cookie, normalize, URL as URL$1 } from '@zeedhi/core';
+import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
-import merge from 'lodash.merge';
 import set from 'lodash.set';
 
 /**
@@ -424,8 +424,23 @@ class ApexChart extends ComponentRender {
          * Defines the load progress color
          */
         this.loadColor = 'primary';
+        this.defaultOptions = {
+            chart: {
+                toolbar: {
+                    tools: {
+                        download: 'fileDownload',
+                        selection: 'zoomSelection',
+                        zoom: 'zoom',
+                        zoomin: 'zoomIn',
+                        zoomout: 'zoomOut',
+                        pan: 'zoomPanning',
+                        reset: 'zoomReset',
+                    },
+                },
+            },
+        };
         this.chartType = this.getInitValue('chartType', props.chartType, this.chartType);
-        this.options = this.getInitValue('options', props.options, this.options);
+        this.options = merge(this.defaultOptions, this.getInitValue('options', props.options, this.options));
         this.series = this.getInitValue('series', props.series, this.series);
         this.height = this.getInitValue('height', props.height, this.height);
         this.width = this.getInitValue('width', props.width, this.width);
@@ -442,6 +457,14 @@ class ApexChart extends ComponentRender {
     setViewUpdate(viewUpdate) {
         this.viewUpdate = viewUpdate;
     }
+    /**
+     * Sets view get icon HTML method.
+     * @param viewGetIconHTML Update method
+     */
+    setViewGetIconHTML(viewGetIconHTML) {
+        this.viewGetIconHTML = viewGetIconHTML;
+        this.updateToolbarIcons();
+    }
     /**
      * Update the chart
      * @param options New options
@@ -456,6 +479,32 @@ class ApexChart extends ComponentRender {
         }
         return Promise.resolve();
     }
+    updateToolbarIcons() {
+        var _a, _b, _c;
+        if (!this.viewGetIconHTML)
+            return this.options;
+        const getIconFn = this.viewGetIconHTML;
+        let changed = false;
+        const newOptions = Object.assign({}, this.options);
+        if ((_b = (_a = newOptions.chart) === null || _a === void 0 ? void 0 : _a.toolbar) === null || _b === void 0 ? void 0 : _b.tools) {
+            const { tools } = newOptions.chart.toolbar;
+            Object.keys(tools).forEach((key) => {
+                if (typeof tools[key] === 'string') {
+                    tools[key] = getIconFn(tools[key]);
+                    changed = true;
+                }
+            });
+            if ((_c = tools.customIcons) === null || _c === void 0 ? void 0 : _c.length) {
+                tools.customIcons.forEach((item) => {
+                    item.icon = getIconFn(item.icon);
+                });
+            }
+        }
+        if (this.viewUpdate && changed) {
+            this.viewUpdate(newOptions);
+        }
+        return newOptions;
+    }
 }
 
 /**
@@ -3278,10 +3327,6 @@ class DateRange extends TextInput {
          * Sets the locale. Accepts a string with a BCP 47 language tag.
          */
         this.locale = I18n.instance.language;
-        /**
-         * Defines if dates should be ordered
-         */
-        this.orderedDates = false;
         /**
          * Allows changing displayed month with mouse scroll
          */
@@ -3305,15 +3350,12 @@ class DateRange extends TextInput {
         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);
-        this.orderedDates = this.getInitValue('orderedDates', props.orderedDates, this.orderedDates);
         this.dateValidation = this.dateValidation.bind(this);
-        this.dateValidateOrder = this.dateValidateOrder.bind(this);
         this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
         this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
         this.firstDayOfWeek = this.getInitValue('firstDayOfWeek', props.firstDayOfWeek, this.firstDayOfWeek);
         this.fullWidth = this.getInitValue('fullWidth', props.fullWidth, this.fullWidth);
         this.locale = this.getInitValue('locale', props.locale, this.locale);
-        this.rules.push(this.dateValidation, this.dateValidateOrder);
         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);
@@ -3430,13 +3472,13 @@ class DateRange extends TextInput {
             splitedValue = dates;
         else
             splitedValue = this.splitValues(dates);
-        const formatedValue = [];
+        const formattedValue = [];
         splitedValue.forEach((value) => {
             if (value && this.isValidDate(value, this.dateFormat)) {
-                formatedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
+                formattedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
             }
         });
-        return formatedValue;
+        return formattedValue;
     }
     parseISODateRangeValue(values) {
         const parsedValue = [];
@@ -3447,19 +3489,14 @@ class DateRange extends TextInput {
                 }
             });
         }
-        return parsedValue;
+        return this.sortDates(parsedValue);
+    }
+    sortDates(parsedValue) {
+        return parsedValue.sort((a, b) => (dayjs(a, this.dateFormat).isAfter(dayjs(b, this.dateFormat)) ? 1 : -1));
     }
     dateValidation() {
         return !this.dateError || I18n.translate('VALIDATION_INVALID_DATE');
     }
-    dateValidateOrder() {
-        if (this.value && (this.value.length === 2 && this.orderedDates)) {
-            const date1 = dayjs(this.value[0], this.dateFormat);
-            const date2 = dayjs(this.value[1], this.dateFormat);
-            return (date1.isBefore(date2) || date1.isSame(date2)) || I18n.translate('VALIDATION_INVALID_ORDER_DATE');
-        }
-        return true;
-    }
     click(event, element) {
         super.click(event, element);
         if (!event.defaultPrevented) {
@@ -3467,6 +3504,7 @@ class DateRange extends TextInput {
         }
     }
     blur(event, element) {
+        this.value = this.sortDates(this.value);
         this.removeDateMask();
         this.setDateValue(this.displayValue);
         super.blur(event, element);
@@ -3995,6 +4033,12 @@ class Frame extends ComponentRender {
             }
         });
     }
+    reload() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.getMetadata();
+        });
+    }
     notFoundError() { }
     requestPage() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -4877,6 +4921,7 @@ class Grid extends Iterable {
         var _a, _b, _c;
         const rowKey = row[this.datasource.uniqueKey];
         const compName = actionComponent.name;
+        const instanceName = `${compName}_${rowKey}`;
         const path = parentPath ? `${parentPath}.${compName}` : compName;
         const newComponent = merge({}, actionComponent, (_b = (_a = this.actionsApplied[rowKey]) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b[path]);
         let compEvents = {};
@@ -4891,7 +4936,16 @@ class Grid extends Iterable {
                 }
             } });
         const newChildren = (_c = newComponent.children) === null || _c === void 0 ? void 0 : _c.map((child) => this.getActionComponent(child, column, row, path));
-        return Object.assign(Object.assign({}, newComponent), { events: newEvents, name: `${compName}_${rowKey}`, children: newChildren });
+        newComponent.name = instanceName;
+        newComponent.children = newChildren;
+        newComponent.events = newEvents;
+        try {
+            Metadata.updateInstance(instanceName, newComponent);
+        }
+        catch (e) {
+            // do nothing
+        }
+        return newComponent;
     }
     changeDefaultSlotNames(slot) {
         slot.forEach((item) => {
@@ -10525,6 +10579,12 @@ Icons.mdiIcons = {
     tableColumns: 'mdi-table-headers-eye',
     unfold: 'mdi-unfold-more-horizontal',
     warning: 'mdi-exclamation',
+    zoom: 'mdi-magnify-scan',
+    zoomIn: 'mdi-plus-circle-outline',
+    zoomPanning: 'mdi-hand-back-right-outline',
+    zoomOut: 'mdi-minus-circle-outline',
+    zoomReset: 'mdi-magnify-close',
+    zoomSelection: 'mdi-magnify-scan',
 };
 Icons.faIcons = {
     alertOctagon: 'fa fa-exclamation-circle',
@@ -10575,6 +10635,12 @@ Icons.faIcons = {
     tableColumns: 'fa fa-columns',
     unfold: 'fa fa-sort',
     warning: 'fa fa-exclamation',
+    zoom: 'fa fa-search',
+    zoomIn: 'fa fa-search-plus',
+    zoomPanning: 'fa fa-hand-paper',
+    zoomOut: 'fa fa-search-minus',
+    zoomReset: 'fa fa-undo',
+    zoomSelection: 'fa fa-expand',
 };
 Icons.icons = (() => Icons.mdiIcons)();
 

package/dist/zd-common.umd.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.merge'), require('lodash.set')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.debounce', 'lodash.isundefined', 'lodash.merge', 'lodash.set'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.debounce, global.isUndefined, global.merge, global.set));
-})(this, (function (exports, core, debounce, isUndefined, merge, set) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.debounce', 'lodash.isundefined', 'lodash.set'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.debounce, global.isUndefined, global.set));
+})(this, (function (exports, core, merge, debounce, isUndefined, set) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+  var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);
-  var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
   var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
 
   /**
@@ -431,8 +431,23 @@
            * Defines the load progress color
            */
           this.loadColor = 'primary';
+          this.defaultOptions = {
+              chart: {
+                  toolbar: {
+                      tools: {
+                          download: 'fileDownload',
+                          selection: 'zoomSelection',
+                          zoom: 'zoom',
+                          zoomin: 'zoomIn',
+                          zoomout: 'zoomOut',
+                          pan: 'zoomPanning',
+                          reset: 'zoomReset',
+                      },
+                  },
+              },
+          };
           this.chartType = this.getInitValue('chartType', props.chartType, this.chartType);
-          this.options = this.getInitValue('options', props.options, this.options);
+          this.options = merge__default["default"](this.defaultOptions, this.getInitValue('options', props.options, this.options));
           this.series = this.getInitValue('series', props.series, this.series);
           this.height = this.getInitValue('height', props.height, this.height);
           this.width = this.getInitValue('width', props.width, this.width);
@@ -449,6 +464,14 @@
       setViewUpdate(viewUpdate) {
           this.viewUpdate = viewUpdate;
       }
+      /**
+       * Sets view get icon HTML method.
+       * @param viewGetIconHTML Update method
+       */
+      setViewGetIconHTML(viewGetIconHTML) {
+          this.viewGetIconHTML = viewGetIconHTML;
+          this.updateToolbarIcons();
+      }
       /**
        * Update the chart
        * @param options New options
@@ -463,6 +486,32 @@
           }
           return Promise.resolve();
       }
+      updateToolbarIcons() {
+          var _a, _b, _c;
+          if (!this.viewGetIconHTML)
+              return this.options;
+          const getIconFn = this.viewGetIconHTML;
+          let changed = false;
+          const newOptions = Object.assign({}, this.options);
+          if ((_b = (_a = newOptions.chart) === null || _a === void 0 ? void 0 : _a.toolbar) === null || _b === void 0 ? void 0 : _b.tools) {
+              const { tools } = newOptions.chart.toolbar;
+              Object.keys(tools).forEach((key) => {
+                  if (typeof tools[key] === 'string') {
+                      tools[key] = getIconFn(tools[key]);
+                      changed = true;
+                  }
+              });
+              if ((_c = tools.customIcons) === null || _c === void 0 ? void 0 : _c.length) {
+                  tools.customIcons.forEach((item) => {
+                      item.icon = getIconFn(item.icon);
+                  });
+              }
+          }
+          if (this.viewUpdate && changed) {
+              this.viewUpdate(newOptions);
+          }
+          return newOptions;
+      }
   }
 
   /**
@@ -3285,10 +3334,6 @@
            * Sets the locale. Accepts a string with a BCP 47 language tag.
            */
           this.locale = core.I18n.instance.language;
-          /**
-           * Defines if dates should be ordered
-           */
-          this.orderedDates = false;
           /**
            * Allows changing displayed month with mouse scroll
            */
@@ -3312,15 +3357,12 @@
           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);
-          this.orderedDates = this.getInitValue('orderedDates', props.orderedDates, this.orderedDates);
           this.dateValidation = this.dateValidation.bind(this);
-          this.dateValidateOrder = this.dateValidateOrder.bind(this);
           this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
           this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
           this.firstDayOfWeek = this.getInitValue('firstDayOfWeek', props.firstDayOfWeek, this.firstDayOfWeek);
           this.fullWidth = this.getInitValue('fullWidth', props.fullWidth, this.fullWidth);
           this.locale = this.getInitValue('locale', props.locale, this.locale);
-          this.rules.push(this.dateValidation, this.dateValidateOrder);
           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);
@@ -3437,13 +3479,13 @@
               splitedValue = dates;
           else
               splitedValue = this.splitValues(dates);
-          const formatedValue = [];
+          const formattedValue = [];
           splitedValue.forEach((value) => {
               if (value && this.isValidDate(value, this.dateFormat)) {
-                  formatedValue.push(core.dayjs(value, this.dateFormat, true).format(this.isoFormat));
+                  formattedValue.push(core.dayjs(value, this.dateFormat, true).format(this.isoFormat));
               }
           });
-          return formatedValue;
+          return formattedValue;
       }
       parseISODateRangeValue(values) {
           const parsedValue = [];
@@ -3454,19 +3496,14 @@
                   }
               });
           }
-          return parsedValue;
+          return this.sortDates(parsedValue);
+      }
+      sortDates(parsedValue) {
+          return parsedValue.sort((a, b) => (core.dayjs(a, this.dateFormat).isAfter(core.dayjs(b, this.dateFormat)) ? 1 : -1));
       }
       dateValidation() {
           return !this.dateError || core.I18n.translate('VALIDATION_INVALID_DATE');
       }
-      dateValidateOrder() {
-          if (this.value && (this.value.length === 2 && this.orderedDates)) {
-              const date1 = core.dayjs(this.value[0], this.dateFormat);
-              const date2 = core.dayjs(this.value[1], this.dateFormat);
-              return (date1.isBefore(date2) || date1.isSame(date2)) || core.I18n.translate('VALIDATION_INVALID_ORDER_DATE');
-          }
-          return true;
-      }
       click(event, element) {
           super.click(event, element);
           if (!event.defaultPrevented) {
@@ -3474,6 +3511,7 @@
           }
       }
       blur(event, element) {
+          this.value = this.sortDates(this.value);
           this.removeDateMask();
           this.setDateValue(this.displayValue);
           super.blur(event, element);
@@ -4002,6 +4040,12 @@
               }
           });
       }
+      reload() {
+          return __awaiter(this, void 0, void 0, function* () {
+              this.loading = true;
+              this.getMetadata();
+          });
+      }
       notFoundError() { }
       requestPage() {
           return __awaiter(this, void 0, void 0, function* () {
@@ -4884,6 +4928,7 @@
           var _a, _b, _c;
           const rowKey = row[this.datasource.uniqueKey];
           const compName = actionComponent.name;
+          const instanceName = `${compName}_${rowKey}`;
           const path = parentPath ? `${parentPath}.${compName}` : compName;
           const newComponent = merge__default["default"]({}, actionComponent, (_b = (_a = this.actionsApplied[rowKey]) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b[path]);
           let compEvents = {};
@@ -4898,7 +4943,16 @@
                   }
               } });
           const newChildren = (_c = newComponent.children) === null || _c === void 0 ? void 0 : _c.map((child) => this.getActionComponent(child, column, row, path));
-          return Object.assign(Object.assign({}, newComponent), { events: newEvents, name: `${compName}_${rowKey}`, children: newChildren });
+          newComponent.name = instanceName;
+          newComponent.children = newChildren;
+          newComponent.events = newEvents;
+          try {
+              core.Metadata.updateInstance(instanceName, newComponent);
+          }
+          catch (e) {
+              // do nothing
+          }
+          return newComponent;
       }
       changeDefaultSlotNames(slot) {
           slot.forEach((item) => {
@@ -10532,6 +10586,12 @@
       tableColumns: 'mdi-table-headers-eye',
       unfold: 'mdi-unfold-more-horizontal',
       warning: 'mdi-exclamation',
+      zoom: 'mdi-magnify-scan',
+      zoomIn: 'mdi-plus-circle-outline',
+      zoomPanning: 'mdi-hand-back-right-outline',
+      zoomOut: 'mdi-minus-circle-outline',
+      zoomReset: 'mdi-magnify-close',
+      zoomSelection: 'mdi-magnify-scan',
   };
   Icons.faIcons = {
       alertOctagon: 'fa fa-exclamation-circle',
@@ -10582,6 +10642,12 @@
       tableColumns: 'fa fa-columns',
       unfold: 'fa fa-sort',
       warning: 'fa fa-exclamation',
+      zoom: 'fa fa-search',
+      zoomIn: 'fa fa-search-plus',
+      zoomPanning: 'fa fa-hand-paper',
+      zoomOut: 'fa fa-search-minus',
+      zoomReset: 'fa fa-undo',
+      zoomSelection: 'fa fa-expand',
   };
   Icons.icons = (() => Icons.mdiIcons)();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.40.0",
+  "version": "1.41.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": "3dd3bf4a5646a8b7f6b7813b16ca0fbed39c98a8"
+  "gitHead": "8ca8a393eef096d9012bb2730f60588db71db828"
 }

package/types/components/zd-apex-chart/apex-chart.d.ts

@@ -47,6 +47,11 @@ export declare class ApexChart extends ComponentRender implements IApexChart {
      * Optional update method assigned by view layer.
      */
     private viewUpdate?;
+    /**
+     * Method to return icon HTML on the view layer.
+     */
+    private viewGetIconHTML?;
+    private defaultOptions;
     /**
      * Creates a new ApexChart.
      * @param props ApexChart properties
@@ -57,9 +62,15 @@ export declare class ApexChart extends ComponentRender implements IApexChart {
      * @param viewUpdate Update method
      */
     setViewUpdate(viewUpdate: (options: any) => Promise<any>): void;
+    /**
+     * Sets view get icon HTML method.
+     * @param viewGetIconHTML Update method
+     */
+    setViewGetIconHTML(viewGetIconHTML: (icon: string) => string): void;
     /**
      * Update the chart
      * @param options New options
      */
     updateChart(options: any): Promise<any>;
+    updateToolbarIcons(): any;
 }

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

@@ -37,10 +37,6 @@ export declare class DateRange extends TextInput implements IDateRange {
      * Sets the locale. Accepts a string with a BCP 47 language tag.
      */
     locale?: string;
-    /**
-     * Defines if dates should be ordered
-     */
-    orderedDates: boolean;
     /**
      * Allows changing displayed month with mouse scroll
      */
@@ -91,8 +87,8 @@ export declare class DateRange extends TextInput implements IDateRange {
     set isoRangeValue(newValue: string[]);
     formatISODateRangeValue(dates: string[] | string): string[];
     parseISODateRangeValue(values: string[]): any;
+    private sortDates;
     dateValidation(): boolean | string;
-    dateValidateOrder(): boolean | string;
     click(event: Event, element: HTMLElement): void;
     blur(event: Event, element: HTMLElement): void;
     focus(event: Event, element: HTMLElement): void;

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

@@ -20,6 +20,7 @@ export declare class Frame extends ComponentRender implements IFrame {
      */
     constructor(props: IFrame);
     private getMetadata;
+    reload(): Promise<void>;
     protected notFoundError(): void;
     private requestPage;
     /**

package/types/components/zd-selectable-list/interfaces.d.ts

@@ -0,0 +1,7 @@
+import { IList } from '../zd-list/interfaces';
+export interface ISelectableList extends IList {
+    activeClass?: string;
+    mandatory?: boolean;
+    max?: number;
+    multiple?: boolean;
+}

package/types/components/zd-selectable-list/selectable-list.d.ts

@@ -0,0 +1,29 @@
+import { ISelectableList } from './interfaces';
+import { List } from '../zd-list/list';
+/**
+ * Base class for SelectableList component.
+ */
+export declare class SelectableList extends List implements ISelectableList {
+    /**
+     * Applies specified css class to the selected item
+     */
+    activeClass?: string;
+    /**
+     * Specifies whether at least one element must be selected
+     */
+    mandatory: boolean;
+    /**
+     * Defines the maximum number of elements the list has
+     */
+    max?: number;
+    /**
+     * Defines the maximum number of elements the list has
+     */
+    value?: string;
+    /**
+     * Defines how many elements of the list can be selected at the same time
+     */
+    multiple?: boolean;
+    constructor(props: ISelectableList);
+    change(event?: Event, element?: HTMLElement): void;
+}