igniteui-angular 14.2.0-alpha.3 → 14.2.0-beta.0

package/fesm2020/igniteui-angular.mjs

@@ -8,8 +8,8 @@ import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, DOCUMENT, CommonModule, FormatWidth, getLocaleDateFormat, getLocaleFirstDayOfWeek, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
 import { Observable, Subject, fromEvent, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
 import { takeUntil, filter, first as first$1, throttleTime, take, throttle, startWith, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, pluck } from 'rxjs/operators';
-import mergeWith from 'lodash.mergewith';
-import * as JSZip from 'jszip';
+import { mergeWith } from 'lodash-es';
+import { strToU8, zip } from 'fflate';
 import * as i1$2 from '@angular/platform-browser';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG, ɵgetDOM } from '@angular/platform-browser';
 import * as i2 from '@angular/common/http';
@@ -3041,10 +3041,13 @@ var ExportRecordType;
     ExportRecordType["DataRecord"] = "DataRecord";
     ExportRecordType["HierarchicalGridRecord"] = "HierarchicalGridRecord";
     ExportRecordType["HeaderRecord"] = "HeaderRecord";
+    ExportRecordType["PivotGridRecord"] = "PivotGridRecord";
 })(ExportRecordType || (ExportRecordType = {}));
 var HeaderType;
 (function (HeaderType) {
+    HeaderType["RowHeader"] = "RowHeader";
     HeaderType["ColumnHeader"] = "ColumnHeader";
+    HeaderType["MultiRowHeader"] = "MultiRowHeader";
     HeaderType["MultiColumnHeader"] = "MultiColumnHeader";
 })(HeaderType || (HeaderType = {}));
 /**hidden
@@ -3100,6 +3103,8 @@ class IgxBaseExporter {
         this._sort = null;
         this._ownersMap = new Map();
         this.flatRecords = [];
+        this.pivotGridColumns = [];
+        this.pivotGridKeyValueMap = new Map();
     }
     /**
      * Method for exporting IgxGrid component's data.
@@ -3114,6 +3119,7 @@ class IgxBaseExporter {
             throw Error('No options provided!');
         }
         this.options = options;
+        this.locale = grid.locale;
         let columns = grid.columns;
         if (this.options.ignoreMultiColumnHeaders) {
             columns = columns.filter(col => col.children === undefined);
@@ -3127,10 +3133,21 @@ class IgxBaseExporter {
                 this.mapHierarchicalGridColumns(island, grid.data[0]);
             }
         }
+        else if (tagName === 'igx-pivot-grid') {
+            this.pivotGridColumns = [];
+            this.isPivotGridExport = true;
+            this.pivotGridKeyValueMap = new Map();
+            this.pivotGridRowDimensionsMap = new Map();
+            grid.pivotConfiguration.rows.filter(r => r.enabled).forEach(rowDimension => {
+                this.addToRowDimensionsMap(rowDimension, rowDimension.memberName);
+            });
+            this._ownersMap.set(DEFAULT_OWNER, columnList);
+        }
         else {
             this._ownersMap.set(DEFAULT_OWNER, columnList);
         }
         this.prepareData(grid);
+        this.addPivotGridColumns(grid);
         this.exportGridRecordsData(this.flatRecords, grid);
     }
     /**
@@ -3156,6 +3173,12 @@ class IgxBaseExporter {
         });
         this.exportGridRecordsData(records);
     }
+    addToRowDimensionsMap(rowDimension, rootParentName) {
+        this.pivotGridRowDimensionsMap[rowDimension.memberName] = rootParentName;
+        if (rowDimension.childLevel) {
+            this.addToRowDimensionsMap(rowDimension.childLevel, rootParentName);
+        }
+    }
     exportGridRecordsData(records, grid) {
         if (this._ownersMap.size === 0) {
             const recordsData = records.map(r => r.data);
@@ -3266,7 +3289,7 @@ class IgxBaseExporter {
             const ownerCols = this._ownersMap.get(owner).columns;
             if (record.type !== ExportRecordType.HeaderRecord) {
                 const columns = ownerCols
-                    .filter(c => c.headerType !== HeaderType.MultiColumnHeader && !c.skip)
+                    .filter(c => c.headerType !== HeaderType.MultiColumnHeader && c.headerType !== HeaderType.RowHeader && c.headerType !== HeaderType.MultiRowHeader && !c.skip)
                     .sort((a, b) => a.startIndex - b.startIndex)
                     .sort((a, b) => a.pinnedIndex - b.pinnedIndex);
                 record.data = columns.reduce((a, e) => {
@@ -3283,7 +3306,14 @@ class IgxBaseExporter {
                         else if (e.dataType === 'string' && rawValue instanceof Date) {
                             rawValue = rawValue.toString();
                         }
-                        a[e.field] = shouldApplyFormatter ? e.formatter(rawValue) : rawValue;
+                        else if (e.dataType === 'currency') {
+                            rawValue = formatCurrency(rawValue, e.currencyCode, e.displayFormat, e.digitsInfo, this.locale);
+                        }
+                        let formattedValue = shouldApplyFormatter ? e.formatter(rawValue) : rawValue;
+                        if (this.isPivotGridExport && !isNaN(parseFloat(formattedValue))) {
+                            formattedValue = parseFloat(formattedValue);
+                        }
+                        a[e.field] = formattedValue;
                     }
                     return a;
                 }, {});
@@ -3345,6 +3375,10 @@ class IgxBaseExporter {
         const expressions = grid.groupingExpressions ? grid.groupingExpressions.concat(grid.sortingExpressions || []) : grid.sortingExpressions;
         const hasSorting = expressions && expressions.length > 0;
         switch (tagName) {
+            case 'igx-pivot-grid': {
+                this.preparePivotGridData(grid);
+                break;
+            }
             case 'igx-hierarchical-grid': {
                 this.prepareHierarchicalGridData(grid, hasFiltering, hasSorting);
                 break;
@@ -3359,6 +3393,21 @@ class IgxBaseExporter {
             }
         }
     }
+    preparePivotGridData(grid) {
+        for (const record of grid.filteredSortedData) {
+            const recordData = Object.fromEntries(record.aggregationValues);
+            record.dimensionValues.forEach((value, key) => {
+                const actualKey = this.pivotGridRowDimensionsMap[key];
+                recordData[actualKey] = value;
+            });
+            const pivotGridRecord = {
+                data: recordData,
+                level: record.level,
+                type: ExportRecordType.PivotGridRecord
+            };
+            this.flatRecords.push(pivotGridRecord);
+        }
+    }
     prepareHierarchicalGridData(grid, hasFiltering, hasSorting) {
         const skipOperations = (!hasFiltering || !this.options.ignoreFiltering) &&
             (!hasSorting || !this.options.ignoreSorting);
@@ -3695,6 +3744,17 @@ class IgxBaseExporter {
                 columnGroupParent: column.parent ? column.parent : null,
                 columnGroup: isMultiColHeader ? column : null
             };
+            if (column.dataType === 'currency') {
+                columnInfo.currencyCode = column.pipeArgs.currencyCode
+                    ? column.pipeArgs.currencyCode
+                    : getLocaleCurrencyCode(this.locale);
+                columnInfo.displayFormat = column.pipeArgs.display
+                    ? column.pipeArgs.display
+                    : 'symbol';
+                columnInfo.digitsInfo = column.pipeArgs.digitsInfo
+                    ? column.pipeArgs.digitsInfo
+                    : '1.0-2';
+            }
             if (this.options.ignoreColumnsOrder) {
                 if (columnInfo.startIndex !== columnInfo.pinnedIndex) {
                     columnInfo.pinnedIndex = Number.MAX_VALUE;
@@ -3783,6 +3843,68 @@ class IgxBaseExporter {
         };
         return result;
     }
+    addPivotGridColumns(grid) {
+        if (grid.nativeElement.tagName.toLowerCase() !== 'igx-pivot-grid') {
+            return;
+        }
+        const enabledRows = grid.pivotConfiguration.rows.filter(r => r.enabled).map((r, i) => ({ name: r.memberName, level: i }));
+        this.preparePivotGridColumns(enabledRows);
+        this.pivotGridFilterFieldsCount = enabledRows.length;
+        const columnList = this._ownersMap.get(DEFAULT_OWNER);
+        columnList.columns.unshift(...this.pivotGridColumns);
+        columnList.columnWidths.unshift(...Array(this.pivotGridColumns.length).fill(200));
+        columnList.indexOfLastPinnedColumn = enabledRows.length - 1;
+        columnList.maxRowLevel = enabledRows.length;
+        this._ownersMap.set(DEFAULT_OWNER, columnList);
+    }
+    preparePivotGridColumns(keys, columnGroupParent) {
+        if (keys.length === 0) {
+            return;
+        }
+        let startIndex = 0;
+        const key = keys[0];
+        const records = this.flatRecords.map(r => r.data);
+        const groupedRecords = records.reduce((hash, obj) => ({ ...hash, [obj[key.name]]: (hash[obj[key.name]] || []).concat(obj) }), {});
+        if (columnGroupParent) {
+            const mapKeys = [...this.pivotGridKeyValueMap.keys()];
+            const mapValues = [...this.pivotGridKeyValueMap.values()];
+            for (const k of Object.keys(groupedRecords)) {
+                groupedRecords[k] = groupedRecords[k].filter(row => mapKeys.every(mk => Object.keys(row).includes(mk))
+                    && mapValues.every(mv => Object.values(row).includes(mv)));
+                if (groupedRecords[k].length === 0) {
+                    delete groupedRecords[k];
+                }
+            }
+        }
+        for (const k of Object.keys(groupedRecords)) {
+            const rowSpan = groupedRecords[k].length;
+            const rowDimensionColumn = {
+                rowSpan,
+                field: k,
+                header: k,
+                startIndex,
+                skip: false,
+                pinnedIndex: 0,
+                level: key.level,
+                dataType: 'string',
+                headerType: groupedRecords[k].length > 1 ? HeaderType.MultiRowHeader : HeaderType.RowHeader,
+            };
+            if (columnGroupParent) {
+                rowDimensionColumn.columnGroupParent = columnGroupParent;
+            }
+            else {
+                rowDimensionColumn.columnGroup = k;
+            }
+            this.pivotGridColumns.push(rowDimensionColumn);
+            if (keys.length > 1) {
+                this.pivotGridKeyValueMap.set(key.name, k);
+                const newKeys = keys.filter(kdd => kdd !== key);
+                this.preparePivotGridColumns(newKeys, k);
+                this.pivotGridKeyValueMap.delete(key.name);
+            }
+            startIndex += rowSpan;
+        }
+    }
     resetDefaults() {
         this._sort = null;
         this.flatRecords = [];
@@ -4248,7 +4370,7 @@ class ExcelStrings {
     }
     static getStyles() {
         return ExcelStrings.XML_STRING +
-            '<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac x16r2" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:x16r2="http://schemas.microsoft.com/office/spreadsheetml/2015/02/main"><fonts count="2" x14ac:knownFonts="1"><font><sz val="11"/><color theme="1"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font><font><sz val="11"/><color rgb="FFB7B7B7"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font></fonts><fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor rgb="FF0D1822"/><bgColor indexed="64"/></patternFill></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="4"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/> <xf numFmtId="14" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/> <xf numFmtId="0" fontId="1" fillId="2" borderId="0" xfId="0"/></cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles><dxfs count="0"/><tableStyles count="0" defaultTableStyle="TableStyleMedium2" defaultPivotStyle="PivotStyleLight16"/><extLst><ext uri="{EB79DEF2-80B8-43e5-95BD-54CBDDF9020C}" xmlns:x14="http://schemas.microsoft.com/office/spreadsheetml/2009/9/main"><x14:slicerStyles defaultSlicerStyle="SlicerStyleLight1"/></ext><ext uri="{9260A510-F301-46a8-8635-F512D64BE5F5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:timelineStyles defaultTimelineStyle="TimeSlicerStyleLight1"/></ext></extLst></styleSheet>';
+            '<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x14ac x16r2" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:x16r2="http://schemas.microsoft.com/office/spreadsheetml/2015/02/main"><fonts count="2" x14ac:knownFonts="1"><font><sz val="11"/><color theme="1"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font><font><sz val="11"/><color rgb="FFB7B7B7"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font></fonts><fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor rgb="FF0D1822"/><bgColor indexed="64"/></patternFill></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="5"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="14" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="0" fontId="1" fillId="2" borderId="0" xfId="0"/><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyAlignment="1"><alignment horizontal="center" vertical="center"/></xf></cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles><dxfs count="0"/><tableStyles count="0" defaultTableStyle="TableStyleMedium2" defaultPivotStyle="PivotStyleLight16"/><extLst><ext uri="{EB79DEF2-80B8-43e5-95BD-54CBDDF9020C}" xmlns:x14="http://schemas.microsoft.com/office/spreadsheetml/2009/9/main"><x14:slicerStyles defaultSlicerStyle="SlicerStyleLight1"/></ext><ext uri="{9260A510-F301-46a8-8635-F512D64BE5F5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:timelineStyles defaultTimelineStyle="TimeSlicerStyleLight1"/></ext></extLst></styleSheet>';
     }
     static getWorkbook(worksheetName) {
         return ExcelStrings.XML_STRING + `<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="x15" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><fileVersion appName="xl" lastEdited="6" lowestEdited="6" rupBuild="14420"/><workbookPr filterPrivacy="1" defaultThemeVersion="164011"/><bookViews><workbookView xWindow="0" yWindow="0" windowWidth="22260" windowHeight="12645"/></bookViews><sheets><sheet name="${worksheetName}" sheetId="1" r:id="rId1"/></sheets><calcPr calcId="162913"/><extLst><ext uri="{140A7094-0E35-4892-8432-C4D2E57EDEB5}" xmlns:x15="http://schemas.microsoft.com/office/spreadsheetml/2010/11/main"><x15:workbookPr chartTrackingRefBase="1"/></ext></extLst></workbook>`;
@@ -4331,7 +4453,7 @@ ExcelStrings.SHARED_STRING_RELATIONSHIP = '<Relationship Id="rId4" Type="http://
  */
 class RootRelsFile {
     writeElement(folder) {
-        folder.file('.rels', ExcelStrings.getRels());
+        folder['.rels'] = strToU8(ExcelStrings.getRels());
     }
 }
 /**
@@ -4339,7 +4461,7 @@ class RootRelsFile {
  */
 class AppFile {
     writeElement(folder, worksheetData) {
-        folder.file('app.xml', ExcelStrings.getApp(worksheetData.options.worksheetName));
+        folder['app.xml'] = strToU8(ExcelStrings.getApp(worksheetData.options.worksheetName));
     }
 }
 /**
@@ -4347,7 +4469,7 @@ class AppFile {
  */
 class CoreFile {
     writeElement(folder) {
-        folder.file('core.xml', ExcelStrings.getCore());
+        folder['core.xml'] = strToU8(ExcelStrings.getCore());
     }
 }
 /**
@@ -4356,7 +4478,7 @@ class CoreFile {
 class WorkbookRelsFile {
     writeElement(folder, worksheetData) {
         const hasSharedStrings = !worksheetData.isEmpty || worksheetData.options.alwaysExportHeaders;
-        folder.file('workbook.xml.rels', ExcelStrings.getWorkbookRels(hasSharedStrings));
+        folder['workbook.xml.rels'] = strToU8(ExcelStrings.getWorkbookRels(hasSharedStrings));
     }
 }
 /**
@@ -4364,7 +4486,7 @@ class WorkbookRelsFile {
  */
 class ThemeFile {
     writeElement(folder) {
-        folder.file('theme1.xml', ExcelStrings.getTheme());
+        folder['theme1.xml'] = strToU8(ExcelStrings.getTheme());
     }
 }
 /**
@@ -4373,12 +4495,14 @@ class ThemeFile {
 class WorksheetFile {
     constructor() {
         this.maxOutlineLevel = 0;
+        this.sheetData = '';
         this.dimension = '';
         this.freezePane = '';
         this.rowHeight = '';
         this.mergeCellStr = '';
         this.mergeCellsCounter = 0;
         this.rowIndex = 0;
+        this.pivotGridRowHeadersMap = new Map();
     }
     writeElement() { }
     async writeElementAsync(folder, worksheetData) {
@@ -4386,69 +4510,55 @@ class WorksheetFile {
             this.prepareDataAsync(worksheetData, (cols, rows) => {
                 const hasTable = (!worksheetData.isEmpty || worksheetData.options.alwaysExportHeaders)
                     && worksheetData.options.exportAsTable;
-                folder.file('sheet1.xml', ExcelStrings.getSheetXML(this.dimension, this.freezePane, cols, rows, hasTable, this.maxOutlineLevel, worksheetData.isHierarchical));
+                folder['sheet1.xml'] = strToU8(ExcelStrings.getSheetXML(this.dimension, this.freezePane, cols, rows, hasTable, this.maxOutlineLevel, worksheetData.isHierarchical));
                 resolve();
             });
         });
     }
     prepareDataAsync(worksheetData, done) {
-        let sheetData = '';
+        this.sheetData = '';
         let cols = '';
         const dictionary = worksheetData.dataDictionary;
         this.rowIndex = 0;
         if (worksheetData.isEmpty && (!worksheetData.options.alwaysExportHeaders || worksheetData.owner.columns.length === 0)) {
-            sheetData += '<sheetData/>';
+            this.sheetData += '<sheetData/>';
             this.dimension = 'A1';
-            done('', sheetData);
+            done('', this.sheetData);
         }
         else {
             const owner = worksheetData.owner;
             const isHierarchicalGrid = worksheetData.isHierarchical;
             const hasMultiColumnHeader = worksheetData.hasMultiColumnHeader;
+            const hasMultiRowHeader = worksheetData.hasMultiRowHeader;
             const hasUserSetIndex = owner.columns.some(col => col.exportIndex !== undefined);
             const height = worksheetData.options.rowHeight;
-            const rowStyle = isHierarchicalGrid ? ' s="3"' : '';
             this.rowHeight = height ? ` ht="${height}" customHeight="1"` : '';
-            sheetData += `<sheetData>`;
+            this.sheetData += `<sheetData>`;
+            let headersForLevel = [];
+            for (let i = 0; i <= owner.maxRowLevel; i++) {
+                headersForLevel = owner.columns.filter(c => c.level === i && c.rowSpan > 0 && !c.skip);
+                this.printHeaders(worksheetData, headersForLevel, i, true);
+                this.rowIndex++;
+            }
+            this.rowIndex = 0;
             for (let i = 0; i <= owner.maxLevel; i++) {
                 this.rowIndex++;
-                sheetData += `<row r="${this.rowIndex}"${this.rowHeight}>`;
-                const headersForLevel = hasMultiColumnHeader ?
-                    owner.columns
+                const pivotGridColumns = this.pivotGridRowHeadersMap.get(this.rowIndex) ?? "";
+                this.sheetData += `<row r="${this.rowIndex}"${this.rowHeight}>${pivotGridColumns}`;
+                const allowedColumns = owner.columns.filter(c => c.headerType !== HeaderType.RowHeader && c.headerType !== HeaderType.MultiRowHeader);
+                headersForLevel = hasMultiColumnHeader ?
+                    allowedColumns
                         .filter(c => (c.level < i &&
                         c.headerType !== HeaderType.MultiColumnHeader || c.level === i) && c.columnSpan > 0 && !c.skip)
                         .sort((a, b) => a.startIndex - b.startIndex)
                         .sort((a, b) => a.pinnedIndex - b.pinnedIndex) :
                     hasUserSetIndex ?
-                        owner.columns.filter(c => !c.skip) :
-                        owner.columns.filter(c => !c.skip)
+                        allowedColumns.filter(c => !c.skip) :
+                        allowedColumns.filter(c => !c.skip)
                             .sort((a, b) => a.startIndex - b.startIndex)
                             .sort((a, b) => a.pinnedIndex - b.pinnedIndex);
-                let startValue = 0;
-                for (const currentCol of headersForLevel) {
-                    if (currentCol.level === i) {
-                        let columnCoordinate;
-                        columnCoordinate = ExcelStrings.getExcelColumn(startValue) + this.rowIndex;
-                        const columnValue = dictionary.saveValue(currentCol.header, true);
-                        sheetData += `<c r="${columnCoordinate}"${rowStyle} t="s"><v>${columnValue}</v></c>`;
-                        if (i !== owner.maxLevel) {
-                            this.mergeCellsCounter++;
-                            this.mergeCellStr += ` <mergeCell ref="${columnCoordinate}:`;
-                            if (currentCol.headerType === HeaderType.ColumnHeader) {
-                                columnCoordinate = ExcelStrings.getExcelColumn(startValue) + (owner.maxLevel + 1);
-                            }
-                            else {
-                                for (let k = 1; k < currentCol.columnSpan; k++) {
-                                    columnCoordinate = ExcelStrings.getExcelColumn(startValue + k) + this.rowIndex;
-                                    sheetData += `<c r="${columnCoordinate}"${rowStyle} />`;
-                                }
-                            }
-                            this.mergeCellStr += `${columnCoordinate}" />`;
-                        }
-                    }
-                    startValue += currentCol.columnSpan;
-                }
-                sheetData += `</row>`;
+                this.printHeaders(worksheetData, headersForLevel, i, false);
+                this.sheetData += `</row>`;
             }
             const multiColumnHeaderLevel = worksheetData.options.ignoreMultiColumnHeaders ? 0 : owner.maxLevel;
             const freezeHeaders = worksheetData.options.freezeHeaders ? 2 + multiColumnHeaderLevel : 1;
@@ -4501,12 +4611,12 @@ class WorksheetFile {
                 }
             }
             this.processDataRecordsAsync(worksheetData, (rows) => {
-                sheetData += rows;
-                sheetData += '</sheetData>';
-                if (hasMultiColumnHeader && this.mergeCellsCounter > 0) {
-                    sheetData += `<mergeCells count="${this.mergeCellsCounter}">${this.mergeCellStr}</mergeCells>`;
+                this.sheetData += rows;
+                this.sheetData += '</sheetData>';
+                if ((hasMultiColumnHeader || hasMultiRowHeader) && this.mergeCellsCounter > 0) {
+                    this.sheetData += `<mergeCells count="${this.mergeCellsCounter}">${this.mergeCellStr}</mergeCells>`;
                 }
-                done(cols, sheetData);
+                done(cols, this.sheetData);
             });
         }
     }
@@ -4525,7 +4635,7 @@ class WorksheetFile {
                     }
                     else {
                         recordHeaders = worksheetData.owner.columns
-                            .filter(c => c.headerType !== HeaderType.MultiColumnHeader && !c.skip)
+                            .filter(c => c.headerType !== HeaderType.MultiColumnHeader && c.headerType !== HeaderType.MultiRowHeader && c.headerType !== HeaderType.RowHeader && !c.skip)
                             .sort((a, b) => a.startIndex - b.startIndex)
                             .sort((a, b) => a.pinnedIndex - b.pinnedIndex)
                             .map(c => c.field);
@@ -4599,11 +4709,12 @@ class WorksheetFile {
         this.maxOutlineLevel = this.maxOutlineLevel < rowLevel ? rowLevel : this.maxOutlineLevel;
         const sHidden = record.hidden ? ` hidden="1"` : '';
         this.rowIndex++;
+        const pivotGridColumns = this.pivotGridRowHeadersMap.get(this.rowIndex) ?? "";
         rowData[0] =
-            `<row r="${this.rowIndex}"${this.rowHeight}${outlineLevel}${sHidden}>`;
+            `<row r="${this.rowIndex}"${this.rowHeight}${outlineLevel}${sHidden}>${pivotGridColumns}`;
         const keys = worksheetData.isSpecialData ? [record.data] : headersForLevel;
         for (let j = 0; j < keys.length; j++) {
-            const col = j + (isHierarchicalGrid ? rowLevel : 0);
+            const col = j + (isHierarchicalGrid ? rowLevel : worksheetData.isPivotGrid ? worksheetData.owner.maxRowLevel : 0);
             const cellData = this.getCellData(worksheetData, i, col, keys[j]);
             rowData[j + 1] = cellData;
         }
@@ -4636,6 +4747,74 @@ class WorksheetFile {
             return `<c r="${columnName}"${type}${format}><v>${value}</v></c>`;
         }
     }
+    printHeaders(worksheetData, headersForLevel, i, isVertical) {
+        let startValue = 0;
+        let str = '';
+        const isHierarchicalGrid = worksheetData.isHierarchical;
+        let rowStyle = isHierarchicalGrid ? ' s="3"' : '';
+        const dictionary = worksheetData.dataDictionary;
+        const owner = worksheetData.owner;
+        const maxLevel = isVertical
+            ? owner.maxRowLevel
+            : owner.maxLevel;
+        for (const currentCol of headersForLevel) {
+            const spanLength = isVertical ? currentCol.rowSpan : currentCol.columnSpan;
+            if (currentCol.level === i) {
+                let columnCoordinate;
+                const column = isVertical
+                    ? this.rowIndex
+                    : startValue + (owner.maxRowLevel ?? 0);
+                const rowCoordinate = isVertical
+                    ? startValue + owner.maxLevel + 2
+                    : this.rowIndex;
+                const columnValue = dictionary.saveValue(currentCol.header, true);
+                columnCoordinate = ExcelStrings.getExcelColumn(column) + rowCoordinate;
+                rowStyle = isVertical && currentCol.rowSpan > 1 ? ' s="4"' : rowStyle;
+                str = `<c r="${columnCoordinate}"${rowStyle} t="s"><v>${columnValue}</v></c>`;
+                if (isVertical) {
+                    if (this.pivotGridRowHeadersMap.has(rowCoordinate)) {
+                        this.pivotGridRowHeadersMap.set(rowCoordinate, this.pivotGridRowHeadersMap.get(rowCoordinate) + str);
+                    }
+                    else {
+                        this.pivotGridRowHeadersMap.set(rowCoordinate, str);
+                    }
+                }
+                else {
+                    this.sheetData += str;
+                }
+                if (i !== maxLevel) {
+                    this.mergeCellsCounter++;
+                    this.mergeCellStr += ` <mergeCell ref="${columnCoordinate}:`;
+                    if (currentCol.headerType === HeaderType.ColumnHeader) {
+                        const col = isVertical
+                            ? maxLevel
+                            : startValue + (owner.maxRowLevel ?? 0);
+                        const row = isVertical
+                            ? rowCoordinate
+                            : owner.maxLevel + 1;
+                        columnCoordinate = ExcelStrings.getExcelColumn(col) + row;
+                    }
+                    else {
+                        for (let k = 1; k < spanLength; k++) {
+                            const col = isVertical
+                                ? column
+                                : column + k;
+                            const row = isVertical
+                                ? rowCoordinate + k
+                                : this.rowIndex;
+                            columnCoordinate = ExcelStrings.getExcelColumn(col) + row;
+                            str = `<c r="${columnCoordinate}"${rowStyle} />`;
+                            isVertical
+                                ? this.pivotGridRowHeadersMap.set(row, str)
+                                : this.sheetData += str;
+                        }
+                    }
+                    this.mergeCellStr += `${columnCoordinate}" />`;
+                }
+            }
+            startValue += spanLength;
+        }
+    }
 }
 WorksheetFile.MIN_WIDTH = 8.43;
 /**
@@ -4643,7 +4822,7 @@ WorksheetFile.MIN_WIDTH = 8.43;
  */
 class StyleFile {
     writeElement(folder) {
-        folder.file('styles.xml', ExcelStrings.getStyles());
+        folder['styles.xml'] = strToU8(ExcelStrings.getStyles());
     }
 }
 /**
@@ -4651,7 +4830,7 @@ class StyleFile {
  */
 class WorkbookFile {
     writeElement(folder, worksheetData) {
-        folder.file('workbook.xml', ExcelStrings.getWorkbook(worksheetData.options.worksheetName));
+        folder['workbook.xml'] = strToU8(ExcelStrings.getWorkbook(worksheetData.options.worksheetName));
     }
 }
 /**
@@ -4660,7 +4839,7 @@ class WorkbookFile {
 class ContentTypesFile {
     writeElement(folder, worksheetData) {
         const hasSharedStrings = !worksheetData.isEmpty || worksheetData.options.alwaysExportHeaders;
-        folder.file('[Content_Types].xml', ExcelStrings.getContentTypesXML(hasSharedStrings, worksheetData.options.exportAsTable));
+        folder['[Content_Types].xml'] = strToU8(ExcelStrings.getContentTypesXML(hasSharedStrings, worksheetData.options.exportAsTable));
     }
 }
 /**
@@ -4674,7 +4853,7 @@ class SharedStringsFile {
         for (const value of sortedValues) {
             sharedStrings[dict.getSanitizedValue(value)] = '<si><t>' + value + '</t></si>';
         }
-        folder.file('sharedStrings.xml', ExcelStrings.getSharedStringXML(dict.stringsCount, sortedValues.length, sharedStrings.join('')));
+        folder['sharedStrings.xml'] = strToU8(ExcelStrings.getSharedStringXML(dict.stringsCount, sortedValues.length, sharedStrings.join('')));
     }
 }
 /**
@@ -4709,7 +4888,7 @@ class TablesFile {
             const dir = sortingExpression.dir - 1;
             sortString = `<sortState ref="A2:${lastColumn}"><sortCondition descending="${dir}" ref="${sc}1:${sc}15"/></sortState>`;
         }
-        folder.file('table1.xml', ExcelStrings.getTablesXML(autoFilterDimension, tableDimension, tableColumns, sortString));
+        folder['table1.xml'] = strToU8(ExcelStrings.getTablesXML(autoFilterDimension, tableDimension, tableColumns, sortString));
     }
 }
 /**
@@ -4717,7 +4896,7 @@ class TablesFile {
  */
 class WorksheetRelsFile {
     writeElement(folder) {
-        folder.file('sheet1.xml.rels', ExcelStrings.getWorksheetRels());
+        folder['sheet1.xml.rels'] = strToU8(ExcelStrings.getWorksheetRels());
     }
 }
 
