slick-components 4.4.8 → 4.4.12

package/bundles/slick-components.umd.js

@@ -69,7 +69,7 @@
         };
         return SlickInitService;
     }());
-    SlickInitService.version = "4.4.8";
+    SlickInitService.version = "4.4.12";
     SlickInitService.decorators = [
         { type: core.Injectable }
     ];
@@ -4372,6 +4372,7 @@
             this.showPhotoGallery = false;
             this.showCheckboxes = false;
             this.thumbnailSize = 90;
+            this.confirmDelete = true;
             this.filesEmitter = new core.EventEmitter();
             this.onFileDeleteEmitter = new core.EventEmitter();
             this.onFileCheckChanged = new core.EventEmitter();
@@ -4389,6 +4390,8 @@
                 this.showPhotoGallery = (changes.showPhotoGallery.currentValue.toString().toLowerCase() !== 'false');
             if (changes.showCheckboxes && changes.showCheckboxes.currentValue)
                 this.showCheckboxes = (changes.showCheckboxes.currentValue.toString().toLowerCase() !== 'false');
+            if (changes.deleteConfirmation && changes.deleteConfirmation.currentValue)
+                this.confirmDelete = (this.confirmDelete.toString() === 'true') ? true : false;
         };
         SlickFileListComponent.prototype.fileClicked = function (file, idx) {
             if (this.showPhotoGallery === true) {
@@ -4402,10 +4405,15 @@
             this.filesEmitter.emit(this.files);
         };
         SlickFileListComponent.prototype.onFileDelete = function (file, idx) {
-            this.files.splice(idx, 1);
-            this.filesEmitter.emit(this.files);
-            if (this.onFileDeleteEmitter)
-                this.onFileDeleteEmitter.emit(file);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.files.splice(idx, 1);
+                    this.filesEmitter.emit(this.files);
+                    if (this.onFileDeleteEmitter)
+                        this.onFileDeleteEmitter.emit(file);
+                    return [2 /*return*/];
+                });
+            });
         };
         SlickFileListComponent.prototype.onCheckChanged = function (e, fileIdx) {
             return __awaiter(this, void 0, void 0, function () {
@@ -4462,7 +4470,7 @@
     SlickFileListComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'slick-file-list',
-                    template: "<div #containerRef id=\"slick-file-list_{{uuid}}\" class=\"slick-file-list\">\r\n\t<slick-file-list-item *ngFor=\"let file of files; let idx = index\" [file]=\"file\" [allowDelete]=\"allowDelete\" [showPhotoGallery]=\"showPhotoGallery\" [showCheckbox]=\"showCheckboxes\" [thumbnailSize]=\"thumbnailSize\" (checkChanged)=\"onCheckChanged($event, idx)\" (fileClicked)=\"fileClicked($event, idx)\" (fileChanged)=\"onFileChange($event, idx)\" (fileDelete)=\"onFileDelete($event, idx)\"></slick-file-list-item>\r\n</div>\r\n\r\n<slick-photo-gallery #photoGalleryRef *ngIf=\"showPhotoGallery === true\" [files]=\"files\"></slick-photo-gallery>"
+                    template: "<div #containerRef id=\"slick-file-list_{{uuid}}\" class=\"slick-file-list\">\r\n\t<slick-file-list-item *ngFor=\"let file of files; let idx = index\" \r\n\t\t\t\t\t\t  [file]=\"file\" \r\n\t\t\t\t\t\t  [allowDelete]=\"allowDelete\" \r\n\t\t\t\t\t\t  [showPhotoGallery]=\"showPhotoGallery\" \r\n\t\t\t\t\t\t  [showCheckbox]=\"showCheckboxes\" \r\n\t\t\t\t\t\t  [thumbnailSize]=\"thumbnailSize\" \r\n\t\t\t\t\t\t  [confirmDelete]=\"confirmDelete\"\r\n\t\t\t\t\t\t  (checkChanged)=\"onCheckChanged($event, idx)\" \r\n\t\t\t\t\t\t  (fileClicked)=\"fileClicked($event, idx)\" \r\n\t\t\t\t\t\t  (fileChanged)=\"onFileChange($event, idx)\" \r\n\t\t\t\t\t\t  (fileDelete)=\"onFileDelete($event, idx)\"></slick-file-list-item>\r\n</div>\r\n\r\n<slick-photo-gallery #photoGalleryRef *ngIf=\"showPhotoGallery === true\" [files]=\"files\"></slick-photo-gallery>\r\n\r\n"
                 },] }
     ];
     /** @nocollapse */
@@ -4473,6 +4481,7 @@
         showPhotoGallery: [{ type: core.Input, args: ["showPhotoGallery",] }],
         showCheckboxes: [{ type: core.Input, args: ["showCheckboxes",] }],
         thumbnailSize: [{ type: core.Input, args: ["thumbnailSize",] }],
+        confirmDelete: [{ type: core.Input, args: ["confirmDelete",] }],
         filesEmitter: [{ type: core.Output, args: ["filesEmitter",] }],
         onFileDeleteEmitter: [{ type: core.Output, args: ["onFileDelete",] }],
         onFileCheckChanged: [{ type: core.Output, args: ["onFileCheckChanged",] }],
@@ -4490,6 +4499,7 @@
             this.allowDelete = true;
             this.showPhotoGallery = false;
             this.showCheckbox = false;
+            this.confirmDelete = true;
             this.fileChangeEmitter = new core.EventEmitter();
             this.fileDeleteEmitter = new core.EventEmitter();
             this.fileClicked = new core.EventEmitter();
@@ -4513,6 +4523,7 @@
                 this.showPhotoGallery = (changes.showPhotoGallery.currentValue.toString().toLowerCase() !== 'false');
             if (changes.showCheckbox && changes.showCheckbox.currentValue)
                 this.showCheckbox = (changes.showCheckbox.currentValue.toString().toLowerCase() !== 'false');
+            this.confirmDelete = (this.confirmDelete.toString() === 'true') ? true : false;
             if (this.file && this.file.name && !this.file.thumbnailBase64Image && !this.file.url) {
                 if (this.file.isChecked === null)
                     this.file.isChecked = false;
@@ -4542,8 +4553,27 @@
             if (this.fileClicked)
                 this.fileClicked.emit(this.file);
         };
