@zeedhi/common 1.51.0 → 1.54.0

package/dist/zd-common.esm.js

@@ -2317,7 +2317,12 @@ class Container extends ComponentRender {
          * 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);
@@ -4797,6 +4802,23 @@ class ColumnNotFoundError extends Error {
     }
 }
 
+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.
  */
@@ -4832,16 +4854,14 @@ class Iterable extends ComponentRender {
          */
         this.actionsApplied = {};
         this.columns = this.getColumns(props.columns || this.columns);
-        this.datasource = 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 = 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);
+        Loader.addController(`IterableController_${this.name}`, controller);
     }
     /**
      * Retrieves columns instances
@@ -5498,6 +5518,7 @@ class GridEditable extends Grid {
         };
         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) {
@@ -5550,10 +5571,10 @@ class GridEditable extends Grid {
      * @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;
@@ -5902,6 +5923,9 @@ class GridEditable extends Grid {
             throw e;
         }
     }
+    callCanEditRow(row) {
+        return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+    }
 }
 
 /**
@@ -10209,7 +10233,7 @@ class Time extends TextInput {
         /**
          * Defines the format of a time displayed in picker. Available options are ampm and 24hr.
          */
-        this.timeFormat = Config.timeFormat || 'ampm';
+        this.timeFormat = Config.timeFormat || 'ampm'; // change props to pickerFormat
         /**
          * Forces 100% width.
          */
@@ -10240,29 +10264,18 @@ class Time extends TextInput {
         this.width = 290;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdTime');
         this.parserFn = FormatterParserProvider.getParser('ZdTime');
+        this.isoFormatValue = 'HH:mm';
+        this.valueFormatInternal = Config.valueTimeFormat;
+        this.displayFormatInternal = 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 = Config.valueTimeFormat;
-        /**
-         * Format used to display the value
-         */
-        this.displayFormat = Config.displayTimeFormat;
+        this.inputFormat = 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);
@@ -10276,40 +10289,40 @@ class Time extends TextInput {
         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' : '';
@@ -10318,59 +10331,172 @@ class Time extends TextInput {
             '24hr': `HH:mm${seconds}`,
         };
     }
