@zeedhi/common 1.96.0 → 1.96.1

package/dist/zd-common.umd.js

@@ -2010,7 +2010,10 @@
        */
       updateRules() {
           this.rules = Object.values(this.parsedValidations)
-              .map((validation) => () => validation(this.value));
+              .map((validation) => (value) => {
+              const testValue = value !== undefined ? value : this.value;
+              return validation(testValue);
+          });
       }
       /**
        * Input value.
@@ -2063,8 +2066,11 @@
        * Checks the input value are valid to all applied rules.
        * @returns Input is valid
        */
-      isValid() {
-          return this.rules.every((rule) => typeof rule(this.value) !== 'string');
+      isValid(value) {
+          return this.rules.every((rule) => {
+              const testValue = value !== undefined ? value : this.value;
+              return typeof rule(testValue) !== 'string';
+          });
       }
       /**
        * Triggered when the input value changes.
@@ -2149,6 +2155,19 @@
       }
   }
 
+  class InputFactory {
+      static register(className, inputClass) {
+          if (!this.inputClasses[className])
+              this.inputClasses[className] = inputClass;
+      }
+      static factory(props) {
+          if (!this.inputClasses[props.component])
+              return undefined;
+          return new this.inputClasses[props.component](props);
+      }
+  }
+  InputFactory.inputClasses = {};
+
   /**
    * Base class for Checkbox component.
    */
@@ -2163,7 +2182,8 @@
           this.showHelper = false;
           this.createAccessors();
       }
-  }
+  }
+  InputFactory.register('ZdCheckbox', Checkbox);
 
   /**
    * Base class for Checkbox multiple component.
@@ -2216,7 +2236,8 @@
           super.onBeforeDestroy();
           this.datasource.destroy();
       }
-  }
+  }
+  InputFactory.register('ZdCheckboxMultiple', CheckboxMultiple);
 
   /**
    * Base class for Chip component.
@@ -2703,10 +2724,15 @@
            * Defines text input value should concat the suffix text.
            */
           this.valueWithSuffix = textInputDefaults.valueWithSuffix;
+          /**
+           * Defines clicks on outer icon should focus the component.
+           */
+          this.focusOnOuterIconClick = true;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdTextInput');
           this.parserFn = core.FormatterParserProvider.getParser('ZdTextInput');
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, this.appendIcon);
           this.appendOuterIcon = this.getInitValue('appendOuterIcon', props.appendOuterIcon, this.appendOuterIcon);
+          this.focusOnOuterIconClick = this.getInitValue('focusOnOuterIconClick', props.focusOnOuterIconClick, this.focusOnOuterIconClick);
           this.prefix = this.getInitValue('prefix', props.prefix, this.prefix);
           this.prependIcon = this.getInitValue('prependIcon', props.prependIcon, this.prependIcon);
           this.prependOuterIcon = this.getInitValue('prependOuterIcon', props.prependOuterIcon, this.prependOuterIcon);
@@ -2812,7 +2838,8 @@
           formatted = prefixValue + formatted + suffixValue;
       }
       return formatted;
-  });
+  });
+  InputFactory.register('ZdTextInput', TextInput);
 
   /**
    * Base class for Number component
@@ -2922,7 +2949,8 @@
       let maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
       maskValue = Object.assign(Object.assign({}, core.Config.masks.numberMask), maskValue);
       return value === '' ? null : AutoNumeric.unformat(value, maskValue);
-  });
+  });
+  InputFactory.register('ZdNumber', Number$1);
 
   /**
    * Base class for Currency component
@@ -2958,7 +2986,8 @@
       let maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
       maskValue = Object.assign(Object.assign(Object.assign({}, core.Config.masks.numberMask), core.Config.masks.currencyMask), maskValue);
       return value === '' ? null : AutoNumeric.unformat(value, maskValue);
-  });
+  });
+  InputFactory.register('ZdCurrency', Currency);
 
   class AlertQueue {
       constructor() {
@@ -4216,7 +4245,8 @@
           return core.dayjs(value, displayFormat).format(dateTimeFormat);
       }
       return value;
-  });
+  });
+  InputFactory.register('ZdDate', Date$1);
 
   class DateRange extends TextInput {
       /* istanbul ignore next */
@@ -4680,7 +4710,8 @@
           }
       });
       return formattedValue;
