@zeedhi/common 1.96.0 → 1.96.2

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.
@@ -4949,8 +4980,12 @@
           this.rules = Object.keys(this.parsedValidations)
               .map((key) => {
               const validation = this.parsedValidations[key];
-              if (key !== 'maxFileSize')
-                  return () => validation(this.value);
+              if (key !== 'maxFileSize') {
+                  return (value) => {
+                      const testValue = value !== undefined ? value : this.value;
+                      return validation(testValue);
+                  };
+              }
               return () => {
                   if (this.viewGetFileSizes) {
                       const fileSizes = this.viewGetFileSizes();
@@ -4972,7 +5007,8 @@
       });
       const message = core.I18n.translate((config.message || 'VALIDATION_FILE_SIZE'), { fileError });
       return (fileError === '') || message;
-  });
+  });
+  InputFactory.register('ZdFileInput', FileInput);
 
   /**
    * Base class for Footer component.
@@ -5752,12 +5788,12 @@
       const { dataText, formatterDataText, dataTextSeparator, dataValue, } = componentProps;
       let currentRow = row;
       if (dataValue) {
+          const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
+          const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
           if (!formatterDataText) {
               currentRow = column.getLookupData(dataValue, value[dataValue] || value);
           }
-          else {
-              const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
-              const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
+          else if (columns.length === dataTextColumns.length) {
               const loopkupRow = {};
               columns.forEach((item, index) => {
                   const dataTextValue = dataTextColumns[index];
@@ -6015,7 +6051,7 @@
               },
               tab: {
                   event: this.navigateRight.bind(this),
-                  prevent: true,
+                  prevent: false,
                   active: true,
                   index: 99,
                   input: true,
@@ -6023,7 +6059,7 @@
               },
               'shift+tab': {
                   event: this.navigateLeft.bind(this),
-                  prevent: true,
+                  prevent: false,
                   active: true,
                   index: 99,
                   input: true,
@@ -6274,51 +6310,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 (up && rowIndex === 0) {
+              return this.navigatePageDown();
           }
-          if (rowIndex === this.datasource.data.length - 1) {
-              this.navigatePageUp();
+          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)) {
@@ -6496,6 +6539,7 @@
                   active: true,
               },
           };
+          this.viewEnterEdit = null;
           this.newRowIdentifier = '__added_row';
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
           this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
@@ -6503,6 +6547,9 @@
           this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
           this.createAccessors();
       }
+      setViewEnterEdit(viewEnterEdit) {
+          this.viewEnterEdit = viewEnterEdit;
+      }
       onMounted(element) {
           super.onMounted(element);
           core.KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
@@ -6853,6 +6900,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 +6912,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
@@ -6992,6 +7074,15 @@
           delete rows[foundRow[uniqueKey]];
           this.editedRows = rows;
       }
+      /**
+       * Makes the cell enter edit mode
+       */
+      enterEdit(rowKey, columnName) {
+          if (!this.viewEnterEdit) {
+              throw new Error('viewEnterEdit method not assigned');
+          }
+          this.viewEnterEdit(rowKey, columnName);
+      }
   }
 
   /**
@@ -7347,7 +7438,8 @@
               this.value -= this.step;
           }
       }
-  }
+  }
+  InputFactory.register('ZdIncrement', Increment);
 
   class IterableColumnsButtonController {
       constructor(iterableComponent) {
@@ -8032,7 +8124,8 @@
           }
           return result;
       }, '');
-  });
+  });
+  InputFactory.register('ZdSelect', Select);
 
   /**
    * Base class for Iterable Page Size component
@@ -8199,7 +8292,8 @@
               yield this.iterableComponent.setSearch(search);
           });
       }
-  }
+  }
+  InputFactory.register('ZdSearch', Search);
 
   /**
    * Base class for IterableComponentRender component.
@@ -9457,12 +9551,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 +9729,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 +9825,8 @@
           super.onBeforeDestroy();
           this.datasource.destroy();
       }
-  }
+  }
+  InputFactory.register('ZdRadio', Radio);
 
   /**
    * Base class for Range Slider component
@@ -9825,7 +9923,8 @@
       set value(value) {
           this.rangeSliderValue = value;
       }
-  }
+  }
+  InputFactory.register('ZdRangeSlider', RangeSlider);
 
   /**
    * Base class for Row component.
@@ -10252,11 +10351,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 +11186,8 @@
               this.setValue(filteredNode.id);
           }
       }
-  }
+  }
+  InputFactory.register('ZdSelectTree', SelectTree);
 
   /**
    * Base class for Select Tree Multiple component.
@@ -11536,7 +11637,8 @@
           this.inset = this.getInitValue('inset', props.inset, this.inset);
           this.createAccessors();
       }
-  }
+  }
+  InputFactory.register('ZdSwitch', Switch);
 
   /**
    * Base class for Table component.
@@ -11874,7 +11976,8 @@
               this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
           }
       }
-  }
+  }
+  InputFactory.register('ZdTextarea', Textarea);
 
   /**
    * Selects the time format by the rule:
@@ -12262,7 +12365,8 @@
           }
       }
       return value;
-  });
+  });
+  InputFactory.register('ZdTime', Time);
 
   /**
    * Base class for Tooltip component.
@@ -12907,45 +13011,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) {
@@ -13085,12 +13172,16 @@
                   active: true,
               },
           };
+          this.viewEnterEdit = null;
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
           this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
           this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
           this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
           this.createAccessors();
       }
+      setViewEnterEdit(viewEnterEdit) {
+          this.viewEnterEdit = viewEnterEdit;
+      }
       onMounted(element) {
           super.onMounted(element);
           core.KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
@@ -13534,6 +13625,15 @@
           delete rows[foundRow[uniqueKey]];
           this.editedRows = rows;
       }
+      /**
+       * Makes the cell enter edit mode
+       */
+      enterEdit(rowKey, columnName) {
+          if (!this.viewEnterEdit) {
+              throw new Error('viewEnterEdit method not assigned');
+          }
+          this.viewEnterEdit(rowKey, columnName);
+      }
   }
 
   class Icons {
@@ -14672,6 +14772,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 +14874,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 +14882,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 +14917,7 @@
               return new URL(reportFile, this.fileEndPoint).href;
           });
       }
-      removeColumns(columns) {
+      filterColumns(columns) {
           return columns.filter((item) => (item.type !== 'action' && item.isVisible));
       }
   }
@@ -14815,12 +14966,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.2",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "4df47f4fde302b75598f5744945c86fb3aad4b6a"
+  "gitHead": "02a1782aa3a4e4c0bdbf29c41297467071e6e132"
 }

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';