-    ampmMask() {
-        const ampmValue = this.displayValue || '';
-        const hours = [/[0-1]/];
-        if (ampmValue[0] === '1') {
-            hours.push(/[0-2]/);
+    getInitialMask() {
+        if (isUndefined(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(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 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 dayjs(value, this.valueFormat).format(this.isoFormat);
+        }
+        return '';
+    }
+    parseISOTimeValue(value) {
+        if (value && this.isValidTime(value, this.valueFormat)) {
+            return 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) => 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 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())
+            || I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
     }
-    isValidTime(value, format = this.valueFormat) {
-        return 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 = dayjs(this.value, this.valueFormat).format(this.inputFormat || this.displayFormat);
+    }
+    /**
+     * Removes the component mask if value is valid
+     */
+    removeTimeMask() {
+        if (isUndefined(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)
@@ -10406,49 +10532,54 @@ class Time extends TextInput {
         const second = dayjs(value, this.valueFormat).second();
         return this.allowedSeconds.includes(second);
     }
-    timeValidation() {
-        return !this.displayValue
-            || this.isValidTime(this.displayValue, this.displayFormat)
-            || I18n.translate('VALIDATION_INVALID_TIME');
-    }
-    timeAllowedValidation() {
-        return !this.displayValue
-            || (this.isValidTime(this.displayValue, this.displayFormat)
-                && this.isTimeAllowed())
-            || 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);
     }
 }
-FormatterParserProvider.registerFormatter('ZdTime', (value, { displayFormat = Config.displayFormat, valueFormat = Config.valueTimeFormat, } = {}) => {
+FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = Config.valueTimeFormat, displayFormat = Config.displayTimeFormat, inputFormat = Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
         return '';
     }
-    if (dayjs(value, valueFormat, true).isValid()) {
-        return dayjs(value, valueFormat).format(displayFormat);
+    const isTimeValid = dayjs(value, valueFormat, true).isValid();
+    if (!isTimeValid) {
+        return value;
     }
-    return value;
+    if (mask && initialMask) {
+        if (inputFormat) {
+            return dayjs(value, valueFormat).format(inputFormat);
+        }
+        let valueToUnmask = value;
+        if (isSimpleDisplay) {
+            valueToUnmask = dayjs(value, valueFormat).format(displayFormat);
+        }
+        const unmasked = Mask.getValueWithoutMask(valueToUnmask);
+        const masked = Mask.getValueWithMask(unmasked, mask);
+        return masked;
+    }
+    return dayjs(value, valueFormat).format(displayFormat);
 });
-FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayFormat, valueFormat = Config.valueTimeFormat, } = {}) => {
+FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayTimeFormat, valueFormat = Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
     if (!value) {
         return null;
     }
-    const uppecaseValue = value.toUpperCase();
-    if (dayjs(uppecaseValue, displayFormat, true).isValid()) {
-        return dayjs(uppecaseValue, displayFormat).format(valueFormat);
+    if (dayjs(value, displayFormat, true).isValid()) {
+        return dayjs(value, displayFormat).format(valueFormat);
+    }
+    if (mask && Mask.checkMask(value, mask)) {
+        const unmasked = Mask.getValueWithoutMask(value);
+        let masked;
+        if (!initialMask) {
+            const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+            masked = Mask.getValueWithMask(unmasked, displayFmtMask);
+        }
+        const timeFmtMask = valueFormat.replace(/[A-Za-z]/gi, '#');
+        masked = Mask.getValueWithMask(unmasked, timeFmtMask);
+        if (dayjs(masked, valueFormat, true).format(valueFormat) === masked) {
+            return masked;
+        }
     }
-    return uppecaseValue;
+    return value;
 });
 
 /**
@@ -10590,6 +10721,7 @@ class Tree extends ComponentRender {
         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;
@@ -10825,16 +10957,13 @@ class Tree extends ComponentRender {
             const compName = component.name;
             const instanceName = `${compName}_${nodePath}`;
             const path = parentPath ? `${parentPath}.${compName}` : compName;
-            const newComponent = merge({}, component, (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path]);
+            const newInstances = Metadata.getInstances(instanceName);
+            const newInstance = newInstances[0];
+            const appliedConditions = (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path];
+            const newComponent = merge({}, component, newInstance, appliedConditions);
             const newChildren = this.getSlotComponent(newComponent.children || [], node, path);
             newComponent.name = instanceName;
             newComponent.children = newChildren;
-            try {
-                Metadata.updateInstance(instanceName, newComponent);
-            }
-            catch (e) {
-                // do nothing
-            }
             newComponents.push(newComponent);
         });
         return newComponents;
@@ -10896,6 +11025,10 @@ class Tree extends ComponentRender {
             return this.searchPath(currentNode.children || [], path.slice(1));
         return currentNode;
     }
+    callDisableCheckbox(node) {
+        return !!this.disableCheckbox && typeof this.disableCheckbox === 'function'
+            && this.disableCheckbox({ node, component: this });
+    }
 }
 
 /**
@@ -11042,6 +11175,8 @@ class TreeGrid extends Grid {
         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) => {
@@ -11049,6 +11184,31 @@ class TreeGrid extends Grid {
                 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);
         }
     }
 }
@@ -11083,6 +11243,7 @@ class TreeGridEditable extends TreeGrid {
             },
         };
         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();
     }
@@ -11136,10 +11297,10 @@ class TreeGridEditable extends TreeGrid {
      * @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;
@@ -11456,6 +11617,9 @@ class TreeGridEditable extends TreeGrid {
             throw e;
         }
     }
+    callCanEditRow(row) {
+        return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+    }
 }
 
 class Icons {
@@ -11899,9 +12063,9 @@ class BaseReport {
         };
         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();
@@ -11913,6 +12077,10 @@ class BaseReport {
                 throw e;
             }
         }
+        return { widths, totalWidth };
+    }
+    buildColumns(columns) {
+        const { widths, totalWidth } = this.getColumnsWidth(columns);
         return columns.reduce((result, col, index) => {
             let size;
             if (!totalWidth) {
@@ -11925,58 +12093,12 @@ class BaseReport {
                 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 (Accessor.isAccessorDefinition(value)) {
-            const [controller, accessor] = Accessor.getAccessor(value);
-            return 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,
@@ -12044,6 +12166,72 @@ class PDFReport extends BaseReport {
     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 (Accessor.isAccessorDefinition(value)) {
+            const [controller, accessor] = Accessor.getAccessor(value);
+            return 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);
@@ -12125,6 +12313,7 @@ class PDFReport extends BaseReport {
     }
 }
 
+// XLS without groups (formatXLS = 'F3')
 class XLSReport extends BaseReport {
     constructor() {
         super(...arguments);
@@ -12171,13 +12360,14 @@ class XLSReport extends BaseReport {
             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);
@@ -12215,6 +12405,7 @@ class XLS2Report extends BaseReport {
             columns: builtCols,
             filter: builtFilters,
             reportXLS: true,
+            formatXLS: 'F1',
             xlsMergedCell: [],
         };
         return Promise.resolve(JSON.stringify(metadataObj));
@@ -12373,7 +12564,7 @@ class XLS2Report extends BaseReport {
     }
 }
 
-// Grid mirror (with groups)
+// Grid mirror (with groups) (formatXLS = 'F2')
 class XLS3Report extends BaseReport {
     constructor() {
         super(...arguments);
@@ -12411,6 +12602,7 @@ class XLS3Report extends BaseReport {
             columns: builtCols,
             filter: builtFilters,
             reportXLS: true,
+            formatXLS: 'F2',
             xlsMergedCell: [],
         };
         return Promise.resolve(JSON.stringify(metadataObj));
@@ -12615,7 +12807,7 @@ class Report {
             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) {
@@ -12657,8 +12849,8 @@ class Report {
             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));
     }
 }