-  });
+  });
+  InputFactory.register('ZdDateRange', DateRange);
 
   /**
    * Base class for Divider component.
@@ -4950,7 +4981,10 @@
               .map((key) => {
               const validation = this.parsedValidations[key];
               if (key !== 'maxFileSize')
-                  return () => validation(this.value);
+                  return (value) => {
+                      const testValue = value !== undefined ? value : this.value;
+                      return validation(testValue);
+                  };
               return () => {
                   if (this.viewGetFileSizes) {
                       const fileSizes = this.viewGetFileSizes();
@@ -4972,7 +5006,8 @@
       });
       const message = core.I18n.translate((config.message || 'VALIDATION_FILE_SIZE'), { fileError });
       return (fileError === '') || message;
-  });
+  });
+  InputFactory.register('ZdFileInput', FileInput);
 
   /**
    * Base class for Footer component.
@@ -6015,7 +6050,7 @@
               },
               tab: {
                   event: this.navigateRight.bind(this),
-                  prevent: true,
+                  prevent: false,
                   active: true,
                   index: 99,
                   input: true,
@@ -6023,7 +6058,7 @@
               },
               'shift+tab': {
                   event: this.navigateLeft.bind(this),
-                  prevent: true,
+                  prevent: false,
                   active: true,
                   index: 99,
                   input: true,
@@ -6274,51 +6309,58 @@
               arrSelection.splice(index, 1);
           }
       }
-      navigateLeft() {
+      navigateLeft({ event }) {
           if (!this.viewNavigate)
               return;
-          this.viewNavigate('left');
+          this.viewNavigate('left', event);
       }
-      navigateRight() {
+      navigateRight({ event }) {
           if (!this.viewNavigate)
               return;
-          this.viewNavigate('right');
+          this.viewNavigate('right', event);
       }
       navigateUp() {
-          if (this.cellSelection && this.viewNavigate) {
-              this.viewNavigate('up');
-              return;
-          }
-          const { uniqueKey, currentRow } = this.datasource;
-          const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
-          if (rowIndex === -1) {
-              this.datasource.currentRow = this.datasource.data[this.datasource.data.length - 1];
-              [this.currentColumn] = this.columns;
-              return;
-          }
-          if (rowIndex === 0) {
-              this.navigatePageDown();
+          if (!this.viewNavigate)
               return;
-          }
-          this.datasource.currentRow = this.datasource.data[rowIndex - 1];
+          this.viewNavigate('up');
       }
       navigateDown() {
-          if (this.cellSelection && this.viewNavigate) {
-              this.viewNavigate('down');
+          if (!this.viewNavigate)
               return;
-          }
+          this.viewNavigate('down');
+      }
+      navigateDatasource(up) {
           const { uniqueKey, currentRow } = this.datasource;
           const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
           if (rowIndex === -1) {
-              [this.datasource.currentRow] = this.datasource.data;
-              [this.currentColumn] = this.columns;
-              return;
+              return this.navigateInitial(up);
           }
-          if (rowIndex === this.datasource.data.length - 1) {
-              this.navigatePageUp();
+          if (up && rowIndex === 0) {
+              return this.navigatePageDown();
+          }
+          if (!up && rowIndex === this.datasource.data.length - 1) {
+              return this.navigatePageUp();
+          }
+          return this.navigateCurrentRow(up, rowIndex);
+      }
+      navigateCurrentRow(up, rowIndex) {
+          const addIndex = up ? -1 : 1;
+          this.datasource.currentRow = this.datasource.data[rowIndex + addIndex];
+      }
+      navigateInitial(up) {
+          if (up) {
+              this.navigateLast();
               return;
           }
-          this.datasource.currentRow = this.datasource.data[rowIndex + 1];
+          this.navigateFirst();
+      }
+      navigateFirst() {
+          [this.datasource.currentRow] = this.datasource.data;
+          [this.currentColumn] = this.columns;
+      }
+      navigateLast() {
+          this.datasource.currentRow = this.datasource.data[this.datasource.data.length - 1];
+          [this.currentColumn] = this.columns;
       }
       navigatePageUp() {
           if (this.datasource.page < Math.ceil(this.datasource.total / this.datasource.limit)) {
@@ -6853,6 +6895,9 @@
           if (!revalidate) {
               return Object.keys(this.invalidComponents).length === 0;
           }
+          if (!this.editing) {
+              return this.isViewGridValid();
+          }
           let allValid = true;
           this.datasource.data.forEach((row) => this.columns.forEach((column) => {
               if (!column.isVisible || !column.editable)
@@ -6862,6 +6907,38 @@
           }));
           return allValid;
       }
+      /**
+       * Checks whether the grid is valid while not in editing mode
+       */
+      isViewGridValid(forceEditing = true) {
+          const invalidCompNames = [];
+          const componentInstances = {};
+          const editableColumns = this.columns.filter((column) => column.editable && column.isVisible);
+          editableColumns.forEach((column) => {
+              const compName = this.getCompName('temp', column.name);
+              const componentProps = Object.assign(Object.assign({}, column.componentProps), { name: compName });
+              componentInstances[column.name] = InputFactory.factory(componentProps);
+          });
+          this.datasource.data.forEach((row) => {
+              const key = row[this.datasource.uniqueKey];
+              editableColumns.forEach((column) => {
+                  const instance = componentInstances[column.name];
+                  if (!instance.isValid(row[column.name])) {
+                      invalidCompNames.push(this.getCompName(key, column.name));
+                  }
+              });
+          });
+          if (invalidCompNames.length > 0 && forceEditing) {
+              this.editing = true;
+              core.ViewService.nextTick(() => {
+                  invalidCompNames.forEach((compName) => {
+                      const invalidComponent = core.Metadata.getInstance(compName);
+                      invalidComponent.validate();
+                  });
+              });
+          }
+          return invalidCompNames.length === 0;
+      }
       /**
        * Adds new row to the datasource data and pushes it to the editedRows
        * @param row Row
@@ -7347,7 +7424,8 @@
               this.value -= this.step;
           }
       }
-  }
+  }
+  InputFactory.register('ZdIncrement', Increment);
 
   class IterableColumnsButtonController {
       constructor(iterableComponent) {
@@ -8032,7 +8110,8 @@
           }
           return result;
       }, '');
-  });
+  });
+  InputFactory.register('ZdSelect', Select);
 
   /**
    * Base class for Iterable Page Size component
@@ -8199,7 +8278,8 @@
               yield this.iterableComponent.setSearch(search);
           });
       }
-  }
+  }
+  InputFactory.register('ZdSearch', Search);
 
   /**
    * Base class for IterableComponentRender component.
@@ -9457,12 +9537,14 @@
        */
       show() {
           this.isVisible = true;
+          core.ViewService.nextTick(() => this.callEvent('onShow', { component: this }));
       }
       /**
        * Closes modal
        */
       hide() {
           this.isVisible = false;
+          core.ViewService.nextTick(() => this.callEvent('onHide', { component: this }));
       }
   }
 
