@colijnit/corecomponents_v12 256.1.23 → 256.1.25

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -7100,9 +7100,14 @@
         };
         CalendarTemplateComponent.prototype.selectDate = function (day) {
             if (day) {
-                this.selectedDate = day;
-                this._fillDatesBetweenSelected();
-                if (this.doubleCalendar) {
+                if (!this.doubleCalendar) {
+                    // Single calendar → select and close
+                    this.selectedDate = day;
+                    this.setAndClose();
+                }
+                else {
+                    this.selectedDate = day;
+                    this._fillDatesBetweenSelected();
                     this.dateSelected.emit(new Date(this.selectedDate));
                 }
             }
@@ -7238,7 +7243,7 @@
     CalendarTemplateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "calendar-template",
-                    template: "\n      <div class=\"calendar\">\n        <div class=\"selected-date-display\">\n            <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n                {{ selectedDate.getFullYear() }}\n            </span>\n            <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n              {{ selectedDate | date: 'EEE d MMM' }}\n            </span>\n            <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n        </div>\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n        <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n          <span class=\"set-and-close-button\" (click)=\"setAndClose()\">Instellen</span>\n          <span class=\"clear-date-button\" (click)=\"clearDate()\">Wissen</span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"calendar\">\n        <div class=\"selected-date-display\">\n            <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n                {{ selectedDate.getFullYear() }}\n            </span>\n            <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n              {{ selectedDate | date: 'EEE d MMM' }}\n            </span>\n            <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n        </div>\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n        <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n          <span class=\"set-and-close-button\" *ngIf=\"this.doubleCalendar\" (click)=\"setAndClose()\">Instellen</span>\n          <span class=\"clear-date-button\" *ngIf=\"this.selectedDate\" (click)=\"clearDate()\">Wissen</span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -10068,13 +10073,147 @@
         handleMouseUp: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
+    var ExcelExportService = /** @class */ (function () {
+        function ExcelExportService() {
+        }
+        /**
+         * Export data to Excel file
+         * @param data - Array of objects to export
+         * @param columns - Column configuration (optional)
+         * @param fileName - Name of the exported file
+         * @param sheetName - Name of the Excel sheet
+         */
+        ExcelExportService.prototype.exportToExcel = function (data, columns, fileName, sheetName) {
+            var _this = this;
+            if (fileName === void 0) { fileName = 'export'; }
+            if (sheetName === void 0) { sheetName = 'Sheet1'; }
+            // If columns are specified, transform data to match column structure
+            var exportData = data;
+            if (columns && columns.length > 0) {
+                exportData = data.map(function (item) {
+                    var newItem = {};
+                    columns.forEach(function (col) {
+                        newItem[col.header] = _this.getNestedValue(item, col.key);
+                    });
+                    return newItem;
+                });
+            }
+            // Create workbook and worksheet
+            var wb = XLSX__namespace.utils.book_new();
+            var ws = XLSX__namespace.utils.json_to_sheet(exportData);
+            // Set column widths if specified
+            if (columns && columns.some(function (col) { return col.width; })) {
+                var colWidths = columns.map(function (col) { return ({ wch: col.width || 20 }); });
+                ws['!cols'] = colWidths;
+            }
+            // Add worksheet to workbook
+            XLSX__namespace.utils.book_append_sheet(wb, ws, sheetName);
+            // Save file
+            XLSX__namespace.writeFile(wb, fileName + ".xlsx");
+        };
+        /**
+         * Export multiple sheets to one Excel file
+         * @param sheets - Array of sheet data
+         * @param fileName - Name of the exported file
+         */
+        ExcelExportService.prototype.exportMultipleSheets = function (sheets, fileName) {
+            var _this = this;
+            if (fileName === void 0) { fileName = 'multi-sheet-export'; }
+            var wb = XLSX__namespace.utils.book_new();
+            sheets.forEach(function (sheet) {
+                var exportData = sheet.data;
+                if (sheet.columns && sheet.columns.length > 0) {
+                    exportData = sheet.data.map(function (item) {
+                        var newItem = {};
+                        sheet.columns.forEach(function (col) {
+                            newItem[col.header] = _this.getNestedValue(item, col.key);
+                        });
+                        return newItem;
+                    });
+                }
+                var ws = XLSX__namespace.utils.json_to_sheet(exportData);
+                if (sheet.columns && sheet.columns.some(function (col) { return col.width; })) {
+                    var colWidths = sheet.columns.map(function (col) { return ({ wch: col.width || 20 }); });
+                    ws['!cols'] = colWidths;
+                }
+                XLSX__namespace.utils.book_append_sheet(wb, ws, sheet.sheetName);
+            });
+            XLSX__namespace.writeFile(wb, fileName + ".xlsx");
+        };
+        /**
+         * Export HTML table to Excel
+         * @param tableId - ID of the HTML table element
+         * @param fileName - Name of the exported file
+         * @param sheetName - Name of the Excel sheet
+         */
+        ExcelExportService.prototype.exportTableToExcel = function (tableId, fileName, sheetName) {
+            if (fileName === void 0) { fileName = 'table-export'; }
+            if (sheetName === void 0) { sheetName = 'Sheet1'; }
+            var table = document.getElementById(tableId);
+            if (!table) {
+                console.error("Table with ID '" + tableId + "' not found");
+                return;
+            }
+            var wb = XLSX__namespace.utils.book_new();
+            var ws = XLSX__namespace.utils.table_to_sheet(table);
+            XLSX__namespace.utils.book_append_sheet(wb, ws, sheetName);
+            XLSX__namespace.writeFile(wb, fileName + ".xlsx");
+        };
+        /**
+         * Get nested object value using dot notation
+         * @param obj - Object to search in
+         * @param path - Dot notation path (e.g., 'user.address.city')
+         */
+        ExcelExportService.prototype.getNestedValue = function (obj, path) {
+            return path.split('.').reduce(function (current, key) {
+                return current && current[key] !== undefined ? current[key] : '';
+            }, obj);
+        };
+        /**
+         * Format date for Excel export
+         * @param date - Date to format
+         * @param format - Format string (default: 'MM/DD/YYYY')
+         */
+        ExcelExportService.prototype.formatDateForExport = function (date, format) {
+            if (format === void 0) { format = 'MM/DD/YYYY'; }
+            if (!date) {
+                return '';
+            }
+            var d = new Date(date);
+            if (isNaN(d.getTime())) {
+                return '';
+            }
+            var month = (d.getMonth() + 1).toString().padStart(2, '0');
+            var day = d.getDate().toString().padStart(2, '0');
+            var year = d.getFullYear();
+            switch (format) {
+                case 'MM/DD/YYYY':
+                    return month + "/" + day + "/" + year;
+                case 'DD/MM/YYYY':
+                    return day + "/" + month + "/" + year;
+                case 'YYYY-MM-DD':
+                    return year + "-" + month + "-" + day;
+                default:
+                    return d.toLocaleDateString();
+            }
+        };
+        return ExcelExportService;
+    }());
+    ExcelExportService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ExcelExportService_Factory() { return new ExcelExportService(); }, token: ExcelExportService, providedIn: "root" });
+    ExcelExportService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     var SimpleGridComponent = /** @class */ (function (_super) {
         __extends(SimpleGridComponent, _super);
-        function SimpleGridComponent(icons, _changeDetection, _formMaster) {
+        function SimpleGridComponent(icons, _changeDetection, _formMaster, excelExportService) {
             var _this = _super.call(this) || this;
             _this.icons = icons;
             _this._changeDetection = _changeDetection;
             _this._formMaster = _formMaster;
+            _this.excelExportService = excelExportService;
             _this.defaultTextAlign = exports.ColumnAlign.Left;
             _this.showAdd = false;
             _this.showDelete = false;
@@ -10164,14 +10303,6 @@
                 });
             });
         };
