@zeedhi/common 1.51.0 → 1.54.0

package/dist/zd-common.umd.js

@@ -2324,7 +2324,12 @@
            * Removes viewport maximum-width size breakpoints.
            */
           this.fluid = true;
+          /**
+           * Define if the container is a scroll view
+           */
+          this.scrollView = false;
           this.fluid = this.getInitValue('fluid', props.fluid, this.fluid);
+          this.scrollView = this.getInitValue('scrollView', props.scrollView, this.scrollView);
           this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
           this.height = this.getInitValue('height', props.height, this.height);
           this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
@@ -4804,6 +4809,23 @@
       }
   }
 
+  class IterableController {
+      constructor(iterable) {
+          this.searchInValue = undefined;
+          this.columns = iterable.columns;
+      }
+      get searchIn() {
+          return this.searchInValue || this.columns.reduce((result, column) => {
+              if (column.type !== 'action' && column.isVisible)
+                  result.push(column.name);
+              return result;
+          }, []);
+      }
+      set searchIn(value) {
+          this.searchInValue = value;
+      }
+  }
+
   /**
    * Base class for Iterable components.
    */
@@ -4839,16 +4861,14 @@
            */
           this.actionsApplied = {};
           this.columns = this.getColumns(props.columns || this.columns);
-          this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || this.getSearchColumns() }));
+          this.createController();
+          this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || `{{IterableController_${this.name}.searchIn}}` }));
           this.pageSizes = this.getInitValue('pageSizes', props.pageSizes, this.pageSizes);
           this.virtualScroll = this.getInitValue('virtualScroll', props.virtualScroll, this.virtualScroll);
       }
