@zeedhi/common 1.95.1 → 1.96.1

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, MemoryDatasource, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, ViewService, MemoryDatasource, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
@@ -1975,7 +1975,9 @@ class Input extends ComponentRender {
      */
     addValidation(name, config) {
         const validation = Validation.get(name)(config);
-        this.validations[name] = config;
+        if (config) {
+            this.validations[name] = config;
+        }
         this.parsedValidations[name] = validation;
         this.updateRules();
     }
@@ -2001,7 +2003,10 @@ class Input extends ComponentRender {
      */
     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.
@@ -2054,8 +2059,11 @@ class Input extends ComponentRender {
      * 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.
@@ -2140,6 +2148,19 @@ class Toggleable extends Input {
     }
 }
 
+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.
  */
@@ -2154,7 +2175,8 @@ class Checkbox extends Toggleable {
         this.showHelper = false;
         this.createAccessors();
     }
-}
+}
+InputFactory.register('ZdCheckbox', Checkbox);
 
 /**
  * Base class for Checkbox multiple component.
@@ -2207,7 +2229,8 @@ class CheckboxMultiple extends Input {
         super.onBeforeDestroy();
         this.datasource.destroy();
     }
-}
+}
+InputFactory.register('ZdCheckboxMultiple', CheckboxMultiple);
 
 /**
  * Base class for Chip component.
@@ -2694,10 +2717,15 @@ class TextInput extends Input {
          * 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 = FormatterParserProvider.getFormatter('ZdTextInput');
         this.parserFn = 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);
@@ -2803,7 +2831,8 @@ FormatterParserProvider.registerParser('ZdTextInput', (value, { valueWithPrefix
         formatted = prefixValue + formatted + suffixValue;
     }
     return formatted;
-});
+});
+InputFactory.register('ZdTextInput', TextInput);
 
 /**
  * Base class for Number component
@@ -2913,7 +2942,8 @@ FormatterParserProvider.registerParser('ZdNumber', (value, { mask = {}, } = {})
     let maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
     maskValue = Object.assign(Object.assign({}, Config.masks.numberMask), maskValue);
     return value === '' ? null : AutoNumeric.unformat(value, maskValue);
-});
+});
+InputFactory.register('ZdNumber', Number$1);
 
 /**
  * Base class for Currency component
@@ -2949,7 +2979,8 @@ FormatterParserProvider.registerParser('ZdCurrency', (value, { mask = {}, } = {}
     let maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
     maskValue = Object.assign(Object.assign(Object.assign({}, Config.masks.numberMask), Config.masks.currencyMask), maskValue);
     return value === '' ? null : AutoNumeric.unformat(value, maskValue);
-});
+});
+InputFactory.register('ZdCurrency', Currency);
 
 class AlertQueue {
     constructor() {
@@ -4207,7 +4238,8 @@ FormatterParserProvider.registerParser('ZdDateTime', (value, { dateTimeFormat =
         return dayjs(value, displayFormat).format(dateTimeFormat);
     }
     return value;
-});
+});
+InputFactory.register('ZdDate', Date$1);
 
 class DateRange extends TextInput {
     /* istanbul ignore next */
@@ -4671,7 +4703,8 @@ FormatterParserProvider.registerParser('ZdDateRange', (value, { dateFormat = Con
         }
     });
     return formattedValue;
-});
+});
+InputFactory.register('ZdDateRange', DateRange);
 
 /**
  * Base class for Divider component.
@@ -4933,7 +4966,41 @@ class FileInput extends TextInput {
             }
         }
     }
-}
+    setViewGetFileSizes(getFileSizes) {
+        this.viewGetFileSizes = getFileSizes;
+    }
+    updateRules() {
+        this.rules = Object.keys(this.parsedValidations)
+            .map((key) => {
+            const validation = this.parsedValidations[key];
+            if (key !== 'maxFileSize')
+                return (value) => {
+                    const testValue = value !== undefined ? value : this.value;
+                    return validation(testValue);
+                };
+            return () => {
+                if (this.viewGetFileSizes) {
+                    const fileSizes = this.viewGetFileSizes();
+                    return validation(fileSizes);
+                }
+                return true;
+            };
+        });
+    }
+}
+Validation.register('maxFileSize', (config) => (fileSizes) => {
+    let fileError = '';
+    Object.keys(fileSizes).some((fileName) => {
+        if (fileSizes[fileName] > config.limit) {
+            fileError = fileName;
+            return true;
+        }
+        return false;
+    });
+    const message = I18n.translate((config.message || 'VALIDATION_FILE_SIZE'), { fileError });
+    return (fileError === '') || message;
+});
+InputFactory.register('ZdFileInput', FileInput);
 
 /**
  * Base class for Footer component.
@@ -5976,7 +6043,7 @@ class Grid extends Iterable {
             },
             tab: {
                 event: this.navigateRight.bind(this),
-                prevent: true,
+                prevent: false,
                 active: true,
                 index: 99,
                 input: true,
@@ -5984,7 +6051,7 @@ class Grid extends Iterable {
             },
             'shift+tab': {
                 event: this.navigateLeft.bind(this),
-                prevent: true,
+                prevent: false,
                 active: true,
                 index: 99,
                 input: true,
@@ -6235,51 +6302,58 @@ class Grid extends Iterable {
             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)) {
@@ -6814,6 +6888,9 @@ class GridEditable extends Grid {
         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)
@@ -6823,6 +6900,38 @@ class GridEditable extends Grid {
         }));
         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;
+            ViewService.nextTick(() => {
+                invalidCompNames.forEach((compName) => {
+                    const invalidComponent = 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
@@ -7308,7 +7417,8 @@ class Increment extends Number$1 {
             this.value -= this.step;
         }
     }
-}
+}
+InputFactory.register('ZdIncrement', Increment);
 
 class IterableColumnsButtonController {
     constructor(iterableComponent) {
@@ -7499,6 +7609,12 @@ class Select extends TextInput {
                     [searchIn]: value,
                 },
             }),
+            DYNAMIC_FILTER: (value, search_in) => {
+                const arrayValue = Array.isArray(value) ? value : Array.of(value);
+                const filter = arrayValue.map((item) => ({ operation: 'EQUALS', relation: 'OR', value: item }));
+                const dynamicFilter = { [search_in]: filter };
+                return { dynamicFilter };
+            },
         };
         /**
          * Input search value
@@ -7641,13 +7757,16 @@ class Select extends TextInput {
      */
     getItemsBySearchValue(value, searchIn) {
         return __awaiter(this, void 0, void 0, function* () {
-            const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true });
+            const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true, loadAll: Array.isArray(value) });
             this.datasource.loading = true;
             const datasource = DatasourceFactory.factory(config);
             const items = yield datasource.get();
             this.datasource.loading = false;
             datasource.destroy();