@@ -9633,7 +9715,8 @@
           }
       }
   }
-  core.FormatterParserProvider.registerFormatter('ZdPassword', (value) => (value || '').replace(/./g, '*'));
+  core.FormatterParserProvider.registerFormatter('ZdPassword', (value) => (value || '').replace(/./g, '*'));
+  InputFactory.register('ZdPassword', Password);
 
   /**
    * Base class for Progress component
@@ -9728,7 +9811,8 @@
           super.onBeforeDestroy();
           this.datasource.destroy();
       }
-  }
+  }
+  InputFactory.register('ZdRadio', Radio);
 
   /**
    * Base class for Range Slider component
@@ -9825,7 +9909,8 @@
       set value(value) {
           this.rangeSliderValue = value;
       }
-  }
+  }
+  InputFactory.register('ZdRangeSlider', RangeSlider);
 
   /**
    * Base class for Row component.
@@ -10252,11 +10337,12 @@
        */
       updateRules() {
           this.rules = Object.keys(this.parsedValidations)
-              .map((key) => () => {
+              .map((key) => (value) => {
+              const testValue = value !== undefined ? value : this.value;
               const validation = this.parsedValidations[key];
               if (key !== 'required')
-                  return validation(this.value);
-              return validation((this.checkboxAll && 'all') || this.value);
+                  return validation(testValue);
+              return validation((this.checkboxAll && 'all') || testValue);
           });
       }
   }
@@ -11086,7 +11172,8 @@
               this.setValue(filteredNode.id);
           }
       }