-        SimpleGridComponent.prototype.isSingleColumn = function (column) {
-            return column.singleColumn;
-        };
-        SimpleGridComponent.prototype.rowContainsSingleColumn = function (row, columns) {
-            var _this = this;
-            var singleColumn = columns.find(function (column) { return _this.isSingleColumn(column) && !!row[column.field]; });
-            return !!singleColumn;
-        };
         SimpleGridComponent.prototype.addNewRow = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var valid, _a;
@@ -10348,75 +10479,12 @@
                 return obj !== col;
             });
         };
-        // TODO Fix this sort method
-        // public sortColumn(col: any, columnValue: string): void {
-        //   console.log(col);
-        //   console.log("columnValue " + columnValue);
-        //   col.isSelected = false;
-        //
-        //   if (this.sortColumnValue === columnValue) {
-        //     this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-        //   } else {
-        //     this.sortColumnValue = columnValue;
-        //     this.sortDirection = 'asc';
-        //   }
-        //
-        //   console.log(this.data);
-        //   // this.data = this._sortData(this.data);
-        //
-        //
-        //   this.data.sort((a, b) => {
-        //     const sign = this.sortDirection === 'asc' ? 1 : -1;
-        //
-        //     console.log("a " + a);
-        //     console.log("b " + b);
-        //     console.log(a[this.sortColumnValue]);
-        //     console.log(b[this.sortColumnValue]);
-        //     console.log("sign " + sign);
-        //
-        //     if (a[this.sortColumnValue] < b[this.sortColumnValue]) {
-        //       return -1 * sign;
-        //     } else if (a[this.sortColumnValue] > b[this.sortColumnValue]) {
-        //       return 1 * sign;
-        //     }
-        //     return 0;
-        //   });
-        //
-        //
-        //
-        //   this._detectChanges();
-        //   // this.data.sort((a, b) => a[this.sortColumnValue] - b[this.sortColumnValue]);
-        //   console.log(this.data);
-        // }
-        SimpleGridComponent.prototype._sortData = function (tableData) {
-            var _this = this;
-            return tableData.sort(function (a, b) {
-                var sign = _this.sortDirection === 'asc' ? 1 : -1;
-                console.log("a " + a);
-                console.log("b " + b);
-                console.log(a[_this.sortColumnValue]);
-                console.log(b[_this.sortColumnValue]);
-                console.log("sign " + sign);
-                if (a[_this.sortColumnValue] < b[_this.sortColumnValue]) {
-                    return -1 * sign;
-                }
-                else if (a[_this.sortColumnValue] > b[_this.sortColumnValue]) {
-                    return 1 * sign;
-                }
-                return 0;
-            });
-        };
         SimpleGridComponent.prototype.showAllColumns = function () {
             this.isSettingsMenuOpen = false;
             this.headerColumnsCopy = this.headerColumns;
         };
         SimpleGridComponent.prototype.exportToExcel = function () {
-            this.isSettingsMenuOpen = false;
-            var element = document.getElementById('simple-grid-table');
-            var ws = XLSX__namespace.utils.table_to_sheet(element);
-            var wb = XLSX__namespace.utils.book_new();
-            XLSX__namespace.utils.book_append_sheet(wb, ws, 'Sheet1');
-            XLSX__namespace.writeFile(wb, 'ExcelSheet.xlsx');
+            this.excelExportService.exportTableToExcel('simple-grid-table', 'ExcelSheet', 'Sheet1');
         };
         SimpleGridComponent.prototype.prepareDataRow = function (row, index) {
             this.isRowDisabled(row, index);
@@ -10569,10 +10637,8 @@
     SimpleGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-simple-grid',
-                    template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"showEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table\n      id=\"simple-grid-table\"\n      class=\"simple-grid-table\"\n      [clickOutside]=\"editing\"\n      (clickOutside)=\"handleClickOutsideRow()\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumnsCopy; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th\n          scope=\"col\"\n          #headerCell\n          class=\"simple-grid-column-header\"\n          *ngFor=\"let column of headerColumnsCopy; let index = index\">\n          <div\n            class=\"simple-grid-column-header-wrapper\"\n            [class.resizable]=\"resizable\"\n            [class.selected]=\"column.isSelected\"\n            [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\"\n                   [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [class.with-menu]=\"showGridSettings\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n                   (click)=\"toggleColumnMenu(column)\">\n              </div>\n\n              <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n                <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n                <ul>\n                  <li (click)=\"hideColumn(column)\">Hide Column</li>\n<!--                  <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>-->\n                </ul>\n              </div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n        <th *ngIf=\"showGridSettings\" class=\"simple-grid-column-header grid-settings\">\n          <co-button\n            [class.selected]=\"isSettingsMenuOpen\"\n            [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n            (click)=\"toggleSettingsMenu()\">\n          </co-button>\n\n          <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n            <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n            <ul>\n              <li (click)=\"exportToExcel()\">Export to Excel</li>\n              <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">Show All\n                Columns\n              </li>\n            </ul>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n      <tr\n        class=\"simple-grid-row\"\n        [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n        [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n        [class.editing]=\"rowIndex === editRowIndex\"\n        *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n        cdkDrag\n        (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n        (visibilityChange)=\"rowVisible.next(row)\">\n        <co-form class=\"simple-grid-row-form\">\n          <ng-container *ngIf=\"isSingleColumnRow(row)\">\n            <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n              <co-simple-grid-cell\n                [column]=\"columns[singleColumnIndex(row)]\"\n                [row]=\"row\"\n                [editMode]=\"false\"\n              ></co-simple-grid-cell>\n            </td>\n          </ng-container>\n          <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n            <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n              <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                <co-simple-grid-cell\n                  [column]=\"column\"\n                  [row]=\"row\"\n                  [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                  [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n                  (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\"\n                ></co-simple-grid-cell>\n                <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n              </td>\n            </ng-container>\n          </ng-container>\n          <td *ngIf=\"showGridSettings\"></td>\n        </co-form>\n      </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n                       [itemsPerPage]=\"rowsPerPage\"\n                       [currentPage]=\"currentPage\"\n                       [totalItems]=\"data.length\"\n                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n    ></co-pagination-bar>\n  ",
-                    providers: [
-                        FormMasterService
-                    ],
+                    template: "\n      <co-grid-toolbar\n              *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n              [showEdit]=\"showEdit\"\n              [showAdd]=\"showAdd\"\n              [showDelete]=\"showDelete\"\n              [deleteEnabled]=\"selectedRowIndex > -1\"\n              (addClick)=\"addNewRow()\"\n              (editClick)=\"editRow($event)\"\n              (saveClick)=\"validateAndSave()\"\n              (cancelClick)=\"cancelEditRow()\"\n              (deleteClick)=\"removeRow()\">\n      </co-grid-toolbar>\n\n      <table\n              id=\"simple-grid-table\"\n              class=\"simple-grid-table\"\n              [clickOutside]=\"editing\"\n              (clickOutside)=\"handleClickOutsideRow()\">\n          <colgroup>\n              <col\n                      *ngFor=\"let column of headerColumnsCopy; let index = index\"\n                      [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n                      [style.width.px]=\"column.width\"\n                      [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n          </colgroup>\n          <thead>\n          <tr>\n              <th\n                      scope=\"col\"\n                      #headerCell\n                      class=\"simple-grid-column-header\"\n                      *ngFor=\"let column of headerColumnsCopy; let index = index\">\n                  <div\n                          class=\"simple-grid-column-header-wrapper\"\n                          [class.resizable]=\"resizable\"\n                          [class.selected]=\"column.isSelected\"\n                          [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n                      <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n                          <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n                      </ng-container>\n                      <ng-template #noHeaderTemplate>\n                          <div\n                                  class=\"simple-grid-column-header-label\"\n                                  [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                                  [class.with-menu]=\"showGridSettings\"\n                                  [textContent]=\"column.headerText || '&nbsp;'\"\n                                  (click)=\"toggleColumnMenu(column)\">\n                          </div>\n\n                          <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n                              <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n                              <ul>\n                                  <li (click)=\"hideColumn(column)\">Hide Column</li>\n                                  <!--                  <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>-->\n                              </ul>\n                          </div>\n                      </ng-template>\n                      <div\n                              *ngIf=\"resizable && column.resizable\"\n                              class=\"simple-grid-column-sizer\"\n                              (mousedown)=\"handleSizerMouseDown($event, column)\">\n                      </div>\n                  </div>\n              </th>\n          </tr>\n\n          <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n              <co-button\n                      [class.selected]=\"isSettingsMenuOpen\"\n                      [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n                      (click)=\"toggleSettingsMenu()\">\n              </co-button>\n\n              <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n                  <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n                  <ul>\n                      <li (click)=\"exportToExcel()\">Export to Excel</li>\n                      <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n                          Show All Columns\n                      </li>\n                  </ul>\n              </div>\n          </div>\n\n          </thead>\n          <tbody\n                  #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n                  class=\"simple-grid-drag-drop-list\"\n                  [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n                  [cdkDropListData]=\"data\"\n                  [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n                  (cdkDropListDropped)=\"handleDrop($event)\">\n          <co-form class=\"simple-grid-row-form\">\n              <tr\n                      class=\"simple-grid-row\"\n                      [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n                      [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n                      [class.editing]=\"rowIndex === editRowIndex\"\n                      *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n                      cdkDrag\n                      (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n                      (visibilityChange)=\"rowVisible.next(row)\">\n                  <ng-container *ngIf=\"isSingleColumnRow(row)\">\n                      <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n                          <co-simple-grid-cell\n                                  [column]=\"columns[singleColumnIndex(row)]\"\n                                  [row]=\"row\"\n                                  [editMode]=\"false\">\n                          </co-simple-grid-cell>\n                      </td>\n                  </ng-container>\n                  <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n                      <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n                          <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                              <co-simple-grid-cell\n                                      [column]=\"column\"\n                                      [row]=\"row\"\n                                      [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                                      [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n                                      (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\">\n                              </co-simple-grid-cell>\n                              <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                          </td>\n                      </ng-container>\n                  </ng-container>\n              </tr>\n          </co-form>\n          </tbody>\n      </table>\n\n      <co-pagination-bar\n              *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n              [itemsPerPage]=\"rowsPerPage\"\n              [currentPage]=\"currentPage\"\n              [totalItems]=\"data.length\"\n              [autoHide]=\"true\"\n              (previousClick)=\"goToPreviousPage()\"\n              (nextClick)=\"goToNextPage()\"\n              (pageClick)=\"setCurrentPage($event)\">\n      </co-pagination-bar>\n  ",
+                    providers: [FormMasterService],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -10580,7 +10646,8 @@
     SimpleGridComponent.ctorParameters = function () { return [
         { type: IconCacheService },
         { type: i0.ChangeDetectorRef },
-        { type: FormMasterService }
+        { type: FormMasterService },
+        { type: ExcelExportService }
     ]; };
     SimpleGridComponent.propDecorators = {
         headerCells: [{ type: i0.ViewChildren, args: ['headerCell',] }],
@@ -15187,21 +15254,22 @@
     exports.showHideDialog = showHideDialog;
     exports["ɵa"] = InputBoolean;
     exports["ɵb"] = RippleModule;
-    exports["ɵba"] = PaginationService;
-    exports["ɵbb"] = PaginatePipe;
-    exports["ɵbc"] = SimpleGridCellComponent;
-    exports["ɵbd"] = ListOfValuesMultiselectPopupComponent;
-    exports["ɵbe"] = ConfirmationDialogComponent;
-    exports["ɵbf"] = DialogBaseComponent;
-    exports["ɵbg"] = CoreDynamicComponentService;
-    exports["ɵbh"] = PrependPipeModule;
-    exports["ɵbi"] = PrependPipe;
-    exports["ɵbj"] = CheckmarkOverlayComponent;
-    exports["ɵbk"] = ScannerService;
-    exports["ɵbl"] = TooltipModule;
-    exports["ɵbm"] = TooltipComponent;
-    exports["ɵbn"] = TooltipDirective;
-    exports["ɵbo"] = HourSchedulingTestObjectComponent;
+    exports["ɵba"] = ObserveVisibilityDirective;
+    exports["ɵbb"] = PaginationService;
+    exports["ɵbc"] = PaginatePipe;
+    exports["ɵbd"] = SimpleGridCellComponent;
+    exports["ɵbe"] = ListOfValuesMultiselectPopupComponent;
+    exports["ɵbf"] = ConfirmationDialogComponent;
+    exports["ɵbg"] = DialogBaseComponent;
+    exports["ɵbh"] = CoreDynamicComponentService;
+    exports["ɵbi"] = PrependPipeModule;
+    exports["ɵbj"] = PrependPipe;
+    exports["ɵbk"] = CheckmarkOverlayComponent;
+    exports["ɵbl"] = ScannerService;
+    exports["ɵbm"] = TooltipModule;
+    exports["ɵbn"] = TooltipComponent;
+    exports["ɵbo"] = TooltipDirective;
+    exports["ɵbp"] = HourSchedulingTestObjectComponent;
     exports["ɵc"] = MD_RIPPLE_GLOBAL_OPTIONS;
     exports["ɵd"] = CoRippleDirective;
     exports["ɵe"] = CoViewportRulerService;
@@ -15225,7 +15293,7 @@
     exports["ɵw"] = CalendarTemplateComponent;
     exports["ɵx"] = PopupShowerService;
     exports["ɵy"] = BaseSimpleGridComponent;
-    exports["ɵz"] = ObserveVisibilityDirective;
+    exports["ɵz"] = ExcelExportService;
 
     Object.defineProperty(exports, '__esModule', { value: true });