slick-components 17.0.24 → 17.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,7 +23,7 @@ class SlickInitParams {
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
class SlickInitService {
|
|
26
|
-
static { this.version = "17.0.
|
|
26
|
+
static { this.version = "17.0.25"; }
|
|
27
27
|
constructor() { }
|
|
28
28
|
static init(initParams) {
|
|
29
29
|
console.info(`Slick Components Version ${SlickInitService.version}`);
|
|
@@ -6072,6 +6072,36 @@ class SlickGridComponent {
|
|
|
6072
6072
|
this.saveDialogColumnsToLocalStorage();
|
|
6073
6073
|
}
|
|
6074
6074
|
}
|
|
6075
|
+
async renameFavorite() {
|
|
6076
|
+
this.renameFavoriteText = this.selectedFavorite;
|
|
6077
|
+
const confirmResult = await this.renameFavoriteDialogRef.confirm();
|
|
6078
|
+
if (confirmResult === SlickConfirmDialogResults.Ok && this.renameFavoriteText) {
|
|
6079
|
+
// delete the previous selection from localstorage and we will readd it
|
|
6080
|
+
this.deleteDialogColumnsFromLocalStorage();
|
|
6081
|
+
let favoriteToUpdate = this.favorites.find(x => x.text === this.selectedFavorite);
|
|
6082
|
+
favoriteToUpdate.text = this.renameFavoriteText;
|
|
6083
|
+
this.selectedFavorite = this.renameFavoriteText;
|
|
6084
|
+
localStorage.setItem("GRID_" + this.gridOptions.gridKey + "_SELECTED_FAVORITE", this.selectedFavorite);
|
|
6085
|
+
const favoritesJson = JSON.stringify(this.favorites.map(x => x.text));
|
|
6086
|
+
localStorage.setItem("GRID_" + this.gridOptions.gridKey + "_FAVORITES", favoritesJson);
|
|
6087
|
+
// Save the new one to localstorage
|
|
6088
|
+
this.saveDialogColumnsToLocalStorage();
|
|
6089
|
+
}
|
|
6090
|
+
}
|
|
6091
|
+
async deleteFavorite() {
|
|
6092
|
+
const confirmResult = await this.deleteFavoriteDialogRef.confirm();
|
|
6093
|
+
if (confirmResult === SlickConfirmDialogResults.Ok) {
|
|
6094
|
+
// delete the selection from localstorage
|
|
6095
|
+
await this.deleteDialogColumnsFromLocalStorage();
|
|
6096
|
+
this.favorites = this.favorites.filter(x => x.text !== this.selectedFavorite);
|
|
6097
|
+
this.selectedFavorite = "Default";
|
|
6098
|
+
localStorage.setItem("GRID_" + this.gridOptions.gridKey + "_SELECTED_FAVORITE", this.selectedFavorite);
|
|
6099
|
+
const favoritesJson = JSON.stringify(this.favorites.map(x => x.text));
|
|
6100
|
+
localStorage.setItem("GRID_" + this.gridOptions.gridKey + "_FAVORITES", favoritesJson);
|
|
6101
|
+
// Save the new one to localstorage
|
|
6102
|
+
this.saveDialogColumnsToLocalStorage();
|
|
6103
|
+
}
|
|
6104
|
+
}
|
|
6075
6105
|
loadFavorite(favorite) {
|
|
6076
6106
|
this.saveDialogColumnsToLocalStorage();
|
|
6077
6107
|
this.selectedFavorite = favorite.text;
|
|
@@ -6136,6 +6166,12 @@ class SlickGridComponent {
|
|
|
6136
6166
|
localStorage.setItem(`GRID_${this.gridOptions.gridKey}_COLUMNS${suffix}`, dialogColumnsJSON);
|
|
6137
6167
|
}
|
|
6138
6168
|
}
|
|
6169
|
+
deleteDialogColumnsFromLocalStorage() {
|
|
6170
|
+
if (this.gridOptions.gridKey) {
|
|
6171
|
+
const suffix = this.selectedFavorite === 'Default' ? '' : ('_' + this.selectedFavorite);
|
|
6172
|
+
localStorage.removeItem(`GRID_${this.gridOptions.gridKey}_COLUMNS${suffix}`);
|
|
6173
|
+
}
|
|
6174
|
+
}
|
|
6139
6175
|
saveColumnsToLocalStorage() {
|
|
6140
6176
|
let gridColumnsJSON = JSON.stringify(this.gridOptions.columns);
|
|
6141
6177
|
if (this.gridOptions.gridKey) {
|
|
@@ -6341,11 +6377,11 @@ class SlickGridComponent {
|
|
|
6341
6377
|
}
|
|
6342
6378
|
}
|
|
6343
6379
|
/** @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 }); }
|
|
6344
|
-
/** @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 }], 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> </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=\"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\" 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}} <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><button class=\"btn btn-outline-primary ms-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 me-1\"><i class=\"far fa-save\"></i> Save</button> \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>", 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"] }, { kind: "component", type: SlickDialogComponent, selector: "slick-dialog", inputs: ["draggable", "resizable", "minimizable", "header", "showHeader", "noPadding", "top", "width", "height", "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" }] }); }
|
|
6380
|
+
/** @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> </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=\"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\" 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}} <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-primary 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> Save</button> \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"] }, { kind: "component", type: SlickDialogComponent, selector: "slick-dialog", inputs: ["draggable", "resizable", "minimizable", "header", "showHeader", "noPadding", "top", "width", "height", "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" }] }); }
|
|
6345
6381
|
}
|
|
6346
6382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickGridComponent, decorators: [{
|
|
6347
6383
|
type: Component,
|
|
6348
|
-
args: [{ selector: 'slick-grid', providers: [SlickGridService], 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> </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=\"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\" 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}} <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
|
|
6384
|
+
args: [{ selector: 'slick-grid', providers: [SlickGridService], 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> </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=\"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\" 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}} <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-primary 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> Save</button> \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>" }]
|
|
6349
6385
|
}], ctorParameters: () => [{ type: SlickGridService }, { type: SlickFunctionLockService }, { type: i0.ChangeDetectorRef }], propDecorators: { flexColumn: [{
|
|
6350
6386
|
type: HostBinding,
|
|
6351
6387
|
args: ['class']
|
|
@@ -6396,6 +6432,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
6396
6432
|
}], addNewFavoriteDialogRef: [{
|
|
6397
6433
|
type: ViewChild,
|
|
6398
6434
|
args: ["addNewFavoriteDialogRef"]
|
|
6435
|
+
}], renameFavoriteDialogRef: [{
|
|
6436
|
+
type: ViewChild,
|
|
6437
|
+
args: ["renameFavoriteDialogRef"]
|
|
6438
|
+
}], deleteFavoriteDialogRef: [{
|
|
6439
|
+
type: ViewChild,
|
|
6440
|
+
args: ["deleteFavoriteDialogRef"]
|
|
6399
6441
|
}], slickGridColumnTemplates: [{
|
|
6400
6442
|
type: ContentChildren,
|
|
6401
6443
|
args: [SlickGridColumnTemplateDirective]
|