-  }
+  }
+  InputFactory.register('ZdSelectTree', SelectTree);
 
   /**
    * Base class for Select Tree Multiple component.
@@ -11536,7 +11623,8 @@
           this.inset = this.getInitValue('inset', props.inset, this.inset);
           this.createAccessors();
       }
-  }
+  }
+  InputFactory.register('ZdSwitch', Switch);
 
   /**
    * Base class for Table component.
@@ -11874,7 +11962,8 @@
               this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
           }
       }
-  }
+  }
+  InputFactory.register('ZdTextarea', Textarea);
 
   /**
    * Selects the time format by the rule:
@@ -12262,7 +12351,8 @@
           }
       }
       return value;
-  });
+  });
+  InputFactory.register('ZdTime', Time);
 
   /**
    * Base class for Tooltip component.
@@ -12907,45 +12997,28 @@
       navigateToggle(collapse) {
           this.treeDataStructure.navigateToggle(collapse);
       }
-      /**
-       * Navigate upwards
-       */
-      navigateUp() {
-          if (this.cellSelection && this.viewNavigate) {
-              this.viewNavigate('up');
-              return;
-          }
+      navigateDatasource(up) {
           const { uniqueKey, currentRow } = this.datasource;
           const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
-          if (rowIndex === -1) {
-              const lastOpenedRowIdx = this.treeDataStructure.previousOpenedRow(this.datasource.data.length);
-              this.datasource.currentRow = this.datasource.data[lastOpenedRowIdx];
-          }
-          else {
+          if (up) {
+              if (rowIndex === -1) {
+                  const lastOpenedRowIdx = this.treeDataStructure.previousOpenedRow(this.datasource.data.length);
+                  this.datasource.currentRow = this.datasource.data[lastOpenedRowIdx];
+                  return;
+              }
               const previousRowIdx = this.treeDataStructure.previousOpenedRow(rowIndex);
               if (previousRowIdx > -1) {
                   this.datasource.currentRow = this.datasource.data[previousRowIdx];
               }
-          }
-      }
-      /**
-       * Navigate downwards
-       */
-      navigateDown() {
-          if (this.cellSelection && this.viewNavigate) {
-              this.viewNavigate('down');
               return;
           }
-          const { uniqueKey, currentRow } = this.datasource;
-          const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
           if (rowIndex === -1) {
               [this.datasource.currentRow] = this.datasource.data;
+              return;
           }
-          else {
-              const nextRowIdx = this.treeDataStructure.nextOpenedRow(rowIndex);
-              if (nextRowIdx > -1) {
-                  this.datasource.currentRow = this.datasource.data[nextRowIdx];
-              }
+          const nextRowIdx = this.treeDataStructure.nextOpenedRow(rowIndex);
+          if (nextRowIdx > -1) {
+              this.datasource.currentRow = this.datasource.data[nextRowIdx];
           }
       }
       removeDuplicates(arr, key) {
@@ -14672,6 +14745,52 @@
       }
   }
 
+  /**
+   * Class used to format grouped data into the ZhReports format
+   */
+  class GroupedPDFFormatter {
+      format(data) {
+          return data.map((item) => {
+              if (this.isGroupHeader(item)) {
+                  return {
+                      __group: item.group,
+                      __groupHeader: item.groupHeader,
+                      __groupFooter: false,
+                      __groupIndex: item.groupIndex,
+                      __groupLabel: item.groupLabel,
+                      __groupValue: item.groupValue,
+                      __groupOpened: item.groupOpened,
+                  };
+              }
+              if (this.isGroupFooter(item)) {
+                  const groupKeys = ['groupFooter', 'groupIndex', 'groupHeaders', 'groupLabel', 'groupValue', 'groupSummary'];
+                  const totalColumnNames = Object.keys(item).filter((key) => !groupKeys.includes(key));
+                  const result = {
+                      __group: true,
+                      __groupFooter: item.groupFooter,
+                      __groupIndex: item.groupIndex,
+                      __groupLabel: item.groupLabel,
+                      __groupValue: item.groupValue,
+                      __groupSummary: !!item.groupSummary,
+                  };
+                  totalColumnNames.forEach((name) => {
+                      result[name] = item[name];
+                  });
+                  return result;
+              }
+              const dataItem = Object.assign({}, item);
+              delete dataItem.groupHeaders;
+              return dataItem;
+          });
+      }
+      isGroupHeader(entry) {
+          return entry.groupHeader === true;
+      }
+      isGroupFooter(entry) {
+          return entry.groupFooter === true;
+      }
+  }
+
   class Report {
       constructor(iterable, title) {
           this.endPoint = core.Config.reportsEndPoint;
@@ -14728,7 +14847,7 @@
               const { route } = reportType;
               const { name, columns, datasource } = this.iterable;
               const { groupedData } = Object.assign({}, this.iterable);
-              const formattedColumns = this.removeColumns(columns);
+              const formattedColumns = this.filterColumns(columns);
               const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
               let dataset;
               if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
@@ -14736,6 +14855,11 @@
                   const metadataObjClone = merge__default["default"](rowMetadata, JSON.parse(metadataObj));
                   dataset = reportType.buildDataset(groupedData, metadataObjClone);
               }
+              else if (reportType instanceof PDFReport && groupedData && groupedData.length > 0) {
+                  const formatter = new GroupedPDFFormatter();
+                  const pdfGroupedData = formatter.format(groupedData);
+                  dataset = reportType.buildDataset(pdfGroupedData);
+              }
               else {
                   dataset = reportType.buildDataset(data, formattedColumns);
               }
@@ -14766,7 +14890,7 @@
               return new URL(reportFile, this.fileEndPoint).href;
           });
       }
