slick-components 17.0.84 → 17.0.86
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.86"; }
|
|
27
27
|
constructor() { }
|
|
28
28
|
static init(initParams) {
|
|
29
29
|
console.info(`Slick Components Version ${SlickInitService.version}`);
|
|
@@ -5312,6 +5312,8 @@ class SlickGridColumnModel {
|
|
|
5312
5312
|
let gridColumn = new SlickGridColumnModel();
|
|
5313
5313
|
if (params.columnKey)
|
|
5314
5314
|
gridColumn.columnKey = params.columnKey;
|
|
5315
|
+
if (params.customField)
|
|
5316
|
+
gridColumn.customField = params.customField;
|
|
5315
5317
|
if (params.title)
|
|
5316
5318
|
gridColumn.title = params.title;
|
|
5317
5319
|
gridColumn.titleOrientation = params.titleOrientation || SlickGridColumnTitleOrientation.Horizontal;
|
|
@@ -6693,11 +6695,11 @@ class SlickGridComponent {
|
|
|
6693
6695
|
}
|
|
6694
6696
|
}
|
|
6695
6697
|
/** @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 }); }
|
|
6696
|
-
/** @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", onFavoriteChanged: "onFavoriteChanged", 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> </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-primary]=\"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)=\"favoriteChanged(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-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> 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", "disableAutoClose", "disableAutoCloseClass"], outputs: ["onClose"] }, { 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" }] }); }
|
|
6698
|
+
/** @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", onFavoriteChanged: "onFavoriteChanged", 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> </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-primary]=\"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, customData: column.customData }\">\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)=\"favoriteChanged(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-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> 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", "disableAutoClose", "disableAutoCloseClass"], outputs: ["onClose"] }, { 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" }] }); }
|
|
6697
6699
|
}
|
|
6698
6700
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SlickGridComponent, decorators: [{
|
|
6699
6701
|
type: Component,
|
|
6700
|
-
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=\"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-primary]=\"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)=\"favoriteChanged(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-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> 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>" }]
|
|
6702
|
+
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=\"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-primary]=\"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, customData: column.customData }\">\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)=\"favoriteChanged(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-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> 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>" }]
|
|
6701
6703
|
}], ctorParameters: () => [{ type: SlickGridService }, { type: SlickFunctionLockService }, { type: i0.ChangeDetectorRef }], propDecorators: { flexColumn: [{
|
|
6702
6704
|
type: HostBinding,
|
|
6703
6705
|
args: ['class']
|