-        SlickFileListItemComponent.prototype.deleteFile = function () {
-            this.fileDeleteEmitter.emit(this.file);
+        SlickFileListItemComponent.prototype.deleteFile = function (e) {
+            return __awaiter(this, void 0, void 0, function () {
+                var result;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            e.stopPropagation();
+                            e.preventDefault();
+                            if (!(this.confirmDelete === false)) return [3 /*break*/, 1];
+                            this.fileDeleteEmitter.emit(this.file);
+                            return [3 /*break*/, 3];
+                        case 1: return [4 /*yield*/, this.deleteConfirmRef.confirm()];
+                        case 2:
+                            result = _b.sent();
+                            if (result === exports.SlickConfirmDialogResults.Ok)
+                                this.fileDeleteEmitter.emit(this.file);
+                            _b.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
         };
         SlickFileListItemComponent.prototype.editTitle = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -4616,7 +4646,7 @@
     SlickFileListItemComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'slick-file-list-item',
-                    template: "<div class=\"slick-file-list-item\" id=\"slick-file-list-item_{{uuid}}\">\r\n\t<div class=\"slick-file-list-item_img card\" (click)=\"onClick()\" [ngStyle]=\"{ 'cursor': (showPhotoGallery === true) ? 'pointer' : 'default' }\" [style.minHeight.px]=\"itemSize + 2\" [style.minWidth.px]=\"itemSize\">\r\n\t\t<img *ngIf=\"file.thumbnailBase64Image\" [src]=\"file.thumbnailBase64Image\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<img *ngIf=\"!file.thumbnailBase64Image && file.base64Image\" [src]=\"file.base64Image\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<img *ngIf=\"!file.thumbnailBase64Image && !file.base64Image && file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<img *ngIf=\"!file.thumbnailBase64Image && !file.base64Image && !file.thumbnailUrl && file.url\" [src]=\"file.url\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<i *ngIf=\"allowDelete\" class=\"fas fa-times-circle bg-white text-danger\" (click)=\"deleteFile()\"></i>\r\n\t</div>\r\n\t<div class=\"slick-file-list-item_title\" *ngIf=\"fileDateFormatted\" [style.minWidth.px]=\"itemSize\" [style.maxWidth.px]=\"itemSize\">\r\n\t\t<div class=\"slick-file-list-item_date\" *ngIf=\"fileDateFormatted\" [style.minWidth.px]=\"itemSize\">{{fileDateFormatted}}</div>\r\n\t</div>\r\n\t<div class=\"slick-file-list-item_title\" [style.minWidth.px]=\"itemSize\" [style.maxWidth.px]=\"itemSize\">\r\n\t\t<div class=\"slick-file-list-item_display-title\" #titleDivRef style=\"cursor: pointer\" *ngIf=\"!isEditing\" (click)=\"editTitle()\">{{file.title}}</div>\r\n\t\t<div #editTitleDivRef class=\"slick-file-list-item_edit-title\" *ngIf=\"isEditing\"><input #editTitleInputRef type=\"text\" class=\"form-control\" [(ngModel)]=\"tempTitle\" (keydown)=\"onKeyDown($event)\" [style.width.px]=\"itemSize\" /></div>\r\n\t</div>\r\n\r\n\t<!-- We want the user to be able to click just a little outside of the checkbox and still have it check -->\r\n\t<div *ngIf=\"showCheckbox === true\" class=\"slick-file-checkbox\" (click)=\"onCheckboxClicked($event)\">\r\n\t\t<input type=\"checkbox\" [ngModel]=\"file.isChecked\" />\r\n\t</div>\r\n</div>\r\n"
+                    template: "<div class=\"slick-file-list-item\" id=\"slick-file-list-item_{{uuid}}\">\r\n\t<div class=\"slick-file-list-item_img card\" (click)=\"onClick()\" [ngStyle]=\"{ 'cursor': (showPhotoGallery === true) ? 'pointer' : 'default' }\" [style.minHeight.px]=\"itemSize + 2\" [style.minWidth.px]=\"itemSize\">\r\n\t\t<img *ngIf=\"file.thumbnailBase64Image\" [src]=\"file.thumbnailBase64Image\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<img *ngIf=\"!file.thumbnailBase64Image && file.base64Image\" [src]=\"file.base64Image\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<img *ngIf=\"!file.thumbnailBase64Image && !file.base64Image && file.thumbnailUrl\" [src]=\"file.thumbnailUrl\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<img *ngIf=\"!file.thumbnailBase64Image && !file.base64Image && !file.thumbnailUrl && file.url\" [src]=\"file.url\" [style.maxWidth.px]=\"itemImgSize\" [style.maxHeight.px]=\"itemImgSize\" />\r\n\t\t<i *ngIf=\"allowDelete\" class=\"fas fa-times-circle bg-white text-danger\" (click)=\"deleteFile($event)\"></i>\r\n\t</div>\r\n\t<div class=\"slick-file-list-item_title\" *ngIf=\"fileDateFormatted\" [style.minWidth.px]=\"itemSize\" [style.maxWidth.px]=\"itemSize\">\r\n\t\t<div class=\"slick-file-list-item_date\" *ngIf=\"fileDateFormatted\" [style.minWidth.px]=\"itemSize\">{{fileDateFormatted}}</div>\r\n\t</div>\r\n\t<div class=\"slick-file-list-item_title\" [style.minWidth.px]=\"itemSize\" [style.maxWidth.px]=\"itemSize\">\r\n\t\t<div class=\"slick-file-list-item_display-title\" #titleDivRef style=\"cursor: pointer\" *ngIf=\"!isEditing\" (click)=\"editTitle()\">{{file.title}}</div>\r\n\t\t<div #editTitleDivRef class=\"slick-file-list-item_edit-title\" *ngIf=\"isEditing\"><input #editTitleInputRef type=\"text\" class=\"form-control\" [(ngModel)]=\"tempTitle\" (keydown)=\"onKeyDown($event)\" [style.width.px]=\"itemSize\" /></div>\r\n\t</div>\r\n\r\n\t<!-- We want the user to be able to click just a little outside of the checkbox and still have it check -->\r\n\t<div *ngIf=\"showCheckbox === true\" class=\"slick-file-checkbox\" (click)=\"onCheckboxClicked($event)\">\r\n\t\t<input type=\"checkbox\" [ngModel]=\"file.isChecked\" />\r\n\t</div>\r\n</div>\r\n\r\n<slick-confirm-dialog #deleteConfirmRef>\r\n\t<h4 class=\"p-0 m-0 text-danger\">Are you sure you want to delete?</h4>\r\n</slick-confirm-dialog>"
                 },] }
     ];
     /** @nocollapse */
@@ -4627,13 +4657,15 @@
         showPhotoGallery: [{ type: core.Input, args: ["showPhotoGallery",] }],
         showCheckbox: [{ type: core.Input, args: ["showCheckbox",] }],
         thumbnailSize: [{ type: core.Input, args: ["thumbnailSize",] }],