-      removeColumns(columns) {
+      filterColumns(columns) {
           return columns.filter((item) => (item.type !== 'action' && item.isVisible));
       }
   }
@@ -14815,12 +14939,14 @@
   exports.GridColumn = GridColumn;
   exports.GridColumnEditable = GridColumnEditable;
   exports.GridEditable = GridEditable;
+  exports.GroupedPDFFormatter = GroupedPDFFormatter;
   exports.Header = Header;
   exports.Icon = Icon;
   exports.Icons = Icons;
   exports.Image = Image;
   exports.Increment = Increment;
   exports.Input = Input;
+  exports.InputFactory = InputFactory;
   exports.Iterable = Iterable;
   exports.IterableColumnsButton = IterableColumnsButton;
   exports.IterableColumnsButtonController = IterableColumnsButtonController;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.96.0",
+  "version": "1.96.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "4df47f4fde302b75598f5744945c86fb3aad4b6a"
+  "gitHead": "5898cc8926fdb11f3fbc71af1e587cd0bb1f53b1"
 }

package/types/components/index.d.ts

@@ -70,6 +70,7 @@ export * from './zd-increment/increment';
 export * from './zd-increment/interfaces';
 export * from './zd-input/input';
 export * from './zd-input/interfaces';
+export * from './zd-input/input-factory';
 export * from './zd-iterable/column';
 export * from './zd-iterable/iterable';
 export * from './zd-iterable/column-not-found';

package/types/components/zd-grid/grid-editable.d.ts

@@ -11,6 +11,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * Editable columns
      */
     columns: GridColumnEditable[];
+    currentColumn: GridColumnEditable;
     /**
      * Editing rows
      */
@@ -160,6 +161,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param revalidate Defines if the fields should be revalidated
      */
     isGridValid(revalidate?: boolean): boolean;
+    /**
+     * Checks whether the grid is valid while not in editing mode
+     */
+    private isViewGridValid;
     /**
      * Adds new row to the datasource data and pushes it to the editedRows
      * @param row Row

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

@@ -1,4 +1,4 @@
-import { IDictionary, IKeyMap } from '@zeedhi/core';
+import { IDictionary, IEventParam, IKeyMap } from '@zeedhi/core';
 import { Component } from '../zd-component/component';
 import { IComponent, IComponentRender } from '../zd-component/interfaces';
 import { Iterable } from '../zd-iterable/iterable';
@@ -143,8 +143,8 @@ export declare class Grid extends Iterable implements IGrid {
     };
     cellSelection: boolean;
     currentColumn: Column | null;
-    protected viewNavigate: ((direction: 'up' | 'down' | 'left' | 'right') => void) | null;
-    setViewNavigate(viewNavigate: (up: 'up' | 'down' | 'left' | 'right') => void): void;
+    protected viewNavigate: ((direction: 'up' | 'down' | 'left' | 'right', event?: Event) => void) | null;
+    setViewNavigate(viewNavigate: (up: 'up' | 'down' | 'left' | 'right', event?: Event) => void): void;
     /**
      * Creates a new Grid.
      * @param props Grid properties
@@ -208,10 +208,15 @@ export declare class Grid extends Iterable implements IGrid {
     selectAll(isSelected: boolean): void;
     toggleRow(row: IDictionary): void;
     selectRow(row: IDictionary, select: boolean): void;
-    navigateLeft(): void;
-    navigateRight(): void;
+    navigateLeft({ event }: IEventParam<any>): void;
+    navigateRight({ event }: IEventParam<any>): void;
     navigateUp(): void;
     navigateDown(): void;
+    navigateDatasource(up: boolean): void;
+    navigateCurrentRow(up: boolean, rowIndex: number): void;
+    navigateInitial(up: boolean): void;
+    navigateFirst(): void;
+    navigateLast(): void;
     navigatePageUp(): void;
     navigatePageDown(): void;
     deleteRows(): Promise<any[]>;

package/types/components/zd-input/input-factory.d.ts

@@ -0,0 +1,6 @@
+import { IDictionary, INewable } from '@zeedhi/core';
+export declare class InputFactory {
+    private static inputClasses;
+    static register(className: string, inputClass: INewable<any>): void;
+    static factory(props: IDictionary<any>): any;
+}