@@ -5035,9 +5214,15 @@ class WorksheetData {
     get hasMultiColumnHeader() {
         return this._hasMultiColumnHeader;
     }
+    get hasMultiRowHeader() {
+        return this._hasMultiRowHeader;
+    }
     get isHierarchical() {
         return this._isHierarchical;
     }
+    get isPivotGrid() {
+        return this._isPivotGrid;
+    }
     get multiColumnHeaderRows() {
         return !this.options.ignoreMultiColumnHeaders ? Array.from(this.owners.values()).map(c => c.maxLevel).reduce((a, b) => a + b) : 0;
     }
@@ -5045,9 +5230,12 @@ class WorksheetData {
         this._dataDictionary = new WorksheetDataDictionary(this.columnCount, this.options.columnWidth, this.columnWidths);
         this._hasMultiColumnHeader = Array.from(this.owners.values())
             .some(o => o.columns.some(col => !col.skip && col.headerType === HeaderType.MultiColumnHeader));
+        this._hasMultiRowHeader = Array.from(this.owners.values())
+            .some(o => o.columns.some(col => !col.skip && col.headerType === HeaderType.MultiRowHeader));
         this._isHierarchical = this.data[0]?.type === ExportRecordType.HierarchicalGridRecord
             || !(typeof (Array.from(this.owners.keys())[0]) === 'string');
-        if (this._isHierarchical || (this._hasMultiColumnHeader && !this.options.ignoreMultiColumnHeaders)) {
+        this._isPivotGrid = this.data[0]?.type === ExportRecordType.PivotGridRecord;
+        if (this._isHierarchical || this._isPivotGrid || (this._hasMultiColumnHeader && !this.options.ignoreMultiColumnHeaders)) {
             this.options.exportAsTable = false;
         }
         if (!this._data || this._data.length === 0) {
@@ -5099,25 +5287,26 @@ class IgxExcelExporterService extends IgxBaseExporter {
          */
         this.exportEnded = new EventEmitter();
     }
-    static async populateFolderAsync(folder, zip, worksheetData) {
+    static async populateZipFileConfig(fileStructure, folder, worksheetData) {
         for (const childFolder of folder.childFolders(worksheetData)) {
             const folderInstance = ExcelElementsFactory.getExcelFolder(childFolder);
-            const zipFolder = zip.folder(folderInstance.folderName);
-            await IgxExcelExporterService.populateFolderAsync(folderInstance, zipFolder, worksheetData);
+            const childStructure = fileStructure[folderInstance.folderName] = {};
+            await IgxExcelExporterService.populateZipFileConfig(childStructure, folderInstance, worksheetData);
         }
         for (const childFile of folder.childFiles(worksheetData)) {
             const fileInstance = ExcelElementsFactory.getExcelFile(childFile);
             if (fileInstance instanceof WorksheetFile) {
-                await fileInstance.writeElementAsync(zip, worksheetData);
+                await fileInstance.writeElementAsync(fileStructure, worksheetData);
             }
             else {
-                fileInstance.writeElement(zip, worksheetData);
+                fileInstance.writeElement(fileStructure, worksheetData);
             }
         }
     }
     exportDataImplementation(data, options, done) {
         const firstDataElement = data[0];
         const isHierarchicalGrid = firstDataElement?.type === ExportRecordType.HierarchicalGridRecord;
+        const isPivotGrid = firstDataElement?.type === ExportRecordType.PivotGridRecord;
         let rootKeys;
         let columnCount;
         let columnWidths;
@@ -5151,7 +5340,7 @@ class IgxExcelExporterService extends IgxBaseExporter {
                 const columns = defaultOwner.columns.filter(col => !col.skip && col.headerType === HeaderType.ColumnHeader);
                 columnWidths = defaultOwner.columnWidths;
                 indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
-                columnCount = columns.length;
+                columnCount = isPivotGrid ? columns.length + this.pivotGridFilterFieldsCount : columns.length;
                 rootKeys = columns.map(c => c.field);
             }
         }
@@ -5162,25 +5351,24 @@ class IgxExcelExporterService extends IgxBaseExporter {
             columnCount = defaultOwner.columns.filter(col => !col.skip && col.headerType === HeaderType.ColumnHeader).length;
         }
         const worksheetData = new WorksheetData(data, options, this._sort, columnCount, rootKeys, indexOfLastPinnedColumn, columnWidths, defaultOwner, this._ownersMap);
-        this._xlsx = typeof JSZip.default === 'function' ? new JSZip.default() : new JSZip();
         const rootFolder = ExcelElementsFactory.getExcelFolder(ExcelFolderTypes.RootExcelFolder);
-        IgxExcelExporterService.populateFolderAsync(rootFolder, this._xlsx, worksheetData)
+        const fileData = {};
+        IgxExcelExporterService.populateZipFileConfig(fileData, rootFolder, worksheetData)
             .then(() => {
-            this._xlsx.generateAsync(IgxExcelExporterService.ZIP_OPTIONS).then((result) => {
+            zip(fileData, (_, result) => {
                 this.saveFile(result, options.fileName);
-                this.exportEnded.emit({ xlsx: this._xlsx });
+                this.exportEnded.emit({ xlsx: fileData });
                 done();
             });
         });
     }
     saveFile(data, fileName) {
-        const blob = new Blob([ExportUtilities.stringToArrayBuffer(atob(data))], {
+        const blob = new Blob([data], {
             type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
         });
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
 }
-IgxExcelExporterService.ZIP_OPTIONS = { compression: 'DEFLATE', type: 'base64' };
 IgxExcelExporterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
 IgxExcelExporterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelExporterService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelExporterService, decorators: [{