+        confirmDelete: [{ type: core.Input, args: ["confirmDelete",] }],
         fileChangeEmitter: [{ type: core.Output, args: ["fileChange",] }],
         fileDeleteEmitter: [{ type: core.Output, args: ["fileDelete",] }],
         fileClicked: [{ type: core.Output, args: ["fileClicked",] }],
         checkChanged: [{ type: core.Output, args: ["checkChanged",] }],
         titleDivRef: [{ type: core.ViewChild, args: ["titleDivRef",] }],
         editTitleDivRef: [{ type: core.ViewChild, args: ["editTitleDivRef",] }],
-        editTitleInputRef: [{ type: core.ViewChild, args: ["editTitleInputRef",] }]
+        editTitleInputRef: [{ type: core.ViewChild, args: ["editTitleInputRef",] }],
+        deleteConfirmRef: [{ type: core.ViewChild, args: ["deleteConfirmRef",] }]
     };
 
     var SlickPhotoGalleryModel = /** @class */ (function () {
@@ -4772,7 +4804,7 @@
     }());
     SlickFileListModule.decorators = [
         { type: core.NgModule, args: [{
-                    imports: [common.CommonModule, forms.FormsModule, SlickPhotoGalleryModule],
+                    imports: [common.CommonModule, forms.FormsModule, SlickConfirmDialogModule, SlickPhotoGalleryModule],
                     declarations: [SlickFileListComponent, SlickFileListItemComponent],
                     exports: [common.CommonModule, forms.FormsModule, SlickFileListComponent]
                 },] }
@@ -5518,6 +5550,11 @@
         SlickGridColumnSortDirection[SlickGridColumnSortDirection["asc"] = 1] = "asc";
         SlickGridColumnSortDirection[SlickGridColumnSortDirection["desc"] = 2] = "desc";
     })(exports.SlickGridColumnSortDirection || (exports.SlickGridColumnSortDirection = {}));
+    var SlickGridColumnTitleOrientation;
+    (function (SlickGridColumnTitleOrientation) {
+        SlickGridColumnTitleOrientation[SlickGridColumnTitleOrientation["Horizontal"] = 0] = "Horizontal";
+        SlickGridColumnTitleOrientation[SlickGridColumnTitleOrientation["Vertical"] = 1] = "Vertical";
+    })(SlickGridColumnTitleOrientation || (SlickGridColumnTitleOrientation = {}));
     var SlickGridColumnModel = /** @class */ (function () {
         function SlickGridColumnModel() {
             this.sortable = true;
@@ -5534,6 +5571,9 @@
                 gridColumn.columnKey = params.columnKey;
             if (params.title)
                 gridColumn.title = params.title;
+            gridColumn.titleOrientation = params.titleOrientation || SlickGridColumnTitleOrientation.Horizontal;
+            if (params.titleHeight)
+                gridColumn.titleHeight = params.titleHeight;
             if (params.dataFieldName)
                 gridColumn.dataFieldName = params.dataFieldName;
             if (params.displayOrder !== null && params.displayOrder !== undefined)
@@ -5749,82 +5789,8 @@
         };
         SlickGridComponent.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var favoriteNames, suffix, gridColumnsJson, columns, displayOrder_1, favoritesJson, sortColumn;
-                var _this = this;
                 return __generator(this, function (_a) {
-                    if (this.gridOptions.gridKey) {
-                        if (this.gridOptions.favorites) {
-                            favoriteNames = this.gridOptions.favorites.map(function (f) { return f.favoriteName; });
-                            localStorage.setItem("GRID_" + this.gridOptions.gridKey + "_FAVORITES", JSON.stringify(favoriteNames));
-                            this.gridOptions.favorites.forEach(function (favorite) {
-                                // Make sure we haven't added a new column that needs to be saved
-                                _this.gridOptions.columns.forEach(function (c) {
-                                    var columnExists = favorite.columns.findIndex(function (x) { return x.dataFieldName === c.dataFieldName; });
-                                    if (columnExists < 0)
-                                        favorite.columns.push(c);
-                                });
-                                var gridColumnsJSON = JSON.stringify(favorite.columns);
-                                if (_this.gridOptions.gridKey) {
-                                    var suffix_1 = favorite.favoriteName === 'Default' ? '' : ('_' + favorite.favoriteName);
-                                    localStorage.setItem("GRID_" + _this.gridOptions.gridKey + "_COLUMNS" + suffix_1, gridColumnsJSON);
-                                }
-                            });
-                            if (favoriteNames.indexOf(this.selectedFavorite) < 0)
-                                this.selectedFavorite = "Default";
-                        }
-                        this.selectedFavorite = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_SELECTED_FAVORITE") || 'Default';
-                        // Check to make sure we don't have any duplicate column names
-                        this.gridOptions.columns.forEach(function (c1) {
-                            var dataFieldCount = (_this.gridOptions.columns.filter(function (x) { return x.dataFieldName === c1.dataFieldName; }) || []).length;
-                            if (dataFieldCount > 1)
-                                console.error("Grid " + _this.gridOptions.gridKey + " column " + c1.dataFieldName + " is defined " + dataFieldCount + " times");
-                        });
-                        suffix = this.selectedFavorite === 'Default' ? '' : ('_' + this.selectedFavorite);
-                        gridColumnsJson = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_COLUMNS" + suffix);
-                        if (gridColumnsJson) {
-                            columns = JSON.parse(gridColumnsJson);
-                            displayOrder_1 = 0;
-                            columns.forEach(function (c) {
-                                var column = _this.gridOptions.columns.find(function (gridColumn) { return gridColumn.dataFieldName === c.dataFieldName; });
-                                if (column) {
-                                    column.visible = c.visible;
-                                    column.displayOrder = displayOrder_1;
-                                    column.width = c.width;
-                                    column.flexible = c.flexible;
-                                    column.sortDirection = c.sortDirection;
-                                    column.isLocked = c.isLocked;
-                                    //column.filterType = c.filterType;
-                                    if (column.isLocked && column.filterType !== exports.SlickGridColumnFilterTypes.none) {
-                                        column.isFiltering = true;
-                                        if (column.filterType === exports.SlickGridColumnFilterTypes.text)
-                                            column.filterText = c.filterText;
-                                        else if (column.filterType === exports.SlickGridColumnFilterTypes.dropdown)
-                                            column.filterDropdownValue = c.filterDropdownValue;
-                                        if (!column.filterText && !column.filterDropdownValue) {
-                                            column.isFiltering = false;
-                                            column.isLocked = false;
-                                            column.filterText = null;
-                                            column.filterDropdownValue = null;
-                                        }
-                                    }
-                                }
-                                displayOrder_1++;
-                            });
-                        }
-                        this.recordsPerPageValue = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_RECORDS_PER_PAGE") || "Auto";
-                        favoritesJson = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_FAVORITES") || "[\"Default\"]";
-                        this.favorites = JSON.parse(favoritesJson).map(function (favorite) {
-                            return new DropDownModel(favorite);
-                        });
-                    }
-                    this.visibleColumns = this.gridOptions.columns.filter(function (c) { return c.visible === true; });
-                    this.visibleColumns = this.visibleColumns.sort(function (a, b) { return (a.displayOrder > b.displayOrder) ? 1 : (a.displayOrder < b.displayOrder) ? -1 : 0; });
-                    this.showSearchRow = this.visibleColumns.filter(function (c) { return c.filterType !== exports.SlickGridColumnFilterTypes.none; }).length > 0;
-                    sortColumn = this.visibleColumns.find(function (c) { return c.sortable === true && c.sortDirection > 0; });
-                    if (this.visibleColumns.length > 0 && sortColumn) {
-                        this.requestModel.sortColumn = sortColumn.dataFieldName;
-                        this.requestModel.sortDirection = sortColumn.sortDirection;
-                    }
+                    this.setGridOptions(this.gridOptions);
                     return [2 /*return*/];
                 });
             });
@@ -5919,6 +5885,7 @@
                                     this.striped = this.gridOptions.striped;
                                 if (this.gridOptions.hover !== null)
                                     this.hover = this.gridOptions.hover;
+                                this.setGridOptions(this.gridOptions);
                             }
                             if (!changes.data) return [3 /*break*/, 5];
                             // If we don't do this lock, the first change will have null data and crash.  The second request will have the actual data