-            return items.find(this.getCondition(value));
+            if (Array.isArray(value)) {
+                return items.filter((item) => value.includes(item[this.dataValue]));
+            }
+            return items.filter(this.getCondition(value));
         });
     }
     getCondition(filterValue) {
@@ -7752,7 +7871,7 @@ class Select extends TextInput {
             const foundInData = this.datasource.data.find(this.getCondition(filterValue));
             let searchValue = foundInData;
             if (!foundInData && !this.manualMode) {
-                searchValue = yield this.getItemsBySearchValue(filterValue, searchIn);
+                [searchValue] = yield this.getItemsBySearchValue(filterValue, searchIn);
             }
             if (!searchValue) {
                 this.setFieldRowValue(null);
@@ -7984,7 +8103,8 @@ FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTe
         }
         return result;
     }, '');
-});
+});
+InputFactory.register('ZdSelect', Select);
 
 /**
  * Base class for Iterable Page Size component
@@ -8151,7 +8271,8 @@ class Search extends TextInput {
             yield this.iterableComponent.setSearch(search);
         });
     }
-}
+}
+InputFactory.register('ZdSearch', Search);
 
 /**
  * Base class for IterableComponentRender component.
@@ -9409,12 +9530,14 @@ class Modal extends Component {
      */
     show() {
         this.isVisible = true;
+        ViewService.nextTick(() => this.callEvent('onShow', { component: this }));
     }
     /**
      * Closes modal
      */
     hide() {
         this.isVisible = false;
+        ViewService.nextTick(() => this.callEvent('onHide', { component: this }));
     }
 }
 
@@ -9585,7 +9708,8 @@ class Password extends TextInput {
         }
     }
 }
-FormatterParserProvider.registerFormatter('ZdPassword', (value) => (value || '').replace(/./g, '*'));
+FormatterParserProvider.registerFormatter('ZdPassword', (value) => (value || '').replace(/./g, '*'));
+InputFactory.register('ZdPassword', Password);
 
 /**
  * Base class for Progress component
@@ -9680,7 +9804,8 @@ class Radio extends Input {
         super.onBeforeDestroy();
         this.datasource.destroy();
     }
-}
+}
+InputFactory.register('ZdRadio', Radio);
 
 /**
  * Base class for Range Slider component
@@ -9777,7 +9902,8 @@ class RangeSlider extends Input {
     set value(value) {
         this.rangeSliderValue = value;
     }
-}
+}
+InputFactory.register('ZdRangeSlider', RangeSlider);
 
 /**
  * Base class for Row component.
@@ -9852,12 +9978,16 @@ class SelectMultiple extends Select {
          */
         this.limit = null;
         this.showSelectAll = false;
+        this.showCheckboxAll = false;
+        this.checkboxAllValue = false;
         if (!this.selectedValue) {
             this.selectedValue = [];
         }
         this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
         this.maxRows = this.getInitValue('maxRows', props.maxRows, this.maxRows);
         this.limit = this.getInitValue('limit', props.limit, this.limit);
+        this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
+        this.checkboxAll = this.getInitValue('checkboxAll', props.checkboxAll, this.checkboxAll);
         if (!Array.isArray(this.dataText))
             this.dataText = [this.dataText];
         this.internalDisplayValue = this.getDisplayValue();