-      getSearchColumns() {
-          return this.columns.reduce((result, column) => {
-              if (column.type !== 'action')
-                  result.push(column.name);
-              return result;
-          }, []);
+      createController() {
+          const controller = new IterableController(this);
+          core.Loader.addController(`IterableController_${this.name}`, controller);
       }
       /**
        * Retrieves columns instances
@@ -5505,6 +5525,7 @@
           };
           this.newRowIdentifier = '__added_row';
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+          this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
           this.createAccessors();
       }
       onMounted(element) {
@@ -5557,10 +5578,10 @@
        * @param event DOM event
        * @param element DOM Element
        */
-      cellClick(row, column, event, element) {
+      cellClick(row, column, event, element, canEdit = true) {
           if (this.editing)
               return;
-          if (column.editable) {
+          if (column.editable && canEdit) {
               this.editing = true;
               this.preventRowClick = true;
               this.datasource.currentRow = row;
@@ -5909,6 +5930,9 @@
               throw e;
           }
       }
+      callCanEditRow(row) {
+          return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+      }
   }
 
   /**
@@ -10216,7 +10240,7 @@
           /**
            * Defines the format of a time displayed in picker. Available options are ampm and 24hr.
            */
-          this.timeFormat = core.Config.timeFormat || 'ampm';
+          this.timeFormat = core.Config.timeFormat || 'ampm'; // change props to pickerFormat
           /**
            * Forces 100% width.
            */
@@ -10247,29 +10271,18 @@
           this.width = 290;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdTime');
           this.parserFn = core.FormatterParserProvider.getParser('ZdTime');
+          this.isoFormatValue = 'HH:mm';
+          this.valueFormatInternal = core.Config.valueTimeFormat;
+          this.displayFormatInternal = core.Config.displayTimeFormat;
           /**
-           * Map of the mask functions
-           */
-          this.maskFunctions = {
-              ampm: () => this.ampmMask(),
-              '24hr': (value) => this.fullTimeMask(value),
-          };
-          /**
-           * Format used in time value
+           * Defines the time input format.
            */
-          this.valueFormat = core.Config.valueTimeFormat;
-          /**
-           * Format used to display the value
-           */
-          this.displayFormat = core.Config.displayTimeFormat;
+          this.inputFormat = core.Config.timeInputFormat;
           /**
            * True when displayValue is valid
            */
           this.isDisplayValid = true;
-          /**
-           * Last invalid value passed to formatter
-           */
-          this.lastInvalid = '';
+          this.timeError = false;
           this.allowedHours = this.getInitValue('allowedHours', props.allowedHours, this.allowedHours);
           this.allowedMinutes = this.getInitValue('allowedMinutes', props.allowedMinutes, this.allowedMinutes);
           this.allowedSeconds = this.getInitValue('allowedSeconds', props.allowedSeconds, this.allowedSeconds);
@@ -10283,40 +10296,40 @@
           this.useSeconds = this.getInitValue('useSeconds', props.useSeconds, this.useSeconds);
           this.width = this.getInitValue('width', props.width, this.width);
           this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-          this.mask = this.getInitValue('mask', props.mask, this.getMask);
           this.timeValidation = this.timeValidation.bind(this);
+          this.valueFormat = this.getInitValue('valueFormat', props.valueFormat, this.valueFormatInternal);
+          this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormatInternal);
+          this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
           this.timeAllowedValidation = this.timeAllowedValidation.bind(this);
           this.rules.push(this.timeValidation, this.timeAllowedValidation);
-          this.valueFormat = this.getInitValue('valueFormat', props.valueFormat, this.valueFormat);
-          this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
+          this.mask = this.getInitValue('mask', props.mask, undefined);
           this.createAccessors();
-          this.createFormatAccessors();
-      }
-      createFormatAccessors() {
-          if (!this.valueFormat) {
-              Object.defineProperty(this, 'valueFormat', {
-                  get: () => this.defaultValueFmt,
-                  set: (valueFormat) => {
-                      delete this.valueFormat;
-                      this.valueFormat = valueFormat;
-                  },
-              });
+          this.initialMask = this.getInitialMask();
+          this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+      }
+      get displayFormat() {
+          const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
+          if (commonsDisplay.includes(this.displayFormatInternal)) {
+              this.displayFormatInternal = this.defaultFormats[this.timeFormat];
           }
-          if (!this.displayFormat) {
-              Object.defineProperty(this, 'displayFormat', {
-                  get: () => this.defaultDisplayFmt,
-                  set: (displayFormat) => {
-                      delete this.displayFormat;
-                      this.displayFormat = displayFormat;
-                  },
-              });
+          return this.displayFormatInternal;
+      }
+      set displayFormat(value) {
+          this.displayFormatInternal = value;
+      }
+      get valueFormat() {
+          const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
+          if (commonsDisplay.includes(this.valueFormatInternal)) {
+              this.valueFormatInternal = this.defaultFormats['24hr'];
           }
+          return this.valueFormatInternal;
       }
-      get defaultValueFmt() {
-          return this.defaultFormats['24hr'];
+      set valueFormat(value) {
+          this.valueFormatInternal = value;
       }
-      get defaultDisplayFmt() {
-          return this.defaultFormats[this.timeFormat];
+      get isoFormat() {
+          this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
+          return this.isoFormatValue;
       }
       get defaultFormats() {
           const seconds = this.useSeconds ? ':ss' : '';
@@ -10325,59 +10338,172 @@
               '24hr': `HH:mm${seconds}`,
           };
       }
-      ampmMask() {
-          const ampmValue = this.displayValue || '';
-          const hours = [/[0-1]/];
-          if (ampmValue[0] === '1') {
-              hours.push(/[0-2]/);
+      getInitialMask() {
+          if (isUndefined__default["default"](this.mask)) {
+              this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
           }
-          else if (ampmValue[0] === '0') {
-              hours.push(/[1-9]/);
+          return this.mask;
+      }
+      formatter(value) { return this.formatterFn(value, this); }
+      parser(value) { return this.parserFn(value, this); }
+      /**
+       * Triggered when date is clicked.
+       * @param event
+       * @param element
+       */
+      selectTime(time, event, element) {
+          if (this.events.onSelectTime && typeof this.events.onSelectTime === 'function') {
+              this.events.onSelectTime({
+                  time, event, element, component: this,
+              });
+          }
+      }
+      get displayValue() {
+          return this.internalDisplayValue;
+      }
+      set displayValue(newValue) {
+          this.timeError = false;
+          this.internalDisplayValue = newValue;
+          this.internalValue = this.parser(newValue);
+          this.value = this.internalValue; // forces value accessor to be called if necessary
+      }
+      /**
+       * Assign the updated mask to mask property
+       */
+      updateMask() {
+          this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+          this.mask = this.getUpdatedMask();
+          return this.mask;
+      }
+      /**
+       * Gets the updated masked, based on displayFormat if the initial mask is undefined
+       */
+      getUpdatedMask() {
+          if (isUndefined__default["default"](this.initialMask)) {
+              return this.maskFormat(this.displayFormat);
+          }
+          return this.mask;
+      }
+      maskFormat(format) {
+          return format.replace(/[A-Za-z]/gi, '#');
+      }
+      setTimeValue(displayValue) {
+          const lastValue = this.displayValue;
+          if (this.isValidTime(displayValue, this.displayFormat)) {
+              this.internalDisplayValue = displayValue;
+              this.internalValue = this.parser(displayValue);
+              this.timeError = false;
+              if (lastValue !== this.displayValue)
+                  this.change(this.value);
           }
           else {
-              hours.push(/[0-9]/);
+              if (!displayValue) {
+                  this.internalDisplayValue = displayValue;
+                  this.internalValue = null;
+                  if (lastValue !== this.displayValue)
+                      this.change(this.value);
+              }
+              this.timeError = !!displayValue;
           }
-          const minutes = [/[0-5]/, /[0-9]/];
-          const seconds = this.useSeconds ? [':', ...minutes] : [];
-          const ampm = /(A|P)/;
-          return [...hours, ':', ...minutes, ...seconds, ' ', ampm, 'M'];
+          this.value = this.internalValue; // forces value accessor to be called if necessary
       }
-      fullTimeMask(value) {
-          const hours = [
-              /[0-2]/,
-              value[0] === '2' ? /[0-3]/ : /[0-9]/,
-          ];
-          const minutes = [/[0-5]/, /[0-9]/];
-          const seconds = this.useSeconds ? [':', ...minutes] : [];
-          return [...hours, ':', ...minutes, ...seconds];
+      isValidTime(value, format, strict = true) {
+          return core.dayjs(value, format, strict).isValid();
       }
-      getMask(value) {
-          return this.maskFunctions[this.timeFormat](value);
+      get isoValue() {
+          return this.formatISOTimeValue(this.value);
+      }
+      set isoValue(newValue) {
+          const lastValue = this.value;
+          this.timeError = false;
+          this.value = this.parseISOTimeValue(newValue);
+          if (lastValue !== this.value)
+              this.change(this.value);
+      }
+      formatISOTimeValue(value) {
+          if (value && this.isValidTime(value, this.valueFormat)) {
+              return core.dayjs(value, this.valueFormat).format(this.isoFormat);
+          }
+          return '';
+      }
+      parseISOTimeValue(value) {
+          if (value && this.isValidTime(value, this.valueFormat)) {
+              return core.dayjs(value, this.isoFormat).format(this.valueFormat);
+          }
+          return null;
       }
       /**
-       * Checks if value is valid according to valueFormat and if displayValue
-       * is true
-       */
-      isFullyValid(value = this.value) {
-          return this.isValidTime(value) && this.isDisplayValid;
+     * Checks if a time format is simple.
+     * Simple time formats are the ones that consists only of 'HH', 'mm', 'mm' or 'YYYY', and mask delimiters
+     * @param format The format to be checked
+     * @returns true if it is simple, false otherwise
+     */
+      isSimpleFormat(format) {
+          const simpleTokens = ['HH', 'mm', 'ss', 'hh', 'A', 'a', 'p', 'P'];
+          // remove the simple tokens from the string
+          const replaced = simpleTokens.reduce((result, token) => result.replace(token, ''), format);
+          const chars = replaced.split('');
+          return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
-      formatter(value) {
-          const eq = this.lastInvalid === value;
-          if (eq || !this.isFullyValid(value)) {
-              this.isDisplayValid = true;
-              this.lastInvalid = value;
-              return value;
+      timeValidation() {
+          if (this.isValidTime(this.displayValue, this.displayFormat) || !this.displayValue) {
+              return true;
           }
-          return this.formatterFn(value, this);
+          return core.I18n.translate('VALIDATION_INVALID_TIME');
       }
-      parser(value) {
-          const parsed = this.parserFn(value, this);
-          this.isDisplayValid = value === null || value === '' || this.isValidTime(value, this.displayFormat);
-          return parsed;
+      timeAllowedValidation() {
+          return !this.displayValue
+              || (this.isValidTime(this.displayValue, this.displayFormat)
+                  && this.isTimeAllowed())
+              || core.I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
       }
-      isValidTime(value, format = this.valueFormat) {
-          return core.dayjs(value, format, true).isValid();
+      click(event, element) {
+          const clickEvent = event || new MouseEvent('click');
+          super.click(clickEvent, element);
+          if (!clickEvent.defaultPrevented) {
+              this.showTimePicker = !this.showTimePicker;
+          }
+      }
+      blur(event, element) {
+          this.removeTimeMask();
+          this.setTimeValue(this.formatter(this.value));
+          super.blur(event, element);
+          this.showTimePicker = false;
+      }
+      focus(event, element) {
+          this.addTimeMask();
+          super.focus(event, element);
+      }
+      /**
+       * Add date mask
+       */
+      addTimeMask() {
+          if (!this.value)
+              return;
+          this.mask = this.initialMask;
+          this.internalDisplayValue = core.dayjs(this.value, this.valueFormat).format(this.inputFormat || this.displayFormat);
+      }
+      /**
+       * Removes the component mask if value is valid
+       */
+      removeTimeMask() {
+          if (isUndefined__default["default"](this.initialMask) || !this.value || this.timeError
+              || !this.isValidTime(this.value, this.valueFormat)) {
+              return;
+          }
+          this.mask = '';
+      }
+      /**
+       * Checks if value is valid according to valueFormat and if displayValue
+       * is true
+       */
+      isFullyValid(value = this.value) {
+          return this.isValidTime(value, this.valueFormat, true) && this.isDisplayValid;
       }
+      /**
+       * Last invalid value passed to formatter
+       */
+      // private lastInvalid: string = '';
       isTimeAllowed(value = this.value) {
           return this.isSameOrAfterMin(value) && this.isSameOrBeforeMax(value)
               && this.isHourAllowed(value) && this.isMinuteAllowed(value)
@@ -10413,49 +10539,54 @@
           const second = core.dayjs(value, this.valueFormat).second();
           return this.allowedSeconds.includes(second);
       }
-      timeValidation() {
-          return !this.displayValue
-              || this.isValidTime(this.displayValue, this.displayFormat)
-              || core.I18n.translate('VALIDATION_INVALID_TIME');
-      }
-      timeAllowedValidation() {
-          return !this.displayValue
-              || (this.isValidTime(this.displayValue, this.displayFormat)
-                  && this.isTimeAllowed())
-              || core.I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
-      }
-      click(event) {
-          this.callEvent('click', {
-              event: (event || new MouseEvent('click')),
-              component: this,
-          });
-          if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
-              this.showTimePicker = !this.showTimePicker;
-          }
-      }
       clear() {
           this.value = null;
           this.change(this.value);
       }
   }
-  core.FormatterParserProvider.registerFormatter('ZdTime', (value, { displayFormat = core.Config.displayFormat, valueFormat = core.Config.valueTimeFormat, } = {}) => {
+  core.FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = core.Config.valueTimeFormat, displayFormat = core.Config.displayTimeFormat, inputFormat = core.Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
           return '';
       }
-      if (core.dayjs(value, valueFormat, true).isValid()) {
-          return core.dayjs(value, valueFormat).format(displayFormat);
+      const isTimeValid = core.dayjs(value, valueFormat, true).isValid();
+      if (!isTimeValid) {
+          return value;
       }
-      return value;
+      if (mask && initialMask) {
+          if (inputFormat) {
+              return core.dayjs(value, valueFormat).format(inputFormat);
+          }
+          let valueToUnmask = value;
+          if (isSimpleDisplay) {
+              valueToUnmask = core.dayjs(value, valueFormat).format(displayFormat);
+          }
+          const unmasked = core.Mask.getValueWithoutMask(valueToUnmask);
+          const masked = core.Mask.getValueWithMask(unmasked, mask);
+          return masked;
+      }
+      return core.dayjs(value, valueFormat).format(displayFormat);
   });
-  core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayFormat, valueFormat = core.Config.valueTimeFormat, } = {}) => {
+  core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayTimeFormat, valueFormat = core.Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
       if (!value) {
           return null;
       }
-      const uppecaseValue = value.toUpperCase();
-      if (core.dayjs(uppecaseValue, displayFormat, true).isValid()) {
-          return core.dayjs(uppecaseValue, displayFormat).format(valueFormat);
+      if (core.dayjs(value, displayFormat, true).isValid()) {
+          return core.dayjs(value, displayFormat).format(valueFormat);
+      }
+      if (mask && core.Mask.checkMask(value, mask)) {
+          const unmasked = core.Mask.getValueWithoutMask(value);
+          let masked;
+          if (!initialMask) {
+              const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+              masked = core.Mask.getValueWithMask(unmasked, displayFmtMask);
+          }
+          const timeFmtMask = valueFormat.replace(/[A-Za-z]/gi, '#');
+          masked = core.Mask.getValueWithMask(unmasked, timeFmtMask);
+          if (core.dayjs(masked, valueFormat, true).format(valueFormat) === masked) {
+              return masked;
+          }
       }
-      return uppecaseValue;
+      return value;
   });
 
   /**
@@ -10597,6 +10728,7 @@
           this.checkedField = this.getInitValue('checkedField', props.checkedField, this.checkedField);
           this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
           this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
+          this.disableCheckbox = this.getInitValue('disableCheckbox', props.disableCheckbox, this.disableCheckbox);
           this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
           this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
           this.titleSlot = props.titleSlot || this.titleSlot;
@@ -10832,16 +10964,13 @@
               const compName = component.name;
               const instanceName = `${compName}_${nodePath}`;
               const path = parentPath ? `${parentPath}.${compName}` : compName;
-              const newComponent = merge__default["default"]({}, component, (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path]);
+              const newInstances = core.Metadata.getInstances(instanceName);
+              const newInstance = newInstances[0];
+              const appliedConditions = (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path];
+              const newComponent = merge__default["default"]({}, component, newInstance, appliedConditions);
               const newChildren = this.getSlotComponent(newComponent.children || [], node, path);
               newComponent.name = instanceName;
               newComponent.children = newChildren;
-              try {
-                  core.Metadata.updateInstance(instanceName, newComponent);
-              }
-              catch (e) {
-                  // do nothing
-              }
               newComponents.push(newComponent);
           });
           return newComponents;
@@ -10903,6 +11032,10 @@
               return this.searchPath(currentNode.children || [], path.slice(1));
           return currentNode;
       }
+      callDisableCheckbox(node) {
+          return !!this.disableCheckbox && typeof this.disableCheckbox === 'function'
+              && this.disableCheckbox({ node, component: this });
+      }
   }
 
   /**
@@ -11049,6 +11182,8 @@
           const rows = [row, ...this.treeDataStructure.getChildren(row)];
           if (isSelected) {
               this.selectedRows = Array.from(new Set(this.selectedRows.concat(rows))); // remove duplicates
+              // check if all the children of the parent are selected.
+              this.selectParents(rows, row);
           }
           else {
               rows.forEach((item) => {
@@ -11056,6 +11191,31 @@
                   if (index > -1)
                       this.selectedRows.splice(index, 1);
               });
+              this.unselectParents(row);
+          }
+      }
+      selectParents(rows, row) {
+          if (row[this.parentField]) {
+              const parentRow = this.treeDataStructure.getRowData(row).tree__parent;
+              const every = this.treeDataStructure.getChildren(parentRow).every((item) => {
+                  const index = this.treeDataStructure.findDataIndex(this.selectedRows, item[this.datasource.uniqueKey]);
+                  if (index > -1)
+                      return true;
+                  return false;
+              });
+              if (every)
+                  rows.push(parentRow);
+              this.selectedRows = Array.from(new Set(this.selectedRows.concat(rows))); // remove duplicates
+              this.selectParents(rows, parentRow);
+          }
+      }
+      unselectParents(row) {
+          if (row[this.parentField]) {
+              const index = this.treeDataStructure.findDataIndex(this.selectedRows, row[this.parentField]);
+              if (index > -1)
+                  this.selectedRows.splice(index, 1);
+              const parentRow = this.treeDataStructure.getRowData(row).tree__parent;
+              this.unselectParents(parentRow);
           }
       }
   }
@@ -11090,6 +11250,7 @@
               },
           };
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+          this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
           this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
           this.createAccessors();
       }
@@ -11143,10 +11304,10 @@
        * @param event DOM event
        * @param element DOM Element
        */
-      cellClick(row, column, event, element) {
+      cellClick(row, column, event, element, canEdit = true) {
           if (this.editing)
               return;
-          if (column.editable) {
+          if (column.editable && canEdit) {
               this.editing = true;
               this.preventRowClick = true;
               this.datasource.currentRow = row;
@@ -11463,6 +11624,9 @@
               throw e;
           }
       }
+      callCanEditRow(row) {
+          return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+      }
   }
 
   class Icons {
@@ -11906,9 +12070,9 @@
           };
           this.colunmXLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
       }
-      buildColumns(columns) {
+      getColumnsWidth(columns) {
           const widths = {};
-          let totalWidth;
+          let totalWidth = 0;
           try {
               totalWidth = columns.reduce((sum, col) => {
                   widths[col.name] = col.getWidth();
@@ -11920,6 +12084,10 @@
                   throw e;
               }
           }
+          return { widths, totalWidth };
+      }
+      buildColumns(columns) {
+          const { widths, totalWidth } = this.getColumnsWidth(columns);
           return columns.reduce((result, col, index) => {
               let size;
               if (!totalWidth) {
@@ -11932,58 +12100,12 @@
                   align: col.align || 'left',
                   description: col.label,
                   sequence: index,
-                  format: this.getFormatOfColumn(col),
                   size: `${size}%`,
                   xlsType: col.xlsType,
               };
               return Object.assign(Object.assign({}, result), { [col.name]: row });
           }, {});
       }
-      isNumberComponent(component) {
-          return ['ZdNumber', 'ZdCurrency', 'ZdIncrement'].indexOf(component) !== -1;
-      }
-      checkAccessor(value) {
-          if (core.Accessor.isAccessorDefinition(value)) {
-              const [controller, accessor] = core.Accessor.getAccessor(value);
-              return core.Loader.getInstance(controller)[accessor];
-          }
-          return value;
-      }
-      getFormatOfColumn(column) {
-          let format;
-          let { mask } = column;
-          if (mask) {
-              format = {
-                  type: 'fix',
-                  params: {
-                      mask,
-                  },
-              };
-          }
-          else if (column.componentProps && Object.keys(column.componentProps).length) {
-              const { component } = column.componentProps;
-              if (this.isNumberComponent(component)) {
-                  format = { type: 'float' };
-                  mask = this.checkAccessor(column.componentProps.mask);
-                  if (mask) {
-                      format.params = {};
-                      if (mask.currencySymbol) {
-                          format.type = 'currency';
-                          format.symbol = mask.currencySymbol;
-                          format.decimal = mask.decimalCharacter;
-                          format.thousands = mask.digitGroupSeparator;
-                          format.precision = mask.decimalPlaces;
-                      }
-                      else {
-                          format.params.decimal = mask.decimalCharacter;
-                          format.params.thousands = mask.digitGroupSeparator;
-                          format.params.precision = mask.decimalPlaces;
-                      }
-                  }
-              }
-          }
-          return format;
-      }
       buildFilter(filter) {
           return Object.keys(filter).map((key) => ({
               label: key,
@@ -12051,6 +12173,72 @@
       buildDataset(data) {
           return JSON.stringify(data);
       }
+      buildColumns(columns) {
+          const { widths, totalWidth } = this.getColumnsWidth(columns);
+          return columns.reduce((result, col, index) => {
+              let size;
+              if (!totalWidth) {
+                  size = Math.floor(100 / columns.length);
+              }
+              else {
+                  size = Math.floor((widths[col.name] * 100) / totalWidth);
+              }
+              const row = {
+                  align: col.align || 'left',
+                  description: col.label,
+                  sequence: index,
+                  format: this.getFormatOfColumn(col),
+                  size: `${size}%`,
+                  xlsType: col.xlsType,
+              };
+              return Object.assign(Object.assign({}, result), { [col.name]: row });
+          }, {});
+      }
+      getFormatOfColumn(column) {
+          let format;
+          let { mask } = column;
+          if (mask) {
+              format = {
+                  type: 'fix',
+                  params: {
+                      mask,
+                  },
+              };
+          }
+          else if (column.componentProps && Object.keys(column.componentProps).length) {
+              const { component } = column.componentProps;
+              if (this.isNumberComponent(component)) {
+                  format = { type: 'float' };
+                  mask = this.checkAccessor(column.componentProps.mask);
+                  if (mask) {
+                      format.params = {};
+                      if (mask.currencySymbol) {
+                          format.type = 'currency';
+                          format.symbol = mask.currencySymbol;
+                          format.decimal = mask.decimalCharacter;
+                          format.thousands = mask.digitGroupSeparator;
+                          format.precision = mask.decimalPlaces;
+                      }
+                      else {
+                          format.params.decimal = mask.decimalCharacter;
+                          format.params.thousands = mask.digitGroupSeparator;
+                          format.params.precision = mask.decimalPlaces;
+                      }
+                  }
+              }
+          }
+          return format;
+      }
+      isNumberComponent(component) {
+          return ['ZdNumber', 'ZdCurrency', 'ZdIncrement'].indexOf(component) !== -1;
+      }
+      checkAccessor(value) {
+          if (core.Accessor.isAccessorDefinition(value)) {
+              const [controller, accessor] = core.Accessor.getAccessor(value);
+              return core.Loader.getInstance(controller)[accessor];
+          }
+          return value;
+      }
       buildMetadata(name, title, columns, filter, portrait = true) {
           return __awaiter(this, void 0, void 0, function* () {
               const builtCols = this.buildColumns(columns);
@@ -12132,6 +12320,7 @@
       }
   }
 
+  // XLS without groups (formatXLS = 'F3')
   class XLSReport extends BaseReport {
       constructor() {
           super(...arguments);
@@ -12178,13 +12367,14 @@
               columns: builtCols,
               filter: builtFilters,
               reportXLS: true,
+              formatXLS: 'F3',
               xlsMergedCell: [],
           };
           return Promise.resolve(JSON.stringify(metadataObj));
       }
   }
 
-  // XLS with groups
+  // XLS with groups (formatXLS = 'F1')
   class XLS2Report extends BaseReport {
       constructor() {
           super(...arguments);
@@ -12222,6 +12412,7 @@
               columns: builtCols,
               filter: builtFilters,
               reportXLS: true,
+              formatXLS: 'F1',
               xlsMergedCell: [],
           };
           return Promise.resolve(JSON.stringify(metadataObj));
@@ -12380,7 +12571,7 @@
       }
   }
 
-  // Grid mirror (with groups)
+  // Grid mirror (with groups) (formatXLS = 'F2')
   class XLS3Report extends BaseReport {
       constructor() {
           super(...arguments);
@@ -12418,6 +12609,7 @@
               columns: builtCols,
               filter: builtFilters,
               reportXLS: true,
+              formatXLS: 'F2',
               xlsMergedCell: [],
           };
           return Promise.resolve(JSON.stringify(metadataObj));
@@ -12622,7 +12814,7 @@
               const { route } = reportType;
               const { name, columns, datasource } = this.iterable;
               const { groupedData } = Object.assign({}, this.iterable);
-              const formattedColumns = this.removeActionColumns(columns);
+              const formattedColumns = this.removeColumns(columns);
               const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
               let dataset;
               if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
@@ -12664,8 +12856,8 @@
               return new URL(reportFile, this.fileEndPoint).href;
           });
       }
-      removeActionColumns(columns) {
-          return columns.filter((item) => item.type !== 'action');
+      removeColumns(columns) {
+          return columns.filter((item) => (item.type !== 'action' && item.isVisible));
       }
   }