@@ -6133,7 +6100,7 @@
         };
         SlickGridComponent.prototype.reload = function (requestModel) {
             return __awaiter(this, void 0, void 0, function () {
-                var sortColumn, responseModel, error_3;
+                var responseModel, error_3;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -6141,35 +6108,7 @@
                             return [4 /*yield*/, this.functionLockService.lock("GRID_" + this.uuid + "_RELOAD")];
                         case 1:
                             _a.sent();
-                            requestModel.columnSearchValues = [];
-                            this.gridOptions.columns.forEach(function (c) {
-                                if (c.visible) {
-                                    if (c.filterType === exports.SlickGridColumnFilterTypes.text && c.filterText) {
-                                        c.filterText = c.filterText;
-                                        requestModel.columnSearchValues.push({
-                                            columnName: c.dataFieldName,
-                                            searchValueId: null,
-                                            searchValueText: c.filterText
-                                        });
-                                    }
-                                    else if (c.filterType === exports.SlickGridColumnFilterTypes.dropdown && c.filterDropdownValue) {
-                                        c.filterDropdownValue = c.filterDropdownValue;
-                                        requestModel.columnSearchValues.push({
-                                            columnName: c.dataFieldName,
-                                            searchValueId: c.filterDropdownValue,
-                                            searchValueText: null
-                                        });
-                                    }
-                                }
-                            });
-                            requestModel.sortColumn = null;
-                            sortColumn = this.gridOptions.columns.find(function (x) { return x.sortDirection === exports.SlickGridColumnSortDirection.asc || x.sortDirection === exports.SlickGridColumnSortDirection.desc; });
-                            if (sortColumn) {
-                                requestModel.sortColumn = (sortColumn.sortDirection === 0) ? null : sortColumn.dataFieldName;
-                                requestModel.sortDirection = sortColumn.sortDirection;
-                            }
-                            if (requestModel.recordsPerPage <= 0)
-                                requestModel.recordsPerPage = 20;
+                            requestModel = this.getRequestModel(this.requestModel);
                             responseModel = null;
                             if (!requestModel.url) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.gridService.getDataFromServer(requestModel)];
@@ -6204,7 +6143,10 @@
             this.onRowClicked(rowData, rowNumber);
         };
         SlickGridComponent.prototype.getColumnHTML = function (rowData, dataFieldName) {
-            return SlickUtilsService.getDeepObject(rowData, dataFieldName) || '';
+            var columnHTML = SlickUtilsService.getDeepObject(rowData, dataFieldName);
+            if (columnHTML === null || columnHTML === undefined)
+                return '';
+            return columnHTML.toString();
         };
         SlickGridComponent.prototype.sortBy = function (sortColumn) {
             return __awaiter(this, void 0, void 0, function () {
@@ -6489,11 +6431,13 @@
                 var gridColumnsJson = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_COLUMNS" + suffix);
                 if (gridColumnsJson) {
                     var columns = JSON.parse(gridColumnsJson);
-                    var displayOrder_2 = 0;
+                    var displayOrder_1 = 0;
                     columns.forEach(function (c) {
                         var column = _this.gridOptions.columns.find(function (gridColumn) { return gridColumn.dataFieldName === c.dataFieldName; });
                         if (column) {
-                            c.displayOrder = displayOrder_2;
+                            c.displayOrder = displayOrder_1;
+                            c.titleOrientation = column.titleOrientation;
+                            c.titleHeight = column.titleHeight;
                             c.width = column.width;
                             c.filterDropdownValue = column.filterDropdownValue;
                             c.filterText = column.filterText;
@@ -6501,7 +6445,7 @@
                             c.isFiltering = column.isFiltering;
                             c.sortDirection = column.sortDirection;
                         }
-                        displayOrder_2++;
+                        displayOrder_1++;
                     });
                     columns = columns.sort(function (a, b) { return (a.displayOrder > b.displayOrder) ? 1 : (a.displayOrder < b.displayOrder) ? -1 : 0; });
                     gridColumnsJSON = JSON.stringify(columns);
@@ -6576,12 +6520,134 @@
                 });
             });
         };
+        SlickGridComponent.prototype.addColumn = function (column, idx) {
+            if (idx === void 0) { idx = null; }
+            if (idx === null)
+                this.gridOptions.columns.push(column);
+            else
+                this.gridOptions.columns.splice(idx, 0, column);
+            this.setGridOptions(this.gridOptions);
+        };
+        SlickGridComponent.prototype.getRequestModel = function (requestModel) {
+            if (requestModel === void 0) { requestModel = null; }
+            if (!requestModel)
+                requestModel = this.requestModel;
+            requestModel.columnSearchValues = [];
+            this.gridOptions.columns.forEach(function (c) {
+                if (c.visible) {
+                    if (c.filterType === exports.SlickGridColumnFilterTypes.text && c.filterText) {
+                        c.filterText = c.filterText;
+                        requestModel.columnSearchValues.push({
+                            columnName: c.dataFieldName,
+                            searchValueId: null,
+                            searchValueText: c.filterText
+                        });
+                    }
+                    else if (c.filterType === exports.SlickGridColumnFilterTypes.dropdown && c.filterDropdownValue) {
+                        c.filterDropdownValue = c.filterDropdownValue;
+                        requestModel.columnSearchValues.push({
+                            columnName: c.dataFieldName,
+                            searchValueId: c.filterDropdownValue,
+                            searchValueText: null
+                        });
+                    }
+                }
+            });
+            requestModel.sortColumn = null;
+            var sortColumn = this.gridOptions.columns.find(function (x) { return x.sortDirection === exports.SlickGridColumnSortDirection.asc || x.sortDirection === exports.SlickGridColumnSortDirection.desc; });
+            if (sortColumn) {
+                requestModel.sortColumn = (sortColumn.sortDirection === 0) ? null : sortColumn.dataFieldName;
+                requestModel.sortDirection = sortColumn.sortDirection;
+            }
+            if (requestModel.recordsPerPage <= 0)
+                requestModel.recordsPerPage = 20;
+            return this.requestModel;
+        };
+        SlickGridComponent.prototype.setGridOptions = function (gridOptions) {
+            var _this = this;
+            this.gridOptions = gridOptions;
+            if (this.gridOptions.gridKey) {
+                if (this.gridOptions.favorites) {
+                    var favoriteNames = this.gridOptions.favorites.map(function (f) { return f.favoriteName; });
+                    localStorage.setItem("GRID_" + this.gridOptions.gridKey + "_FAVORITES", JSON.stringify(favoriteNames));
+                    this.gridOptions.favorites.forEach(function (favorite) {
+                        // Make sure we haven't added a new column that needs to be saved
+                        _this.gridOptions.columns.forEach(function (c) {
+                            var columnExists = favorite.columns.findIndex(function (x) { return x.dataFieldName === c.dataFieldName; });
+                            if (columnExists < 0)
+                                favorite.columns.push(c);
+                        });
+                        var gridColumnsJSON = JSON.stringify(favorite.columns);
+                        if (_this.gridOptions.gridKey) {
+                            var suffix_1 = favorite.favoriteName === 'Default' ? '' : ('_' + favorite.favoriteName);
+                            localStorage.setItem("GRID_" + _this.gridOptions.gridKey + "_COLUMNS" + suffix_1, gridColumnsJSON);
+                        }
+                    });
+                    if (favoriteNames.indexOf(this.selectedFavorite) < 0)
+                        this.selectedFavorite = "Default";
+                }
+                this.selectedFavorite = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_SELECTED_FAVORITE") || 'Default';
+                // Check to make sure we don't have any duplicate column names
+                this.gridOptions.columns.forEach(function (c1) {
+                    var dataFieldCount = (_this.gridOptions.columns.filter(function (x) { return x.dataFieldName === c1.dataFieldName; }) || []).length;
+                    if (dataFieldCount > 1)
+                        console.error("Grid " + _this.gridOptions.gridKey + " column " + c1.dataFieldName + " is defined " + dataFieldCount + " times");
+                });
+                var suffix = this.selectedFavorite === 'Default' ? '' : ('_' + this.selectedFavorite);
+                var gridColumnsJson = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_COLUMNS" + suffix);
+                if (gridColumnsJson) {
+                    var columns = JSON.parse(gridColumnsJson);
+                    var displayOrder_2 = 0;
+                    columns.forEach(function (c) {
+                        var column = _this.gridOptions.columns.find(function (gridColumn) { return gridColumn.dataFieldName === c.dataFieldName; });
+                        if (column) {
+                            column.visible = c.visible;
+                            column.displayOrder = displayOrder_2;
+                            column.titleOrientation = c.titleOrientation;
+                            column.titleHeight = c.titleHeight;
+                            column.width = c.width;
+                            column.flexible = c.flexible;
+                            column.sortDirection = c.sortDirection;
+                            column.isLocked = c.isLocked;
+                            //column.filterType = c.filterType;
+                            if (column.isLocked && column.filterType !== exports.SlickGridColumnFilterTypes.none) {
+                                column.isFiltering = true;
+                                if (column.filterType === exports.SlickGridColumnFilterTypes.text)
+                                    column.filterText = c.filterText;
+                                else if (column.filterType === exports.SlickGridColumnFilterTypes.dropdown)
+                                    column.filterDropdownValue = c.filterDropdownValue;
+                                if (!column.filterText && !column.filterDropdownValue) {
+                                    column.isFiltering = false;
+                                    column.isLocked = false;
+                                    column.filterText = null;
+                                    column.filterDropdownValue = null;
+                                }
+                            }
+                        }
+                        displayOrder_2++;
+                    });
+                }
+                this.recordsPerPageValue = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_RECORDS_PER_PAGE") || "Auto";
+                var favoritesJson = localStorage.getItem("GRID_" + this.gridOptions.gridKey + "_FAVORITES") || "[\"Default\"]";
+                this.favorites = JSON.parse(favoritesJson).map(function (favorite) {
+                    return new DropDownModel(favorite);
+                });
+            }
+            this.visibleColumns = this.gridOptions.columns.filter(function (c) { return c.visible === true; });
+            this.visibleColumns = this.visibleColumns.sort(function (a, b) { return (a.displayOrder > b.displayOrder) ? 1 : (a.displayOrder < b.displayOrder) ? -1 : 0; });
+            this.showSearchRow = this.visibleColumns.filter(function (c) { return c.filterType !== exports.SlickGridColumnFilterTypes.none; }).length > 0;
+            var sortColumn = this.visibleColumns.find(function (c) { return c.sortable === true && c.sortDirection > 0; });
+            if (this.visibleColumns.length > 0 && sortColumn) {
+                this.requestModel.sortColumn = sortColumn.dataFieldName;
+                this.requestModel.sortDirection = sortColumn.sortDirection;
+            }
+        };
         return SlickGridComponent;
     }());
     SlickGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'slick-grid',