@@ -9887,6 +10017,13 @@ class SelectMultiple extends Select {
         this.selectedValue = rows;
         this.setFieldValue(this.getValues(rows));
     }
+    get checkboxAll() {
+        return this.checkboxAllValue;
+    }
+    set checkboxAll(value) {
+        this.disabled = value;
+        this.checkboxAllValue = value;
+    }
     /**
      * Removes item from array a and add it to array b if condition is satisfied
      */
@@ -9898,8 +10035,8 @@ class SelectMultiple extends Select {
     }
     setFieldValue(value) {
         return __awaiter(this, void 0, void 0, function* () {
-            const promises = [];
-            const searchValues = [];
+            const foundValues = [];
+            const searchedValues = [];
             let pushed = false;
             value.forEach((row) => {
                 let filterValue;
@@ -9909,27 +10046,37 @@ class SelectMultiple extends Select {
                 else {
                     filterValue = row;
                 }
-                const searchIn = this.dataValue;
                 const foundInData = this.datasource.data.find(this.getCondition(filterValue));
                 if (foundInData) {
-                    searchValues.push(foundInData);
+                    foundValues.push(foundInData);
                 }
                 else if (!this.manualMode) {
-                    promises.push(this.getItemsBySearchValue(filterValue, searchIn).then((item) => {
-                        if (item) {
-                            searchValues.push(item);
-                            this.datasource.data.unshift(item);
-                            this.insertedValues.push(item);
-                            pushed = true;
-                        }
-                    }));
+                    searchedValues.push(filterValue);
                 }
             });
-            if (promises.length) {
+            const insertItem = (item) => __awaiter(this, void 0, void 0, function* () {
+                if (!item)
+                    return;
+                foundValues.push(item);
+                this.datasource.data.unshift(item);
+                this.insertedValues.push(item);
+                pushed = true;
+            });
+            // using filter/find/dynamicFilter should make only 1 request
+            // using normal search should make one request per search value
+            if (this.searchParam !== 'SEARCH') {
+                const items = yield this.getItemsBySearchValue(searchedValues, this.dataValue);
+                items.forEach(insertItem);
+            }
+            else {
+                const promises = searchedValues.map((searchedValue) => __awaiter(this, void 0, void 0, function* () {
+                    const [item] = yield this.getItemsBySearchValue(searchedValue, this.dataValue);
+                    insertItem(item);
+                }));
                 yield Promise.all(promises);
             }
-            if (searchValues.length > 0) {
-                this.setFieldRowValue(searchValues);
+            if (foundValues.length > 0) {
+                this.setFieldRowValue(foundValues);
             }
             else {
                 this.setFieldRowValue([]);
@@ -10178,6 +10325,19 @@ class SelectMultiple extends Select {
         }
         this.cachedTotal = this.datasource.total;
     }
+    /**
+     * Updates input rules.
+     */
+    updateRules() {
+        this.rules = Object.keys(this.parsedValidations)
+            .map((key) => (value) => {
+            const testValue = value !== undefined ? value : this.value;
+            const validation = this.parsedValidations[key];
+            if (key !== 'required')
+                return validation(testValue);
+            return validation((this.checkboxAll && 'all') || testValue);
+        });
+    }
 }
 
 class TreeDataStructure {
@@ -11005,7 +11165,8 @@ class SelectTree extends TextInput {
             this.setValue(filteredNode.id);
         }
     }
-}
+}
+InputFactory.register('ZdSelectTree', SelectTree);
 
 /**
  * Base class for Select Tree Multiple component.
@@ -11455,7 +11616,8 @@ class Switch extends Toggleable {
         this.inset = this.getInitValue('inset', props.inset, this.inset);
         this.createAccessors();
     }
-}
+}
+InputFactory.register('ZdSwitch', Switch);
 
 /**
  * Base class for Table component.
@@ -11793,7 +11955,8 @@ class Textarea extends TextInput {
             this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
         }
     }
-}
+}
+InputFactory.register('ZdTextarea', Textarea);
 
 /**
  * Selects the time format by the rule:
@@ -12181,7 +12344,8 @@ FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Confi
         }
     }
     return value;
-});
+});
+InputFactory.register('ZdTime', Time);
 
 /**
  * Base class for Tooltip component.
@@ -12826,45 +12990,28 @@ class TreeGrid extends Grid {
     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) {
@@ -14591,6 +14738,52 @@ class XLS3Report extends BaseReport {
     }
 }
 
+/**
+ * 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 = Config.reportsEndPoint;
@@ -14647,7 +14840,7 @@ class Report {
             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) {
@@ -14655,6 +14848,11 @@ class Report {
                 const metadataObjClone = merge(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);
             }
@@ -14685,7 +14883,7 @@ class Report {
             return new URL(reportFile, this.fileEndPoint).href;
         });
     }
-    removeColumns(columns) {
+    filterColumns(columns) {
         return columns.filter((item) => (item.type !== 'action' && item.isVisible));
     }
 }
@@ -14694,4 +14892,4 @@ const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };
+export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, GroupedPDFFormatter, Header, Icon, Icons, Image, Increment, Input, InputFactory, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };