slick-components 17.0.45 → 17.0.46

package/fesm2022/slick-components.mjs

@@ -23,7 +23,7 @@ class SlickInitParams {
     }
 }
 class SlickInitService {
-    static { this.version = "17.0.45"; }
+    static { this.version = "17.0.46"; }
     constructor() { }
     static init(initParams) {
         console.info(`Slick Components Version ${SlickInitService.version}`);
@@ -5218,6 +5218,7 @@ class SlickGridColumnModel {
             gridColumn.flexible = params.flexible;
         if (params.html)
             gridColumn.html = params.html;
+        gridColumn.refreshOnFilterChange = params.refreshOnFilterChange === false ? false : true;
         if (params.default === null || params.default === undefined)
             gridColumn.default = true;
         else
@@ -5784,6 +5785,7 @@ class SlickGridComponent {
         this.onRowDoubleClick = new EventEmitter();
         this.onRowContextMenu = new EventEmitter();
         this.onFavoritesModified = new EventEmitter();
+        this.onFilterValueChanged = new EventEmitter();
         this.fnOnMouseUp = (e) => this.onMouseUp(e);
         this.selectedIndex = null;
         this.gridOpacity = 0;
@@ -6093,6 +6095,10 @@ class SlickGridComponent {
         else {
             column.isLocked = false;
         }
+        if (this.onFilterValueChanged)
+            this.onFilterValueChanged.emit(column);
+        if (column.refreshOnFilterChange === false)
+            return;
         this.currentPage = 1;
         this.requestModel.page = 1;
         await this.reload(this.requestModel);
@@ -6121,6 +6127,10 @@ class SlickGridComponent {
                     searchValueText: column.filterText
                 });
             }
+            if (this.onFilterValueChanged)
+                this.onFilterValueChanged.emit(column);
+            if (column.refreshOnFilterChange === false)
+                return;
             this.currentPage = 1;
             this.requestModel.page = 1;
             await this.reload(this.requestModel);
@@ -6139,7 +6149,11 @@ class SlickGridComponent {
         column.lastSearchText = null;
         column.filterDropdownValue = null;
         this.requestModel.columnSearchValues = this.requestModel.columnSearchValues.filter(x => x.columnName !== column.dataFieldName);
+        if (this.onFilterValueChanged)
+            this.onFilterValueChanged.emit(column);
         this.saveColumnsToLocalStorage();
+        if (column.refreshOnFilterChange === false)
+            return;
         this.currentPage = 1;
         this.requestModel.page = 1;
         await this.reload(this.requestModel);
@@ -6329,6 +6343,7 @@ class SlickGridComponent {
                         c.isLocked = column.isLocked;
                         c.isFiltering = column.isFiltering;
                         c.sortDirection = column.sortDirection;
+                        c.refreshOnFilterChange = column.refreshOnFilterChange;
                     }
                     displayOrder++;
                 });
@@ -6540,7 +6555,7 @@ class SlickGridComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickGridComponent, deps: [{ token: SlickGridService }, { token: SlickFunctionLockService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SlickGridComponent, selector: "slick-grid", inputs: { gridOptions: "gridOptions", bordered: "bordered", striped: "striped", hover: "hover", showingAllRecords: "showingAllRecords", data: "data" }, outputs: { onRowSelected: "onRowSelected", onRowDoubleClick: "onRowDoubleClick", onRowContextMenu: "onRowContextMenu", onFavoritesModified: "onFavoritesModified" }, host: { listeners: { "window:resize": "onResize($event,$event.target)" }, properties: { "class": "this.flexColumn" } }, providers: [SlickGridService], queries: [{ propertyName: "slickGridColumnTemplates", predicate: SlickGridColumnTemplateDirective }], viewQueries: [{ propertyName: "slickGridRef", first: true, predicate: ["slickGrid"], descendants: true, static: true }, { propertyName: "tableContainerRef", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }, { propertyName: "tableHeaderRowRef", first: true, predicate: ["tableHeaderRow"], descendants: true }, { propertyName: "tableHeaderSearchRowRef", first: true, predicate: ["tableHeaderSearchRow"], descendants: true }, { propertyName: "testRowRef", first: true, predicate: ["testRow"], descendants: true }, { propertyName: "tableBodyRowsRef", first: true, predicate: ["tableBodyRows"], descendants: true }, { propertyName: "columnSelectDialogRef", first: true, predicate: ["columnSelectDialogRef"], descendants: true }, { propertyName: "addNewFavoriteDialogRef", first: true, predicate: ["addNewFavoriteDialogRef"], descendants: true }, { propertyName: "renameFavoriteDialogRef", first: true, predicate: ["renameFavoriteDialogRef"], descendants: true }, { propertyName: "deleteFavoriteDialogRef", first: true, predicate: ["deleteFavoriteDialogRef"], descendants: true }], usesOnChanges: true, ngImport: i0, 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, 'slick-grid_title-align-left': column.titleAlignment === 0, 'slick-grid_title-align-center': column.titleAlignment === 1, 'slick-grid_title-align-right': column.titleAlignment === 2 }\">\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 me-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 me-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 me-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=\"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\" cssClass=\"slick-grid_filter-drop-down\" 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  <button type=\"button\" (click)=\"openColumnSelectDialog()\" class=\"btn btn-outline-primary\" style=\"border-radius: 100%; height: 2.2rem; width: 2.2rem; padding: 0;\"><i class=\"fal fa-columns\"></i></button>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"favorites?.length > 1\">\r\n\t\t  <button #favoriteSelectRef type=\"button\" class=\"btn btn-outline-primary ms-1\"><i class=\"far fa-star\"></i> {{this.selectedFavorite}}</button>\r\n\t\t  <slick-popover [element]=\"favoriteSelectRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 250px; cursor: default\">\r\n\t\t\t  <tbody>\r\n\t\t\t\t<tr *ngFor=\"let favorite of favorites\" (click)=\"setFavorite(favorite.text)\">\r\n\t\t\t\t  <td><i *ngIf=\"favorite.text === selectedFavorite\" class=\"far fa-star me-1\"></i>{{favorite.text}}</td>\r\n\t\t\t\t</tr>\r\n\t\t\t  </tbody>\r\n\t\t\t</table>\r\n\t\t  </slick-popover>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"showingAllRecords == false\">\r\n\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=\"ms-auto\">\r\n\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\t\t  <slick-popover [element]=\"recordsPerPageRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 150px;\">\r\n\t\t\t  <tbody>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('Auto')\"><td>Auto</td></tr>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('25')\"><td>25</td></tr>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('50')\"><td>50</td></tr>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('100')\"><td>100</td></tr>\r\n\t\t\t  </tbody>\r\n\t\t\t</table>\r\n\t\t  </slick-popover>\r\n\t\t</div>\r\n\t  </div>\r\n\t  \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>\r\n\t\t\t\t<button class=\"btn btn-outline-primary ms-1\" (click)=\"addNewFavorite()\"><i class=\"far fa-plus\"></i></button>\r\n\t\t\t\t<button *ngIf=\"selectedFavorite !== 'Default'\" class=\"btn btn-outline-primary ms-1\" (click)=\"renameFavorite()\"><i class=\"far fa-pencil\"></i></button>\r\n\t\t\t\t<button *ngIf=\"selectedFavorite !== 'Default'\" class=\"btn btn-outline-danger ms-1\" (click)=\"deleteFavorite()\"><i class=\"far fa-trash\"></i></button>\r\n\t\t\t</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 me-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>\r\n\r\n<slick-confirm-dialog #renameFavoriteDialogRef width=\"300\">\r\n\t<label>Rename favorite</label>\r\n\t<input type=\"text\" class=\"form-control mx-3\" style=\"width: 250px\" [(ngModel)]=\"renameFavoriteText\" />\r\n</slick-confirm-dialog>\r\n\r\n<slick-confirm-dialog #deleteFavoriteDialogRef width=\"300\">\r\n\t<label>Are you sure you want to delete this favorite?</label>\r\n</slick-confirm-dialog>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlickConfirmDialogComponent, selector: "slick-confirm-dialog", inputs: ["width", "okButtonText", "cancelButtonText", "showOkButton", "showCancelButton"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SlickPopoverComponent, selector: "slick-popover", inputs: ["element", "position", "hoverDelay", "outDelay", "alignment", "topOffsetPx", "leftOffsetPx", "whiteBackground", "showByClick", "showArrow", "disableAutoClose", "disableAutoCloseClass"] }, { kind: "component", type: SlickDialogComponent, selector: "slick-dialog", inputs: ["draggable", "resizable", "minimizable", "header", "showHeader", "noPadding", "top", "width", "height", "dynamicHeight", "dynamicWidth", "maxHeight", "cssClass", "key", "showOverlay", "disableScrollbar"], outputs: ["onClose"] }, { kind: "component", type: SlickDialogFooterComponent, selector: "slick-dialog-footer" }, { kind: "component", type: SlickDropDownComponent, selector: "slick-drop-down", inputs: ["placeholder", "items", "idFieldName", "textFieldName", "compact", "disabled", "allowEmpty", "getUrl", "width", "listWidth", "height", "showLoadingMessage", "showDebug", "tabindex", "validationIndicator", "validationIndicatorType", "attachTo", "searchType", "icon", "isMobile", "cssClass"], outputs: ["onExpand", "onSelect", "onChange"] }, { kind: "directive", type: SlickDropListDirective, selector: "[slick-drop-list]", outputs: ["onSlickDropListReorder", "onSlickDropListEnter", "onSlickDropListLeave"] }, { kind: "directive", type: SlickDropListItemDirective, selector: "[slick-drop-list-item]" }, { kind: "directive", type: SlickDropListGrabDirective, selector: "[slick-drop-list-grab]" }, { kind: "component", type: SlickPagingComponent, selector: "slick-paging", inputs: ["pageNumber", "totalRecords", "recordsPerPage"], outputs: ["pageNumberChange", "onPageChange"] }, { kind: "pipe", type: SlickGridSanitizeHtmlPipe, name: "slickGridSanitizeHtml" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SlickGridComponent, selector: "slick-grid", inputs: { gridOptions: "gridOptions", bordered: "bordered", striped: "striped", hover: "hover", showingAllRecords: "showingAllRecords", data: "data" }, outputs: { onRowSelected: "onRowSelected", onRowDoubleClick: "onRowDoubleClick", onRowContextMenu: "onRowContextMenu", onFavoritesModified: "onFavoritesModified", onFilterValueChanged: "onFilterValueChanged" }, host: { listeners: { "window:resize": "onResize($event,$event.target)" }, properties: { "class": "this.flexColumn" } }, providers: [SlickGridService], queries: [{ propertyName: "slickGridColumnTemplates", predicate: SlickGridColumnTemplateDirective }], viewQueries: [{ propertyName: "slickGridRef", first: true, predicate: ["slickGrid"], descendants: true, static: true }, { propertyName: "tableContainerRef", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }, { propertyName: "tableHeaderRowRef", first: true, predicate: ["tableHeaderRow"], descendants: true }, { propertyName: "tableHeaderSearchRowRef", first: true, predicate: ["tableHeaderSearchRow"], descendants: true }, { propertyName: "testRowRef", first: true, predicate: ["testRow"], descendants: true }, { propertyName: "tableBodyRowsRef", first: true, predicate: ["tableBodyRows"], descendants: true }, { propertyName: "columnSelectDialogRef", first: true, predicate: ["columnSelectDialogRef"], descendants: true }, { propertyName: "addNewFavoriteDialogRef", first: true, predicate: ["addNewFavoriteDialogRef"], descendants: true }, { propertyName: "renameFavoriteDialogRef", first: true, predicate: ["renameFavoriteDialogRef"], descendants: true }, { propertyName: "deleteFavoriteDialogRef", first: true, predicate: ["deleteFavoriteDialogRef"], descendants: true }], usesOnChanges: true, ngImport: i0, 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, 'slick-grid_title-align-left': column.titleAlignment === 0, 'slick-grid_title-align-center': column.titleAlignment === 1, 'slick-grid_title-align-right': column.titleAlignment === 2 }\">\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 me-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 me-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 me-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=\"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\" cssClass=\"slick-grid_filter-drop-down\" 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  <button type=\"button\" (click)=\"openColumnSelectDialog()\" class=\"btn btn-outline-primary\" style=\"border-radius: 100%; height: 2.2rem; width: 2.2rem; padding: 0;\"><i class=\"fal fa-columns\"></i></button>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"favorites?.length > 1\">\r\n\t\t  <button #favoriteSelectRef type=\"button\" class=\"btn btn-outline-primary ms-1\"><i class=\"far fa-star\"></i> {{this.selectedFavorite}}</button>\r\n\t\t  <slick-popover [element]=\"favoriteSelectRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 250px; cursor: default\">\r\n\t\t\t  <tbody>\r\n\t\t\t\t<tr *ngFor=\"let favorite of favorites\" (click)=\"setFavorite(favorite.text)\">\r\n\t\t\t\t  <td><i *ngIf=\"favorite.text === selectedFavorite\" class=\"far fa-star me-1\"></i>{{favorite.text}}</td>\r\n\t\t\t\t</tr>\r\n\t\t\t  </tbody>\r\n\t\t\t</table>\r\n\t\t  </slick-popover>\r\n\t\t</div>\r\n\t\t<div *ngIf=\"showingAllRecords == false\">\r\n\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=\"ms-auto\">\r\n\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\t\t  <slick-popover [element]=\"recordsPerPageRef\" position=\"top\" showArrow=\"false\" [topOffsetPx]=\"0\" [leftOffsetPx]=\"0\" [showByClick]=\"true\">\r\n\t\t\t<table class=\"table-borderless table-sm table-hover\" style=\"min-width: 150px;\">\r\n\t\t\t  <tbody>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('Auto')\"><td>Auto</td></tr>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('25')\"><td>25</td></tr>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('50')\"><td>50</td></tr>\r\n\t\t\t\t<tr (click)=\"onRecordsPerPageSelected('100')\"><td>100</td></tr>\r\n\t\t\t  </tbody>\r\n\t\t\t</table>\r\n\t\t  </slick-popover>\r\n\t\t</div>\r\n\t  </div>\r\n\t  \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>\r\n\t\t\t\t<button class=\"btn btn-outline-primary ms-1\" (click)=\"addNewFavorite()\"><i class=\"far fa-plus\"></i></button>\r\n\t\t\t\t<button *ngIf=\"selectedFavorite !== 'Default'\" class=\"btn btn-outline-primary ms-1\" (click)=\"renameFavorite()\"><i class=\"far fa-pencil\"></i></button>\r\n\t\t\t\t<button *ngIf=\"selectedFavorite !== 'Default'\" class=\"btn btn-outline-danger ms-1\" (click)=\"deleteFavorite()\"><i class=\"far fa-trash\"></i></button>\r\n\t\t\t</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 me-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>\r\n\r\n<slick-confirm-dialog #renameFavoriteDialogRef width=\"300\">\r\n\t<label>Rename favorite</label>\r\n\t<input type=\"text\" class=\"form-control mx-3\" style=\"width: 250px\" [(ngModel)]=\"renameFavoriteText\" />\r\n</slick-confirm-dialog>\r\n\r\n<slick-confirm-dialog #deleteFavoriteDialogRef width=\"300\">\r\n\t<label>Are you sure you want to delete this favorite?</label>\r\n</slick-confirm-dialog>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlickConfirmDialogComponent, selector: "slick-confirm-dialog", inputs: ["width", "okButtonText", "cancelButtonText", "showOkButton", "showCancelButton"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SlickPopoverComponent, selector: "slick-popover", inputs: ["element", "position", "hoverDelay", "outDelay", "alignment", "topOffsetPx", "leftOffsetPx", "whiteBackground", "showByClick", "showArrow", "disableAutoClose", "disableAutoCloseClass"] }, { kind: "component", type: SlickDialogComponent, selector: "slick-dialog", inputs: ["draggable", "resizable", "minimizable", "header", "showHeader", "noPadding", "top", "width", "height", "dynamicHeight", "dynamicWidth", "maxHeight", "cssClass", "key", "showOverlay", "disableScrollbar"], outputs: ["onClose"] }, { kind: "component", type: SlickDialogFooterComponent, selector: "slick-dialog-footer" }, { kind: "component", type: SlickDropDownComponent, selector: "slick-drop-down", inputs: ["placeholder", "items", "idFieldName", "textFieldName", "compact", "disabled", "allowEmpty", "getUrl", "width", "listWidth", "height", "showLoadingMessage", "showDebug", "tabindex", "validationIndicator", "validationIndicatorType", "attachTo", "searchType", "icon", "isMobile", "cssClass"], outputs: ["onExpand", "onSelect", "onChange"] }, { kind: "directive", type: SlickDropListDirective, selector: "[slick-drop-list]", outputs: ["onSlickDropListReorder", "onSlickDropListEnter", "onSlickDropListLeave"] }, { kind: "directive", type: SlickDropListItemDirective, selector: "[slick-drop-list-item]" }, { kind: "directive", type: SlickDropListGrabDirective, selector: "[slick-drop-list-grab]" }, { kind: "component", type: SlickPagingComponent, selector: "slick-paging", inputs: ["pageNumber", "totalRecords", "recordsPerPage"], outputs: ["pageNumberChange", "onPageChange"] }, { kind: "pipe", type: SlickGridSanitizeHtmlPipe, name: "slickGridSanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickGridComponent, decorators: [{
             type: Component,
@@ -6568,6 +6583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Output
             }], onFavoritesModified: [{
                 type: Output
+            }], onFilterValueChanged: [{
+                type: Output
             }], slickGridRef: [{
                 type: ViewChild,
                 args: ["slickGrid", { static: true }]