-                    template: "<div id=\"slick-grid_{{uuid}}\" class=\"slick-grid d-flex flex-column flex-fill\" style=\"position: absolute; left: 0; top: 0; right: 0; bottom: 0;\" #slickGrid>\r\n\t<div #tableContainer class=\"d-flex flex-fill\" style=\"overflow: auto\">\r\n\r\n\t\t<div>\r\n\t\t\t<table #tableRef class=\"table table-sm\" [class.table-bordered]=\"bordered\" [class.table-borderless]=\"!bordered\" [class.table-striped]=\"striped\" [class.table-hover]=\"hover\" [style.opacity]=\"gridOpacity\" style=\"margin: 0; padding: 0;\" (keydown)=\"tableKeydown($event)\" tabindex=\"0\">\r\n\t\t\t\t<thead>\r\n\t\t\t\t\t<tr #tableHeaderRow (mousemove)=\"onColResizeMousemove($event)\" [ngClass]=\"{ 'resizing': isResizing === true }\">\r\n\t\t\t\t\t\t<td *ngFor=\"let column of visibleColumns; let idx = index\" [style.width]=\"column.width\" [style.maxWidth]=\"column.width\">\r\n\t\t\t\t\t\t\t<div *ngIf=\"idx > 0 && idx < visibleColumns.length\" class=\"resize_column_left\" [class.table-bordered]=\"bordered\" (mousedown)=\"onColResizeMousedown($event, idx - 1)\" (dblclick)=\"onColResizeDoubleclick($event, idx - 1)\"></div>\r\n\t\t\t\t\t\t\t<span class=\"sortIcon\" *ngIf=\"column.sortable === true && column.sortDirection > 0\"><i class=\"far\" [ngClass]=\"{'fa-caret-up': column.sortDirection === 1, 'fa-caret-down': column.sortDirection === 2}\"></i>&nbsp;</span>\r\n\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" *ngIf=\"column.sortable === true\" (click)=\"sortBy(column)\" draggable=\"false\">{{column.title}}</a>\r\n\t\t\t\t\t\t\t<div *ngIf=\"column.sortable === false\">{{column.title}}</div>\r\n\t\t\t\t\t\t\t<div class=\"resize_column_right\" (mousedown)=\"onColResizeMousedown($event, idx)\" (dblclick)=\"onColResizeDoubleclick($event, idx)\"></div>\r\n\t\t\t\t\t\t</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr #tableHeaderSearchRow *ngIf=\"showSearchRow === true\">\r\n\t\t\t\t\t\t<td *ngFor=\"let column of visibleColumns\">\r\n\t\t\t\t\t\t\t<div class=\"slick-grid_search-column\">\r\n\t\t\t\t\t\t\t\t<i *ngIf=\"column.isFiltering\" class=\"fas fa-times-circle bg-white text-danger mr-1\" (click)=\"resetFilter(column)\"></i>\r\n\t\t\t\t\t\t\t\t<i *ngIf=\"column.isFiltering && column.isLocked\" class=\"far fa-lock mr-1\" (click)=\"toggleLock(column)\"></i>\r\n\t\t\t\t\t\t\t\t<i *ngIf=\"column.isFiltering && !column.isLocked\" class=\"far fa-lock-open mr-1\" (click)=\"toggleLock(column)\"></i>\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"column.filterType === 1\" class=\"slick-grid_text-search\">\r\n\t\t\t\t\t\t\t\t\t<input autocomplete=\"nope\" type=\"text\" class=\"form-control\" [(ngModel)]=\"column.filterText\" name=\"searchText\" placeholder=\"Search...\" (keydown)=\"onSearch(column)\" />\r\n\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"column.filterType === 2\" class=\"input-group slick-grid_drop-down-search\">\r\n\t\t\t\t\t\t\t\t\t<slick-drop-down [items]=\"column.filterDropdownValues\" [(ngModel)]=\"column.filterDropdownValue\" listWidth=\"auto\" placeholder=\"Search...\" (onSelect)=\"onSearchSelect($event, column)\"></slick-drop-down>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</thead>\r\n\r\n\t\t\t\t<tbody>\r\n\t\t\t\t\t<tr *ngIf=\"loaded && visibleData.length === 0\"><td [colSpan]=\"visibleColumns.length\">No Data</td></tr>\r\n\t\t\t\t\t<tr *ngFor=\"let rowData of visibleData; let idx = index\" #tableBodyRows (click)=\"onRowClicked(rowData, idx)\" (dblclick)=\"onRowDoubleClicked(rowData, idx)\" (contextmenu)=\"onRowContextMenuClicked($event, rowData, idx)\" [class.table-success]=\"selectedIndex === idx\">\r\n\t\t\t\t\t\t<td *ngFor=\"let column of visibleColumns\">\r\n\t\t\t\t\t\t\t<div *ngIf=\"!column.columnKey\" class=\"slick-grid_column-content\" [style.width]=\"column.width\" [style.maxWidth]=\"column.width\" [innerHTML]=\"getColumnHTML(rowData, column.dataFieldName) | slickGridSanitizeHtml\"></div>\r\n\t\t\t\t\t\t\t<div *ngIf=\"column.columnKey\" class=\"slick-grid_column-content\" [style.width]=\"column.width\" [style.maxWidth]=\"column.width\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRefs[column.columnKey], context: { $implicit: rowData }\">\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</tbody>\r\n\t\t\t</table>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\r\n\t<div class=\"slick-grid-footer mt-2 d-flex\">\r\n\t\t<div>\r\n\t\t\t<button type=\"button\" (click)=\"openColumnSelectDialog()\" class=\"btn btn-outline-primary\"><i class=\"far fa-columns\"></i></button>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"favorites?.length > 1\">\r\n\t\t\t<button #favoriteSelectRef type=\"button\" class=\"btn btn-outline-primary ml-1\"><i class=\"far fa-star\"></i> {{this.selectedFavorite}}</button>\r\n\t\t\t<slick-popover [element]=\"favoriteSelectRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 250px; cursor: default\">\r\n\t\t\t\t\t<tbody>\r\n\t\t\t\t\t\t<tr *ngFor=\"let favorite of favorites\" (click)=\"setFavorite(favorite.text)\">\r\n\t\t\t\t\t\t\t<td><i *ngIf=\"favorite.text === selectedFavorite\" class=\"far fa-star mr-1\"></i>{{favorite.text}}</td>\r\n\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t</tbody>\r\n\t\t\t\t</table>\r\n\t\t\t</slick-popover>\r\n\t\t</div>\r\n\t\t<div>\r\n\t\t\t<slick-paging [(pageNumber)]=\"currentPage\" [totalRecords]=\"totalRecords\" [recordsPerPage]=\"recordsPerPage\" (onPageChange)=\"onPageChange($event)\"></slick-paging>\r\n\t\t</div>\r\n\t\t<div class=\"ml-1\">\r\n\t\t\t<button #recordsPerPageRef type=\"button\" class=\"btn btn-outline-primary\">{{recordsPerPageValue}}&nbsp;&nbsp;<i style=\"font-size: 12px\" class=\"far fa-chevron-down\"></i></button>\r\n\r\n\t\t\t<slick-popover [element]=\"recordsPerPageRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 150px;\">\r\n\t\t\t\t\t<tbody>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('Auto')\"><td>Auto</td></tr>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('25')\"><td>25</td></tr>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('50')\"><td>50</td></tr>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('100')\"><td>100</td></tr>\r\n\t\t\t\t\t</tbody>\r\n\t\t\t\t</table>\r\n\t\t\t</slick-popover>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<slick-dialog #columnSelectDialogRef header=\"Select Columns\">\r\n\t<div style=\"text-align: center; width: 475px;\" class=\"mx-5\">\r\n\t\t<div class=\"d-flex\">\r\n\t\t\t<div class=\"flex-fill\">\r\n\t\t\t\t<slick-drop-down [items]=\"favorites\"\r\n\t\t\t\t\t\t\t\t [ngModel]=\"selectedFavorite\"\r\n\t\t\t\t\t\t\t\t (onSelect)=\"loadFavorite($event)\"></slick-drop-down>\r\n\t\t\t</div>\r\n\t\t\t<div><button class=\"btn btn-outline-primary ml-1\" (click)=\"addNewFavorite()\"><i class=\"far fa-plus\"></i></button></div>\r\n\t\t</div>\r\n\t\t<div class=\"d-flex flex-column mt-1\" slick-drop-list (onSlickDropListReorder)=\"onColumnReorder($event)\">\r\n\t\t\t<div *ngFor=\"let column of columnSelectDialogColumns\" class=\"d-flex\" slick-drop-list-item>\r\n\t\t\t\t<div style=\"width: 20px\"><input type=\"checkbox\" style=\"position: relative; top: 2px;\" [(ngModel)]=\"column.visible\" /></div>\r\n\t\t\t\t<div class=\"py-0 flex-fill\" style=\"text-align: left; cursor: ns-resize\" slick-drop-list-grab>{{column.title}}</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<slick-dialog-footer>\r\n\t\t<div style=\"margin-top: 10px;\" class=\"col-12 text-center mb-2 mt-1\">\r\n\t\t\t<button type=\"button\" (click)=\"onSaveColumns()\" class=\"btn btn-outline-primary mr-1\"><i class=\"far fa-save\"></i>&nbsp;Save</button>&nbsp;\r\n\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\" (click)=\"onCancelColumns()\">Cancel</button>\r\n\t\t</div>\r\n\t</slick-dialog-footer>\r\n</slick-dialog>\r\n\r\n\r\n<slick-confirm-dialog #addNewFavoriteDialogRef width=\"300\">\r\n\t<label>Enter new favorite name</label>\r\n\t<input type=\"text\" class=\"form-control mx-3\" style=\"width: 250px\" [(ngModel)]=\"newFavoriteText\" />\r\n</slick-confirm-dialog>",
+                    template: "<div id=\"slick-grid_{{uuid}}\" class=\"slick-grid d-flex flex-column flex-fill\" style=\"position: absolute; left: 0; top: 0; right: 0; bottom: 0;\" #slickGrid>\r\n\t<div #tableContainer class=\"d-flex flex-fill\" style=\"overflow: auto\">\r\n\r\n\t\t<div>\r\n\t\t\t<table #tableRef class=\"table table-sm\" [class.table-bordered]=\"bordered\" [class.table-borderless]=\"!bordered\" [class.table-striped]=\"striped\" [class.table-hover]=\"hover\" [style.opacity]=\"gridOpacity\" style=\"margin: 0; padding: 0;\" (keydown)=\"tableKeydown($event)\" tabindex=\"0\">\r\n\t\t\t\t<thead>\r\n\t\t\t\t\t<tr #tableHeaderRow (mousemove)=\"onColResizeMousemove($event)\" [ngClass]=\"{ 'resizing': isResizing === true }\">\r\n\t\t\t\t\t\t<td *ngFor=\"let column of visibleColumns; let idx = index\" [style.width]=\"column.width\" [style.maxWidth]=\"column.width\" [style.height]=\"column.titleHeight\">\r\n\t\t\t\t\t\t\t<div [ngClass]=\"{ 'slick-grid_title-vertical' : column.titleOrientation === 1 }\">\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"idx > 0 && idx < visibleColumns.length\" class=\"resize_column_left\" [class.table-bordered]=\"bordered\" (mousedown)=\"onColResizeMousedown($event, idx - 1)\" (dblclick)=\"onColResizeDoubleclick($event, idx - 1)\"></div>\r\n\t\t\t\t\t\t\t\t<span class=\"sortIcon\" *ngIf=\"column.sortable === true && column.sortDirection > 0\"><i class=\"far\" [ngClass]=\"{'fa-caret-up': column.sortDirection === 1, 'fa-caret-down': column.sortDirection === 2}\"></i>&nbsp;</span>\r\n\t\t\t\t\t\t\t\t<a href=\"javascript:void(0)\" *ngIf=\"column.sortable === true\" (click)=\"sortBy(column)\" draggable=\"false\" title=\"{{column.title}}\">{{column.title}}</a>\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"column.sortable === false\" title=\"{{column.title}}\">{{column.title}}</div>\r\n\t\t\t\t\t\t\t\t<div class=\"resize_column_right\" (mousedown)=\"onColResizeMousedown($event, idx)\" (dblclick)=\"onColResizeDoubleclick($event, idx)\"></div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t\t<tr #tableHeaderSearchRow *ngIf=\"showSearchRow === true\">\r\n\t\t\t\t\t\t<td *ngFor=\"let column of visibleColumns\">\r\n\t\t\t\t\t\t\t<div class=\"slick-grid_search-column\">\r\n\t\t\t\t\t\t\t\t<i *ngIf=\"column.isFiltering\" class=\"fas fa-times-circle bg-white text-danger mr-1\" (click)=\"resetFilter(column)\"></i>\r\n\t\t\t\t\t\t\t\t<i *ngIf=\"column.isFiltering && column.isLocked\" class=\"far fa-lock mr-1\" (click)=\"toggleLock(column)\"></i>\r\n\t\t\t\t\t\t\t\t<i *ngIf=\"column.isFiltering && !column.isLocked\" class=\"far fa-lock-open mr-1\" (click)=\"toggleLock(column)\"></i>\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"column.filterType === 1\" class=\"slick-grid_text-search\">\r\n\t\t\t\t\t\t\t\t\t<input autocomplete=\"nope\" type=\"text\" class=\"form-control\" [(ngModel)]=\"column.filterText\" name=\"searchText\" placeholder=\"Search...\" (keydown)=\"onSearch(column)\" />\r\n\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"column.filterType === 2\" class=\"input-group slick-grid_drop-down-search\">\r\n\t\t\t\t\t\t\t\t\t<slick-drop-down [items]=\"column.filterDropdownValues\" [(ngModel)]=\"column.filterDropdownValue\" listWidth=\"auto\" placeholder=\"Search...\" (onSelect)=\"onSearchSelect($event, column)\"></slick-drop-down>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</thead>\r\n\r\n\t\t\t\t<tbody>\r\n\t\t\t\t\t<tr *ngIf=\"loaded && visibleData.length === 0\"><td [colSpan]=\"visibleColumns.length\">No Data</td></tr>\r\n\t\t\t\t\t<tr *ngFor=\"let rowData of visibleData; let idx = index\" #tableBodyRows (click)=\"onRowClicked(rowData, idx)\" (dblclick)=\"onRowDoubleClicked(rowData, idx)\" (contextmenu)=\"onRowContextMenuClicked($event, rowData, idx)\" [class.table-success]=\"selectedIndex === idx\">\r\n\t\t\t\t\t\t<td *ngFor=\"let column of visibleColumns\">\r\n\t\t\t\t\t\t\t<div *ngIf=\"!column.columnKey\" class=\"slick-grid_column-content\" [style.width]=\"column.width\" [style.maxWidth]=\"column.width\" [innerHTML]=\"getColumnHTML(rowData, column.dataFieldName) | slickGridSanitizeHtml\"></div>\r\n\t\t\t\t\t\t\t<div *ngIf=\"column.columnKey\" class=\"slick-grid_column-content\" [style.width]=\"column.width\" [style.maxWidth]=\"column.width\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRefs[column.columnKey], context: { $implicit: rowData }\">\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</td>\r\n\t\t\t\t\t</tr>\r\n\t\t\t\t</tbody>\r\n\t\t\t</table>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\r\n\t<div class=\"slick-grid-footer mt-2 d-flex\">\r\n\t\t<div>\r\n\t\t\t<button type=\"button\" (click)=\"openColumnSelectDialog()\" class=\"btn btn-outline-primary\"><i class=\"far fa-columns\"></i></button>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"favorites?.length > 1\">\r\n\t\t\t<button #favoriteSelectRef type=\"button\" class=\"btn btn-outline-primary ml-1\"><i class=\"far fa-star\"></i> {{this.selectedFavorite}}</button>\r\n\t\t\t<slick-popover [element]=\"favoriteSelectRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 250px; cursor: default\">\r\n\t\t\t\t\t<tbody>\r\n\t\t\t\t\t\t<tr *ngFor=\"let favorite of favorites\" (click)=\"setFavorite(favorite.text)\">\r\n\t\t\t\t\t\t\t<td><i *ngIf=\"favorite.text === selectedFavorite\" class=\"far fa-star mr-1\"></i>{{favorite.text}}</td>\r\n\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t</tbody>\r\n\t\t\t\t</table>\r\n\t\t\t</slick-popover>\r\n\t\t</div>\r\n\t\t<div>\r\n\t\t\t<slick-paging [(pageNumber)]=\"currentPage\" [totalRecords]=\"totalRecords\" [recordsPerPage]=\"recordsPerPage\" (onPageChange)=\"onPageChange($event)\"></slick-paging>\r\n\t\t</div>\r\n\t\t<div class=\"ml-1\">\r\n\t\t\t<button #recordsPerPageRef type=\"button\" class=\"btn btn-outline-primary\">{{recordsPerPageValue}}&nbsp;&nbsp;<i style=\"font-size: 12px\" class=\"far fa-chevron-down\"></i></button>\r\n\r\n\t\t\t<slick-popover [element]=\"recordsPerPageRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 150px;\">\r\n\t\t\t\t\t<tbody>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('Auto')\"><td>Auto</td></tr>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('25')\"><td>25</td></tr>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('50')\"><td>50</td></tr>\r\n\t\t\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('100')\"><td>100</td></tr>\r\n\t\t\t\t\t</tbody>\r\n\t\t\t\t</table>\r\n\t\t\t</slick-popover>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<slick-dialog #columnSelectDialogRef header=\"Select Columns\">\r\n\t<div style=\"text-align: center; width: 475px;\" class=\"mx-5\">\r\n\t\t<div class=\"d-flex\">\r\n\t\t\t<div class=\"flex-fill\">\r\n\t\t\t\t<slick-drop-down [items]=\"favorites\"\r\n\t\t\t\t\t\t\t\t [ngModel]=\"selectedFavorite\"\r\n\t\t\t\t\t\t\t\t (onSelect)=\"loadFavorite($event)\"></slick-drop-down>\r\n\t\t\t</div>\r\n\t\t\t<div><button class=\"btn btn-outline-primary ml-1\" (click)=\"addNewFavorite()\"><i class=\"far fa-plus\"></i></button></div>\r\n\t\t</div>\r\n\t\t<div class=\"d-flex flex-column mt-1\" slick-drop-list (onSlickDropListReorder)=\"onColumnReorder($event)\">\r\n\t\t\t<div *ngFor=\"let column of columnSelectDialogColumns\" class=\"d-flex\" slick-drop-list-item>\r\n\t\t\t\t<div style=\"width: 20px\"><input type=\"checkbox\" style=\"position: relative; top: 2px;\" [(ngModel)]=\"column.visible\" /></div>\r\n\t\t\t\t<div class=\"py-0 flex-fill\" style=\"text-align: left; cursor: ns-resize\" slick-drop-list-grab>{{column.title}}</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<slick-dialog-footer>\r\n\t\t<div style=\"margin-top: 10px;\" class=\"col-12 text-center mb-2 mt-1\">\r\n\t\t\t<button type=\"button\" (click)=\"onSaveColumns()\" class=\"btn btn-outline-primary mr-1\"><i class=\"far fa-save\"></i>&nbsp;Save</button>&nbsp;\r\n\t\t\t<button type=\"button\" class=\"btn btn-outline-danger\" (click)=\"onCancelColumns()\">Cancel</button>\r\n\t\t</div>\r\n\t</slick-dialog-footer>\r\n</slick-dialog>\r\n\r\n\r\n<slick-confirm-dialog #addNewFavoriteDialogRef width=\"300\">\r\n\t<label>Enter new favorite name</label>\r\n\t<input type=\"text\" class=\"form-control mx-3\" style=\"width: 250px\" [(ngModel)]=\"newFavoriteText\" />\r\n</slick-confirm-dialog>",
                     providers: [SlickGridService]
                 },] }
     ];