ms-data-grid 0.0.107 → 0.0.109
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.
|
@@ -1110,7 +1110,7 @@ class DataGridComponent {
|
|
|
1110
1110
|
// The columns Store Here
|
|
1111
1111
|
this.columns = [];
|
|
1112
1112
|
// Row Height;
|
|
1113
|
-
this.rowHeight =
|
|
1113
|
+
this.rowHeight = 60;
|
|
1114
1114
|
// Header Row Height;
|
|
1115
1115
|
this.headerRowHeight = 40;
|
|
1116
1116
|
// Show Vertical Borders;
|
|
@@ -1136,7 +1136,7 @@ class DataGridComponent {
|
|
|
1136
1136
|
// Side Menu Background color;
|
|
1137
1137
|
this.sidemenuBackgroundColor = '#FFFFFF';
|
|
1138
1138
|
// Body text color;
|
|
1139
|
-
this.bodyTextColor = '
|
|
1139
|
+
this.bodyTextColor = 'rgba(27, 31, 34, 1)';
|
|
1140
1140
|
// Header text color;
|
|
1141
1141
|
this.headerTextColor = '#6A6B6D';
|
|
1142
1142
|
// Header text color;
|
|
@@ -1155,7 +1155,7 @@ class DataGridComponent {
|
|
|
1155
1155
|
this.dropdownsBackgroundColor = '#FFFFFF';
|
|
1156
1156
|
this.footerRowBackgroundColor = '#FFFFFF';
|
|
1157
1157
|
// Footer row Height;
|
|
1158
|
-
this.footerRowHeight =
|
|
1158
|
+
this.footerRowHeight = 50;
|
|
1159
1159
|
// Footer row Height;
|
|
1160
1160
|
this.topGroupedBadgesBackgroundColor = '';
|
|
1161
1161
|
// Show Row wise grouping;
|
|
@@ -1167,7 +1167,7 @@ class DataGridComponent {
|
|
|
1167
1167
|
// Show SideColumn;
|
|
1168
1168
|
this.showSideMenu = false;
|
|
1169
1169
|
// Footer Padding
|
|
1170
|
-
this.footerPadding =
|
|
1170
|
+
this.footerPadding = 7;
|
|
1171
1171
|
// Footer Padding
|
|
1172
1172
|
this.topFilterRowHeight = 50;
|
|
1173
1173
|
// Show Rows shading
|
|
@@ -1242,6 +1242,7 @@ class DataGridComponent {
|
|
|
1242
1242
|
this.consumerFont = null;
|
|
1243
1243
|
this.defaultConfig = null;
|
|
1244
1244
|
this.resetAllFilters = { resetAll: false };
|
|
1245
|
+
this.pageSizeOptions = [10, 25, 50, 75, 100, 150, 200, 250, 300, 500];
|
|
1245
1246
|
this.columnThreedotsMunuConfig = {
|
|
1246
1247
|
showPinleft: true,
|
|
1247
1248
|
showPinright: true,
|
|
@@ -1718,7 +1719,6 @@ class DataGridComponent {
|
|
|
1718
1719
|
};
|
|
1719
1720
|
this.isActiveFilterOpen = false;
|
|
1720
1721
|
this.activeSubButton = '';
|
|
1721
|
-
this.pageSizeOptions = [10, 25, 50, 75, 100, 150, 200, 250, 300, 500];
|
|
1722
1722
|
this.searchTextForFilterDropDown = '';
|
|
1723
1723
|
this.isFilterOpen = false;
|
|
1724
1724
|
this.showFilters = this.showSideMenu ? false : false;
|
|
@@ -1947,6 +1947,7 @@ class DataGridComponent {
|
|
|
1947
1947
|
}
|
|
1948
1948
|
async ngOnChanges(changes) {
|
|
1949
1949
|
if (changes['columns']) {
|
|
1950
|
+
console.log('check columns width', this.columns);
|
|
1950
1951
|
await this.setColumnsColumnDropdownValus();
|
|
1951
1952
|
}
|
|
1952
1953
|
if (changes['buttons']) {
|
|
@@ -1993,11 +1994,11 @@ class DataGridComponent {
|
|
|
1993
1994
|
this.originalDataSet = structuredClone(this.dataSet);
|
|
1994
1995
|
this.expandedCells.clear();
|
|
1995
1996
|
this.updateFlattenedData();
|
|
1996
|
-
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
1997
|
+
// this.ngZone.onStable.pipe(take(1)).subscribe(() => {
|
|
1998
|
+
// });
|
|
1999
|
+
this.computeViewportRows();
|
|
2000
|
+
this.updateVisibleRows(0);
|
|
2001
|
+
this.cdr.detectChanges();
|
|
2001
2002
|
if (this.centerPinnedHeader?.nativeElement) {
|
|
2002
2003
|
void this.centerPinnedHeader.nativeElement.offsetWidth;
|
|
2003
2004
|
// this.dataSetLoading = true;
|
|
@@ -2080,13 +2081,13 @@ class DataGridComponent {
|
|
|
2080
2081
|
this.cdr.detectChanges();
|
|
2081
2082
|
}
|
|
2082
2083
|
else if (this.defaultConfig) {
|
|
2083
|
-
this.rowShadingEnabled = this.defaultConfig.rowShadingEnabled;
|
|
2084
|
-
this.showVerticalBorder = this.defaultConfig.showVerticalBorder;
|
|
2085
|
-
this.fontFaimly = this.defaultConfig.fontFaimly;
|
|
2086
|
-
this.headerTextFontsSize = this.defaultConfig.headerTextFontsSize;
|
|
2087
|
-
this.selectedTableLayout = this.defaultConfig.selectedTableLayout;
|
|
2088
|
-
this.bodyTextFontsSize = this.defaultConfig.bodyTextFontsSize;
|
|
2089
|
-
this.globalSearchText = this.defaultConfig.globalSearch;
|
|
2084
|
+
this.rowShadingEnabled = this.defaultConfig.rowShadingEnabled || false;
|
|
2085
|
+
this.showVerticalBorder = this.defaultConfig.showVerticalBorder || false;
|
|
2086
|
+
this.fontFaimly = this.defaultConfig.fontFaimly || 'Inter';
|
|
2087
|
+
this.headerTextFontsSize = this.defaultConfig.headerTextFontsSize || 13;
|
|
2088
|
+
this.selectedTableLayout = this.defaultConfig.selectedTableLayout || 'medium';
|
|
2089
|
+
this.bodyTextFontsSize = this.defaultConfig.bodyTextFontsSize || 14;
|
|
2090
|
+
this.globalSearchText = this.defaultConfig.globalSearch || '';
|
|
2090
2091
|
}
|
|
2091
2092
|
else {
|
|
2092
2093
|
this.rowShadingEnabled = false;
|
|
@@ -2518,36 +2519,49 @@ class DataGridComponent {
|
|
|
2518
2519
|
// //////////////////////////////////////////////////////////////////////////////////////
|
|
2519
2520
|
// //////////////////////////////////////////////////////////////////////////////////////
|
|
2520
2521
|
sortAsc(col) {
|
|
2521
|
-
if (!col.is_sortable)
|
|
2522
|
+
if (!col || !col.is_sortable)
|
|
2523
|
+
return;
|
|
2524
|
+
if (!this.sortingConfig)
|
|
2522
2525
|
return;
|
|
2523
|
-
this.sortingConfig
|
|
2524
|
-
this.sortingConfig
|
|
2526
|
+
this.sortingConfig.order_by = 'asc';
|
|
2527
|
+
this.sortingConfig.field = col?.field ?? '';
|
|
2525
2528
|
col.order_by = 'asc';
|
|
2526
2529
|
const event = {
|
|
2527
2530
|
order: 'asc',
|
|
2528
2531
|
column: col
|
|
2529
2532
|
};
|
|
2530
|
-
this.cdr
|
|
2531
|
-
this.sortingOrderOptions
|
|
2533
|
+
this.cdr?.detectChanges();
|
|
2534
|
+
this.sortingOrderOptions?.emit(event);
|
|
2532
2535
|
}
|
|
2533
2536
|
sortDesc(col) {
|
|
2534
|
-
if (!col.is_sortable)
|
|
2537
|
+
if (!col || !col.is_sortable)
|
|
2538
|
+
return;
|
|
2539
|
+
if (!this.sortingConfig)
|
|
2535
2540
|
return;
|
|
2536
|
-
this.sortingConfig
|
|
2537
|
-
this.sortingConfig
|
|
2541
|
+
this.sortingConfig.order_by = 'desc';
|
|
2542
|
+
this.sortingConfig.field = col?.field ?? '';
|
|
2538
2543
|
col.order_by = 'desc';
|
|
2539
2544
|
const event = {
|
|
2540
2545
|
order: 'desc',
|
|
2541
2546
|
column: col
|
|
2542
2547
|
};
|
|
2543
|
-
this.cdr
|
|
2544
|
-
this.sortingOrderOptions
|
|
2548
|
+
this.cdr?.detectChanges();
|
|
2549
|
+
this.sortingOrderOptions?.emit(event);
|
|
2545
2550
|
}
|
|
2546
2551
|
resetSort(col) {
|
|
2547
|
-
this.sortingConfig = {
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2552
|
+
this.sortingConfig = {
|
|
2553
|
+
field: '',
|
|
2554
|
+
order_by: ''
|
|
2555
|
+
};
|
|
2556
|
+
if (col) {
|
|
2557
|
+
col.order_by = null;
|
|
2558
|
+
}
|
|
2559
|
+
const event = {
|
|
2560
|
+
field: null,
|
|
2561
|
+
order_by: null
|
|
2562
|
+
};
|
|
2563
|
+
this.cdr?.detectChanges();
|
|
2564
|
+
this.sortingOrderOptions?.emit(event);
|
|
2551
2565
|
}
|
|
2552
2566
|
async updateColumnPinInSourceByField(column, pinned, isNestedTable = false, columns) {
|
|
2553
2567
|
if (isNestedTable) {
|
|
@@ -3109,7 +3123,7 @@ class DataGridComponent {
|
|
|
3109
3123
|
return;
|
|
3110
3124
|
visibleColumns.forEach((col) => {
|
|
3111
3125
|
const ratio = col.width / totalOldWidth;
|
|
3112
|
-
const newWidth = Math.max(Math.floor(containerWidth * ratio),
|
|
3126
|
+
const newWidth = Math.max(Math.floor(containerWidth * ratio), 180);
|
|
3113
3127
|
col.width = newWidth;
|
|
3114
3128
|
this.updateColumnWidthInSourceByField(col.field, newWidth);
|
|
3115
3129
|
});
|
|
@@ -3725,7 +3739,7 @@ class DataGridComponent {
|
|
|
3725
3739
|
this.rowHeight = 50;
|
|
3726
3740
|
this.headerRowHeight = 40;
|
|
3727
3741
|
this.bodyTextFontsSize = 10;
|
|
3728
|
-
this.headerTextFontsSize =
|
|
3742
|
+
this.headerTextFontsSize = 13;
|
|
3729
3743
|
}
|
|
3730
3744
|
else if (layoutType === 'medium') {
|
|
3731
3745
|
this.rowHeight = 60;
|
|
@@ -3737,7 +3751,7 @@ class DataGridComponent {
|
|
|
3737
3751
|
this.rowHeight = 72;
|
|
3738
3752
|
this.headerRowHeight = 40;
|
|
3739
3753
|
this.bodyTextFontsSize = 16;
|
|
3740
|
-
this.headerTextFontsSize =
|
|
3754
|
+
this.headerTextFontsSize = 13;
|
|
3741
3755
|
}
|
|
3742
3756
|
}
|
|
3743
3757
|
get startIndexData() {
|
|
@@ -4063,7 +4077,7 @@ class DataGridComponent {
|
|
|
4063
4077
|
this.rowShadingEnabled = false;
|
|
4064
4078
|
this.showVerticalBorder = false;
|
|
4065
4079
|
this.fontFaimly = 'Inter';
|
|
4066
|
-
this.headerTextFontsSize =
|
|
4080
|
+
this.headerTextFontsSize = 13;
|
|
4067
4081
|
this.selectedTableLayout = 'mediumd';
|
|
4068
4082
|
this.bodyTextFontsSize = 14;
|
|
4069
4083
|
this.globalSearchText = '';
|
|
@@ -4440,7 +4454,7 @@ class DataGridComponent {
|
|
|
4440
4454
|
let config = {
|
|
4441
4455
|
fontFaimly: this.fontFaimly,
|
|
4442
4456
|
bodyTextFontsSize: +(this.bodyTextFontsSize || 14),
|
|
4443
|
-
headerTextFontsSize: +(this.headerTextFontsSize ||
|
|
4457
|
+
headerTextFontsSize: +(this.headerTextFontsSize || 13),
|
|
4444
4458
|
oddRowsBackgroundColor: this.rowShadingEnabled ? this.oddRowsBackgroundColor : undefined,
|
|
4445
4459
|
showVerticalBorder: this.showVerticalBorder,
|
|
4446
4460
|
selectedTableLayout: this.selectedTableLayout,
|
|
@@ -4827,7 +4841,7 @@ class DataGridComponent {
|
|
|
4827
4841
|
const config = {
|
|
4828
4842
|
headerBgColor: this.headerBackgroundColor,
|
|
4829
4843
|
headerTextColor: this.headerTextColor,
|
|
4830
|
-
bodyTextColor: '#
|
|
4844
|
+
bodyTextColor: '#1B1F22',
|
|
4831
4845
|
fontFamily: this.fontFaimly,
|
|
4832
4846
|
fontWeight: 'normal',
|
|
4833
4847
|
zoomScale: 125,
|
|
@@ -6119,7 +6133,7 @@ class DataGridComponent {
|
|
|
6119
6133
|
this.activeFilterType = type;
|
|
6120
6134
|
}
|
|
6121
6135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataGridComponent, deps: [{ token: SplitColumnsService }, { token: i0.ChangeDetectorRef }, { token: CommonService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: CopyServiceService }, { token: i0.Renderer2 }, { token: i4.DomSanitizer }, { token: ExportService }, { token: i6.DatePipe }, { token: FormatCurrencyPipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataGridComponent, selector: "data-grid", inputs: { rowAnimation: "rowAnimation", paginationConfig: "paginationConfig", dataSet: "dataSet", columns: "columns", rowHeight: "rowHeight", headerRowHeight: "headerRowHeight", showVerticalBorder: "showVerticalBorder", evenRowsBackgroundColor: "evenRowsBackgroundColor", oddRowsBackgroundColor: "oddRowsBackgroundColor", headerBackgroundColor: "headerBackgroundColor", checkboxesBackgroundColor: "checkboxesBackgroundColor", showColumnsGrouping: "showColumnsGrouping", rowHoverColor: "rowHoverColor", leftPinnedBackgroundColor: "leftPinnedBackgroundColor", bodyBackgroundColor: "bodyBackgroundColor", rightPinnedBackgroundColor: "rightPinnedBackgroundColor", sidemenuBackgroundColor: "sidemenuBackgroundColor", bodyTextColor: "bodyTextColor", headerTextColor: "headerTextColor", checkboxesColor: "checkboxesColor", headerTextFontsSize: "headerTextFontsSize", bodyTextFontsSize: "bodyTextFontsSize", headerFontWeight: "headerFontWeight", bodyFontWeight: "bodyFontWeight", checkedRowBackgroundColor: "checkedRowBackgroundColor", dropdownsBackgroundColor: "dropdownsBackgroundColor", footerRowBackgroundColor: "footerRowBackgroundColor", footerRowHeight: "footerRowHeight", topGroupedBadgesBackgroundColor: "topGroupedBadgesBackgroundColor", showRowsGrouping: "showRowsGrouping", showFilterRow: "showFilterRow", fontFaimly: "fontFaimly", showSideMenu: "showSideMenu", footerPadding: "footerPadding", topFilterRowHeight: "topFilterRowHeight", rowShadingEnabled: "rowShadingEnabled", showSerialNumber: "showSerialNumber", singleSpaAssetsPath: "singleSpaAssetsPath", filtersConfig: "filtersConfig", loading: "loading", verticalScrollbarWidth: "verticalScrollbarWidth", horizintalScrollbarWidth: "horizintalScrollbarWidth", showCellDetailsBox: "showCellDetailsBox", dateFormat: "dateFormat", tableSearch: "tableSearch", actions: "actions", config: "config", showTaskbar: "showTaskbar", tableName: "tableName", listingType: "listingType", checkboxState: "checkboxState", taskbarActions: "taskbarActions", sortingConfig: "sortingConfig", tableFilterViewId: "tableFilterViewId", selectedTableLayout: "selectedTableLayout", closeDropdown: "closeDropdown", globalSearchText: "globalSearchText", nestedTablerowFontsize: "nestedTablerowFontsize", nestedTableHeaderRowHeight: "nestedTableHeaderRowHeight", nestedTablerowHeight: "nestedTablerowHeight", gridType: "gridType", currencySymbol: "currencySymbol", currencyFormat: "currencyFormat", leftPinnedBoxshadow: "leftPinnedBoxshadow", rightPinnedBoxshadow: "rightPinnedBoxshadow", selectedRowsBackgroundColor: "selectedRowsBackgroundColor", nestedTableHeaderBackgroundColor: "nestedTableHeaderBackgroundColor", nestedTableRowBackgroundColor: "nestedTableRowBackgroundColor", tableView: "tableView", buttons: "buttons", keepMultipleExpandedDetails: "keepMultipleExpandedDetails", showTotalAmountRow: "showTotalAmountRow", enableGlobalSearch: "enableGlobalSearch", tableType: "tableType", enableExport: "enableExport", showFullScreenButton: "showFullScreenButton", enableCut: "enableCut", tabs: "tabs", showCheckboxes: "showCheckboxes", consumerFont: "consumerFont", defaultConfig: "defaultConfig", resetAllFilters: "resetAllFilters", columnThreedotsMunuConfig: "columnThreedotsMunuConfig", pageSizeOptions: "pageSizeOptions" }, outputs: { changeLayout: "changeLayout", customCellEvent: "customCellEvent", filterOptions: "filterOptions", genericEvent: "genericEvent", tablePresetConfig: "tablePresetConfig", sortingOrderOptions: "sortingOrderOptions", createUpdateConfigListing: "createUpdateConfigListing" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape($event)", "window:resize": "onResize($event)", "document:keydown": "onKeyDown($event)", "document:paste": "onPaste($event)" } }, viewQueries: [{ propertyName: "globalSearchInput", first: true, predicate: ["globalSearchInput"], descendants: true }, { propertyName: "cellText", first: true, predicate: ["cellText"], descendants: true }, { propertyName: "nestedHeader", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "dataGridContainer", first: true, predicate: ["dataGridContainer"], descendants: true }, { propertyName: "taskManagementContainer", first: true, predicate: ["taskManagementContainer"], descendants: true }, { propertyName: "nestedTableContainer", first: true, predicate: ["nestedTableContainer"], descendants: true }, { propertyName: "leftPinnedBody", first: true, predicate: ["leftPinnedBody"], descendants: true }, { propertyName: "centerPinnedBody", first: true, predicate: ["centerPinnedBody"], descendants: true }, { propertyName: "rightPinnedBody", first: true, predicate: ["rightPinnedBody"], descendants: true }, { propertyName: "leftPinnedHeader", first: true, predicate: ["leftPinnedHeader"], descendants: true }, { propertyName: "centerPinnedHeader", first: true, predicate: ["centerPinnedHeader"], descendants: true }, { propertyName: "rightPinnedHeader", first: true, predicate: ["rightPinnedHeader"], descendants: true }, { propertyName: "columnsGroupedBox", first: true, predicate: ["columnsGroupedBox"], descendants: true }, { propertyName: "centerFakeScrollbar", first: true, predicate: ["centerFakeScrollbar"], descendants: true }, { propertyName: "centerScroll", first: true, predicate: ["centerScroll"], descendants: true }, { propertyName: "mainScroll", first: true, predicate: ["mainScroll"], descendants: true }, { propertyName: "fakeScroll", first: true, predicate: ["fakeScroll"], descendants: true }, { propertyName: "horizintalFakeScroll", first: true, predicate: ["horizintalFakeScroll"], descendants: true }, { propertyName: "centerScrollableBody", first: true, predicate: ["centerScrollableBody"], descendants: true }, { propertyName: "filterMenueSearchInput", first: true, predicate: ["filterMenueSearchInput"], descendants: true }, { propertyName: "filterMenueTextchInput", first: true, predicate: ["filterMenueTextchInput"], descendants: true }, { propertyName: "textAreadInput", first: true, predicate: ["textAreadInput"], descendants: true }, { propertyName: "nestedTable", first: true, predicate: ["nestedTable"], descendants: true }, { propertyName: "fullscreenImageTemplate", first: true, predicate: ["fullscreenImageTemplate"], descendants: true }, { propertyName: "cellHosts", predicate: CellHostDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"position-relative h-100 card-outer\">\n <div class=\"d-flex justify-content-between mb-3 align-items-center position-relative\">\n <div class=\"d-flex gap-2 table-right-top-actions\">\n <div class=\"nav nav-tabs\" *ngIf=\"false\">\n <div class=\"nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\n <span\n *ngFor=\"let tab of tabs; let i = index\"\n (click)=\"setActiveTab(tab)\"\n class=\"nav-link cursor-pointer\"\n [class.active]=\"activeTab == tab\"\n >\n {{ tab }}\n </span>\n </div>\n </div>\n <div class=\"new_design_dropdown hide_arrow\">\n <a href=\"JavaScript:void(0)\" (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \" [class.active-filter-all]=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button\">\n Default View\n </a>\n </div>\n <div>\n <ng-container *ngIf=\"tableFilterViewId && hasAnyDefaultView()\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" (click)=\"toggleActions('unfulfilledDropdown')\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n Unfulfilled\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div>\n <!-- <div>\n <ng-container *ngIf=\"tableFilterViewId && hasAnyDefaultView()\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown\" (click)=\"toggleActions('UnpaidDropdown')\"\n [class.active]=\"activeTopButton === 'UnpaidDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center text-decoration-none dropdown_main_button\">\n Unpaid\n </a>\n <div *ngIf=\"activeTopButton === 'UnpaidDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons UnpaidDropdown\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unpaid_dropdown_menu\">\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\">\n </span>\n </div>\n <span>Test Type</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div> -->\n <div class=\"d-flex align-items-center\">\n <ng-container *ngIf=\"tableView | filter : searchTextPresetTable : 'name' as filteredList\">\n <div *ngFor=\"let list of filteredList | slice: 0:2;let i = index;\n trackBy: trackByTable\" class=\"dropdown_main_button\" [class.active-filter-all]=\"activeIndex === list.id\" title=\"{{list.id}}\" (click)=\"selectFilter(list,list.id); openIndex = null\">\n {{list.name}}\n </div>\n </ng-container>\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" (click)=\"toggleActions('unfulfilledDropdown')\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 d-none consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex gap-1 align-items-center table-right-top-actions\">\n <div class=\"global-search position-relative\" [style.width.px]=\"350\">\n <span *ngIf=\"enableGlobalSearch\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon ms-2 mt-0 position-absolute icon\" style=\"top: 8px;\"\n ></span>\n <input #globalSearchInput\n *ngIf=\"enableGlobalSearch\"\n class=\"form-control\"\n placeholder=\"Search\"\n [(ngModel)]=\"tableSearch\"\n (keydown.enter)=\"onGlobalSearch()\"\n (input)=\"onSearchInput($event)\"\n type=\"search\"\n />\n </div>\n <!-- <ng-container *ngFor=\"let button of buttons\">\n <div\n class=\"d-flex align-items-center gap-2 action-buttons-row\"\n *ngIf=\"button?.has_permission\"\n >\n <a\n href=\"JavaScript:void(0)\"\n (click)=\"onActionButtonClick(button.name)\"\n class=\"button button-small btn border border-primary btn-active-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n >\n <span\n *ngIf=\"button.is_showIcon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/' + button.icon + '.svg'\n \"\n class=\"svg-icon svg-icon-2\"\n ></span>\n <span\n class=\"label-hidden text-white\"\n [class.ms-0]=\"button.is_showIcon\"\n >{{ button?.name }}</span\n >\n </a>\n </div>\n </ng-container> -->\n <div *ngIf=\"!showFilterRow\"\n class=\"cursor-pointer position-relative action-buttons-row\"\n (click)=\"toggleOpenFilter()\"\n [class.active]=\"showFilters\">\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\" class=\"svg-icon svg-icon-2 d-flex\"></span>\n </a>\n <span *ngIf=\"activeFilteredColumns?.length\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #0022ff;\n background-color: rgb(0, 60, 255);\n position: absolute;\n right: 8px;\n top: 6px;\n \"\n class=\"rounded-circle d-block\"\n ></span>\n </div>\n <div class=\"cursor-pointer d-none\"\n (click)=\"toggleActions('advance-filter')\"\n [class.active]=\"activeTopButton === 'advance-filter'\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/zoom-charge.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span>\n </div>\n\n <!-- filter dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('filterDropdownNew')\"\n [class.active]=\"activeTopButton === 'filterDropdownNew'\">\n <a href=\"JavaScript:void(0)\" class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'filterDropdownNew'\" class=\"actions-dropdown mt-1 consumer_buttons filter_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu\">\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productName\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productName\">\n Product Name\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"createdDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"createdDate\">\n Created Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"updatedDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"updatedDate\">\n Updated Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productType\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productType\">\n Product Type\n </label>\n </span>\n </a>\n <hr class=\"my-2\" style=\"border: 1px solid #E0E0E0;\">\n <div class=\"d-flex\" (click)=\"activeFilter('newest')\" [class.active-filter]=\"activeFilterType === 'newest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowupIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"mt-1 newest ps-2\">Oldest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'newest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\"\n ></span>\n </span>\n </a>\n </div>\n <div class=\"d-flex\" (click)=\"activeFilter('oldest')\" [class.active-filter]=\"activeFilterType === 'oldest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowdownIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"oldest ps-2\">Newest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'oldest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\">\n </span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n <!-- settings dropdown -->\n <div class=\"cursor-pointer action-buttons-row position-relative\"\n (click)=\"toggleActions('setting')\"\n [class.active]=\"\n activeTopButton === 'setting' ||\n activeTopButton === 'table-layout' ||\n activeTopButton === 'table-presets' ||\n activeTopButton === 'show-hide-columns'\">\n <!-- <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span> -->\n\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'setting'\"\n class=\"actions-dropdown mt-1 actions-dropdown-setting\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu setting_dropdown_menu\">\n <!-- Table Layout -->\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggleActions('table-layout')\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/layoutIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown\"\n ></span>\n Table Layout</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n <!-- Table Presets -->\n <a (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center\"\n ></span>\n Table Presets</span\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n\n <!-- Columns -->\n <a *ngIf=\"!showSideMenu\" (click)=\"$event.stopPropagation(); toggleActions('show-hide-columns')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eyeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown me-2\"\n ></span>\n Columns</span>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"muted-text\">{{ columnsCount }}</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </div>\n </a>\n\n <a (click)=\"autosizeAllColumns()\" class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resizeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown me-2\"></span>\n <span>Autosize all columns</span>\n </span>\n <!-- <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div> -->\n </a>\n\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/multicellNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown me-2\"></span>\n <span>Multi-cell tooltip mode</span>\n </span>\n <!-- <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div> -->\n </a>\n\n <div class=\"dropdown-divider\"></div>\n\n <!-- Filter -->\n <!-- <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"toggleOpenFilter(); activeTopButton = '';\"\n *ngIf=\"!showFilterRow\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Filter\n </a> -->\n\n <!-- Download -->\n <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('csv')\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n CSV Export\n </a>\n <a *ngIf=\"enableExport\"\n class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('xlsx')\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Excel Export\n </a>\n <!-- Font Family & Font Size -->\n <div class=\"px-2 pb-2 pt-2\">\n <div class=\"d-flex gap-2\">\n <!-- <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"fontFaimly\"\n (change)=\"onFontChange()\"\n >\n <option *ngFor=\"let font of fontFamilies\" [value]=\"font\">\n {{ font }}\n </option>\n </select> -->\n\n <!-- Font Size -->\n <!-- <select\n class=\"form-select form-select-sm\"\n (change)=\"onFontChange()\"\n [(ngModel)]=\"bodyTextFontsSize\"\n >\n <option *ngFor=\"let size of fontSizes\" [value]=\"size\">\n {{ size }}\n </option>\n </select> -->\n </div>\n </div>\n </div>\n </div>\n\n <!-- Table Layout -->\n\n <ng-container *ngIf=\"activeTopButton === 'table-layout'\">\n <div\n *ngTemplateOutlet=\"tableLayout\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'table-presets'\">\n <div\n *ngTemplateOutlet=\"tablePreset\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'show-hide-columns'\">\n <div\n *ngTemplateOutlet=\"showHideColumns\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n </div>\n <!-- action dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('actionsDropdown')\"\n [class.active]=\"activeTopButton === 'actionsDropdown'\" *ngIf=\"buttons.length > 1\">\n <button type=\"button\" class=\"primary_btn_new common_btn consumerDropdownButton px-2\">\n Actions\n </button>\n <div *ngIf=\"activeTopButton === 'actionsDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu\">\n <a class=\"dropdown-item py-0 px-3 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <ng-container *ngFor=\"let button of buttons\">\n <ng-container *ngIf=\"button?.has_permission\">\n <span>{{ button?.name }}</span>\n </ng-container>\n </ng-container>\n </span>\n </a>\n </div>\n </div>\n </div>\n <!-- show single button -->\n <button class=\"btn btn-primary py-1 text_common_14px text-white\" type=\"button\" *ngIf=\"buttons.length == 1\">{{ buttons[0]?.name }}</button>\n\n <div class=\"action-buttons-row\" *ngIf=\"showFullScreenButton\">\n <a\n *ngIf=\"!isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Minimise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/expend.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n <a\n *ngIf=\"isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Maximise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/minimize.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n </div>\n <div>\n <!-- Example single danger button -->\n\n <!-- <button\n type=\"button\"\n class=\"btn btn-primary btn-sm d-flex gap-2 action-button\"\n (click)=\"toggleActions('actions')\"\n >\n Action\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/Vector.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <div\n *ngIf=\"activeTopButton === 'actions'\"\n class=\"actions-dropdown mt-1\"\n >\n <div class=\"dropdown-menu show\">\n <a class=\"dropdown-item\" href=\"#\">Action</a>\n <a class=\"dropdown-item\" href=\"#\">Another action</a>\n <a class=\"dropdown-item\" href=\"#\">Something else here</a>\n <div class=\"dropdown-divider\"></div>\n <a class=\"dropdown-item\" href=\"#\">Separated link</a>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showFilters && !showFilterRow\"\n class=\"top-filter-row border-top py-2 d-flex justify-content-between align-items-center\"\n [style.height.px]=\"topFilterRowHeight\"\n >\n <!-- LEFT SIDE (Filter tags + Filter button) -->\n <div class=\"d-flex gap-2 align-items-center\">\n <ng-container>\n <div\n *ngFor=\"let col of activeFilteredColumns; trackBy: trackByField\"\n class=\"filter-tags\"\n >\n <div\n (click)=\"\n isActiveFilterOpen = true;\n activeTopButton = 'filter-columns';\n openFilter(col)\n \"\n class=\"d-flex justify-content-center align-items-center muted-text add-filter-button active-filters\"\n style=\"white-space: nowrap\"\n [class.active]=\"\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen &&\n activeTopButton == 'filter-columns'\n \"\n >\n <span class=\"header-tag mt-0 d-flex align-items-center left-side-pinned\">\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n {{ col.header }}: {{col.query.first_value || col.query?._ids[0]}}\n <span\n (click)=\"\n $event.stopPropagation(); removeColumnFilterFromColumn(col)\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterCrossNew.svg'\n \"\n class=\"data-grid-svg-icon cross-secondary ms-2\"\n ></span>\n </span>\n </div>\n\n <ng-container\n *ngIf=\"\n activeTopButton === 'filter-columns' &&\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen\n \"\n >\n <div\n *ngTemplateOutlet=\"filterColumns; context: { column: col }\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Filter Button -->\n <div class=\"add-filter-button-menu\">\n <div\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"d-flex justify-content-center align-items-center muted-text add-filter-button button-filter\"\n style=\"width: 70px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\n class=\"me-2 data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n Filter\n </div>\n\n <ng-container\n *ngIf=\"activeTopButton === 'filter-columns' && !isActiveFilterOpen\"\n >\n <div\n *ngTemplateOutlet=\"filterColumns\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT SIDE (Update + Reset) -->\n <div class=\"d-flex gap-3 align-items-center\">\n <div\n (click)=\"savePreset()\"\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!checkFilterChangesEffect()\"\n >\n Update View\n </div>\n\n <div\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!tableFilterViewId && activeFilteredColumns?.length\"\n (click)=\"clearAllFilters()\">\n Clear filters\n </div>\n </div>\n </div>\n\n <div\n [style.height]=\"\n showFilters ? 'calc(100% - ' + (topFilterRowHeight + footerRowHeight) + 'px)' : 'calc(100% - ' + footerRowHeight + 'px)'\n \"\n cdkDropListGroup\n class=\"data-grid-table-wrapper overflow-hidden\"\n #dataGridContainer\n [style.fontFamily]=\"fontFaimly\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n id=\"data-grid-main-container\"\n >\n <div\n *ngIf=\"showRowsGrouping\"\n [style.height.px]=\"headerRowHeight\"\n [cdkDropListData]=\"columns\"\n [style.backgroundColor]=\"\n topGroupedBadgesBackgroundColor || headerBackgroundColor\n \"\n cdkDropList\n (cdkDropListEntered)=\"enterToTopRowGrouping($event)\"\n (cdkDropListExited)=\"exitedFromTheTopRow($event)\"\n (cdkDropListDropped)=\"onDropTopGroup($event)\"\n [cdkDropListEnterPredicate]=\"canEnterToRowsGrouping\"\n id=\"rows-grouping-top-container\"\n class=\"border-below d-flex px-4 align-items-center\"\n >\n <div\n class=\"d-flex gap-2 align-items-center\"\n [style.color]=\"headerTextColor\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <div *ngIf=\"!draggingInGroupArea && !groupedColumns?.length\">\n Drag here to set row groups\n </div>\n <div\n cdkDropListOrientation=\"horizontal\"\n cdkDropList\n (cdkDropListDropped)=\"onGroupReorder($event)\"\n class=\"d-flex\"\n >\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'x'\"\n *ngFor=\"\n let child of groupedColumns;\n let i = index;\n trackBy: trackByField\n \"\n class=\"d-flex align-items-center\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n groupedColumns.length > 1 && i != groupedColumns.length - 1\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"d-flex overflow-hidden\"\n [style.height]=\"\n 'calc(100% - ' +\n (showRowsGrouping\n ? headerRowHeight + footerRowHeight\n : footerRowHeight) +\n 'px)'\n \"\n >\n <div\n class=\"h-100\"\n [style.width]=\"\n !showSideMenu\n ? '100%'\n : sideMenuVisible\n ? 'calc(100% - 280px)'\n : 'calc(100% - 30px)'\n \"\n >\n <div class=\"h-100 transition position-relative w-100\">\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- Data Grid Header starts here -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- [style.backgroundColor]=\"headerBackgroundColor\" -->\n <div\n class=\"data-grid-header-wrapper w-100\"\n [style.color]=\"headerTextColor\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.fontSize.px]=\"headerTextFontsSize\"\n [class.border-below]=\"!hasAnyVisibleColumn\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Left Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header left-pinned\"\n #leftPinnedHeader\n [class.border-right]=\"hasLeftPinnedColumns\">\n <div *ngIf=\"showSerialNumber\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n class=\"select-all-checkbox-cell border-below\"\n [style.width.px]=\"55\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n S.No\n </div>\n <div *ngIf=\"showCheckboxes\"\n class=\"select-all-checkbox-cell border-below\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [indeterminate]=\"isIndeterminateState(dataSet)\"\n [checked]=\"isAllSelected(dataSet)\"\n (change)=\"toggleSelectAll(dataSet)\"\n />\n </div>\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"d-flex\"\n cdkDropList\n id=\"left-pinned-header\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"leftPinnedColumns\"\n (cdkDropListEntered)=\"onDropListEnter($event, 'left')\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewLeftPinnedColumns')\n \"\n (cdkDropListDropped)=\"onDropGroup()\"\n style=\"min-width: 1px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of leftPinnedColumns;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewLeftPinnedColumns'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: ''\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngIf=\"col?.children?.length; else singleCol\"\n >\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Center Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header center-scrollable\"\n #centerPinnedHeader\n (scroll)=\"onCenterBodyScroll($event)\"\n id=\"center-pinned-header\"\n cdkDropList\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n [cdkDropListData]=\"centerColumns\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListSortingDisabled]=\"\n isDisableColumnGrouping && draggingInGroupArea\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'center')\"\n (cdkDropListSorted)=\"onSortGroup($event, 'previewCenterColumns')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n [style.maxWidth]=\"\n 'calc(100% - ' +\n (rightPinnedHeader.offsetWidth + leftPinnedHeader.offsetWidth) +\n 'px)'\n \"\n >\n <div\n *ngIf=\"groupedColumns?.length\"\n style=\"min-width: 200px\"\n class=\"h-100 align-items-center\"\n #columnsGroupedBox\n id=\"groupBoxHeaderDiv\"\n >\n <div\n class=\"d-flex w-100 justify-content-between align-items-center border-below\"\n [style.height.px]=\"\n showFilterRow ? headerRowHeight * 2 : headerRowHeight\n \"\n >\n <div class=\"ps-3\">Group</div>\n <div class=\"d-flex\">\n <div\n class=\"three-dots cursor-pointer\"\n (click)=\"\n openThreeDotsMenu($event, 'group');\n isThreeDotsFilterOpen = false\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroupBox($event)\n \"\n class=\"resize-handle\"\n style=\"margin-right: -2px\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n\n <div\n [style.height.px]=\"headerRowHeight\"\n class=\"border-below\"\n ></div>\n </div>\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"gridType === 'Assets' || gridType === 'Tasks'\"\n >\n </span>\n <div\n class=\"dragable-header\"\n (cdkDragStarted)=\"\n checkColumnGroupingStatus(col);\n dragStartOnGroup(col);\n onDragStarted(col)\n \"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of centerColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewCenterColumns'\n }\n \"\n >\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (draggingInGroupArea\n ? 'data-grid/icons/justify.svg'\n : 'data-grid/icons/arrows-move.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n <span\n *ngIf=\"isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'centerColumns'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && !isOutsideContainer\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container *ngIf=\"child?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container *ngIf=\"col?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Right Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n cdkDropList\n id=\"right-pinned-header\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n cdkDropListOrientation=\"horizontal\"\n class=\"data-grid-header right-pinned\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewRightPinnedColumns')\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'right')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n #rightPinnedHeader\n class=\"right-pinned-header d-flex\"\n style=\"min-width: 0.2px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of rightPinnedColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n pinnedRight: true,\n index: i,\n section: 'right'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'right'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <!-- Data Grid Body starts here -->\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <div\n class=\"h-100 d-flex justify-content-center align-items-center\"\n *ngIf=\"!dataSet?.length && !loading && !dataSetLoading\">\n <!-- <div\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/record-not-found.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></div> -->\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/no-data-image.svg'\"\n class=\"data-grid-svg-icon mb-3 d-flex justify-content-center align-items-center\">\n </span>\n <p class=\"text_common_16px mb-0\">No data available</p>\n <p class=\"page_refresh mb-0\">Try adjusting filters or refresh the page</p>\n </div>\n </div>\n\n <div\n class=\"position-absolute w-100 h-100 d-flex justify-content-center align-items-center loading-overlay\"\n *ngIf=\"loading || dataSetLoading\"\n style=\"\n z-index: 999;\n backdrop-filter: blur(1px);\n \"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div class=\"spinner-border text-primary\" role=\"status\">\n <!-- <span class=\"loader\"></span> -->\n <!-- <span class=\"visually-hidden\">Loading...</span> -->\n <!-- </div> -->\n </div>\n </div>\n\n <div\n class=\"data-grid-body-wrapper position-relative d-flex\"\n [style.height]=\"bodyWrapperHeight\"\n style=\"overflow-y: auto; overflow-x: hidden\"\n #mainScroll\n (scroll)=\"onMainScroll($event)\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n >\n <!-- LEFT PINNED -->\n <div\n [style.height.px]=\"\n !groupedColumns.length ? originalDataSet.length * rowHeight : 0\n \"\n ></div>\n <!-- [class.transparent-border-right]=\"!hasLeftPinnedColumns\" -->\n <div [class.h-100]=\"originalDataSet.length < 8\">\n <div\n class=\"data-grid-body left-pinned-body w-100\"\n style=\"overflow-y: hidden\"\n [class.border-right]=\"hasLeftPinnedColumns\"\n [class.transparent-border-right]=\"!hasLeftPinnedColumns\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"leftPinnedBackgroundColor\"\n [class.h-100]=\"originalDataSet.length < 8\"\n *ngIf=\"!loading && !dataSetLoading\"\n [@rowDynamic]=\"rowAnimation\"\n\n \n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewLeftPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n isLeft: true,\n section: 'left',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewLeftPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'left',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- CENTER -->\n <div\n class=\"h-100\"\n [style.width.px]=\"centerPinnedHeader.clientWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div\n class=\"data-grid-body center-scrollable\"\n [class.h-100]=\"originalDataSet.length < 8\"\n style=\"overflow-y: hidden; overflow-x: auto\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n #centerScrollableBody\n (scroll)=\"onCenterBodyScroll($event)\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n \n >\n <div [@rowDynamic]=\"rowAnimation\" *ngIf=\"!loading && !dataSetLoading\">\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewCenterColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'center',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewCenterColumns,\n isEven: false,\n isOdd: false,\n section: 'center',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT PINNED -->\n <div\n class=\"right-pinned-body-wrapper\"\n *ngIf=\"true\"\n [class.h-100]=\"originalDataSet.length < 8\"\n [style.maxWidth.px]=\"\n isScrollbarVisible\n ? rightPinnedHeader.offsetWidth - 15\n : rightPinnedHeader.offsetWidth\n \"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n [@rowDynamic]=\"rowAnimation\"\n >\n <div\n class=\"data-grid-body right-pinned-body w-100 h-100\"\n style=\"overflow-y: hidden\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.boxShadow]=\"rightPinnedBoxshadow\"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n *ngIf=\"!loading && !dataSetLoading && hasRightPinnedColumns\"\n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewRightPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'right',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewRightPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'right',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <div\n style=\"top: auto; left: auto\"\n (click)=\"\n $event.stopPropagation();\n fullscreenImage = null;\n cdr.detectChanges()\n \"\n [style.width.px]=\"dataGridContainer.offsetWidth\"\n [style.height.px]=\"\n dataGridContainer.offsetHeight - (footerRowHeight + 100)\n \"\n class=\"image-modal full-image-modal\"\n *ngIf=\"fullscreenImage\"\n >\n <img\n (click)=\"$event.stopPropagation()\"\n [src]=\"fullscreenImage\"\n alt=\"Fullscreen Image\"\n />\n </div>\n <div\n *ngIf=\"selectedRows.size > 0 && showTaskbar\"\n class=\"taskbar w-100\"\n [style.bottom.px]=\"85\"\n >\n <div class=\"selected-rows-action-bar\" [@slideUp]>\n <span class=\"selected-count\">\n {{ selectedRows.size }} selected of\n {{\n paginationConfig.totalResults ||\n config?.paginationParams?.totalItems\n }}\n Total\n </span>\n <div class=\"action-buttons d-flex align-items-center\">\n <ng-container\n *ngFor=\"let action of taskbarActions; let i = index\"\n >\n <ng-container *ngIf=\"action?.has_permission\">\n <span\n class=\"action-btn verified btn {{ action }}\"\n (click)=\"onVerifyClick(action?.actionName)\"\n >{{ action?.actionName }}</span\n >\n <span\n *ngIf=\"\n taskbarActions.length > 1 &&\n i !== taskbarActions.length - 1 &&\n taskbarActions[i + 1]?.has_permission\n \"\n class=\"\"\n >|</span\n >\n </ng-container>\n </ng-container>\n <button (click)=\"clearSelectionState(tableType);selectedRows.clear();\" class=\"clear-btn ms-2 mt-2\">\n <i class=\"bi bi-x-circle\"></i> Clear Selection\n </button>\n </div>\n </div>\n </div>\n </div>\n <!-- Vertical Fake scroll Bar -->\n <!-- <div\n (scroll)=\"onMainFakeScroll($event)\"\n class=\"fake-scrollbar fake-scrollbar-vertical d-none\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n [style.top.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n #fakeScroll\n [style.height]=\"bodyWrapperHeight\"\n style=\"\n overflow-y: auto;\n overflow-x: hidden;\n width: 17px;\n position: absolute;\n right: 0;\n background-color: f1f2f3;\n z-index: 10;\n \"\n >\n <div [style.height.px]=\"rowHeight * dataSetLength\"></div>\n </div> -->\n </div>\n\n <!-- Horizintal Fake Scrollbars -->\n <div\n class=\"d-flex justify-content-between\"\n *ngIf=\"hasScroll\"\n >\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"leftPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n (scroll)=\"onCenterBodyScroll($event)\"\n class=\"fake-horizintal-scrollbar\"\n #horizintalFakeScroll\n [style.width.px]=\"centerPinnedHeader.offsetWidth\"\n >\n <div [style.width.px]=\"centerPinnedHeader.scrollWidth - 10\"></div>\n </div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n </div>\n </div>\n\n <!-- Side Menu Implemented Here -->\n <div\n *ngIf=\"showSideMenu\"\n [style.width.px]=\"sideMenuVisible ? 280 : 30\"\n class=\"right-menu h-100\"\n [style.backgroundColor]=\"sidemenuBackgroundColor\"\n >\n <div class=\"h-100 d-flex flex-row-reverse\">\n <div\n style=\"width: 30px\"\n class=\"d-flex flex-column align-items-center cursor-pointer\"\n [class.border-start]=\"sideMenuVisible\"\n >\n <div\n (click)=\"toggleSideMenu('cols')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'cols' && sideMenuVisible\n \"\n [class.border-below]=\"sideMenuVisible\"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Columns</div>\n </div>\n\n <div\n (click)=\"toggleSideMenu('filtrs')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'filtrs' && sideMenuVisible\n \"\n [class.border-below]=\"\n sideMenuVisible && currentOpenedSideMenue == 'filtrs'\n \"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Filter</div>\n </div>\n </div>\n <div\n class=\"h-100\"\n *ngIf=\"sideMenuVisible\"\n [ngStyle]=\"{ width: sideMenuVisible ? '250px' : '' }\"\n >\n <div class=\"h-100\">\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'cols' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"columnPannel\"></ng-container>\n <!-- Column Items -->\n <div class=\"column-panel-body px-3\">\n <ng-container\n *ngFor=\"let col of columns; trackBy: trackByField\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n <hr />\n\n <div class=\"side-menu-row-groups\" style=\"height: 30%\">\n <ng-container\n *ngTemplateOutlet=\"sideMenuRowGroups\"\n ></ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'filtrs' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"sideFilters\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n [style.height.px]=\"footerRowHeight\"\n class=\"border-top\"\n [style.backgroundColor]=\"footerRowBackgroundColor\"\n >\n <!-- Rows: <span class=\"fw-500 ms-1\">{{ dataSet.length }}</span> -->\n\n <div class=\"pagination-container\"\n [style.height.px]=\"footerRowHeight\"\n [style.padding.px]=\"footerPadding\">\n <div class=\"page-size\">\n <select\n [(ngModel)]=\"paginationConfig.limit\"\n (change)=\"onPageSizeChange()\"\n >\n <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n {{ size }}\n </option>\n </select>\n <span class=\"separator\"> per page </span>\n </div>\n\n <div class=\"page-info\">\n \n {{ (paginationConfig.page - 1) * paginationConfig.limit + 1 }}-{{\n paginationConfig.page * paginationConfig.limit <\n paginationConfig.totalResults\n ? paginationConfig.page * paginationConfig.limit\n : paginationConfig.totalResults\n }}\n of\n {{ paginationConfig.totalResults }}\n results\n </div>\n\n <div class=\"page-buttons\">\n <button\n (click)=\"goToPage(paginationConfig.page - 1)\"\n [disabled]=\"paginationConfig.page === 1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-left.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n\n <ng-container *ngFor=\"let page of visiblePages\">\n <button\n *ngIf=\"page !== '...'\"\n (click)=\"goToPage(page)\"\n [class.active]=\"page === paginationConfig.page\"\n >\n {{ page }}\n </button>\n <span *ngIf=\"page === '...'\">...</span>\n </ng-container>\n\n <button\n (click)=\"goToPage(paginationConfig.page + 1)\"\n [disabled]=\"paginationConfig.page === paginationConfig.totalResults\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- Header Cell Template -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n\n<ng-template\n #headerCell\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"section\"\n let-calledFromNestedPlaceholder=\"calledFromNestedPlaceholder\"\n>\n <div>\n <!-- Group Header -->\n <ng-container *ngIf=\"col.children?.length > 0; else flatHeader\">\n <div cdkDroplistGroup class=\"group-column-wrapper\">\n <!-- Parent Header -->\n <div\n *ngIf=\"shouldTheGroupHeaderShow(col)\"\n class=\"header-cell group-header\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n [style.gridColumn]=\"'span ' + col.children.length\"\n [style.fontWeight]=\"headerFontWeight\"\n [class.flex-row-reverse]=\"pinnedRight\"\n [class.justify-content-end]=\"pinnedRight\"\n style=\"grid-row: 1\"\n >\n <div\n class=\"group-header-content\"\n [title]=\"col.header\"\n [class.ms-2]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(col.children)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroup($event, col, pinnedRight)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n\n <!-- Child Headers and Filters -->\n\n <div\n class=\"d-flex\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"col.children\"\n (cdkDropListSorted)=\"onChildDroplistSorted($event, sections)\"\n (cdkDropListDropped)=\"onChildDroplistDroped($event)\"\n [cdkDropListSortingDisabled]=\"false\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n >\n <div\n cdkDrag\n [cdkDragData]=\"child\"\n *ngFor=\"let child of col.children; let i = index\"\n >\n <!-- Child Header -->\n <ng-container *ngIf=\"child.is_visible && !child['isRowGrouped']\">\n <div\n cdkDragHandle\n class=\"header-cell one-row-header-cells cursor-pointer\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 2\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(child)\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header-test1\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100\"\n [class.editable-header]=\"child?.is_editable\"\n (click)=\"\n openThreeDotsMenu($event, child);\n openFilteronThreeDotsClick(child)\n \"\n >\n {{ child.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\"\n class=\"d-flex align-items-center\"\n *ngIf=\"child.pinned\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n class=\"three-dots p-1 zaid-test\"\n (click)=\"\n openThreeDotsMenu($event, child);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === child\"\n style=\"top: -50%; z-index: 21\"\n [style.left.px]=\"\n -(!child?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 0\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: child,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(child)\"\n (mousedown)=\"\n $event.stopPropagation();\n onResizeColumn($event, child)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"child.filterValue\"\n (ngModelChange)=\"onFilterChange(child)\"\n (paste)=\"onFilterChange(child); applyDropdownFilter()\"\n [readonly]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n [class.disabled-search-input]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n (click)=\"\n $event.stopPropagation();\n openFilterFromDisabledSearchedInput(child)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(child)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(child)\"\n [class.pe-none]=\"child?.type == 'image'\"\n ><span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(child)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell?.field == child?.field\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"\n child?.pinned ? 0 : -centerPinnedHeader.scrollLeft\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: child }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div\n *ngIf=\"\n !draggingInGroupArea ||\n (child.is_groupable && draggingInGroupArea)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div *ngIf=\"draggingInGroupArea && !child.is_groupable\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ban.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\" class=\"position-relative\">\n <div\n *ngTemplateOutlet=\"\n childHeaderPlaceholder;\n context: {\n $implicit: child,\n index: i,\n sections: sections,\n calledFromNestedPlaceholder: true,\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && child?.is_groupable\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron: false,\n pinnedRight: pinnedRight,\n sections: sections,\n index: i\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Flat Header || Single Header Cell-->\n <ng-template #flatHeader>\n <div\n class=\"group-column-wrapper\"\n *ngIf=\"col.is_visible && !col['isRowGrouped']\"\n >\n <!-- Full-height Header Cell (spans 2 rows visually) -->\n <div\n class=\"header-cell one-row-header-cells\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [class.border-right]=\"showVerticalBorder\"\n [style.min-height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\n \"\n [style.height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\n \"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 1 / span 2\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between w-100 align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header_figma_spacing\"\n [title]=\"col.header\"\n >\n <div\n class=\"text-ellipsis h-100 cursor-pointer\"\n [class.editable-header]=\"col?.is_editable\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(col)\"\n (click)=\"\n openThreeDotsMenu($event, col);\n openFilteronThreeDotsClick(col)\n \"\n >\n {{ col.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\"\n class=\"d-flex align-items-center three-dots\"\n *ngIf=\"col?.pinned\">\n <span (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex justify-content-center align-items-center pin_blue_icon\"\n ></span>\n </div>\n <!-- <div\n [class.me-2]=\"col.order_by\"\n class=\"d-flex align-items-center\"\n *ngIf=\"sortingConfig?.field == col.field\">\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortDesc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\"\n ></span>\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortAsc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\"\n ></span>\n </div> -->\n <div class=\"three-dots p-1 me-0\" [class.threeDotActive]=\"activeCol === col && clickedOnSortIcon\"\n (click)=\"openThreeDotsMenu($event, col, true);\"\n style=\"cursor: pointer\">\n <div *ngIf=\"sortingConfig?.field === col.field\" \n class=\"d-flex align-items-center\">\n \n <!-- Ascending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon ascendingAppliedIcon flex justify-content-center align-items-center cursor-pointer\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\">\n </span>\n\n <!-- Descending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center cursor-pointer rotated-180\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\">\n </span>\n </div>\n <span *ngIf=\"sortingConfig?.field !== col.field\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortIconGray.svg'\"\n class=\"data-grid-svg-icon figmaIconSize d-flex justify-content-center align-items-center\"\n (click)=\"openThreeDotsMenu($event, col, true)\">\n </span>\n </div>\n <div class=\"three-dots p-1 zaid-test1\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\" *ngIf=\"!col?.pinned\"\n (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown dropdown d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"z-index: 21\"\n [style.left.px]=\"\n -(!col?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 25\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n [class.w-100]=\"col.pinned == 'right'\"\n (dblclick)=\"autosizeColumn(col)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeColumn($event, col)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n (ngModelChange)=\"onFilterChange(col)\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n (paste)=\"onPasteInFilterRowSearch($event, col)\"\n (click)=\"\n $event.stopPropagation(); openFilterFromDisabledSearchedInput(col)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(col)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(col)\"\n [class.pe-none]=\"col?.type == 'image'\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(col)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"col?.pinned ? 0 : -centerPinnedHeader.scrollLeft\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- Body Cell Template -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n\n<ng-template\n #rowCell\n let-row\n let-columns=\"columns\"\n let-isEven=\"isEven\"\n let-isOdd=\"isOdd\"\n let-isLeftSection=\"isLeft\"\n let-section=\"section\"\n let-rowIndex=\"rowIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <!-- Check if row is a group -->\n <ng-container\n *ngTemplateOutlet=\"groupRowTemplate; context: { $implicit: row, depth: 0 }\"\n ></ng-container>\n <ng-template #groupRowTemplate let-row let-depth=\"depth\">\n <ng-container *ngIf=\"row.isGroup; else regularRow\">\n <!-- Group Header -->\n <div\n class=\"group-header-row d-flex align-items-center\"\n [style.height.px]=\"rowHeight\"\n [class.border-below]=\"section !== 'center'\"\n [style.width]=\"\n section === 'center'\n ? (centerScrollableBody?.scrollWidth ?? 0) + 'px'\n : '100%'\n \"\n >\n <div\n *ngIf=\"section == 'left'\"\n class=\"h-100 d-flex\"\n [style.width.px]=\"leftPinnedHeader.offsetWidth - 1\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n >\n <div\n *ngIf=\"showSerialNumber\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center h-100 border-right justify-content-end pe-2 s-no\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [style.width.px]=\"55\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) || \"\" }}\n </div>\n <div\n *ngIf=\"showCheckboxes\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center justify-content-center h-100 border-right\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.color]=\"checkboxesColor\"\n >\n <input\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"getGroupCheckedState(row) === true\"\n [indeterminate]=\"getGroupCheckedState(row) === undefined\"\n (change)=\"selectGroupRow($event, row)\"\n />\n\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'center'\"\n [style.width.px]=\"centerPinnedHeader.scrollWidth\"\n [style.minWidth.px]=\"centerPinnedHeader.scrollWidth\"\n class=\"d-flex align-items-center ps-2 h-100 border-below\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n [style.paddingLeft.px]=\"depth > 0 ? depth * 30 : 0\"\n >\n <span class=\"me-2 filter-icon-wrapper\" (click)=\"toggleExpand(row)\">\n <span\n class=\"data-grid-svg-icon align-items-center d-flex\"\n [inlineSVG]=\"\n row.isExpand\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <strong (click)=\"toggleExpand(row)\" class=\"cursor-pointer\">\n {{ row.groupValue }} ({{ countLeafRows(row) }})\n </strong>\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'right'\"\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n ></div>\n </div>\n\n <!-- Recursive Children -->\n <div class=\"group-children\" *ngIf=\"row.isExpand\" [@slideToggle]>\n <ng-container\n *ngFor=\"let child of row.children; let i = index; trackBy: trackById\"\n >\n <ng-container *ngIf=\"child.isGroup; else dataRow\">\n <!-- Recursive call for nested group -->\n <ng-container\n *ngTemplateOutlet=\"\n groupRowTemplate;\n context: { $implicit: child, depth: depth + 1 }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #dataRow>\n <!-- Regular data row -->\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: child,\n columns: columns,\n isEven: i % 2 === 0,\n isOdd: i % 2 !== 0,\n isLeft: isLeftSection,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n\n <!-- Regular row (not a group) -->\n <ng-template #regularRow>\n <div\n class=\"d-flex\"\n [style.height.px]=\"rowHeight\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n [class.selected-cell]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <span\n (click)=\"toggleDetailRowExpand(row)\"\n *ngIf=\"row?.detail?.result?.length || gridType === 'Tasks'\"\n class=\"data-grid-svg-icon filter-icon-wrapper\"\n [inlineSVG]=\"\n isDetailsExpanded(row)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <div\n [style.min-width.px]=\"\n section == 'center' && groupedColumns?.length ? groupBoxPadding : 0\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row h-100\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n ></div>\n <div\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n >\n <div\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below justify-content-end pe-2 s-no\"\n [style.width.px]=\"55\"\n *ngIf=\"isLeftSection && showSerialNumber\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) }}\n </div>\n <div\n [style.backgroundColor]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n ? selectedRowsBackgroundColor\n : checkboxesBackgroundColor\n \"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below left_checkbox_ailgnment\"\n *ngIf=\"isLeftSection && showCheckboxes\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"isRowSelected(row)\"\n (change)=\"toggleRowSelection(row)\"\n />\n </div>\n\n <!-- Render all columns -->\n <ng-container\n *ngFor=\"\n let col of columns;\n trackBy: trackByField;\n let colIndex = index\n \"\n >\n <ng-container *ngIf=\"col.children?.length > 0; else flatColumn\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n trackBy: trackByField;\n let subColIndex = index\n \"\n >\n <ng-container *ngIf=\"child?.is_visible && !child?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: child,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: subColIndex,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #flatColumn>\n <ng-container *ngIf=\"col?.is_visible && !col?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: col,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: null,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n </div>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'left' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'center' && isDetailsExpanded(row)\"\n class=\"accordion-details center-section\"\n style=\"\n max-height: 350px;\n overflow-y: hidden;\n overflow-x: auto;\n scrollbar-width: thin;\n \"\n #nestedTable\n [style.width]=\"\n hasRightPinnedColumns\n ? '100%'\n : hasVerticalScroll\n ? 'calc(100% - 12px)'\n : '100%'\n \"\n >\n <ng-container *ngIf=\"gridType == 'Assets'\">\n <ng-container\n *ngTemplateOutlet=\"nestedTableTemplate; context: { $implicit: row }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"gridType == 'Tasks'\">\n <ng-container\n *ngTemplateOutlet=\"\n taskManagementTemplate;\n context: { taskDetails: row }\n \"\n ></ng-container>\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'right' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- Actual Cell is Here -->\n<ng-template\n #cellTemplate\n let-col=\"col\"\n let-row=\"row\"\n let-section=\"section\"\n let-subColIndex=\"subColIndex\"\n let-rowIndex=\"rowIndex\"\n let-colIndex=\"colIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <div\n #cellContainer\n (click)=\"\n editingKey = ''; setActiveCell(row, col); collapseAllExpandedCells()\n \"\n [style.fontWeight]=\"bodyFontWeight\"\n [class.border-right]=\"showVerticalBorder\"\n class=\"cell overflow-visible position-relative data-grid-cell\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.fontSize.px]=\"bodyTextFontsSize\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n [class.active-cell]=\"\n isActiveCell(row, col) && !isEditing(row, col) && selectedKeys.size == 1\n \"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, false, cellContainer)\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row?.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row?.__virtualIndex\"\n tabindex=\"-1\"\n (keydown.enter)=\"$event.preventDefault(); enableEdit(row, col)\"\n (mousedown)=\"\n startSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseenter)=\"\n extendSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"\n isSelected(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n section\n )\n \"\n [class.top-border]=\"\n isTopBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-border]=\"\n isBottomBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.left-border]=\"\n isLeftBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.right-border]=\"\n isRightBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-left-corner]=\"\n isTopLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-right-corner]=\"\n isTopRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-left-corner]=\"\n isBottomLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-right-corner]=\"\n isBottomRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n >\n <!-- (mousedown)=\"startSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseenter)=\"extendSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"isSelected(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field)\" -->\n <div\n class=\"table-cell\"\n [class.active-for-editing]=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n getNestedValue(row, col.field)?.length <= 50)\n \"\n >\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n (getNestedValue(row, col.field)?.length <= 50 &&\n !expandedCells.size));\n else viewMode\n \"\n >\n <ng-container [ngSwitch]=\"col.type\">\n <!-- Text Input -->\n <input\n [style.height.px]=\"rowHeight - 10\"\n *ngSwitchCase=\"'input'\"\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Number Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'number'\"\n #numberInput=\"ngModel\"\n #numberRef\n (keypress)=\"allowOnlyNumbers($event)\"\n type=\"number\"\n required\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n (keydown.enter)=\"numberRef.blur()\"\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': numberInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Date Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'date'\"\n type=\"date\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n #dateInput=\"ngModel\"\n [ngClass]=\"{\n 'is-invalid': dateInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Dropdown -->\n <!-- ng-select like dropdown -->\n <div\n *ngSwitchCase=\"'dropdown'\"\n class=\"dropdown w-100\"\n (blur)=\"disableEdit(row, col)\"\n >\n <!-- Trigger -->\n <button\n class=\"form-select form-select-sm text-start w-100 text-ellipsis\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-expanded=\"false\"\n [style.minHeight.px]=\"rowHeight - 10\"\n data-bs-display=\"static\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <ng-container>\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </ng-container>\n <ng-template #placeholder> Select options... </ng-template>\n </button>\n\n <!-- Menu -->\n <div\n class=\"dropdown-menu w-100 p-0 cell-editing-dropdown-menu rounded-3\"\n [class.show]=\"isEditing(row, col)\"\n >\n <!-- Search -->\n <div class=\"px-2 py-1 editing-dropdown-search-input\">\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"editinDropdownSearch\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </div>\n\n <!-- Options -->\n <!-- <div\n class=\"cell-editin-dropdown\"\n style=\"max-height: 200px; overflow: auto\"\n >\n <div\n (click)=\"\n setNestedValue(row, col, option, true); editingKey = null\n \"\n class=\"px-2 py-1 d-flex align-items-center deopdown-item\"\n *ngFor=\"\n let option of col.column_dropdown_value\n | filter : editinDropdownSearch: 'value'\n \"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + option.value || option\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport \n itemSize=\"35\" \n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"px-2 py-1 d-flex align-items-center dropdown-item\"\n *cdkVirtualFor=\"\n let option of col.column_dropdown_value \n | filter : editinDropdownSearch : 'value'\n \"\n (click)=\"setNestedValue(row, col, option, true); editingKey = null\"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + (option.value || option)\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n </div>\n </div>\n\n <input\n *ngSwitchCase=\"'email'\"\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #emailModel=\"ngModel\"\n #emailInput\n type=\"email\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$\"\n (blur)=\"disableEdit(row, col, emailModel)\"\n (keydown.enter)=\"\n emailModel.control.markAsTouched(); emailInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': emailModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <!-- Default fallback -->\n <input\n *ngSwitchDefault\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #textModel=\"ngModel\"\n #textInput\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"\n textModel.control.markAsTouched(); textInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </ng-container>\n </div>\n\n <!-- Display mode -->\n <ng-template #viewMode>\n <div\n class=\"d-flex justify-content-between align-items-center overflow-hidden\"\n [ngClass]=\"getCellClasses(col, getNestedValue(row, col.field))\"\n >\n <!-- Field icon (for Tasks grid) -->\n <ng-container\n *ngIf=\"gridType === 'Tasks' && iconMap[col.field] && !isTotalRow\"\n >\n <span\n class=\"cursor-pointer me-2\"\n (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n [inlineSVG]=\"iconMap[col.field](row, col)\"\n ></span>\n </ng-container>\n\n <!-- \u2705 Custom cell renderer support -->\n <ng-container *ngIf=\"col.cellRenderer; else defaultCell\">\n <ng-container\n [cellRenderInit]=\"col.cellRenderer\"\n [rowData]=\"row\"\n [colData]=\"col\"\n [cellValue]=\"getNestedValue(row, col?.field)\"\n (cellEvent)=\"onCellEvent($event)\"\n >\n </ng-container>\n </ng-container>\n\n <!-- \uD83E\uDDFE Default text-based cell rendering -->\n <ng-template #defaultCell>\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"getCellTitle(row, col)\"\n >\n <!-- Normal cell -->\n <ng-container\n *ngIf=\"\n col.type !== 'image' &&\n col.field != 'image' &&\n col.field != 'invoice.invoice_image' &&\n !isTotalRow\n \"\n >\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{getCellTitle(row, col)}}\n </ng-container>\n\n <!-- Total row -->\n <ng-container *ngIf=\"isTotalRow\">\n {{ getTotalAmount(col) }}\n </ng-container>\n\n <!-- Invoice Image -->\n <ng-container *ngIf=\"col.field == 'invoice.invoice_image'\">\n <div style=\"display: flex; align-items: center; zoom: 0.7\">\n <span\n title=\"{{ getNestedValue(row, col.field) || 'Attachment' }}\"\n (click)=\"downloadAttchment(getNestedValue(row, col.field))\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(getNestedValue(row, col.field)) +\n '.svg'\n \"\n ></span>\n </div>\n </ng-container>\n\n <!-- Image cell -->\n <ng-container *ngIf=\"col.type == 'image' && !isTotalRow\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: { row: row, col: col }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <span\n *ngIf=\"\n (!col?.cellRenderer && showCellDetailsBox &&\n getNestedValue(row, col.field)?.length > 50 && col.type !== 'image') ||\n (isNestedValueArray(row, col.field) &&\n getNestedValue(row, col.field)?.length > 1)\n \"\n class=\"toggle-icon data-grid-svg-icon ms-2 cursor-pointer\"\n [inlineSVG]=\"\n isExpanded(row, col)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"\n $event.stopPropagation();\n toggleExpandOfLongCellText(row, col, columns, true)\n \"\n (dblclick)=\"$event.preventDefault(); $event.stopPropagation()\"\n ></span>\n </ng-template>\n <!-- Expand / Collapse icon -->\n </div>\n\n <!-- Expanded text -->\n <div\n class=\"position-absolute w-100 expanded-box\"\n *ngIf=\"isExpanded(row, col)\"\n [style.zIndex]=\"getZIndex(row, col)\"\n style=\"top: 100%; left: 0\"\n [attr.id]=\"(row.id || row._id) + '-' + (col.id || col._id)\"\n [class.invisible]=\"!showDetailsBox\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n fullTextTemplate;\n context: {\n row: row,\n col: col,\n isArray: isNestedValueArray(row, col.field)\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n</ng-template>\n\n<!-- Headers Action List On clicking three dots -->\n\n<ng-template\n #columnMenu\n let-col=\"col\"\n let-isNestedTable=\"isNestedTable\"\n let-columns=\"columns\"\n let-section=\"section\"\n>\n <div\n class=\"column-menu three-dots-col-menu\"\n [class.visually-hidden]=\"isMenueHidden\"\n *ngIf=\"activeCol && !isThreeDotsFilterOpen\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n [style.color]=\"headerTextColor\"\n >\n <!-- Sort Ascending -->\n <ng-container *ngIf=\"clickedOnSortIcon\">\n <div class=\"sorting_dropdown\" [class.disable-sorting]=\"!col.is_sortable\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span> -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showAscending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'desc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\"\n (click)=\"sortAsc(activeCol);\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Ascending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <!-- Sort Descending -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showDescending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'asc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\"\n (click)=\"sortDesc(activeCol);\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon1.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Descending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"\n sortingConfig?.field === col.field &&\n (sortingConfig?.order_by === 'asc' ||\n sortingConfig?.order_by === 'desc')\n \"\n class=\"column-menu-item\"\n (click)=\"resetSort(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resetSortIconNew.svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Reset Sort\n </div>\n </div>\n </ng-container>\n <!-- <div class=\"py-2 border-below three-dots-filter\">\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showFilter\"\n class=\"column-menu-item three-dots-filter\"\n (click)=\"openFilteronThreeDotsClick(col)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Filter\n </div>\n </div> -->\n\n <ng-container *ngIf=\"!clickedOnSortIcon\">\n <div class=\"sorting_dropdown\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span> -->\n \n <!-- *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"col?.pinned == 'left'\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'left',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinLeftIconNew.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Left\n <span *ngIf=\"col?.pinned == 'left'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\n \" -->\n <div [class.active-sort]=\"col?.pinned == 'right'\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'right',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinRightIconNew.svg'\"\n class=\"data-grid-svg-icon data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Right\n <span *ngIf=\"col?.pinned == 'right'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"col?.pinned\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n null,\n isNestedTable,\n columns\n )\n \"\n >\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown d-flex align-items-center justify-content-center\"\n ></span\n >Unpin\n </div>\n </div>\n </ng-container>\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeThisColumn\"\n class=\"column-menu-item\"\n (click)=\"autosizeColumn(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-expand-vertical.svg'\n \"\n class=\"me-2\"\n ></span>\n Autosize This Column\n </div> -->\n\n <!-- Autosize All Columns -->\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeAllColumns\"\n class=\"column-menu-item\"\n (click)=\"autosizeAllColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-angle-expand.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Autosize All Columns\n </div> -->\n\n <!-- Group By -->\n <div\n *ngIf=\"showRowsGrouping\"\n class=\"column-menu-item\"\n (click)=\"groupBy(activeCol)\"\n [class.disable-sorting]=\"!col.is_groupable\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/diagram-3.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Group by {{ col.header }}\n </div>\n\n <!-- Choose Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showChoseColumns\"\n class=\"column-menu-item\"\n (click)=\"chooseColumns()\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Choose Columns\n </div>\n\n <!-- Reset Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showResetColumns\"\n class=\"column-menu-item\"\n (click)=\"resetColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Reset Columns\n </div>\n </div>\n <div\n @slideToggle\n *ngIf=\"isThreeDotsFilterOpen\"\n class=\"three-dots-col-menu position-relative\"\n [style.right.px]=\"section == 'right' ? null : col.width - 45\"\n [class.visually-hidden]=\"isMenueHidden\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n</ng-template>\n\n<!-- Filter Menue -->\n<ng-template #filterMenu let-col=\"col\">\n <div\n class=\"filter-menu-container filter-menu dropdown_outer\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n >\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"filter-dropdown-section p-1\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n\n <div class=\"form-check mb-1 mt-2 ps-4 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"isAllSideFilterOptionsSelected(col)\"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- <div class=\"dropdown-options ps-1\">\n <div\n class=\"form-check mb-1\"\n *ngFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById;\n let i = index\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"filter-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option?.id ?? option?._id ?? option\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n\n <label\n class=\"form-check-label fw-semibold\"\n [for]=\"option?.id ?? option?._id ?? option\"\n >\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"firstValue\"\n #filterMenueTextchInput\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n\n <div class=\"form-group mb-3 d-flex flex-row\">\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <div @slideToggle *ngIf=\"firstValue && condition != 'none'\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"secondValue\"\n />\n </div>\n </div>\n </ng-template>\n\n <!-- Actions -->\n <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"primary_btn_new common_btn flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"applyDropdownFilter()\"\n >\n Apply\n </div>\n <div\n class=\"cancel_btn_new common_btn d-flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Side Menue -->\n\n<!-- Column Pannel / Pivot Mode / Searching -->\n\n<ng-template #columnPannel>\n <div class=\"column-panel-header\">\n <!-- Pivot Toggle -->\n <div\n class=\"form-check form-switch d-flex align-items-center mb-2 pivot-mode px-5 ms-2 d-none\"\n >\n <input\n class=\"form-check-input me-2\"\n type=\"checkbox\"\n id=\"pivotToggle\"\n [(ngModel)]=\"pivotMode\"\n />\n <label class=\"form-check-label\" for=\"pivotToggle\">Pivot Mode</label>\n </div>\n\n <!-- Select All & Search -->\n <div class=\"d-flex align-items-center mb-2 px-3 mt-3\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n\n <!-- Separator -->\n <hr class=\"my-2\" />\n </div>\n</ng-template>\n\n<!-- Right Columns Menue -->\n\n<!-- Column Panel Item Template -->\n<ng-template #columnPanelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div class=\"column-group d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expanded\"\n (click)=\"col.expanded = !col.expanded\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [id]=\"'group_' + col.header\"\n [checked]=\"isColumnVisible(col)\"\n (change)=\"toggleGroupVisibility(col)\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'group_' + col.header\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n <div *ngIf=\"col.expanded\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"me-2\" style=\"width: 1.5rem\"></span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [(ngModel)]=\"col.is_visible\"\n [id]=\"'col_' + col.field\"\n (change)=\"onSideMenuColumnsVisibilityChange()\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'col_' + col.field\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Columns Side Filter -->\n<ng-template #sideFilters>\n <div class=\"py-3 px-2 pe-3 h-100\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n filterAccordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : filterAccordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllFilterAccordions()\"\n ></span>\n </span>\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n <div\n class=\"overflow-auto side-filter-columns-wrapper\"\n style=\"height: calc(100% - 70px); scrollbar-width: thin\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : columnSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterPannelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div\n class=\"column-group d-flex align-items-center mb-2\"\n *ngIf=\"col.type !== 'image'\"\n >\n <!-- Chevron toggle -->\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n ></span>\n </span>\n\n <!-- Group label toggle -->\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"fw-bold text-truncate\"\n >{{ col.header }}\n <span\n class=\"text-primary ms-1\"\n *ngIf=\"col?.query?._ids?.length || col?.query?._first_value\"\n >*</span\n >\n </span>\n </label>\n </div>\n\n <!-- Children columns -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\" *ngIf=\"col.type !== 'image'\">\n <span\n class=\"me-2 filter-icon-wrapper me-2\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n ></span>\n </span>\n\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"text-truncate fw-bold\">{{ col.header }}</span>\n </label>\n </div>\n\n <!-- Show filter when expanded -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4 pe-3\">\n <ng-container\n *ngTemplateOutlet=\"sideNestedFilter; context: { col: col }\"\n ></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Side Nested Filters -->\n<ng-template #sideNestedFilter let-col=\"col\">\n <div class=\"\">\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"p-1\">\n <!-- Search -->\n <input\n type=\"text\"\n class=\"form-control form-control-sm mb-2\"\n placeholder=\"Search...\"\n [(ngModel)]=\"sideNestedFilterSearch\"\n />\n\n <!-- Select All -->\n <div class=\"form-check mb-1 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"\n col.query?._ids?.length == col?.column_dropdown_value?.length\n \"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- Options -->\n <!-- <div class=\"dropdown-options\">\n <div\n class=\"form-check mb-1 ms-1\"\n *ngFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n\n <!-- Actions -->\n <!-- <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\"\n style=\"height: 22px;\"\n (click)=\"applySideFilter(col)\"\n >\n Apply\n </div>\n <div\n class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" \n style=\"height: 22px;\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div> -->\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col.query.first_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"col!.query!.first_value\"\n />\n\n <div\n class=\"form-group mb-3 d-flex flex-row muted\"\n style=\"font-size: 14px\"\n >\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n />\n <label\n class=\"nnonem-check-label mb-0 mt-1\"\n for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <ng-container\n *ngIf=\"col?.query?.first_value && col?.query?.condition !== 'none'\"\n >\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col!.query.second_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"col!.query.second_value\"\n />\n </ng-container>\n <!-- <div class=\"d-flex gap-2\">\n <div class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">apply</div>\n <div class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">reset</div>\n\n </div> -->\n </div>\n </ng-template>\n <div\n class=\"d-flex justify-content-center gap-2 border-top\"\n style=\"height: 38px\">\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); removeSideFilter(col)\">\n <span>Clear</span>\n </button>\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applySideFilter(col)\"\n [class.disabled]=\"(col?.query.condition !== 'none' && !col?.query?.second_value)\"\n [class.pe-none]=\"(col!?.query.condition !== 'none' && !col?.query?.second_value)\"\n >\n <span style=\"margin-top: -1px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Centr Overlay for showing the chose columns -->\n\n<div *ngIf=\"showColumnPanel\" class=\"custom-modal-overlay\">\n <div\n class=\"custom-modal-content\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"modalColumnPannel\"></ng-container>\n </div>\n</div>\n\n<!-- The existing ng-template you provided -->\n<ng-template #modalColumnPannel>\n <div class=\"column-panel-header\">\n <div\n class=\"d-flex justify-content-between align-items-center px-2 ps-3 rounded-top-2 moda-header\"\n [style.height.px]=\"48\"\n >\n Choose Columns\n <span class=\"filter-icon-wrapper\" (click)=\"closeModalColumnPanel()\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n </div>\n <hr class=\"my-0\" />\n <div>\n <div class=\"d-flex align-items-center px-2 pe-3\" [style.height.px]=\"48\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"choseColumnsSearch\"\n />\n </div>\n\n <hr class=\"mt-0 mb-1\" />\n <div class=\"px-2 overlay-scrollable\">\n <ng-container\n *ngFor=\"\n let col of columns | filter : choseColumnsSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #sideMenuRowGroups>\n <div class=\"d-flex flex-column h-100 d-none\">\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Row Groups</span>\n </div>\n <div class=\"h-50\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here to set row Groups\n </div>\n </div>\n </div>\n\n <hr class=\"mt-4\" />\n\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Values</span>\n </div>\n <div class=\"h-50 d-flex\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here aggregate\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- Drag Preview Template -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<ng-template #dragPreview let-col>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n</ng-template>\n\n<!-- Drag Placeholder Template -->\n<ng-template\n #dragPlaceholder\n let-col\n let-i=\"index\"\n let-section=\"section\"\n let-draggingInGroupArea=\"draggingInGroupArea\"\n>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: { $implicit: col, index: i, section: section }\n \"\n ></div>\n </div>\n <div *ngIf=\"draggingInGroupArea\">New Placeholder</div>\n</ng-template>\n\n<!-- Top Group Row Placeholder -->\n<ng-template #topGroupingRowPlaceholder let-col let-showChevron=\"showChevron\">\n <div class=\"d-flex gap-2\">\n <div\n class=\"d-flex gap-2 top-row-grouping-placeholder\"\n [style.backgroundColor]=\"topGroupedBadgesBackgroundColor\"\n >\n <span\n cdkDragHandle\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>{{ col.header }}</span>\n <span\n (click)=\"ungroupColumn(col)\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"cursor-pointer data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n <div *ngIf=\"showChevron\" style=\"opacity: 0.6; font-size: 14px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n</ng-template>\n\n<ng-template\n #childHeaderPlaceholder\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"sections\"\n>\n <div\n class=\"header-cell one-row-header-cells\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n >\n <div class=\"d-flex justify-content-between h-100 align-items-center w-100\">\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div class=\"three-dots p-1\" style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <div class=\"resize-handle resize-test\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"activeFilterCell = col; activeCol = null\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 10; left: 0\"\n ></div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #tableLayout>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 320px\"\n >\n <div class=\"d-flex align-items-center mb-3\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Layout</h6>\n </div>\n <hr class=\"my-2\" />\n <div class=\"w-100 mb-3 d-flex\" role=\"group\">\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"small\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'small')\"\n [checked]=\"selectedTableLayout == 'small'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"small\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'small' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 8px\"></div>\n Small\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"medium\"\n autocomplete=\"off\"\n [checked]=\"selectedTableLayout == 'medium'\"\n (change)=\"changeTableLayout($event, 'medium')\"\n />\n <label\n class=\"border mx-3 d-flex flex-column align-items-center layout-button\"\n for=\"medium\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'medium' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 12px\"></div>\n Medium\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"large\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'large')\"\n [checked]=\"selectedTableLayout == 'large'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"large\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'large' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 16px\"></div>\n Large\n </label>\n </div>\n\n <hr class=\"my-2\" />\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text_common_14px\">Show separators</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"separators\"\n [(ngModel)]=\"showVerticalBorder\"\n (change)=\"onFontChange()\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text_common_14px\">Row shading</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"rowShadingEnabled\"\n (change)=\"toggleRowShading()\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <!-- <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Side Menu</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showSideMenu\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Filter Row</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showFilterRow\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #tablePreset>\n <div\n *ngIf=\"activeSubButton !== 'save-preset'\"\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Presets</h6>\n </div>\n <!-- Save Preset Button with Dropdown -->\n <div>\n <a\n class=\"text-decoration-none text-primary\"\n type=\"button\"\n id=\"savePresetDropdown\"\n (click)=\"$event.stopPropagation(); toggleSubActions('save-preset')\"\n >\n {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\n </a>\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchTextPresetTable\"\n type=\"search\"/>\n </div>\n </div>\n\n <!-- Preset List -->\n <ng-container\n *ngIf=\"\n tableView | filter : searchTextPresetTable : 'name' as filteredList\n \"\n >\n <!-- If filteredList exists and none is default -> show fallback -->\n <div\n class=\" pb-5 overflow-auto\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 250\"\n >\n <div\n class=\"cursor-pointer\"\n (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \"\n >\n <div class=\"fw-semibold\">Default View</div>\n </div>\n <div class=\"d-flex justify-content-between\">\n <small class=\"text-dark\">Created by system</small>\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\"\n class=\"me-2\"\n ></span>\n <div\n class=\"dropdown d-flex justify-content-end\"\n *ngIf=\"tableFilterViewId\"\n ></div>\n </div>\n \n <!-- The list: render each table from filteredList -->\n <div\n class=\"list-group list-group-flush\"\n *ngFor=\"\n let table of filteredList;\n let i = index;\n trackBy: trackByTable\n \"\n >\n <!-- Item -->\n <div\n (click)=\"\n $event.stopPropagation(); openIndex = null; activeTopButton = ''\n \"\n class=\"list-group-item px-0 d-flex justify-content-between align-items-center\"\n >\n <div (click)=\"selectFilter(table); openIndex = null\">\n <div class=\"fw-semibold\" style=\"cursor: pointer\">\n {{ table?.name }}\n <!-- {{table?.is_temp}} -->\n <span\n *ngIf=\"\n (table?.is_temp && !temp_state.id) ||\n temp_state.id == table.id\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n <span\n *ngIf=\"table?.is_default\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n </div>\n <small class=\"text-dark\" *ngIf=\"table?.config?.filterNames\" [title]=\"table?.config?.filterNames\">\n {{\n table?.config?.filterNames?.length > 25\n ? (table?.config?.filterNames | slice:0:25) + '...'\n : table?.config?.filterNames\n }}\n ({{ table?.config?.totalCount }})\n </small>\n <small class=\"text-dark\" *ngIf=\"!table?.config?.filterNames\">{{ table?.createdAt | date : \"MMM d, y\" }}</small>\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span\n *ngIf=\"table?.is_default\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n\n <div class=\"dropdown\" *ngIf=\"!table?.is_default\">\n <div\n class=\"dropdown-wrapper\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"btn-icon muted-text\"\n (click)=\"toggleMenu(i, $event)\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"openIndex === i\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/horizontal-dots.svg'\n \"\n class=\"me-2\"\n ></span>\n </button>\n\n <!-- menu -->\n <ul\n *ngIf=\"openIndex === i\"\n class=\"custom-dropdown-menu position-fixed top-auto\"\n role=\"menu\"\n [style.right.px]=\"'auto'\"\n [style.left.px]=\"dataGridContainer.offsetWidth - 100\"\n style=\"top: unset; right: unset\"\n >\n <li role=\"none\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item\"\n (click)=\"\n actionPreset(table, 'setPreset'); temp_state.id = ''\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/star.svg'\n \"\n class=\"me-2\"\n ></span>\n Set as default\n </button>\n </li>\n\n <li role=\"none\" *ngIf=\"!table.confirmDelete\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item text-danger\"\n (click)=\"table.confirmDelete = true\"\n >\n <span\n style=\"margin-top: -4px\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/trash-red.svg'\n \"\n class=\"me-2\"\n ></span>\n Delete\n </button>\n </li>\n\n <li\n role=\"none\"\n *ngIf=\"table.confirmDelete\"\n class=\"confirm-block\"\n >\n <div class=\"px-3 py-2 text-center\">\n <div class=\"mb-2 text_common_16px_gray\">\n Are you sure you want to delete this view<b>?</b><br/> This action can\u2019t be undone.\n </div>\n <div class=\"d-flex gap-2\">\n <button\n class=\"cancel_btn_new common_btn\"\n (click)=\"table.confirmDelete = false\">\n Cancel\n </button>\n <button class=\"delete_btn_new common_btn\"\n (click)=\"actionPreset(table, 'deletePreset')\">\n Delete\n </button>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n <!-- Item End Here -->\n </div>\n </div>\n </ng-container>\n </div>\n\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"activeSubButton == 'save-preset'\"\n class=\"dropdown-menu p-3 badge mt-4 save-preset-dropdown mt-1\"\n aria-labelledby=\"savePresetDropdown\"\n style=\"min-width: 250px\"\n >\n <div class=\"text_common_16px mb-2\">\n {{ isTablePresetNotChanged ? \"Create New Preset\" : \"Update Preset\" }}\n </div>\n <!-- <div class=\"fs-14px mb-2\" style=\"line-height: 20px\">\n This will save the current table adjustments as a preset.\n </div> -->\n <!-- Input -->\n <div class=\"my-3\">\n <label for=\"presetName\" class=\"form-label fs-12px fw-bold\">Name</label>\n <div class=\"col-12 global-search position-relative\">\n <input\n #presetNameCtrl=\"ngModel\"\n required\n [(ngModel)]=\"presetName\"\n [ngClass]=\"{\n 'is-invalid':\n presetNameCtrl.invalid &&\n (presetNameCtrl.dirty || presetNameCtrl.touched)\n }\"\n class=\"form-control form-control-sm ps-2\"\n placeholder=\"Enter preset name\"\n type=\"text\"\n />\n </div>\n </div>\n\n <!-- Checkbox -->\n <div class=\"form-check mb-2\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"presetFilter\"\n type=\"checkbox\"\n id=\"saveFilters\"\n />\n <label class=\"form-check-label mt-1\" for=\"saveFilters\">\n Save active filters\n </label>\n </div>\n\n <!-- Save Button -->\n <div class=\"d-flex justify-content-end gap-2\" style=\"height: 32px\">\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center\"\n (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n style=\"margin-top: -2px\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"closeDropdown.preset.loading\"\n (click)=\"savePreset(presetNameCtrl)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center\"\n >\n <span style=\"margin-top: -2px\" *ngIf=\"isTablePresetNotChanged\">\n <ng-container *ngIf=\"!closeDropdown.preset.loading\"\n >Create</ng-container\n >\n <ng-container *ngIf=\"closeDropdown.preset.loading\"\n ><span class=\"spinner-border spinner-border-sm\"></span\n ></ng-container>\n </span>\n <span style=\"white-space: nowrap\" *ngIf=\"!isTablePresetNotChanged\"\n >Update Preset</span\n >\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #showHideColumns>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\" style=\"border-bottom: 1px solid #E0E0E0;\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Columns</h6>\n </div>\n <a\n (click)=\"resetColumns()\"\n href=\"javascript:void(0)\"\n class=\"text-primary text-decoration-none\"\n >Reset</a\n >\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"mx-2 position-absolute icon data-grid-svg-icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search column\"\n type=\"search\"\n [(ngModel)]=\"topShowHideColumns\"\n />\n </div>\n </div>\n <!-- Preset List -->\n <div\n class=\"list-group list-group-flush\"\n style=\"overflow: auto; scrollbar-width: thin\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 220\"\n >\n <div class=\"muted-text show-hide-table-label d-flex justify-content-between\" *ngIf=\"hasAnyVisibleColumn\">\n Show in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"hide_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"hide_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <!-- Item -->\n <ng-container\n *ngFor=\"\n let col of columns | filter : topShowHideColumns : 'header';\n trackBy: trackByField\n \"\n >\n <div\n *ngIf=\"col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- show checkbox instead of icon -->\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n *ngIf=\"!col?.query?.first_value && !col?.query?._ids?.length\"\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, false)\"\n [class.disabled]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.pe-none]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.opacity-50]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n <div\n *ngIf=\"col?.query?.first_value || col?.query?._ids?.length\"\n class=\"d-flex align-items-center\"\n style=\"opacity: 0.5\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Item End Here -->\n\n <div\n class=\"dropdown-divider\"\n *ngIf=\"hasAnyVisibleColumn && hasAnyInVisibleColumn\"\n ></div>\n\n <div\n class=\"muted-text show-hide-table-label d-flex justify-content-between\"\n *ngIf=\"hasAnyInVisibleColumn\"\n >\n Hide in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"show_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"show_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <div class=\"list-group list-group-flush\">\n <ng-container *ngFor=\"let col of columns; trackBy: trackByField\">\n <div\n *ngIf=\"!col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, true)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Item End Here -->\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterColumns let-col=\"column\">\n <div\n @slideToggle\n *ngIf=\"!isFilterOpen && activeTopButton == 'filter-columns'\"\n (click)=\"$event.stopPropagation()\"\n class=\"action_dropdown_new_design actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"py-2 px-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Filter by\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 500px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : addFilterColumnInput : 'header';\n trackBy: trackByField\n \"\n >\n <div\n (click)=\"openFilter(col)\"\n *ngIf=\"\n col.is_visible &&\n !col?.query?.first_value &&\n !col?.query?._ids?.length && col.type !== 'image'\n \"\n class=\"list-group-item border-0 px-3 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"d-flex align-items-center justify-content-between gap-1 w-100\">\n <!-- <div style=\"margin-top: -3px\"></div> -->\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n <div class=\"d-flex align-items-center justify-content-between\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Dropdown -->\n <div\n @slideToggle\n *ngIf=\"isFilterOpen && selectedColumnForFilter.type == 'dropdown'\"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 my-2 border-below py-1 pb-2 mb-3 d-flex ps-1\">\n <span\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"mb-2 px-3\">\n <div\n class=\"col-12 position-relative border rounded d-flex align-items-center flex-wrap px-2 filter-serach-inpt\"\n >\n <span\n *ngFor=\"let selected of selectedFilterOptions\"\n class=\"badge d-flex align-items-center gap-1 me-1 mb-1 top-row-filter-dropdown\"\n >\n {{ selected?.value ? selected.value : selected }}\n <span\n (click)=\"toggleSelectionInFilter(selected)\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\n \"\n class=\"me-2\"\n ></span>\n </span>\n <input\n class=\"form-control form-control-sm border-0 flex-grow-1\"\n style=\"padding: 0\"\n [placeholder]=\"selectedFilterOptions?.length ? '' : 'Filter by'\"\n type=\"search\"\n [(ngModel)]=\"searchTextForFilterDropDown\"\n (keydown.backspace)=\"handleBackspace($event)\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 600px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of selectedColumnForFilter.column_dropdown_value\n | filter : searchTextForFilterDropDown : 'value';\n let i = index\n \"\n >\n <div\n class=\"list-group-item border-0 px-2 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"currentFilterSelectedIds.has(col.id || col._id || col)\"\n (change)=\"toggleSelectionInFilter(col)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ col?.value || col?.name || col }}\n </label>\n </div>\n </div>\n </ng-container>\n </div>\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\"\n >\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\n (click)=\"$event.stopPropagation(); resetFilterChanges()\"\n >\n <span>Cancel</span>\n </button>\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\"\n >\n <span style=\"margin-top: -2px\">Save</span>\n </button>\n </div>\n </div>\n\n <!-- For Text fields and number fields-->\n\n <div\n @slideToggle\n *ngIf=\"\n isFilterOpen &&\n (selectedColumnForFilter.type == 'string' ||\n selectedColumnForFilter.type == 'number' ||\n selectedColumnForFilter.type == 'date')\n \"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 210px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 border-below py-1 pb-2 d-flex ps-1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"col-12 position-relative p-2 text-filter\">\n <div class=\"mb-2\">\n <select\n class=\"form-select form-select-sm custom-select border\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n <div class=\"mb-2\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Enter first value\"\n type=\"search\"\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n [(ngModel)]=\"firstValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n <div>\n <div class=\"d-flex my-3 d-flex flex-row\" style=\"font-size: 14px\">\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalAnd\"\n name=\"logicalOperator\"\n value=\"and\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalAnd\"\n >AND</label\n >\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalOr\"\n name=\"logicalOperator\"\n value=\"or\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalOr\">OR</label>\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalNone\"\n name=\"logicalOperator\"\n value=\"none\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalNone\"\n >None</label\n >\n </div>\n </div>\n\n <ng-container *ngIf=\"condition !== 'none' && firstValue\">\n <div class=\"mb-2 mt-3\">\n <!-- Second condition select -->\n <select\n class=\"form-select form-select-sm border\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <div class=\"mb-2\">\n <!-- Second value input -->\n <input\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n class=\"form-control form-control-sm\"\n placeholder=\"Enter second value\"\n type=\"search\"\n [(ngModel)]=\"secondValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n </ng-container>\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\">\n <button\n [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); resetTextFilterChanges()\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"(currentFilterSelectedIds?.size === 0 && !firstValue) || (condition !== 'none' && !secondValue)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\">\n <span style=\"margin-top: -2px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Edit dropdown here -->\n<ng-template let-col>\n <div class=\"drop-down-edit\"></div>\n</ng-template>\n\n<ng-template\n #fullTextTemplate\n let-row=\"row\"\n let-col=\"col\"\n let-isArray=\"isArray\"\n>\n <div\n class=\"full-text-box\"\n (dblclick)=\"$event.stopPropagation(); $event.preventDefault()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n >\n <ng-container *ngIf=\"!isEditing(row, col)\">\n <div\n *ngIf=\"!isArray\"\n class=\"full-text-content\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n >\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </div>\n <div *ngIf=\"isArray\">\n <ul>\n <ng-container\n *ngFor=\"let item of getNestedValue(row, col.field); let i = index\"\n >\n <li *ngIf=\"i !== 0\">\n <ng-container>\n {{\n item?.department_name ||\n item?.roleName ||\n item?.full_name ||\n \"-\"\n }}\n </ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isEditing(row, col)\">\n <textarea\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n #textModel=\"ngModel\"\n rows=\"4\"\n #textAreadInput\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"textAreadInput.blur()\"\n autofocus\n class=\"form-control\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n ></textarea>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultImagePlaceholder let-row=\"row\" let-col=\"col\">\n <span\n class=\"px-2 d-flex w-100 cell-content image-placeholder\"\n [title]=\"row?.full_name || row?.name || 'N/A'\"\n >\n <ng-container\n *ngIf=\"\n row?.logo ||\n row?.assetImage ||\n row?.invoice?.invoice_image ||\n row?.invoice_image;\n else placeholder\n \"\n >\n <span\n (click)=\"fullscreenImage = row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\"\n class=\"pic\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n <img\n [width]=\"rowHeight - 12\"\n [height]=\"rowHeight - 12\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [src]=\"\n row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\n \"\n alt=\"icon\"\n class=\"option-icon\"\n loading=\"lazy\"\n />\n </span>\n </ng-container>\n <!-- <div\n class=\"fullscreen-overlay\"\n *ngIf=\"fullscreenImage\"\n (click)=\"fullscreenImage = null\"\n >\n <img [src]=\"fullscreenImage\" class=\"fullscreen-img\" />\n </div> -->\n\n <ng-template #placeholder>\n <span\n [ngClass]=\"getDynamicClass(row?.full_name || row?.name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n {{ getInitials(row?.full_name) }}\n </span>\n </ng-template>\n </span>\n</ng-template>\n\n<!-- Right Click Menue -->\n<div\n [class.invisible]=\"!positionedYet\"\n class=\"context-menu p-2\"\n *ngIf=\"actionHide && actions?.length\"\n [ngStyle]=\"{ 'top.px': yPos, 'left.px': xPos }\"\n [class.show]=\"isVisible\"\n appendTo=\"body\"\n>\n <ul>\n <li\n *ngFor=\"let action of actions\"\n class=\"rounded d-flex align-items-center\"\n (click)=\"onActionClick(action)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/' + action + '.svg'\"\n class=\"data-grid-svg-icon right-click-menu-icons me-2\"\n ></span>\n <span class=\"text-capitalize fw-500\">{{ action }}</span>\n </li>\n </ul>\n</div>\n\n<!-- Details Toggle from bottom -->\n\n<ng-template #nestedTableTemplate let-row>\n <div\n class=\"nested-table table table-sm w-100 mb-0 center-nested-table w-100\"\n style=\"table-layout: fixed !important\"\n #nestedTableContainer\n >\n <thead\n #nestedHeader\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n >\n <div\n cdkDropList\n [cdkDropListData]=\"row?.detail.columns\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"dropColumn($event, row)\"\n (cdkDropListSorted)=\"onNestedColSort($event, previewNestedCols)\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n class=\"d-flex tr border-below\"\n >\n <div\n *ngFor=\"let col of row.detail.columns; let i = index\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n class=\"px-4 th\"\n [attr.field]=\"col.field\"\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n cdkDrag\n >\n <div\n class=\"d-flex h-100 justify-content-between position-relative align-items-center\"\n >\n <div class=\"text-ellipsis\" (click)=\"sortNestedCol(col, row)\">\n {{ col.header }}\n </div>\n <div class=\"d-flex gap-2\">\n <span\n *ngIf=\"currentSubSortColumn == col.field\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (col?.order_by == 'desc'\n ? 'data-grid/icons/sort-desc.svg'\n : 'data-grid/icons/sort-asc.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center ms-2 start-50\"\n >\n </span>\n <!-- <div\n class=\"three-dots p-1\"\n (click)=\"openThreeDotsMenu($event, col)\"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div> -->\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"top: -50%; z-index: 21; left: 0\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: true,\n columns: row?.detail.columns\n }\n \"\n ></ng-container>\n </div>\n <div\n class=\"resize-handle\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"\n $event.preventDefault();\n onResizeColumn($event, col);\n $event.stopPropagation()\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n <ng-template cdkDragPreview>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </thead>\n <div\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"nestedTablerowHeight\"\n class=\"viewport\"\n [style.height.px]=\"\n (row?.detail?.result?.length < 5\n ? nestedTablerowHeight * row?.detail?.result?.length + 40\n : 300) + (hasHorizontalScroll ? -12 : 1)\n \"\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <div\n class=\"cursor-pointer border-below d-flex tr\"\n *cdkVirtualFor=\"let d of row?.detail?.result; trackBy: trackById\"\n [style.height.px]=\"nestedTablerowHeight\"\n [style.width.px]=\"nestedHeader?.offsetWidth\"\n [style.minWidth.px]=\"nestedHeader?.offsetWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n (contextmenu)=\"onRightClick($event, d)\"\n >\n <div\n class=\"px-4 py-0 td\"\n *ngFor=\"let col of previewNestedCols; let j = index\"\n [style.fontSize.px]=\"nestedTablerowFontsize\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n >\n <div\n [style.height.px]=\"nestedTablerowHeight - 1\"\n [style.max-width.px]=\"col?.width\"\n class=\"d-flex align-items-center\"\n >\n <!-- {{ d[col.field] || (col.is_amount ? 0 : \"-\") }} -->\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"\n col.type === 'date'\n ? (getNestedValue(d, col.field) | date : dateFormat)\n : getNestedValue(d, col.field) || '-'\n \"\n >\n <ng-container *ngIf=\"col.type !== 'image'\">\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{\n !isNestedValueArray(d, col.field)\n ? col.type === 'date'\n ? (isDate(getNestedValue(d, col.field))\n ? (getNestedValue(d, col.field) | date: dateFormat)\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n '-'))\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n (col.is_amount ? 0: '-'))\n : (getNestedValue(d, col.field)?.[0]?.department_name ||\n getNestedValue(d, col.field)?.[0]?.roleName || getNestedValue(d, col.field)?.[0]?.full_name ||\n '-')\n }}\n </ng-container>\n <ng-container *ngIf=\"false\">\n {{ getTotalAmount(col) }}\n </ng-container>\n <ng-container *ngIf=\"col.type == 'image'\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: {\n row: d,\n col: col,\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</ng-template>\n\n<ng-template #leftRightNestedPlaceholder let-row>\n <table\n class=\"nested-table table table-sm w-100 mb-0\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n [style.height.px]=\"\n gridType == 'Assets'\n ? (nestedTableContainer?.nativeElement?.offsetHeight ?? 0) + 12\n : (taskManagementContainer?.nativeElement?.offsetHeight ?? 0)\n \"\n >\n <!-- <div class=\"thead\">\n <div\n class=\"tr d-flex border-below\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"th\" *ngFor=\"let _ of [1, 2, 3, 4, 5]\"></div>\n </div>\n </div> -->\n <!-- <div class=\"tbody\">\n <div\n class=\"tr border-below\"\n [style.height.px]=\"nestedTablerowHeight\"\n *ngFor=\"let _ of row?.detail?.result\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"td\" *ngFor=\"let __ of [1, 2, 3, 4, 5]\" class=\"py-0\">\n <span\n [style.height.px]=\"nestedTablerowHeight\"\n [style.max-width.px]=\"nestedTablerowHeight\"\n ></span>\n </div>\n </div>\n </div> -->\n </table>\n</ng-template>\n\n<ng-template #taskManagementTemplate let-taskDetails=\"taskDetails\">\n <div\n class=\"p-4\"\n #taskManagementContainer\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n [style.fontFaimly]=\"fontFaimly\"\n >\n <div class=\"d-flex justify-content-between\">\n <div class=\"col-4\">\n <div class=\"item-title\">Description</div>\n <!-- <div class=\"item-content firstDiv\">\n {{ taskDetails.description }}\n </div> -->\n <p\n [style.fontSize]=\"bodyTextFontsSize\"\n class=\"item-content firstDiv taskDescription pe-4\"\n [innerHTML]=\"getSafeComment(taskDetails?.editor_description)\"\n (click)=\"openFullImage($event)\"\n ></p>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">Attachments</div>\n <h5 *ngIf=\"taskDetails?.attachments?.length == 0\">\n No Attachments found\n </h5>\n <div\n *ngIf=\"taskDetails?.attachments?.length\"\n class=\"item-content d-flex flex-wrap\"\n style=\"gap: 10px\"\n >\n <a\n *ngFor=\"let attachement of taskDetails?.attachments; let i = index\"\n class=\"symbol-label fs-2 fw-semibold text-success cursor-pointer\"\n >\n <span\n title=\"{{ taskDetails?.attachments_name[i] || 'Attachment' }}\"\n (click)=\"downloadAttchment(attachement)\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(attachement) +\n '.svg'\n \"\n >\n </span>\n </a>\n </div>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">\n Comments ({{ taskDetails?.comments?.length }})\n </div>\n <h5 *ngIf=\"taskDetails?.comments?.length == 0\">No Comments found</h5>\n <div *ngIf=\"taskDetails?.comments?.length\" class=\"item-content\">\n <div class=\"comment\" *ngFor=\"let comment of taskDetails.comments\">\n <div class=\"d-flex align-items-center pe-3\">\n <img\n class=\"pic image-input-wrapper\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n *ngIf=\"comment?.comment_by.logo\"\n src=\"{{ comment?.comment_by.logo }}\"\n alt=\"{{ comment.comment_by.full_name }}\"\n />\n <!-- <app-default-image-placeholder *ngIf=\"!comment?.comment_by.logo\" title=\"{{ comment.comment_by.full_name }}\" [name]=\"comment.comment_by.full_name\"></app-default-image-placeholder> -->\n <span\n *ngIf=\"!comment?.comment_by.logo\"\n [ngClass]=\"getDynamicClass(comment.comment_by.full_name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n title=\"{{ comment.comment_by.full_name }}\"\n >\n {{ getInitials(comment.comment_by.full_name) }}\n </span>\n </div>\n <div>\n <div class=\"comment-author fs-14px\">\n {{ comment?.comment_by.full_name }}\n </div>\n <div\n class=\"comment-content forCommentImg\"\n [innerHTML]=\"getSafeComment(comment.comment)\"\n ></div>\n <div class=\"comment-timestamp\">\n {{ comment.comment_date | date }}\n </div>\n <div class=\"comment-timestamp\">\n Replies: ({{ comment.replies.length }})\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";:host,:host *{font-family:Inter,sans-serif!important}*{scrollbar-width:auto;scrollbar-color:rgba(31,36,40,.1019607843)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#fff}*::-webkit-scrollbar-thumb{background-color:#c4b0c9;border-radius:10px;border:3px solid #ffffff}.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #E0E0E0;border-radius:12px;position:relative}.actions_dropdown_menu{width:180px!important}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header_figma_spacing{padding-right:8px!important}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:0 16px 0 0;font-weight:700;border-bottom:1px solid #E0E0E0;white-space:nowrap;min-width:80px;font-weight:600}.header-cell .filter-applied-on-text{color:#5d9cff!important}.filter-cell{padding:4px!important;display:flex;align-items:center;gap:8px;width:100%}.filter-cell .filter-applied{background-color:#bddef9}.border-right{border-right:1px solid #E0E0E0}.merged-grid{display:grid;grid-auto-rows:40px;border-bottom:1px solid #ccc}.span-two-rows{grid-row:span 2;display:flex;justify-content:space-between;align-items:center}.group-header{display:flex;justify-content:space-between;position:relative}.group-header-content{position:sticky;left:10px;overflow:hidden;text-overflow:ellipsis}.resize-handle{width:6px;cursor:e-resize;right:0;top:0;color:#00000026;margin-right:4px}:host ::ng-deep .resize-handle svg{stroke-width:2px}.group-header .resize-handle{top:25%}.h-100{height:100%}.data-grid-body{position:relative;overflow-y:auto;overflow-x:hidden}.cell{padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.data-grid-row{display:flex;width:100%;min-width:max-content;align-items:center;border-bottom:1px solid #E0E0E0}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#E0E0E0}.w-100{width:100%}.data-grid-header-wrapper{display:flex;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.data-grid-header{display:flex;position:relative;z-index:1}.left-pinned,.right-pinned{position:sticky;top:0}.right-pinned-header{position:absolute;right:0;border-left:1px solid #E0E0E0;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #E0E0E0}.center-scrollable{z-index:unset!important;overflow-x:auto;overflow-y:visible;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable::-webkit-scrollbar{display:none}.data-grid-body-wrapper{-webkit-user-select:none;user-select:none;display:flex}.center-scrollable-body{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable-body::-webkit-scrollbar{display:none}.left-pinned-body,.right-pinned-body{position:sticky;top:0;z-index:unset;background:#fff;scrollbar-width:none;-ms-overflow-style:none}.left-pinned-body::-webkit-scrollbar,.right-pinned-body::-webkit-scrollbar{display:none}.left-pinned-body{left:0}.border-end{border-right:1px solid #E0E0E0!important}.right-pinned-body{right:0;border-left:1px solid #E0E0E0}.fake-scroll-bar{height:14px;overflow:scroll;margin-bottom:10px}.text-ellipsis{overflow:hidden;text-overflow:ellipsis}.select-all-checkbox-cell{width:50px;display:flex;justify-content:center;align-items:center;height:100%}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #E0E0E0!important}.figmaIconSize.data-grid-svg-icon{width:24px!important;height:24px!important}.actions-dropdown .list-group .list-group-item{color:#1b1f22!important}.productSortingDropdownMenu{width:220px!important}.three-dots{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:6px;margin-right:4px;margin-left:2px;cursor:pointer}.three-dots:hover,.three-dots.threeDotActive{background-color:#0084ff1a;padding:5px}.rotated-180{transform:scaleY(-1)}.filter-icon-wrapper{min-height:22px;max-height:22px;min-width:22px;max-width:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;cursor:pointer;transition:background-color .3s ease}.filter-icon-wrapper:hover{background-color:#ccc}.column-menu,.filter-menu{box-shadow:0 0 16px #00000026;border-radius:4px}.column-menu{background:#fff;width:100%;width:200px;border:1px solid #ddd;box-shadow:0 0 12px #00000014;border:1px solid #E0E0E0;padding:4px 0;font-size:14px;position:fixed;border-radius:8px}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item.active-sort,.column-menu-item:hover{background-color:#0084ff1a}.pin-parent{position:relative;width:100%!important}.column-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #ddd;width:130px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;display:none;padding:4px 0;z-index:10;border-radius:4px}.pin-parent:hover .column-submenu{display:block}.filter-menu-container{position:fixed;width:210px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:12px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;z-index:1000;font-size:14px}.filter-menu-header{font-weight:600;margin-bottom:10px}.filter-dropdown-section{max-height:350px;overflow-y:auto}.dropdown-options{overflow-y:auto;scrollbar-width:thin;height:100%}.filter-text-section select,.filter-text-section input{width:100%}.filter-radio-inputs{width:14px!important;height:14px!important}.right-menu{border-left:1px solid #E0E0E0;font-size:14px}.border-start{border-left:1px solid #E0E0E0!important}.column-panel-item{font-size:.875rem;color:#333}.toggle-icon{cursor:pointer;transition:transform .2s ease}.toggle-icon.rotate{transform:rotate(90deg)}.grab-icon{cursor:grab;color:#6c757d}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}.pivot-mode{height:48px}.chevron-wrapper{width:30px;height:20px;cursor:pointer;border-radius:3px;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease;margin-right:8px}.chevron-wrapper:hover{background-color:#cac7c7}.chevron-wrapper i{font-size:14px}.column-panel-body{height:70%;overflow:auto;scrollbar-width:thin}.side-menue-text{transform:rotate(90deg);position:relative;font-weight:700;margin-top:40px}.columns-button{padding-top:20px;padding-bottom:35px;width:29px}.fake-scroll-content{height:12px}.fake-scrollbar{width:25px}.fake-scrollbar div{min-width:1px}.fake-horizintal-scrollbar div{min-height:1px}.side-filter-columns-wrapper{height:calc(100% - 25px)}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;z-index:1050}.custom-modal-overlay .moda-header{background-color:#f8f8f8}.custom-modal-content{background-color:#fff;border-radius:8px;min-width:300px;max-width:400px;box-shadow:0 5px 20px #0000004d}.overlay-scrollable{height:250px;overflow:auto}.footer-row{border-top:1px solid #E0E0E0;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:8px;overflow-x:auto;overflow-y:hidden;height:8px}.border-dashed{border:1px dashed #E0E0E0}.cdk-drag-preview{box-sizing:border-box!important;border-radius:4px!important;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f!important;background-color:#f3f4f5!important;border:1px solid #E0E0E0!important;z-index:9999!important}.data-grid-header-wrapper ::ng-deep .cdk-drag-placeholder{display:block!important;background:#fff!important;opacity:1!important}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)!important}.top-row-grouping-placeholder{display:flex;align-items:center;border-radius:12px;font-size:14px;padding-inline:6px;border:1px solid #E0E0E0}.top-row-grouping-placeholder .bi-x{cursor:pointer;color:#7a7a7a}.top-row-grouping-placeholder .bi-x:hover{color:#111}.right-pinned-body-wrapper{position:absolute;right:0}.actions-dropdown{position:absolute;right:200px;z-index:1050;background-color:#fff;border-radius:8px!important;cursor:default}.bg-fff{background-color:#fff}.actions-dropdown-setting{right:250px}.actions-dropdown.consumer_buttons{right:170px}.unfilfilled_dropdown_main{left:48px}.consumer_buttons .dropdown-menu .dropdown-item{height:32px!important}.actions-dropdown.unfilfilled_dropdown_main,.actions-dropdown.UnpaidDropdown{border:0!important}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{width:100%;display:flex!important;align-items:center!important;height:32px;max-width:335px}.global-search span{margin-top:0!important;top:8px}.global-search input{padding-left:28px;border-radius:8px!important}.global-search input:focus{outline:none!important;box-shadow:none!important}.active .top-icon ::ng-deep svg path{stroke:#007cf5!important}.dropdown-menu{background-color:#fff!important;border:1px solid #E0E0E0!important;border-radius:8px!important}.custom-menu{width:250px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu.setting_dropdown_menu{width:270px}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px;color:#1b1f22!important;font-weight:400}.custom-menu .dropdown-item:hover{background-color:#0084ff1a;border-radius:6px}.table-layout{right:0;background:#fff;border-radius:8px!important}.actions-dropdown,.table-layout,.custom-menu,.dropdown-menu{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;background-color:#fff}.action_dropdown_new_design{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 2px 12px #00000014}.preview-box{width:40px;height:10px;border-radius:3px;background-color:transparent;transition:background-color .2s ease-in-out}.btn-check:checked+label .preview-box{background-color:var(--bs-primary)}.preview-box{width:40px;height:10px;border-radius:3px;border:2px solid transparent;transition:border-color .2s ease-in-out}#small:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#small:checked+label .preview-box{background-color:#fff!important}#medium:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#medium:checked+label .preview-box{background-color:#fff!important}#large:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#large:checked+label .preview-box{background-color:#fff!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 6px!important;width:82px;border-radius:8px!important;color:#1b1f22!important;height:60px;margin-bottom:0!important}.show-hide-table-label{position:sticky;top:0;z-index:99;background:#fff}.cursor-grap{cursor:grabbing}.pagination-container{display:flex;align-items:center;gap:12px;font-size:14px;color:#1b1f22}.page-size select{padding:3px 6px;border:1px solid #E0E0E0;border-radius:6px;background:#fff;font-size:13px}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{padding:7px 11px;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2;border:0;color:#6a6b6d}.page-buttons button.active{font-weight:400;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#1b1f22}.page-buttons button:disabled{opacity:.5;cursor:not-allowed}.page-buttons span{padding:0 6px;color:#666}.page-size .separator{padding:0 8px;border-right:1px solid #E0E0E0}.page-size .separator .actions-dropdown{position:fixed;right:200px;z-index:1050;background-color:#fff}.fs-14px{font-size:14px}.fs-12px{font-size:12px!important}.save-preset-dropdown{background:#fff;color:#111!important;right:0;font-weight:400!important;text-align:left!important;max-width:250px!important;text-wrap:auto!important;top:14px;font-size:14px!important}.add-filter-button{height:28px;cursor:pointer;border-radius:4px}.table-layout .dropdown-item{border-radius:0!important;font-size:14px;padding-block:6px!important}.table-layout .dropdown-item:hover{background-color:transparent!important}.filter-serach-inpt{max-height:230px!important;overflow:auto;scrollbar-width:thin;padding-top:4px;background-color:#f7f7f7;border-color:#dedede;border-radius:8px}.filter-serach-inpt .badge{color:#007cf5!important;background-color:#e6f2ff!important;border-radius:8px!important;padding:8px!important;font-weight:500!important;font-size:12px!important;height:24px!important}.filter-serach-inpt .badge ::ng-deep svg{cursor:pointer}.filter-serach-inpt .badge ::ng-deep svg:hover path{stroke:#040081!important}.filter-serach-inpt input{background-color:#f7f7f7;padding:0;height:26px;margin-top:-5px}.text-filter select{border:0}.text-filter select option{font-size:14px;font-weight:500}.text-filter select:focus{border:0}.text-filter input:focus,.text-filter select:focus{box-shadow:none!important}.active-filters{background-color:#f7f7f7;white-space:nowrap;background:#f7f7f7;padding-inline:8px;height:28px;font-size:14px;font-weight:500;border-radius:8px;box-shadow:none}.active-filters .header-tag{white-space:nowrap;font-size:14px;font-weight:400;color:#1b1f22;background:#ebebeb}.filter-tags .active{background-color:#e6f2ff}.filter-tags .active .header-tag{color:#007cf5!important}.table-cell{cursor:pointer;width:100%}.table-cell input:focus{outline:0!important;border:0!important;width:100%!important;box-shadow:none!important}.active-for-editing{outline:2.5px solid #007cf5!important;border-radius:4px;border:0!important;width:100%!important}.active-cell{outline:none!important;box-shadow:inset 0 0 0 1.5px #007cf5}span[inlineSVG]{width:16px;height:16px;display:inline-block}.cell .dropdown-menu{min-width:unset!important}.cell .dropdown-menu .item{transition:background-color .3s ease;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.cell .dropdown-menu .item:hover{background-color:#f0f8ff}.cell .cell-editin-dropdown{scrollbar-width:thin!important;-webkit-user-select:none;user-select:none}.fw-semibold{font-weight:500!important}:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg,:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg path{stroke:#000!important}:host ::ng-deep .ascendingAppliedIcon svg{stroke:#006fd6}.fs-7{font-size:12px!important}.fs-8{font-size:10px!important}.all-filters-reset-button:hover{opacity:.7}.full-text-box{background:#fff;position:relative;display:flex;align-items:center;justify-content:center;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026}.full-text-content{border-radius:8px;max-height:70vh;overflow:auto;white-space:pre-wrap}.pic{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}.pic-comb2{background-color:#fbe7bf;color:#fd7f31}.pic-comb1{background-color:#d9ecbf;color:#65b500}.pic-comb4{background-color:#fdd3d7;color:#f64e60}.w-40px{width:40px}.h-40px{height:40px}.pic{border-radius:50%;overflow:hidden}.image-placeholder .pic{font-size:14px;font-weight:600;letter-spacing:.5px}.header-cell{font-weight:600}.header-cell,.cell{box-sizing:border-box}.transparent-border-right{border-right:1px solid transparent!important}.resizing-highlight{position:relative}.resizing-highlight:before{content:\"\";position:absolute;top:-1px;right:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right{position:relative}.resizing-highlight-right:before{content:\"\";position:absolute;top:-1px;left:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right:first-child{width:1px}.editable-header{border-bottom:1px dashed #666}.muted-text{color:#727272!important}.context-menu{position:fixed;display:none;background:#fff;border:1px solid #dcdcdc;box-shadow:#0000003d 0 3px 8px;z-index:1000;width:150px;border-radius:8px;font-weight:600}.context-menu.show{display:block}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px;cursor:pointer;color:#99a1b7}.context-menu li ::ng-deep svg{width:16px;height:16px;display:inline-block;color:#727272}.context-menu li ::ng-deep svg path{stroke:#727272}.context-menu li:hover{background-color:#f0f0f5!important}.invisible{visibility:hidden!important}.fw-500{font-weight:500!important}.taskbar{position:fixed;display:flex;justify-content:center;z-index:1000}.taskbar .action-btn{transition:opacity text-decoration .3s ease}.taskbar .action-btn:hover{text-decoration:underline;opacity:.8}.taskbar .delete{color:#ea0000}.selected-count,.action-btn,.dropdown-content a{font-weight:500;font-size:14px}.selected-rows-action-bar{background-color:#1a1a1a;color:#fff;padding:4px 24px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 -4px 12px #00000026}.selected-rows-action-bar .btn:active,.selected-rows-action-bar .btn:focus{outline:0!important;border:0!important;border-color:transparent!important}.selected-rows-action-bar .action-btn{color:#fff!important}.cell .dropdown-menu,.cell .form-select,.cell input{color:#000!important}.cell input::placeholder{color:#727272!important}.cell .badge{border-radius:4px!important;height:24px;align-items:center;width:-moz-fit-content;width:fit-content}.cell .badge-danger{color:#ea5353!important;border:1px solid #ea5353!important;background-color:#ff00000d!important}.cell .badge-success{background-color:#84ca8130!important;border:1.5px solid rgb(70,227,114)!important;color:#46e372!important}.cell .badge-warning{background-color:#fff3dc!important;color:orange!important;border:1px solid #ffa000!important}.cell .badge-info{color:#00bad1;background-color:#e8fbfd;border:1px solid #00bad1}.cell .badge-secondary{color:#6c757d;background-color:#f1f3f5;border:1px solid #6c757d}.header-tag ::ng-deep svg path{stroke:#727272!important}.cross-secondary:hover ::ng-deep svg path{stroke:#000!important}.disable-sorting{pointer-events:none;opacity:.5}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{background-color:transparent!important}input.is-invalid:focus{border:2.5px solid red!important;outline:none}.table-cell input.is-invalid:focus{border:2.5px solid red!important;outline-color:red!important;outline:none!important;box-shadow:none!important}.active-for-editing:has(input.is-invalid:focus){outline:none!important;box-shadow:none!important;border:0!important}.selected-cell,.row-selected{background-color:#c2e0fe}.first-row-selected{border-top:2px solid #2196f3!important}.last-row-selected{border-bottom:2px solid #2196f3!important}.left-selection-border{border-left:2px solid #2196f3!important}.s-no{font-size:14px;font-weight:500}.top-border{border-top:2px solid #2196f3!important}.bottom-border{border-bottom:2px solid #2196f3!important}.left-border{border-left:2px solid #2196f3!important}.border-left{border-left:1px solid #E0E0E0}.right-border{border-right:2px solid #2196f3!important}.top-left-corner{border-top-left-radius:4px}.top-right-corner{border-top-right-radius:4px}.bottom-left-corner{border-bottom-left-radius:4px}.bottom-right-corner{border-bottom-right-radius:4px}.flash-bg{animation:flashAnim 1000s ease}@keyframes flashAnim{0%{background-color:#48a2fc}50%{background-color:#c2e0fe}to{background-color:#c2e0fe}}.cut-flash-bg{animation:cut-flash .8s ease}@keyframes cut-flash{0%{background-color:#f006}50%{background-color:#f00c}to{background-color:#c2e0fe}}.accordion-details .center-section .table .tbody .tr:hover .td{background-color:#f0f8ff!important}.editing-dropdown-search-input input:focus{border:1px solid #86b7fe!important}.nested-table .thead{position:sticky;top:0}.dropdown-wrapper{position:relative;display:inline-block}.btn-icon{background:transparent;border:0;padding:.25rem .5rem;cursor:pointer}.custom-dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;list-style:none;margin:0;padding:.25rem 0;background:#fff!important;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 18px #00000014;border-radius:.35rem;z-index:1200}.custom-dropdown-menu .dropdown-item{display:block;width:100%;padding:.5rem 1rem;text-align:left;background:transparent;border:none}.custom-dropdown-menu .dropdown-item:hover{background:#00000008}.confirm-block{padding:0}.center-nested-table .tr:hover .td{background-color:#f0f8ff}.table ::ng-deep .cdk-drag-placeholder{background-color:#fff!important}.assets-pic{border-radius:8px!important}.fullscreen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}.fullscreen-img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 15px #00000080}.position-sticky{z-index:2}.viewport{display:block!important;overflow:visible!important}.nested-table ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:0!important}.nested-table ::ng-deep .cdk-virtual-scroll-viewport{overflow-x:hidden!important}.disabled-search-input{background-color:#f5f5f5;cursor:pointer!important}.right-click-menu-icons ::ng-deep svg path{stroke-width:2!important}.loader{animation:rotate 1s infinite;height:50px;width:50px}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#fff;box-shadow:30px 0 #ff3d00;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#ff3d00;box-shadow:30px 0 #fff}@keyframes rotate{0%{transform:rotate(0) scale(.8)}50%{transform:rotate(360deg) scale(1.2)}to{transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #ff3d00}50%{box-shadow:0 0 #ff3d00;margin-bottom:0;transform:translate(15px,15px)}to{box-shadow:30px 0 #ff3d00;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #fff}50%{box-shadow:0 0 #fff;margin-top:-20px;transform:translate(15px,15px)}to{box-shadow:30px 0 #fff;margin-top:0}}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{opacity:.7!important}.action-button{background-color:#6f61cf!important;color:#fff!important;border-radius:6px!important;font-weight:500!important;margin-top:-4px}.action-button:hover{background-color:#6a5fb3!important}.action-buttons-row .button{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;border-radius:6px;height:34px;padding:0 10px;white-space:nowrap;transition:max-width .4s ease,background-color .3s ease;max-width:40px;background-color:transparent;border:1px solid #6F61CF}.action-buttons-row .button .label-hidden{opacity:0;margin-left:8px;transition:opacity .3s ease;pointer-events:none;display:none}.action-buttons-row .button:hover{max-width:200px;background-color:#6f61cf}.action-buttons-row .button:hover .label-hidden{opacity:1;pointer-events:auto;margin-left:8px!important;display:block}.action-buttons-row ::ng-deep .button .svg-icon svg path{stroke:#6f61cf;transition:fill .3s ease,stroke .3s ease}.action-buttons-row ::ng-deep .button:hover .svg-icon svg path{stroke:#fff!important}::ng-deep .nav-tabs .nav-link{border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important}::ng-deep .nav-tabs .nav-link:hover,::ng-deep .nav-tabs .nav-link:focus{border:none!important;border-bottom:2px solid transparent!important;outline:none!important;background:transparent!important}::ng-deep .nav-tabs .nav-link.active{border:none!important;border-bottom:2px solid var(--bs-primary)!important;background:transparent!important;color:var(--bs-primary)!important}.open-top{top:-150%!important}.muted{color:#7a7a7a!important}.item-title{font-size:1.2em;font-weight:700;margin-bottom:10px}.item-image{width:100%;border-radius:10px}.comment{display:flex;align-items:center;margin-bottom:10px}.comment-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px}.comment-author{font-weight:700}.comment-content{font-size:.9em;line-height:1.4}.comment-timestamp{font-size:.8em;color:#888;margin-left:auto}.des_low{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:242px;display:block;text-transform:capitalize!important}.firstDiv{word-break:break-word;overflow-wrap:break-word;white-space:normal}.container{display:flex;flex-wrap:wrap;margin:20px;gap:20px;background-color:#fff;padding:20px;border-radius:10px}.item{width:calc(33.33% - 20px);background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px #0000001a}.forCommentImg{width:70px;border-radius:16px;margin:8px 0;cursor:pointer}.image-modal img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 4px 10px #00000080}.full-image-modal{position:fixed;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.full-image-modal .full-image{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 10px #fff3}.item-content{font-size:14px;line-height:1.5;max-height:220px;overflow-y:auto}.image-modal.full-image-modal{position:fixed;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:9999;overflow:hidden;cursor:zoom-out}.image-modal.full-image-modal img{border-radius:8px;box-shadow:0 4px 20px #0006;object-fit:contain;transition:transform .3s ease}.image-modal.full-image-modal img:hover{transform:scale(1.02)}::ng-deep .custom-overlay-wrapper .custom-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999}::ng-deep .custom-overlay-wrapper .custom-modal{background:#fff;border-radius:12px;box-shadow:0 8px 25px #0003;width:360px;max-width:90%;padding:24px;text-align:center;animation:fadeInScale .25s ease}::ng-deep .custom-overlay-wrapper .custom-modal-body .modal-message{font-size:16px;margin-bottom:20px;color:#333}::ng-deep .custom-overlay-wrapper .modal-actions{display:flex;justify-content:center;gap:12px}::ng-deep .custom-overlay-wrapper .modal-actions button{min-width:90px;padding:8px 14px;border-radius:6px;border:none;font-weight:500;cursor:pointer;transition:background-color .2s ease}::ng-deep .custom-overlay-wrapper .btn-confirm{background-color:#007bff;color:#fff}::ng-deep .custom-overlay-wrapper .btn-confirm:hover{background-color:#0069d9}::ng-deep .custom-overlay-wrapper .btn-cancel{background-color:#e4e4e4;color:#333}::ng-deep .custom-overlay-wrapper .btn-cancel:hover{background-color:#d6d6d6}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.clear-btn{background:linear-gradient(135deg,#f53545,#f53545);border:none;color:#fff;font-size:13px;padding:3px 6px;border-radius:20px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #ff5f6d66;position:relative;bottom:4px}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px #ff5f6d99;background:linear-gradient(135deg,#f53545,#f53545)}.clear-btn i{font-size:16px;vertical-align:middle}.cell-editin-dropdown .deopdown-item{width:100%!important;box-shadow:none!important;border-radius:4px;cursor:pointer;padding-block:8px!important}.cell-editin-dropdown .deopdown-item:hover{background-color:#f1f1f1}.card-outer{border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:16px;padding:16px;background-color:#fff}.consumerDropdownButton{height:32px;display:flex;align-items:center}a.grid-header-icon:hover{background:#e0e0e0;width:32px;height:32px;border-radius:8px;transition:none}a.grid-header-icon{width:32px;height:32px}.action-buttons-row.active a.grid-header-icon,a.grid-header-icon.show{background-color:#e0e0e0;border-radius:8px}.data-grid-svg-icon.setting_dropdown{width:32px!important;height:32px!important}.new_design_dropdown .dropdown_main_button{color:#6a6b6d;text-decoration:none}.new_design_dropdown ul{border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 0 12px #00000014!important}.new_design_dropdown ul li{color:#1b1f22!important;height:32px}.new_design_dropdown ul li:hover{background:#0084ff1a!important}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg{height:inherit;border-radius:6px;padding:6px 10px;color:#1b1f22!important;font-size:14px;font-weight:400}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg .new_old_filter{display:inline-block;width:24px;height:24px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg label,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.newest,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.oldest{padding-left:5px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg:hover{background-color:transparent!important}.new_design_dropdown ul li .action_dropdown{padding:6px 16px}.new_design_dropdown ul li.active-filter,.active-filter{background-color:#0084ff1a}.active-filter-all{background:#ebebeb!important}.unfilfilled_dropdown_menu.actions_dropdown_menu{width:210px!important}.filter_dropdown_main .dropdown-item,.actions-dropdown.unfilfilled_dropdown_main .dropdown-item{padding:0 9px!important}.actions-dropdown.UnpaidDropdown{left:150px!important}.new_design_dropdown.hide_arrow .dropdown-toggle:after{display:none}.new_design_dropdown.hide_arrow ul li a label{line-height:1}.dropdown_main_button{border-radius:8px;transition:none;padding:5px 10px;color:#6a6b6d;cursor:pointer}.dropdown_main_button:hover,.dropdown_main_button.show{background:#e0e0e0}.sorting_icon_input{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.sorting_dropdown .column-menu-item{padding:0 6px!important;color:#1b1f22!important;font-size:14px!important;font-weight:400!important}.greenBgHover{background:#0084ff1a!important;border-radius:6px!important}.cancel_btn_new{font-weight:400!important;font-size:14px!important;color:#1b1f22!important;border:none;box-shadow:none;background:transparent;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center}.primary_btn_new{font-weight:500!important;font-size:14px!important;color:#fff!important;background:#0084ff;border:none;box-shadow:none;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center;border-radius:6px}.dropdown_outer{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:8px;font-size:14px}.text_common_14px{font-size:14px;font-weight:400;color:#1b1f22}.text_common_16px{font-size:16px;font-weight:500;color:#1b1f22}.page_refresh{font-size:13px;font-weight:400;color:#6a6b6d}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i9.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i9.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i10.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CellRenderInitDirective, selector: "[cellRenderInit]", inputs: ["cellRenderInit", "rowData", "colData", "cellValue"], outputs: ["cellEvent"] }, { kind: "pipe", type: i6.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: FilterPipe, name: "filter" }], animations: [
|
|
6136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataGridComponent, selector: "data-grid", inputs: { rowAnimation: "rowAnimation", paginationConfig: "paginationConfig", dataSet: "dataSet", columns: "columns", rowHeight: "rowHeight", headerRowHeight: "headerRowHeight", showVerticalBorder: "showVerticalBorder", evenRowsBackgroundColor: "evenRowsBackgroundColor", oddRowsBackgroundColor: "oddRowsBackgroundColor", headerBackgroundColor: "headerBackgroundColor", checkboxesBackgroundColor: "checkboxesBackgroundColor", showColumnsGrouping: "showColumnsGrouping", rowHoverColor: "rowHoverColor", leftPinnedBackgroundColor: "leftPinnedBackgroundColor", bodyBackgroundColor: "bodyBackgroundColor", rightPinnedBackgroundColor: "rightPinnedBackgroundColor", sidemenuBackgroundColor: "sidemenuBackgroundColor", bodyTextColor: "bodyTextColor", headerTextColor: "headerTextColor", checkboxesColor: "checkboxesColor", headerTextFontsSize: "headerTextFontsSize", bodyTextFontsSize: "bodyTextFontsSize", headerFontWeight: "headerFontWeight", bodyFontWeight: "bodyFontWeight", checkedRowBackgroundColor: "checkedRowBackgroundColor", dropdownsBackgroundColor: "dropdownsBackgroundColor", footerRowBackgroundColor: "footerRowBackgroundColor", footerRowHeight: "footerRowHeight", topGroupedBadgesBackgroundColor: "topGroupedBadgesBackgroundColor", showRowsGrouping: "showRowsGrouping", showFilterRow: "showFilterRow", fontFaimly: "fontFaimly", showSideMenu: "showSideMenu", footerPadding: "footerPadding", topFilterRowHeight: "topFilterRowHeight", rowShadingEnabled: "rowShadingEnabled", showSerialNumber: "showSerialNumber", singleSpaAssetsPath: "singleSpaAssetsPath", filtersConfig: "filtersConfig", loading: "loading", verticalScrollbarWidth: "verticalScrollbarWidth", horizintalScrollbarWidth: "horizintalScrollbarWidth", showCellDetailsBox: "showCellDetailsBox", dateFormat: "dateFormat", tableSearch: "tableSearch", actions: "actions", config: "config", showTaskbar: "showTaskbar", tableName: "tableName", listingType: "listingType", checkboxState: "checkboxState", taskbarActions: "taskbarActions", sortingConfig: "sortingConfig", tableFilterViewId: "tableFilterViewId", selectedTableLayout: "selectedTableLayout", closeDropdown: "closeDropdown", globalSearchText: "globalSearchText", nestedTablerowFontsize: "nestedTablerowFontsize", nestedTableHeaderRowHeight: "nestedTableHeaderRowHeight", nestedTablerowHeight: "nestedTablerowHeight", gridType: "gridType", currencySymbol: "currencySymbol", currencyFormat: "currencyFormat", leftPinnedBoxshadow: "leftPinnedBoxshadow", rightPinnedBoxshadow: "rightPinnedBoxshadow", selectedRowsBackgroundColor: "selectedRowsBackgroundColor", nestedTableHeaderBackgroundColor: "nestedTableHeaderBackgroundColor", nestedTableRowBackgroundColor: "nestedTableRowBackgroundColor", tableView: "tableView", buttons: "buttons", keepMultipleExpandedDetails: "keepMultipleExpandedDetails", showTotalAmountRow: "showTotalAmountRow", enableGlobalSearch: "enableGlobalSearch", tableType: "tableType", enableExport: "enableExport", showFullScreenButton: "showFullScreenButton", enableCut: "enableCut", tabs: "tabs", showCheckboxes: "showCheckboxes", consumerFont: "consumerFont", defaultConfig: "defaultConfig", resetAllFilters: "resetAllFilters", pageSizeOptions: "pageSizeOptions", columnThreedotsMunuConfig: "columnThreedotsMunuConfig" }, outputs: { changeLayout: "changeLayout", customCellEvent: "customCellEvent", filterOptions: "filterOptions", genericEvent: "genericEvent", tablePresetConfig: "tablePresetConfig", sortingOrderOptions: "sortingOrderOptions", createUpdateConfigListing: "createUpdateConfigListing" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape($event)", "window:resize": "onResize($event)", "document:keydown": "onKeyDown($event)", "document:paste": "onPaste($event)" } }, viewQueries: [{ propertyName: "globalSearchInput", first: true, predicate: ["globalSearchInput"], descendants: true }, { propertyName: "cellText", first: true, predicate: ["cellText"], descendants: true }, { propertyName: "nestedHeader", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "dataGridContainer", first: true, predicate: ["dataGridContainer"], descendants: true }, { propertyName: "taskManagementContainer", first: true, predicate: ["taskManagementContainer"], descendants: true }, { propertyName: "nestedTableContainer", first: true, predicate: ["nestedTableContainer"], descendants: true }, { propertyName: "leftPinnedBody", first: true, predicate: ["leftPinnedBody"], descendants: true }, { propertyName: "centerPinnedBody", first: true, predicate: ["centerPinnedBody"], descendants: true }, { propertyName: "rightPinnedBody", first: true, predicate: ["rightPinnedBody"], descendants: true }, { propertyName: "leftPinnedHeader", first: true, predicate: ["leftPinnedHeader"], descendants: true }, { propertyName: "centerPinnedHeader", first: true, predicate: ["centerPinnedHeader"], descendants: true }, { propertyName: "rightPinnedHeader", first: true, predicate: ["rightPinnedHeader"], descendants: true }, { propertyName: "columnsGroupedBox", first: true, predicate: ["columnsGroupedBox"], descendants: true }, { propertyName: "centerFakeScrollbar", first: true, predicate: ["centerFakeScrollbar"], descendants: true }, { propertyName: "centerScroll", first: true, predicate: ["centerScroll"], descendants: true }, { propertyName: "mainScroll", first: true, predicate: ["mainScroll"], descendants: true }, { propertyName: "fakeScroll", first: true, predicate: ["fakeScroll"], descendants: true }, { propertyName: "horizintalFakeScroll", first: true, predicate: ["horizintalFakeScroll"], descendants: true }, { propertyName: "centerScrollableBody", first: true, predicate: ["centerScrollableBody"], descendants: true }, { propertyName: "filterMenueSearchInput", first: true, predicate: ["filterMenueSearchInput"], descendants: true }, { propertyName: "filterMenueTextchInput", first: true, predicate: ["filterMenueTextchInput"], descendants: true }, { propertyName: "textAreadInput", first: true, predicate: ["textAreadInput"], descendants: true }, { propertyName: "nestedTable", first: true, predicate: ["nestedTable"], descendants: true }, { propertyName: "fullscreenImageTemplate", first: true, predicate: ["fullscreenImageTemplate"], descendants: true }, { propertyName: "cellHosts", predicate: CellHostDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\">\n\n<div class=\"position-relative h-100 card-outer\">\n <div class=\"d-flex justify-content-between mb-3 align-items-center position-relative\">\n <div class=\"d-flex gap-1 table-right-top-actions\">\n <div class=\"nav nav-tabs\" *ngIf=\"false\">\n <div class=\"nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\n <span\n *ngFor=\"let tab of tabs; let i = index\"\n (click)=\"setActiveTab(tab)\"\n class=\"nav-link cursor-pointer\"\n [class.active]=\"activeTab == tab\"\n >\n {{ tab }}\n </span>\n </div>\n </div>\n <div class=\"new_design_dropdown hide_arrow\">\n <a href=\"JavaScript:void(0)\" (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \" [class.active-filter-all]=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button\">\n Default View\n </a>\n </div>\n <div>\n <!-- *ngIf=\"tableFilterViewId && hasAnyDefaultView()\" -->\n <ng-container >\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" (click)=\"toggleActions('unfulfilledDropdown')\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n Unfulfilled\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div>\n <!-- <div>\n <ng-container *ngIf=\"tableFilterViewId && hasAnyDefaultView()\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown\" (click)=\"toggleActions('UnpaidDropdown')\"\n [class.active]=\"activeTopButton === 'UnpaidDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center text-decoration-none dropdown_main_button\">\n Unpaid\n </a>\n <div *ngIf=\"activeTopButton === 'UnpaidDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons UnpaidDropdown\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unpaid_dropdown_menu\">\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\">\n </span>\n </div>\n <span>Test Type</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div> -->\n <div class=\"d-flex align-items-center table-right-top-actions\">\n <ng-container *ngIf=\"tableView | filter : searchTextPresetTable : 'name' as filteredList\">\n <div *ngFor=\"let list of filteredList | slice: 0:2;let i = index;\n trackBy: trackByTable\" class=\"dropdown_main_button position-relative d-flex align-items-center\" [class.active-filter-all]=\"activeIndex === list.id\" title=\"{{list.id}}\" (click)=\"selectFilter(list,list.id); openIndex = null\">\n {{list.name}}\n\n <!-- Show dropdown icon when this filter is active -->\n <ng-container *ngIf=\"activeIndex === list.id\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown ms-1\" \n [class.active]=\"activeTopButton === ('dropdown_' + list.id)\">\n <a href=\"JavaScript:void(0)\" \n (click)=\"$event.stopPropagation(); toggleActions('dropdown_' + list.id)\"\n class=\"d-flex align-items-baseline dropdown_icon_button text-decoration-none\" style=\"height: 16px;\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </a>\n \n <!-- Dropdown menu for this specific filter -->\n <div *ngIf=\"activeTopButton === ('dropdown_' + list.id)\" \n class=\"actions-dropdown mt-1 consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute; z-index: 1000;\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\" (click)=\"toggleActions('unfulfilledDropdown')\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 d-none consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex gap-1 align-items-center table-right-top-actions\">\n <div class=\"global-search position-relative\" [style.width.px]=\"350\">\n <span *ngIf=\"enableGlobalSearch\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon ms-2 mt-0 position-absolute icon\" style=\"top: 8px;\"\n ></span>\n <input #globalSearchInput\n *ngIf=\"enableGlobalSearch\"\n class=\"form-control\"\n placeholder=\"Search\"\n [(ngModel)]=\"tableSearch\"\n (keydown.enter)=\"onGlobalSearch()\"\n (input)=\"onSearchInput($event)\"\n type=\"search\"\n />\n </div>\n <!-- <ng-container *ngFor=\"let button of buttons\">\n <div\n class=\"d-flex align-items-center gap-2 action-buttons-row\"\n *ngIf=\"button?.has_permission\"\n >\n <a\n href=\"JavaScript:void(0)\"\n (click)=\"onActionButtonClick(button.name)\"\n class=\"button button-small btn border border-primary btn-active-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n >\n <span\n *ngIf=\"button.is_showIcon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/' + button.icon + '.svg'\n \"\n class=\"svg-icon svg-icon-2\"\n ></span>\n <span\n class=\"label-hidden text-white\"\n [class.ms-0]=\"button.is_showIcon\"\n >{{ button?.name }}</span\n >\n </a>\n </div>\n </ng-container> -->\n <div *ngIf=\"!showFilterRow\"\n class=\"cursor-pointer position-relative action-buttons-row\"\n (click)=\"toggleOpenFilter()\"\n [class.active]=\"showFilters\">\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\" class=\"svg-icon svg-icon-2 d-flex\"></span>\n </a>\n <span *ngIf=\"activeFilteredColumns?.length\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #0022ff;\n background-color: rgb(0, 60, 255);\n position: absolute;\n right: 8px;\n top: 6px;\n \"\n class=\"rounded-circle d-block\"\n ></span>\n </div>\n <div class=\"cursor-pointer d-none\"\n (click)=\"toggleActions('advance-filter')\"\n [class.active]=\"activeTopButton === 'advance-filter'\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/zoom-charge.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span>\n </div>\n\n <!-- filter dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('filterDropdownNew')\"\n [class.active]=\"activeTopButton === 'filterDropdownNew'\">\n <a href=\"JavaScript:void(0)\" class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'filterDropdownNew'\" class=\"actions-dropdown mt-1 consumer_buttons filter_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu checkboxes_sorting_dropdown\">\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productName\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productName\">\n Product Name\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"createdDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"createdDate\">\n Created Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"updatedDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"updatedDate\">\n Updated Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productType\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productType\">\n Product Type\n </label>\n </span>\n </a>\n <hr class=\"my-2\" style=\"border: 1px solid #E0E0E0;\">\n <div class=\"d-flex\" (click)=\"activeFilter('newest')\" [class.active-filter]=\"activeFilterType === 'newest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowupIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"mt-1 newest ps-2\">Oldest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'newest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\"\n ></span>\n </span>\n </a>\n </div>\n <div class=\"d-flex\" (click)=\"activeFilter('oldest')\" [class.active-filter]=\"activeFilterType === 'oldest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowdownIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"oldest ps-2\">Newest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'oldest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\">\n </span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n <!-- settings dropdown -->\n <div class=\"cursor-pointer action-buttons-row preset_dropdown_main position-relative\"\n (click)=\"toggleActions('setting')\"\n [class.active]=\"\n activeTopButton === 'setting' ||\n activeTopButton === 'table-layout' ||\n activeTopButton === 'table-presets' ||\n activeTopButton === 'show-hide-columns'\">\n <!-- <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span> -->\n\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'setting'\"\n class=\"actions-dropdown mt-1 actions-dropdown-setting\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu setting_dropdown_menu\">\n <!-- Table Layout -->\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggleActions('table-layout')\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/layoutIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown\"\n ></span>\n Table Layout</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n <!-- Table Presets -->\n <a (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center\"\n ></span>\n Table Presets</span\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n\n <!-- Columns -->\n <a *ngIf=\"!showSideMenu\" (click)=\"$event.stopPropagation(); toggleActions('show-hide-columns')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eyeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown\"\n ></span>\n Columns</span>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"muted-text\">{{ columnsCount }}</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </div>\n </a>\n\n <a (click)=\"autosizeAllColumns()\" class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resizeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown\"></span>\n <span>Autosize all columns</span>\n </span>\n <!-- <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div> -->\n </a>\n\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/multicellNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown\"></span>\n <span>Multi-cell tooltip mode</span>\n </span>\n <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch mb-0 mt-1\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div>\n </a>\n\n <div class=\"dropdown-divider\"></div>\n\n <!-- Filter -->\n <!-- <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"toggleOpenFilter(); activeTopButton = '';\"\n *ngIf=\"!showFilterRow\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Filter\n </a> -->\n\n <!-- Download -->\n <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('csv')\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n CSV Export\n </a>\n <a *ngIf=\"enableExport\"\n class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('xlsx')\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Excel Export\n </a>\n <!-- Font Family & Font Size -->\n <!-- <div class=\"px-2 pb-2 pt-2\">\n <div class=\"d-flex gap-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"fontFaimly\"\n (change)=\"onFontChange()\"\n >\n <option *ngFor=\"let font of fontFamilies\" [value]=\"font\">\n {{ font }}\n </option>\n </select>\n\n <select\n class=\"form-select form-select-sm\"\n (change)=\"onFontChange()\"\n [(ngModel)]=\"bodyTextFontsSize\"\n >\n <option *ngFor=\"let size of fontSizes\" [value]=\"size\">\n {{ size }}\n </option>\n </select>\n </div>\n </div> -->\n </div>\n </div>\n\n <!-- Table Layout -->\n\n <ng-container *ngIf=\"activeTopButton === 'table-layout'\">\n <div\n *ngTemplateOutlet=\"tableLayout\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'table-presets'\">\n <div\n *ngTemplateOutlet=\"tablePreset\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'show-hide-columns'\">\n <div\n *ngTemplateOutlet=\"showHideColumns\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n </div>\n <!-- action dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('actionsDropdown')\"\n [class.active]=\"activeTopButton === 'actionsDropdown'\" *ngIf=\"buttons.length > 1\">\n <button type=\"button\" class=\"primary_btn_new common_btn d-flex align-items-center justify-content-between consumerDropdownButton px-2\">\n <span class=\"me-1\">Actions</span>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down-white.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\"\n ></span>\n </button>\n <div *ngIf=\"activeTopButton === 'actionsDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu\">\n <ng-container *ngFor=\"let button of buttons\">\n <a class=\"dropdown-item py-0 px-3 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"onActionButtonClick(button.name)\">\n <span class=\"d-flex justify-content-between align-items-center\">\n \n <ng-container *ngIf=\"button?.has_permission\">\n <span>{{ button?.name }}</span>\n </ng-container>\n </span>\n </a>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- show single button -->\n <button class=\"btn btn-primary py-1 text_common_14px text-white\" type=\"button\" (click)=\"onActionButtonClick(buttons[0].name)\" *ngIf=\"buttons.length == 1\">{{ buttons[0]?.name }}</button>\n\n <div class=\"action-buttons-row\" *ngIf=\"showFullScreenButton\">\n <a\n *ngIf=\"!isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Minimise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/expend.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n <a\n *ngIf=\"isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Maximise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/minimize.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n </div>\n <div>\n <!-- Example single danger button -->\n\n <!-- <button\n type=\"button\"\n class=\"btn btn-primary btn-sm d-flex gap-2 action-button\"\n (click)=\"toggleActions('actions')\"\n >\n Action\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/Vector.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <div\n *ngIf=\"activeTopButton === 'actions'\"\n class=\"actions-dropdown mt-1\"\n >\n <div class=\"dropdown-menu show\">\n <a class=\"dropdown-item\" href=\"#\">Action</a>\n <a class=\"dropdown-item\" href=\"#\">Another action</a>\n <a class=\"dropdown-item\" href=\"#\">Something else here</a>\n <div class=\"dropdown-divider\"></div>\n <a class=\"dropdown-item\" href=\"#\">Separated link</a>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showFilters && !showFilterRow\"\n class=\"top-filter-row border-top py-2 d-flex justify-content-between align-items-center\"\n [style.height.px]=\"topFilterRowHeight\"\n >\n <!-- LEFT SIDE (Filter tags + Filter button) -->\n <div class=\"d-flex gap-2 align-items-center\">\n <ng-container>\n <div\n *ngFor=\"let col of activeFilteredColumns; trackBy: trackByField\"\n class=\"filter-tags\"\n >\n <div\n (click)=\"\n isActiveFilterOpen = true;\n activeTopButton = 'filter-columns';\n openFilter(col)\n \"\n class=\"d-flex justify-content-center align-items-center add-filter-button active-filters\"\n style=\"white-space: nowrap\"\n [class.active]=\"\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen &&\n activeTopButton == 'filter-columns'\n \"\n >\n <span class=\"header-tag mt-0 d-flex align-items-center left-side-pinned\">\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n {{ col.header }}: {{col.query.first_value || col.query?._ids[0]}}\n <span\n (click)=\"\n $event.stopPropagation(); removeColumnFilterFromColumn(col)\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterCrossNew.svg'\n \"\n class=\"data-grid-svg-icon cross-secondary ms-2\"\n ></span>\n </span>\n </div>\n\n <ng-container\n *ngIf=\"\n activeTopButton === 'filter-columns' &&\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen\n \"\n >\n <div\n *ngTemplateOutlet=\"filterColumns; context: { column: col }\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Filter Button -->\n <div class=\"add-filter-button-menu\">\n <div\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"d-flex justify-content-center align-items-center muted-text add-filter-button button-filter\"\n style=\"width: 70px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\n class=\"me-2 data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n Filter\n </div>\n\n <ng-container\n *ngIf=\"activeTopButton === 'filter-columns' && !isActiveFilterOpen\"\n >\n <div\n *ngTemplateOutlet=\"filterColumns\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT SIDE (Update + Reset) -->\n <div class=\"d-flex gap-3 align-items-center\">\n <div\n (click)=\"savePreset()\"\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!checkFilterChangesEffect()\"\n >\n Update View\n </div>\n\n <div\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!tableFilterViewId && activeFilteredColumns?.length\"\n (click)=\"clearAllFilters()\">\n Clear filters\n </div>\n </div>\n </div>\n\n <div\n [style.height]=\"\n showFilters ? 'calc(100% - ' + (topFilterRowHeight + footerRowHeight) + 'px)' : 'calc(100% - ' + footerRowHeight + 'px)'\n \"\n cdkDropListGroup\n class=\"data-grid-table-wrapper overflow-hidden\"\n #dataGridContainer\n [style.fontFamily]=\"fontFaimly\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n id=\"data-grid-main-container\"\n >\n <div\n *ngIf=\"showRowsGrouping\"\n [style.height.px]=\"headerRowHeight\"\n [cdkDropListData]=\"columns\"\n [style.backgroundColor]=\"\n topGroupedBadgesBackgroundColor || headerBackgroundColor\n \"\n cdkDropList\n (cdkDropListEntered)=\"enterToTopRowGrouping($event)\"\n (cdkDropListExited)=\"exitedFromTheTopRow($event)\"\n (cdkDropListDropped)=\"onDropTopGroup($event)\"\n [cdkDropListEnterPredicate]=\"canEnterToRowsGrouping\"\n id=\"rows-grouping-top-container\"\n class=\"border-below d-flex px-4 align-items-center\"\n >\n <div\n class=\"d-flex gap-2 align-items-center\"\n [style.color]=\"headerTextColor\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <div *ngIf=\"!draggingInGroupArea && !groupedColumns?.length\">\n Drag here to set row groups\n </div>\n <div\n cdkDropListOrientation=\"horizontal\"\n cdkDropList\n (cdkDropListDropped)=\"onGroupReorder($event)\"\n class=\"d-flex\"\n >\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'x'\"\n *ngFor=\"\n let child of groupedColumns;\n let i = index;\n trackBy: trackByField\n \"\n class=\"d-flex align-items-center\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n groupedColumns.length > 1 && i != groupedColumns.length - 1\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"d-flex overflow-hidden\"\n [style.height]=\"\n 'calc(100% - ' +\n (showRowsGrouping\n ? headerRowHeight + footerRowHeight\n : footerRowHeight) +\n 'px)'\n \"\n >\n <div\n class=\"h-100\"\n [style.width]=\"\n !showSideMenu\n ? '100%'\n : sideMenuVisible\n ? 'calc(100% - 280px)'\n : 'calc(100% - 30px)'\n \"\n >\n <div class=\"h-100 transition position-relative w-100\">\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- Data Grid Header starts here -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n\n <!-- [style.fontSize.px]=\"headerTextFontsSize\" -->\n <div\n class=\"data-grid-header-wrapper w-100\"\n [style.color]=\"headerTextColor\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.fontSize.px]=\"13\"\n [class.border-below]=\"!hasAnyVisibleColumn\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Left Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header left-pinned\"\n #leftPinnedHeader\n [class.border-right]=\"hasLeftPinnedColumns\">\n <div *ngIf=\"showSerialNumber\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n class=\"select-all-checkbox-cell border-below\"\n [style.width.px]=\"55\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n S.No\n </div>\n <div *ngIf=\"showCheckboxes\"\n class=\"select-all-checkbox-cell border-below\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [indeterminate]=\"isIndeterminateState(dataSet)\"\n [checked]=\"isAllSelected(dataSet)\"\n (change)=\"toggleSelectAll(dataSet)\"\n />\n </div>\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"d-flex\"\n cdkDropList\n id=\"left-pinned-header\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"leftPinnedColumns\"\n (cdkDropListEntered)=\"onDropListEnter($event, 'left')\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewLeftPinnedColumns')\n \"\n (cdkDropListDropped)=\"onDropGroup()\"\n style=\"min-width: 1px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of leftPinnedColumns;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewLeftPinnedColumns'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: ''\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngIf=\"col?.children?.length; else singleCol\"\n >\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Center Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header center-scrollable\"\n #centerPinnedHeader\n (scroll)=\"onCenterBodyScroll($event)\"\n id=\"center-pinned-header\"\n cdkDropList\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n [cdkDropListData]=\"centerColumns\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListSortingDisabled]=\"\n isDisableColumnGrouping && draggingInGroupArea\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'center')\"\n (cdkDropListSorted)=\"onSortGroup($event, 'previewCenterColumns')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n [style.maxWidth]=\"\n 'calc(100% - ' +\n (rightPinnedHeader.offsetWidth + leftPinnedHeader.offsetWidth) +\n 'px)'\n \"\n >\n <div\n *ngIf=\"groupedColumns?.length\"\n style=\"min-width: 200px\"\n class=\"h-100 align-items-center\"\n #columnsGroupedBox\n id=\"groupBoxHeaderDiv\"\n >\n <div\n class=\"d-flex w-100 justify-content-between align-items-center border-below\"\n [style.height.px]=\"\n showFilterRow ? headerRowHeight * 2 : headerRowHeight\n \"\n >\n <div class=\"ps-3\">Group</div>\n <div class=\"d-flex\">\n <div\n class=\"three-dots cursor-pointer\"\n (click)=\"\n openThreeDotsMenu($event, 'group');\n isThreeDotsFilterOpen = false\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroupBox($event)\n \"\n class=\"resize-handle\"\n style=\"margin-right: -2px\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n\n <div\n [style.height.px]=\"headerRowHeight\"\n class=\"border-below\"\n ></div>\n </div>\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"gridType === 'Assets' || gridType === 'Tasks'\"\n >\n </span>\n <div\n class=\"dragable-header\"\n (cdkDragStarted)=\"\n checkColumnGroupingStatus(col);\n dragStartOnGroup(col);\n onDragStarted(col)\n \"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of centerColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewCenterColumns'\n }\n \"\n >\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (draggingInGroupArea\n ? 'data-grid/icons/justify.svg'\n : 'data-grid/icons/arrows-move.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n <span\n *ngIf=\"isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'centerColumns'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && !isOutsideContainer\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container *ngIf=\"child?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container *ngIf=\"col?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Right Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n cdkDropList\n id=\"right-pinned-header\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n cdkDropListOrientation=\"horizontal\"\n class=\"data-grid-header right-pinned\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewRightPinnedColumns')\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'right')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n #rightPinnedHeader\n class=\"right-pinned-header d-flex\"\n style=\"min-width: 0.2px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of rightPinnedColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n pinnedRight: true,\n index: i,\n section: 'right'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'right'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <!-- Data Grid Body starts here -->\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <div\n class=\"h-100 d-flex justify-content-center align-items-center\"\n *ngIf=\"!dataSet?.length && !loading && !dataSetLoading\">\n <!-- <div\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/record-not-found.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></div> -->\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/no-data-image.svg'\"\n class=\"data-grid-svg-icon mb-3 d-flex justify-content-center align-items-center\">\n </span>\n <p class=\"text_common_16px mb-0\">No data available</p>\n <p class=\"page_refresh mb-0\">Try adjusting filters or refresh the page</p>\n </div>\n </div>\n\n <div\n class=\"position-absolute w-100 h-100 d-flex justify-content-center align-items-center loading-overlay\"\n *ngIf=\"loading || dataSetLoading\"\n style=\"\n z-index: 999;\n backdrop-filter: blur(1px);\n \"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div class=\"spinner-border text-primary\" role=\"status\">\n <!-- <span class=\"loader\"></span> -->\n <!-- <span class=\"visually-hidden\">Loading...</span> -->\n <!-- </div> -->\n </div>\n </div>\n\n <div\n class=\"data-grid-body-wrapper position-relative d-flex\"\n [style.height]=\"bodyWrapperHeight\"\n style=\"overflow-y: auto; overflow-x: hidden\"\n #mainScroll\n (scroll)=\"onMainScroll($event)\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n >\n <!-- LEFT PINNED -->\n <div\n [style.height.px]=\"\n !groupedColumns.length ? originalDataSet.length * rowHeight : 0\n \"\n ></div>\n <!-- [class.transparent-border-right]=\"!hasLeftPinnedColumns\" -->\n <div [class.h-100]=\"originalDataSet.length < 8\">\n <div\n class=\"data-grid-body left-pinned-body w-100\"\n style=\"overflow-y: hidden\"\n [class.border-right]=\"hasLeftPinnedColumns\"\n [class.transparent-border-right]=\"!hasLeftPinnedColumns\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"leftPinnedBackgroundColor\"\n [class.h-100]=\"originalDataSet.length < 8\"\n *ngIf=\"!loading && !dataSetLoading\"\n [@rowDynamic]=\"rowAnimation\"\n\n \n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewLeftPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n isLeft: true,\n section: 'left',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewLeftPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'left',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- CENTER -->\n <div\n class=\"h-100\"\n [style.width.px]=\"centerPinnedHeader.clientWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div\n class=\"data-grid-body center-scrollable\"\n [class.h-100]=\"originalDataSet.length < 8\"\n style=\"overflow-y: hidden; overflow-x: auto\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n #centerScrollableBody\n (scroll)=\"onCenterBodyScroll($event)\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n \n >\n <div [@rowDynamic]=\"rowAnimation\" *ngIf=\"!loading && !dataSetLoading\">\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewCenterColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'center',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewCenterColumns,\n isEven: false,\n isOdd: false,\n section: 'center',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT PINNED -->\n <div\n class=\"right-pinned-body-wrapper\"\n *ngIf=\"true\"\n [class.h-100]=\"originalDataSet.length < 8\"\n [style.maxWidth.px]=\"\n isScrollbarVisible\n ? rightPinnedHeader.offsetWidth - 15\n : rightPinnedHeader.offsetWidth\n \"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n [@rowDynamic]=\"rowAnimation\"\n >\n <div\n class=\"data-grid-body right-pinned-body w-100 h-100\"\n style=\"overflow-y: hidden\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.boxShadow]=\"rightPinnedBoxshadow\"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n *ngIf=\"!loading && !dataSetLoading && hasRightPinnedColumns\"\n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewRightPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'right',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewRightPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'right',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <div\n style=\"top: auto; left: auto\"\n (click)=\"\n $event.stopPropagation();\n fullscreenImage = null;\n cdr.detectChanges()\n \"\n [style.width.px]=\"dataGridContainer.offsetWidth\"\n [style.height.px]=\"\n dataGridContainer.offsetHeight - (footerRowHeight + 100)\n \"\n class=\"image-modal full-image-modal\"\n *ngIf=\"fullscreenImage\"\n >\n <img\n (click)=\"$event.stopPropagation()\"\n [src]=\"fullscreenImage\"\n alt=\"Fullscreen Image\"\n />\n </div>\n <div\n *ngIf=\"selectedRows.size > 0 && showTaskbar\"\n class=\"taskbar w-100\"\n [style.bottom.px]=\"85\"\n >\n <div class=\"selected-rows-action-bar\" [@slideUp]>\n <span class=\"selected-count\">\n {{ selectedRows.size }} selected of\n {{\n paginationConfig.totalResults ||\n config?.paginationParams?.totalItems\n }}\n Total\n </span>\n <div class=\"action-buttons d-flex align-items-center\">\n <ng-container\n *ngFor=\"let action of taskbarActions; let i = index\"\n >\n <ng-container *ngIf=\"action?.has_permission\">\n <span\n class=\"action-btn verified btn {{ action }}\"\n (click)=\"onVerifyClick(action?.actionName)\"\n >{{ action?.actionName }}</span\n >\n <span\n *ngIf=\"\n taskbarActions.length > 1 &&\n i !== taskbarActions.length - 1 &&\n taskbarActions[i + 1]?.has_permission\n \"\n class=\"\"\n >|</span\n >\n </ng-container>\n </ng-container>\n <button (click)=\"clearSelectionState(tableType);selectedRows.clear();\" class=\"clear-btn ms-2 mt-2\">\n <i class=\"bi bi-x-circle\"></i> Clear Selection\n </button>\n </div>\n </div>\n </div>\n </div>\n <!-- Vertical Fake scroll Bar -->\n <!-- <div\n (scroll)=\"onMainFakeScroll($event)\"\n class=\"fake-scrollbar fake-scrollbar-vertical d-none\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n [style.top.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n #fakeScroll\n [style.height]=\"bodyWrapperHeight\"\n style=\"\n overflow-y: auto;\n overflow-x: hidden;\n width: 17px;\n position: absolute;\n right: 0;\n background-color: f1f2f3;\n z-index: 10;\n \"\n >\n <div [style.height.px]=\"rowHeight * dataSetLength\"></div>\n </div> -->\n </div>\n\n <!-- Horizintal Fake Scrollbars -->\n <div\n class=\"d-flex justify-content-between\"\n *ngIf=\"hasScroll\"\n >\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"leftPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n (scroll)=\"onCenterBodyScroll($event)\"\n class=\"fake-horizintal-scrollbar\"\n #horizintalFakeScroll\n [style.width.px]=\"centerPinnedHeader.offsetWidth\"\n >\n <div [style.width.px]=\"centerPinnedHeader.scrollWidth - 10\"></div>\n </div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n </div>\n </div>\n\n <!-- Side Menu Implemented Here -->\n <div\n *ngIf=\"showSideMenu\"\n [style.width.px]=\"sideMenuVisible ? 280 : 30\"\n class=\"right-menu h-100\"\n [style.backgroundColor]=\"sidemenuBackgroundColor\"\n >\n <div class=\"h-100 d-flex flex-row-reverse\">\n <div\n style=\"width: 30px\"\n class=\"d-flex flex-column align-items-center cursor-pointer\"\n [class.border-start]=\"sideMenuVisible\"\n >\n <div\n (click)=\"toggleSideMenu('cols')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'cols' && sideMenuVisible\n \"\n [class.border-below]=\"sideMenuVisible\"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Columns</div>\n </div>\n\n <div\n (click)=\"toggleSideMenu('filtrs')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'filtrs' && sideMenuVisible\n \"\n [class.border-below]=\"\n sideMenuVisible && currentOpenedSideMenue == 'filtrs'\n \"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Filter</div>\n </div>\n </div>\n <div\n class=\"h-100\"\n *ngIf=\"sideMenuVisible\"\n [ngStyle]=\"{ width: sideMenuVisible ? '250px' : '' }\"\n >\n <div class=\"h-100\">\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'cols' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"columnPannel\"></ng-container>\n <!-- Column Items -->\n <div class=\"column-panel-body px-3\">\n <ng-container\n *ngFor=\"let col of columns; trackBy: trackByField\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n <hr />\n\n <div class=\"side-menu-row-groups\" style=\"height: 30%\">\n <ng-container\n *ngTemplateOutlet=\"sideMenuRowGroups\"\n ></ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'filtrs' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"sideFilters\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n [style.height.px]=\"footerRowHeight\"\n class=\"border-top d-flex align-items-center w-100\"\n [style.backgroundColor]=\"footerRowBackgroundColor\"\n >\n <!-- Rows: <span class=\"fw-500 ms-1\">{{ dataSet.length }}</span> -->\n\n <div class=\"pagination-container w-100 ps-3\"\n [style.height.px]=\"footerRowHeight\"\n [style.padding.px]=\"footerPadding\">\n <div class=\"page-size d-flex align-items-center\">\n <div class=\"d-flex align-items-center justify-content-between page_selection_dropdown\">\n <select\n [(ngModel)]=\"paginationConfig.limit\"\n (change)=\"onPageSizeChange()\">\n <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n {{ size }}\n </option>\n </select>\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-downIconNew.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\">\n </span>\n </div>\n <span class=\"separator\"> per page </span>\n </div>\n\n <div class=\"page-info\">\n \n {{ (paginationConfig.page - 1) * paginationConfig.limit + 1 }}-{{\n paginationConfig.page * paginationConfig.limit <\n paginationConfig.totalResults\n ? paginationConfig.page * paginationConfig.limit\n : paginationConfig.totalResults\n }}\n of\n {{ paginationConfig.totalResults }}\n results\n </div>\n\n <div class=\"page-buttons\">\n <button\n (click)=\"goToPage(paginationConfig.page - 1)\"\n [disabled]=\"paginationConfig.page === 1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-left.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n\n <ng-container *ngFor=\"let page of visiblePages\">\n <button\n *ngIf=\"page !== '...'\"\n (click)=\"goToPage(page)\"\n [class.active]=\"page === paginationConfig.page\"\n >\n {{ page }}\n </button>\n <span *ngIf=\"page === '...'\">...</span>\n </ng-container>\n\n <button\n (click)=\"goToPage(paginationConfig.page + 1)\"\n [disabled]=\"paginationConfig.page === paginationConfig.totalResults\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- Header Cell Template -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n\n<ng-template\n #headerCell\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"section\"\n let-calledFromNestedPlaceholder=\"calledFromNestedPlaceholder\"\n>\n <div>\n <!-- Group Header -->\n <ng-container *ngIf=\"col.children?.length > 0; else flatHeader\">\n <div cdkDroplistGroup class=\"group-column-wrapper\">\n <!-- Parent Header -->\n <div\n *ngIf=\"shouldTheGroupHeaderShow(col)\"\n class=\"header-cell group-header\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n [style.gridColumn]=\"'span ' + col.children.length\"\n [style.fontWeight]=\"headerFontWeight\"\n [class.flex-row-reverse]=\"pinnedRight\"\n [class.justify-content-end]=\"pinnedRight\"\n style=\"grid-row: 1\"\n >\n <div\n class=\"group-header-content\"\n [title]=\"col.header\"\n [class.ms-2]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(col.children)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroup($event, col, pinnedRight)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n\n <!-- Child Headers and Filters -->\n\n <div\n class=\"d-flex\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"col.children\"\n (cdkDropListSorted)=\"onChildDroplistSorted($event, sections)\"\n (cdkDropListDropped)=\"onChildDroplistDroped($event)\"\n [cdkDropListSortingDisabled]=\"false\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n >\n <div\n cdkDrag\n [cdkDragData]=\"child\"\n *ngFor=\"let child of col.children; let i = index\"\n >\n <!-- Child Header -->\n <ng-container *ngIf=\"child.is_visible && !child['isRowGrouped']\">\n <div\n cdkDragHandle\n class=\"header-cell one-row-header-cells cursor-pointer\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 2\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(child)\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header-test1\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100\"\n [class.editable-header]=\"child?.is_editable\"\n (click)=\"\n openThreeDotsMenu($event, child);\n openFilteronThreeDotsClick(child)\n \"\n >\n {{ child.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\"\n class=\"d-flex align-items-center\"\n *ngIf=\"child.pinned\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n class=\"three-dots p-1 zaid-test\"\n (click)=\"\n openThreeDotsMenu($event, child);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === child\"\n style=\"top: -50%; z-index: 21\"\n [style.left.px]=\"\n -(!child?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 0\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: child,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(child)\"\n (mousedown)=\"\n $event.stopPropagation();\n onResizeColumn($event, child)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"child.filterValue\"\n (ngModelChange)=\"onFilterChange(child)\"\n (paste)=\"onFilterChange(child); applyDropdownFilter()\"\n [readonly]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n [class.disabled-search-input]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n (click)=\"\n $event.stopPropagation();\n openFilterFromDisabledSearchedInput(child)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(child)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(child)\"\n [class.pe-none]=\"child?.type == 'image'\"\n ><span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(child)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell?.field == child?.field\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"\n child?.pinned ? 0 : -centerPinnedHeader.scrollLeft\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: child }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div\n *ngIf=\"\n !draggingInGroupArea ||\n (child.is_groupable && draggingInGroupArea)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div *ngIf=\"draggingInGroupArea && !child.is_groupable\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ban.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\" class=\"position-relative\">\n <div\n *ngTemplateOutlet=\"\n childHeaderPlaceholder;\n context: {\n $implicit: child,\n index: i,\n sections: sections,\n calledFromNestedPlaceholder: true,\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && child?.is_groupable\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron: false,\n pinnedRight: pinnedRight,\n sections: sections,\n index: i\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Flat Header || Single Header Cell-->\n <ng-template #flatHeader>\n <div\n class=\"group-column-wrapper\"\n *ngIf=\"col.is_visible && !col['isRowGrouped']\"\n >\n <!-- Full-height Header Cell (spans 2 rows visually) -->\n <div\n class=\"header-cell one-row-header-cells\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [class.add-column-spacing]=\"showVerticalBorder\"\n [class.border-right]=\"showVerticalBorder\"\n [style.min-height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\"\n [style.height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\n \"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 1 / span 2\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between w-100 align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header_figma_spacing\"\n [title]=\"col.header\"\n >\n <div\n class=\"text-ellipsis h-100 cursor-pointer\"\n [class.editable-header]=\"col?.is_editable\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(col)\"\n (click)=\"\n openThreeDotsMenu($event, col);\n openFilteronThreeDotsClick(col)\n \"\n >\n {{ col.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\"\n class=\"d-flex align-items-center three-dots\"\n *ngIf=\"col?.pinned\">\n <span (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex justify-content-center align-items-center pin_blue_icon\"\n ></span>\n </div>\n <!-- <div\n [class.me-2]=\"col.order_by\"\n class=\"d-flex align-items-center\"\n *ngIf=\"sortingConfig?.field == col.field\">\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortDesc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\"\n ></span>\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortAsc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\"\n ></span>\n </div> -->\n <div class=\"three-dots p-1 me-0\" [class.threeDotActive]=\"activeCol === col && clickedOnSortIcon\"\n (click)=\"openThreeDotsMenu($event, col, true);\"\n style=\"cursor: pointer\">\n <div *ngIf=\"sortingConfig?.field === col.field\" \n class=\"d-flex align-items-center\">\n \n <!-- Ascending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon ascendingAppliedIcon flex justify-content-center align-items-center cursor-pointer\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\">\n </span>\n\n <!-- Descending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center cursor-pointer rotated-180\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\">\n </span>\n </div>\n <span *ngIf=\"sortingConfig?.field !== col.field\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortIconGray.svg'\"\n class=\"data-grid-svg-icon figmaIconSize d-flex justify-content-center align-items-center\"\n (click)=\"openThreeDotsMenu($event, col, true)\">\n </span>\n </div>\n <div class=\"three-dots p-1 zaid-test1\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\" *ngIf=\"!col?.pinned\"\n (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown dropdown d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"z-index: 21\"\n [style.left.px]=\"\n -(!col?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 25\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n [class.w-100]=\"col.pinned == 'right'\"\n (dblclick)=\"autosizeColumn(col)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeColumn($event, col)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n (ngModelChange)=\"onFilterChange(col)\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n (paste)=\"onPasteInFilterRowSearch($event, col)\"\n (click)=\"\n $event.stopPropagation(); openFilterFromDisabledSearchedInput(col)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(col)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(col)\"\n [class.pe-none]=\"col?.type == 'image'\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(col)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"col?.pinned ? 0 : -centerPinnedHeader.scrollLeft\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- Body Cell Template -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n\n<ng-template\n #rowCell\n let-row\n let-columns=\"columns\"\n let-isEven=\"isEven\"\n let-isOdd=\"isOdd\"\n let-isLeftSection=\"isLeft\"\n let-section=\"section\"\n let-rowIndex=\"rowIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <!-- Check if row is a group -->\n <ng-container\n *ngTemplateOutlet=\"groupRowTemplate; context: { $implicit: row, depth: 0 }\"\n ></ng-container>\n <ng-template #groupRowTemplate let-row let-depth=\"depth\">\n <ng-container *ngIf=\"row.isGroup; else regularRow\">\n <!-- Group Header -->\n <div\n class=\"group-header-row d-flex align-items-center\"\n [style.height.px]=\"rowHeight\"\n [class.border-below]=\"section !== 'center'\"\n [style.width]=\"\n section === 'center'\n ? (centerScrollableBody?.scrollWidth ?? 0) + 'px'\n : '100%'\n \"\n >\n <div\n *ngIf=\"section == 'left'\"\n class=\"h-100 d-flex\"\n [style.width.px]=\"leftPinnedHeader.offsetWidth - 1\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n >\n <div\n *ngIf=\"showSerialNumber\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center h-100 border-right justify-content-end pe-2 s-no\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [style.width.px]=\"55\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) || \"\" }}\n </div>\n <div\n *ngIf=\"showCheckboxes\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center justify-content-center h-100 border-right\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.color]=\"checkboxesColor\"\n >\n <input\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"getGroupCheckedState(row) === true\"\n [indeterminate]=\"getGroupCheckedState(row) === undefined\"\n (change)=\"selectGroupRow($event, row)\"\n />\n\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'center'\"\n [style.width.px]=\"centerPinnedHeader.scrollWidth\"\n [style.minWidth.px]=\"centerPinnedHeader.scrollWidth\"\n class=\"d-flex align-items-center ps-2 h-100 border-below\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n [style.paddingLeft.px]=\"depth > 0 ? depth * 30 : 0\"\n >\n <span class=\"me-2 filter-icon-wrapper\" (click)=\"toggleExpand(row)\">\n <span\n class=\"data-grid-svg-icon align-items-center d-flex\"\n [inlineSVG]=\"\n row.isExpand\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <strong (click)=\"toggleExpand(row)\" class=\"cursor-pointer\">\n {{ row.groupValue }} ({{ countLeafRows(row) }})\n </strong>\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'right'\"\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n ></div>\n </div>\n\n <!-- Recursive Children -->\n <div class=\"group-children\" *ngIf=\"row.isExpand\" [@slideToggle]>\n <ng-container\n *ngFor=\"let child of row.children; let i = index; trackBy: trackById\"\n >\n <ng-container *ngIf=\"child.isGroup; else dataRow\">\n <!-- Recursive call for nested group -->\n <ng-container\n *ngTemplateOutlet=\"\n groupRowTemplate;\n context: { $implicit: child, depth: depth + 1 }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #dataRow>\n <!-- Regular data row -->\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: child,\n columns: columns,\n isEven: i % 2 === 0,\n isOdd: i % 2 !== 0,\n isLeft: isLeftSection,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n\n <!-- Regular row (not a group) -->\n <ng-template #regularRow>\n <div\n class=\"d-flex\"\n [style.height.px]=\"rowHeight\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n [class.selected-cell]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <span\n (click)=\"toggleDetailRowExpand(row)\"\n *ngIf=\"row?.detail?.result?.length || gridType === 'Tasks'\"\n class=\"data-grid-svg-icon filter-icon-wrapper\"\n [inlineSVG]=\"\n isDetailsExpanded(row)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <div\n [style.min-width.px]=\"\n section == 'center' && groupedColumns?.length ? groupBoxPadding : 0\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row h-100\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n ></div>\n <div\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n >\n <div\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below justify-content-end pe-2 s-no\"\n [style.width.px]=\"55\"\n *ngIf=\"isLeftSection && showSerialNumber\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) }}\n </div>\n <div\n [style.backgroundColor]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n ? selectedRowsBackgroundColor\n : checkboxesBackgroundColor\n \"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below left_checkbox_ailgnment\"\n *ngIf=\"isLeftSection && showCheckboxes\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"isRowSelected(row)\"\n (change)=\"toggleRowSelection(row)\"\n />\n </div>\n\n <!-- Render all columns -->\n <ng-container\n *ngFor=\"\n let col of columns;\n trackBy: trackByField;\n let colIndex = index\n \"\n >\n <ng-container *ngIf=\"col.children?.length > 0; else flatColumn\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n trackBy: trackByField;\n let subColIndex = index\n \"\n >\n <ng-container *ngIf=\"child?.is_visible && !child?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: child,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: subColIndex,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #flatColumn>\n <ng-container *ngIf=\"col?.is_visible && !col?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: col,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: null,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n </div>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'left' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'center' && isDetailsExpanded(row)\"\n class=\"accordion-details center-section\"\n style=\"\n max-height: 350px;\n overflow-y: hidden;\n overflow-x: auto;\n scrollbar-width: thin;\n \"\n #nestedTable\n [style.width]=\"\n hasRightPinnedColumns\n ? '100%'\n : hasVerticalScroll\n ? 'calc(100% - 12px)'\n : '100%'\n \"\n >\n <ng-container *ngIf=\"gridType == 'Assets'\">\n <ng-container\n *ngTemplateOutlet=\"nestedTableTemplate; context: { $implicit: row }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"gridType == 'Tasks'\">\n <ng-container\n *ngTemplateOutlet=\"\n taskManagementTemplate;\n context: { taskDetails: row }\n \"\n ></ng-container>\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'right' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- Actual Cell is Here -->\n<ng-template\n #cellTemplate\n let-col=\"col\"\n let-row=\"row\"\n let-section=\"section\"\n let-subColIndex=\"subColIndex\"\n let-rowIndex=\"rowIndex\"\n let-colIndex=\"colIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <div\n #cellContainer\n (click)=\"\n editingKey = ''; setActiveCell(row, col); collapseAllExpandedCells()\n \"\n [style.fontWeight]=\"bodyFontWeight\"\n [class.border-right]=\"showVerticalBorder\"\n class=\"cell overflow-visible position-relative data-grid-cell\"\n [class.add-column-spacing]=\"showVerticalBorder\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.fontSize.px]=\"bodyTextFontsSize\"\n [style.color]=\"bodyTextColor\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n [class.active-cell]=\"\n isActiveCell(row, col) && !isEditing(row, col) && selectedKeys.size == 1\n \"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, false, cellContainer)\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row?.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row?.__virtualIndex\"\n tabindex=\"-1\"\n (keydown.enter)=\"$event.preventDefault(); enableEdit(row, col)\"\n (mousedown)=\"\n startSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseenter)=\"\n extendSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"\n isSelected(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n section\n )\n \"\n [class.top-border]=\"\n isTopBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-border]=\"\n isBottomBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.left-border]=\"\n isLeftBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.right-border]=\"\n isRightBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-left-corner]=\"\n isTopLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-right-corner]=\"\n isTopRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-left-corner]=\"\n isBottomLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-right-corner]=\"\n isBottomRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n >\n <!-- (mousedown)=\"startSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseenter)=\"extendSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"isSelected(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field)\" -->\n <div\n class=\"table-cell\"\n [class.active-for-editing]=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n getNestedValue(row, col.field)?.length <= 50)\n \"\n >\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n (getNestedValue(row, col.field)?.length <= 50 &&\n !expandedCells.size));\n else viewMode\n \"\n >\n <ng-container [ngSwitch]=\"col.type\">\n <!-- Text Input -->\n <input\n [style.height.px]=\"rowHeight - 10\"\n *ngSwitchCase=\"'input'\"\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Number Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'number'\"\n #numberInput=\"ngModel\"\n #numberRef\n (keypress)=\"allowOnlyNumbers($event)\"\n type=\"number\"\n required\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n (keydown.enter)=\"numberRef.blur()\"\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': numberInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Date Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'date'\"\n type=\"date\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n #dateInput=\"ngModel\"\n [ngClass]=\"{\n 'is-invalid': dateInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Dropdown -->\n <!-- ng-select like dropdown -->\n <div\n *ngSwitchCase=\"'dropdown'\"\n class=\"dropdown w-100\"\n (blur)=\"disableEdit(row, col)\"\n >\n <!-- Trigger -->\n <button\n class=\"form-select form-select-sm text-start w-100 text-ellipsis\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-expanded=\"false\"\n [style.minHeight.px]=\"rowHeight - 10\"\n data-bs-display=\"static\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <ng-container>\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </ng-container>\n <ng-template #placeholder> Select options... </ng-template>\n </button>\n\n <!-- Menu -->\n <div\n class=\"dropdown-menu w-100 p-0 cell-editing-dropdown-menu rounded-3\"\n [class.show]=\"isEditing(row, col)\"\n >\n <!-- Search -->\n <div class=\"px-2 py-1 editing-dropdown-search-input\">\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"editinDropdownSearch\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </div>\n\n <!-- Options -->\n <!-- <div\n class=\"cell-editin-dropdown\"\n style=\"max-height: 200px; overflow: auto\"\n >\n <div\n (click)=\"\n setNestedValue(row, col, option, true); editingKey = null\n \"\n class=\"px-2 py-1 d-flex align-items-center deopdown-item\"\n *ngFor=\"\n let option of col.column_dropdown_value\n | filter : editinDropdownSearch: 'value'\n \"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + option.value || option\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport \n itemSize=\"35\" \n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"px-2 py-1 d-flex align-items-center dropdown-item\"\n *cdkVirtualFor=\"\n let option of col.column_dropdown_value \n | filter : editinDropdownSearch : 'value'\n \"\n (click)=\"setNestedValue(row, col, option, true); editingKey = null\"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + (option.value || option)\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n </div>\n </div>\n\n <input\n *ngSwitchCase=\"'email'\"\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #emailModel=\"ngModel\"\n #emailInput\n type=\"email\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$\"\n (blur)=\"disableEdit(row, col, emailModel)\"\n (keydown.enter)=\"\n emailModel.control.markAsTouched(); emailInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': emailModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <!-- Default fallback -->\n <input\n *ngSwitchDefault\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #textModel=\"ngModel\"\n #textInput\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"\n textModel.control.markAsTouched(); textInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </ng-container>\n </div>\n\n <!-- Display mode -->\n <ng-template #viewMode>\n <div\n class=\"d-flex justify-content-between align-items-center overflow-hidden\"\n [ngClass]=\"getCellClasses(col, getNestedValue(row, col.field))\"\n >\n <!-- Field icon (for Tasks grid) -->\n <ng-container\n *ngIf=\"gridType === 'Tasks' && iconMap[col.field] && !isTotalRow\"\n >\n <span\n class=\"cursor-pointer me-2\"\n (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n [inlineSVG]=\"iconMap[col.field](row, col)\"\n ></span>\n </ng-container>\n\n <!-- \u2705 Custom cell renderer support -->\n <ng-container *ngIf=\"col.cellRenderer; else defaultCell\">\n <ng-container\n [cellRenderInit]=\"col.cellRenderer\"\n [rowData]=\"row\"\n [colData]=\"col\"\n [cellValue]=\"getNestedValue(row, col?.field)\"\n (cellEvent)=\"onCellEvent($event)\"\n >\n </ng-container>\n </ng-container>\n\n <!-- \uD83E\uDDFE Default text-based cell rendering -->\n <ng-template #defaultCell>\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"getCellTitle(row, col)\"\n >\n <!-- Normal cell -->\n <ng-container\n *ngIf=\"\n col.type !== 'image' &&\n col.field != 'image' &&\n col.field != 'invoice.invoice_image' &&\n !isTotalRow\n \"\n >\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{getCellTitle(row, col)}}\n </ng-container>\n\n <!-- Total row -->\n <ng-container *ngIf=\"isTotalRow\">\n {{ getTotalAmount(col) }}\n </ng-container>\n\n <!-- Invoice Image -->\n <ng-container *ngIf=\"col.field == 'invoice.invoice_image'\">\n <div style=\"display: flex; align-items: center; zoom: 0.7\">\n <span\n title=\"{{ getNestedValue(row, col.field) || 'Attachment' }}\"\n (click)=\"downloadAttchment(getNestedValue(row, col.field))\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(getNestedValue(row, col.field)) +\n '.svg'\n \"\n ></span>\n </div>\n </ng-container>\n\n <!-- Image cell -->\n <ng-container *ngIf=\"col.type == 'image' && !isTotalRow\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: { row: row, col: col }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <span\n *ngIf=\"\n (!col?.cellRenderer && showCellDetailsBox &&\n getNestedValue(row, col.field)?.length > 50 && col.type !== 'image') ||\n (isNestedValueArray(row, col.field) &&\n getNestedValue(row, col.field)?.length > 1)\n \"\n class=\"toggle-icon data-grid-svg-icon ms-2 cursor-pointer\"\n [inlineSVG]=\"\n isExpanded(row, col)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"\n $event.stopPropagation();\n toggleExpandOfLongCellText(row, col, columns, true)\n \"\n (dblclick)=\"$event.preventDefault(); $event.stopPropagation()\"\n ></span>\n </ng-template>\n <!-- Expand / Collapse icon -->\n </div>\n\n <!-- Expanded text -->\n <div\n class=\"position-absolute w-100 expanded-box\"\n *ngIf=\"isExpanded(row, col)\"\n [style.zIndex]=\"getZIndex(row, col)\"\n style=\"top: 100%; left: 0\"\n [attr.id]=\"(row.id || row._id) + '-' + (col.id || col._id)\"\n [class.invisible]=\"!showDetailsBox\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n fullTextTemplate;\n context: {\n row: row,\n col: col,\n isArray: isNestedValueArray(row, col.field)\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n</ng-template>\n\n<!-- Headers Action List On clicking three dots -->\n\n<ng-template\n #columnMenu\n let-col=\"col\"\n let-isNestedTable=\"isNestedTable\"\n let-columns=\"columns\"\n let-section=\"section\"\n>\n <div\n class=\"column-menu three-dots-col-menu\"\n [class.visually-hidden]=\"isMenueHidden\"\n *ngIf=\"activeCol && !isThreeDotsFilterOpen\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n [style.color]=\"headerTextColor\"\n >\n <!-- Sort Ascending -->\n <ng-container *ngIf=\"clickedOnSortIcon\">\n <div class=\"sorting_dropdown\" [class.disable-sorting]=\"!col.is_sortable\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span> -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showAscending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'desc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\"\n (click)=\"sortAsc(activeCol);\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Ascending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <!-- Sort Descending -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showDescending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'asc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\"\n (click)=\"sortDesc(activeCol);\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon1.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Descending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"\n sortingConfig?.field === col.field &&\n (sortingConfig?.order_by === 'asc' ||\n sortingConfig?.order_by === 'desc')\n \"\n class=\"column-menu-item\"\n (click)=\"resetSort(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resetSortIconNew.svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Reset Sort\n </div>\n </div>\n </ng-container>\n <!-- <div class=\"py-2 border-below three-dots-filter\">\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showFilter\"\n class=\"column-menu-item three-dots-filter\"\n (click)=\"openFilteronThreeDotsClick(col)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Filter\n </div>\n </div> -->\n\n <ng-container *ngIf=\"!clickedOnSortIcon\">\n <div class=\"sorting_dropdown\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span> -->\n \n <!-- *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"col?.pinned == 'left'\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'left',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinLeftIconNew.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Left\n <span *ngIf=\"col?.pinned == 'left'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\n \" -->\n <div [class.active-sort]=\"col?.pinned == 'right'\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'right',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinRightIconNew.svg'\"\n class=\"data-grid-svg-icon data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Right\n <span *ngIf=\"col?.pinned == 'right'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"col?.pinned\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n null,\n isNestedTable,\n columns\n )\n \"\n >\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown d-flex align-items-center justify-content-center\"\n ></span\n >Unpin\n </div>\n </div>\n </ng-container>\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeThisColumn\"\n class=\"column-menu-item\"\n (click)=\"autosizeColumn(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-expand-vertical.svg'\n \"\n class=\"me-2\"\n ></span>\n Autosize This Column\n </div> -->\n\n <!-- Autosize All Columns -->\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeAllColumns\"\n class=\"column-menu-item\"\n (click)=\"autosizeAllColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-angle-expand.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Autosize All Columns\n </div> -->\n\n <!-- Group By -->\n <div\n *ngIf=\"showRowsGrouping\"\n class=\"column-menu-item\"\n (click)=\"groupBy(activeCol)\"\n [class.disable-sorting]=\"!col.is_groupable\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/diagram-3.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Group by {{ col.header }}\n </div>\n\n <!-- Choose Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showChoseColumns\"\n class=\"column-menu-item\"\n (click)=\"chooseColumns()\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Choose Columns\n </div>\n\n <!-- Reset Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showResetColumns\"\n class=\"column-menu-item\"\n (click)=\"resetColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Reset Columns\n </div>\n </div>\n <div\n @slideToggle\n *ngIf=\"isThreeDotsFilterOpen\"\n class=\"three-dots-col-menu position-relative\"\n [style.right.px]=\"section == 'right' ? null : col.width - 45\"\n [class.visually-hidden]=\"isMenueHidden\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n</ng-template>\n\n<!-- Filter Menue -->\n<ng-template #filterMenu let-col=\"col\">\n <div\n class=\"filter-menu-container filter-menu dropdown_outer\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n >\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"filter-dropdown-section p-1\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n\n <div class=\"form-check mb-1 mt-2 ps-4 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"isAllSideFilterOptionsSelected(col)\"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- <div class=\"dropdown-options ps-1\">\n <div\n class=\"form-check mb-1\"\n *ngFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById;\n let i = index\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"filter-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option?.id ?? option?._id ?? option\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n\n <label\n class=\"form-check-label fw-semibold\"\n [for]=\"option?.id ?? option?._id ?? option\"\n >\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"firstValue\"\n #filterMenueTextchInput\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n\n <div class=\"form-group mb-3 d-flex flex-row\">\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <div @slideToggle *ngIf=\"firstValue && condition != 'none'\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"secondValue\"\n />\n </div>\n </div>\n </ng-template>\n\n <!-- Actions -->\n <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"primary_btn_new common_btn flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"applyDropdownFilter()\"\n >\n Apply\n </div>\n <div\n class=\"cancel_btn_new common_btn d-flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Side Menue -->\n\n<!-- Column Pannel / Pivot Mode / Searching -->\n\n<ng-template #columnPannel>\n <div class=\"column-panel-header\">\n <!-- Pivot Toggle -->\n <div\n class=\"form-check form-switch d-flex align-items-center mb-2 pivot-mode px-5 ms-2 d-none\"\n >\n <input\n class=\"form-check-input me-2\"\n type=\"checkbox\"\n id=\"pivotToggle\"\n [(ngModel)]=\"pivotMode\"\n />\n <label class=\"form-check-label\" for=\"pivotToggle\">Pivot Mode</label>\n </div>\n\n <!-- Select All & Search -->\n <div class=\"d-flex align-items-center mb-2 px-3 mt-3\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n\n <!-- Separator -->\n <hr class=\"my-2\" />\n </div>\n</ng-template>\n\n<!-- Right Columns Menue -->\n\n<!-- Column Panel Item Template -->\n<ng-template #columnPanelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div class=\"column-group d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expanded\"\n (click)=\"col.expanded = !col.expanded\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [id]=\"'group_' + col.header\"\n [checked]=\"isColumnVisible(col)\"\n (change)=\"toggleGroupVisibility(col)\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'group_' + col.header\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n <div *ngIf=\"col.expanded\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"me-2\" style=\"width: 1.5rem\"></span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [(ngModel)]=\"col.is_visible\"\n [id]=\"'col_' + col.field\"\n (change)=\"onSideMenuColumnsVisibilityChange()\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'col_' + col.field\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Columns Side Filter -->\n<ng-template #sideFilters>\n <div class=\"py-3 px-2 pe-3 h-100\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n filterAccordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : filterAccordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllFilterAccordions()\"\n ></span>\n </span>\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n <div\n class=\"overflow-auto side-filter-columns-wrapper\"\n style=\"height: calc(100% - 70px); scrollbar-width: thin\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : columnSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterPannelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div\n class=\"column-group d-flex align-items-center mb-2\"\n *ngIf=\"col.type !== 'image'\"\n >\n <!-- Chevron toggle -->\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n ></span>\n </span>\n\n <!-- Group label toggle -->\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"fw-bold text-truncate\"\n >{{ col.header }}\n <span\n class=\"text-primary ms-1\"\n *ngIf=\"col?.query?._ids?.length || col?.query?._first_value\"\n >*</span\n >\n </span>\n </label>\n </div>\n\n <!-- Children columns -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\" *ngIf=\"col.type !== 'image'\">\n <span\n class=\"me-2 filter-icon-wrapper me-2\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n ></span>\n </span>\n\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"text-truncate fw-bold\">{{ col.header }}</span>\n </label>\n </div>\n\n <!-- Show filter when expanded -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4 pe-3\">\n <ng-container\n *ngTemplateOutlet=\"sideNestedFilter; context: { col: col }\"\n ></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Side Nested Filters -->\n<ng-template #sideNestedFilter let-col=\"col\">\n <div class=\"\">\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"p-1\">\n <!-- Search -->\n <input\n type=\"text\"\n class=\"form-control form-control-sm mb-2\"\n placeholder=\"Search...\"\n [(ngModel)]=\"sideNestedFilterSearch\"\n />\n\n <!-- Select All -->\n <div class=\"form-check mb-1 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"\n col.query?._ids?.length == col?.column_dropdown_value?.length\n \"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- Options -->\n <!-- <div class=\"dropdown-options\">\n <div\n class=\"form-check mb-1 ms-1\"\n *ngFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n\n <!-- Actions -->\n <!-- <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\"\n style=\"height: 22px;\"\n (click)=\"applySideFilter(col)\"\n >\n Apply\n </div>\n <div\n class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" \n style=\"height: 22px;\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div> -->\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col.query.first_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"col!.query!.first_value\"\n />\n\n <div\n class=\"form-group mb-3 d-flex flex-row muted\"\n style=\"font-size: 14px\"\n >\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n />\n <label\n class=\"nnonem-check-label mb-0 mt-1\"\n for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <ng-container\n *ngIf=\"col?.query?.first_value && col?.query?.condition !== 'none'\"\n >\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col!.query.second_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"col!.query.second_value\"\n />\n </ng-container>\n <!-- <div class=\"d-flex gap-2\">\n <div class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">apply</div>\n <div class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">reset</div>\n\n </div> -->\n </div>\n </ng-template>\n <div\n class=\"d-flex justify-content-center gap-2 border-top\"\n style=\"height: 38px\">\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); removeSideFilter(col)\">\n <span>Clear</span>\n </button>\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applySideFilter(col)\"\n [class.disabled]=\"(col?.query.condition !== 'none' && !col?.query?.second_value)\"\n [class.pe-none]=\"(col!?.query.condition !== 'none' && !col?.query?.second_value)\"\n >\n <span style=\"margin-top: -1px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Centr Overlay for showing the chose columns -->\n\n<div *ngIf=\"showColumnPanel\" class=\"custom-modal-overlay\">\n <div\n class=\"custom-modal-content\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"modalColumnPannel\"></ng-container>\n </div>\n</div>\n\n<!-- The existing ng-template you provided -->\n<ng-template #modalColumnPannel>\n <div class=\"column-panel-header\">\n <div\n class=\"d-flex justify-content-between align-items-center px-2 ps-3 rounded-top-2 moda-header\"\n [style.height.px]=\"48\"\n >\n Choose Columns\n <span class=\"filter-icon-wrapper\" (click)=\"closeModalColumnPanel()\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n </div>\n <hr class=\"my-0\" />\n <div>\n <div class=\"d-flex align-items-center px-2 pe-3\" [style.height.px]=\"48\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"choseColumnsSearch\"\n />\n </div>\n\n <hr class=\"mt-0 mb-1\" />\n <div class=\"px-2 overlay-scrollable\">\n <ng-container\n *ngFor=\"\n let col of columns | filter : choseColumnsSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #sideMenuRowGroups>\n <div class=\"d-flex flex-column h-100 d-none\">\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Row Groups</span>\n </div>\n <div class=\"h-50\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here to set row Groups\n </div>\n </div>\n </div>\n\n <hr class=\"mt-4\" />\n\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Values</span>\n </div>\n <div class=\"h-50 d-flex\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here aggregate\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- Drag Preview Template -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<ng-template #dragPreview let-col>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n</ng-template>\n\n<!-- Drag Placeholder Template -->\n<ng-template\n #dragPlaceholder\n let-col\n let-i=\"index\"\n let-section=\"section\"\n let-draggingInGroupArea=\"draggingInGroupArea\"\n>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: { $implicit: col, index: i, section: section }\n \"\n ></div>\n </div>\n <div *ngIf=\"draggingInGroupArea\">New Placeholder</div>\n</ng-template>\n\n<!-- Top Group Row Placeholder -->\n<ng-template #topGroupingRowPlaceholder let-col let-showChevron=\"showChevron\">\n <div class=\"d-flex gap-2\">\n <div\n class=\"d-flex gap-2 top-row-grouping-placeholder\"\n [style.backgroundColor]=\"topGroupedBadgesBackgroundColor\"\n >\n <span\n cdkDragHandle\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>{{ col.header }}</span>\n <span\n (click)=\"ungroupColumn(col)\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"cursor-pointer data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n <div *ngIf=\"showChevron\" style=\"opacity: 0.6; font-size: 14px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n</ng-template>\n\n<ng-template\n #childHeaderPlaceholder\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"sections\"\n>\n <div\n class=\"header-cell one-row-header-cells\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n >\n <div class=\"d-flex justify-content-between h-100 align-items-center w-100\">\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div class=\"three-dots p-1\" style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <div class=\"resize-handle resize-test\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"activeFilterCell = col; activeCol = null\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 10; left: 0\"\n ></div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #tableLayout>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 320px\"\n >\n <div class=\"d-flex align-items-center mb-3\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Layout</h6>\n </div>\n <hr class=\"my-2\" />\n <div class=\"w-100 mb-3 d-flex\" role=\"group\">\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"small\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'small')\"\n [checked]=\"selectedTableLayout == 'small'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"small\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'small' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 8px\"></div>\n Small\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"medium\"\n autocomplete=\"off\"\n [checked]=\"selectedTableLayout == 'medium'\"\n (change)=\"changeTableLayout($event, 'medium')\"\n />\n <label\n class=\"border mx-3 d-flex flex-column align-items-center layout-button\"\n for=\"medium\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'medium' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 12px\"></div>\n Medium\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"large\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'large')\"\n [checked]=\"selectedTableLayout == 'large'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"large\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'large' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 16px\"></div>\n Large\n </label>\n </div>\n\n <hr class=\"my-2\" />\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text_common_14px\">Show separators</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"separators\"\n [(ngModel)]=\"showVerticalBorder\"\n (change)=\"onFontChange()\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text_common_14px\">Row shading</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"rowShadingEnabled\"\n (change)=\"toggleRowShading()\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <!-- <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Side Menu</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showSideMenu\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Filter Row</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showFilterRow\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #tablePreset>\n <div\n *ngIf=\"activeSubButton !== 'save-preset'\"\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Presets</h6>\n </div>\n <!-- Save Preset Button with Dropdown -->\n <div>\n <a\n class=\"text-decoration-none text-primary\"\n type=\"button\"\n id=\"savePresetDropdown\"\n (click)=\"$event.stopPropagation(); toggleSubActions('save-preset')\"\n >\n {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\n </a>\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchTextPresetTable\"\n type=\"search\"/>\n </div>\n </div>\n\n <!-- Preset List -->\n <ng-container\n *ngIf=\"\n tableView | filter : searchTextPresetTable : 'name' as filteredList\n \"\n >\n <!-- If filteredList exists and none is default -> show fallback -->\n <div\n class=\" pb-5 overflow-auto\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 250\"\n >\n <div\n class=\"cursor-pointer\"\n (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \"\n >\n <div class=\"fw-semibold\">Default View</div>\n </div>\n <div class=\"d-flex justify-content-between\">\n <small class=\"text-dark\">Created by system</small>\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\"\n class=\"me-2\"\n ></span>\n <div\n class=\"dropdown d-flex justify-content-end\"\n *ngIf=\"tableFilterViewId\"\n ></div>\n </div>\n \n <!-- The list: render each table from filteredList -->\n <div\n class=\"list-group list-group-flush\"\n *ngFor=\"\n let table of filteredList;\n let i = index;\n trackBy: trackByTable\n \"\n >\n <!-- Item -->\n <div\n (click)=\"\n $event.stopPropagation(); openIndex = null; activeTopButton = ''\n \"\n class=\"list-group-item px-0 d-flex justify-content-between align-items-center\"\n >\n <div (click)=\"selectFilter(table); openIndex = null\">\n <div class=\"fw-semibold\" style=\"cursor: pointer\">\n {{ table?.name }}\n <!-- {{table?.is_temp}} -->\n <span\n *ngIf=\"\n (table?.is_temp && !temp_state.id) ||\n temp_state.id == table.id\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n <span\n *ngIf=\"table?.is_default\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n </div>\n <small class=\"text-dark\" *ngIf=\"table?.config?.filterNames\" [title]=\"table?.config?.filterNames\">\n {{\n table?.config?.filterNames?.length > 25\n ? (table?.config?.filterNames | slice:0:25) + '...'\n : table?.config?.filterNames\n }}\n ({{ table?.config?.totalCount }})\n </small>\n <small class=\"text-dark\" *ngIf=\"!table?.config?.filterNames\">{{ table?.createdAt | date : \"MMM d, y\" }}</small>\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span\n *ngIf=\"table?.is_default\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n\n <div class=\"dropdown\" *ngIf=\"!table?.is_default\">\n <div\n class=\"dropdown-wrapper\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"btn-icon muted-text\"\n (click)=\"toggleMenu(i, $event)\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"openIndex === i\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/horizontal-dots.svg'\n \"\n class=\"me-2\"\n ></span>\n </button>\n\n <!-- menu -->\n <ul\n *ngIf=\"openIndex === i\"\n class=\"custom-dropdown-menu position-fixed top-auto\"\n role=\"menu\"\n [style.right.px]=\"'auto'\"\n [style.left.px]=\"dataGridContainer.offsetWidth - 100\"\n style=\"top: unset; right: unset\"\n >\n <li role=\"none\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item\"\n (click)=\"\n actionPreset(table, 'setPreset'); temp_state.id = ''\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/star.svg'\n \"\n class=\"me-2\"\n ></span>\n Set as default\n </button>\n </li>\n\n <li role=\"none\" *ngIf=\"!table.confirmDelete\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item text-danger\"\n (click)=\"table.confirmDelete = true\"\n >\n <span\n style=\"margin-top: -4px\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/trash-red.svg'\n \"\n class=\"me-2\"\n ></span>\n Delete\n </button>\n </li>\n\n <li\n role=\"none\"\n *ngIf=\"table.confirmDelete\"\n class=\"confirm-block\"\n >\n <div class=\"px-3 py-2 text-center\">\n <div class=\"mb-2 text_common_16px_gray\">\n Are you sure you want to delete this view<b>?</b><br/> This action can\u2019t be undone.\n </div>\n <div class=\"d-flex gap-2\">\n <button\n class=\"cancel_btn_new common_btn\"\n (click)=\"table.confirmDelete = false\">\n Cancel\n </button>\n <button class=\"delete_btn_new common_btn\"\n (click)=\"actionPreset(table, 'deletePreset')\">\n Delete\n </button>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n <!-- Item End Here -->\n </div>\n </div>\n </ng-container>\n </div>\n\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"activeSubButton == 'save-preset'\"\n class=\"dropdown-menu p-3 badge mt-4 save-preset-dropdown mt-1\"\n aria-labelledby=\"savePresetDropdown\"\n style=\"min-width: 250px\"\n >\n <div class=\"text_common_16px mb-2\">\n {{ isTablePresetNotChanged ? \"Create New Preset\" : \"Update Preset\" }}\n </div>\n <!-- <div class=\"fs-14px mb-2\" style=\"line-height: 20px\">\n This will save the current table adjustments as a preset.\n </div> -->\n <!-- Input -->\n <div class=\"my-3\">\n <label for=\"presetName\" class=\"form-label fs-12px fw-bold\">Name</label>\n <div class=\"col-12 global-search position-relative\">\n <input\n #presetNameCtrl=\"ngModel\"\n required\n [(ngModel)]=\"presetName\"\n [ngClass]=\"{\n 'is-invalid':\n presetNameCtrl.invalid &&\n (presetNameCtrl.dirty || presetNameCtrl.touched)\n }\"\n class=\"form-control form-control-sm ps-2\"\n placeholder=\"Enter preset name\"\n type=\"text\"\n />\n </div>\n </div>\n\n <!-- Checkbox -->\n <div class=\"form-check mb-2\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"presetFilter\"\n type=\"checkbox\"\n id=\"saveFilters\"\n />\n <label class=\"form-check-label mt-1\" for=\"saveFilters\">\n Save active filters\n </label>\n </div>\n\n <!-- Save Button -->\n <div class=\"d-flex justify-content-end gap-2\" style=\"height: 32px\">\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center\"\n (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n style=\"margin-top: -2px\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"closeDropdown.preset.loading\"\n (click)=\"savePreset(presetNameCtrl)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center\"\n >\n <span style=\"margin-top: -2px\" *ngIf=\"isTablePresetNotChanged\">\n <ng-container *ngIf=\"!closeDropdown.preset.loading\"\n >Create</ng-container\n >\n <ng-container *ngIf=\"closeDropdown.preset.loading\"\n ><span class=\"spinner-border spinner-border-sm\"></span\n ></ng-container>\n </span>\n <span style=\"white-space: nowrap\" *ngIf=\"!isTablePresetNotChanged\"\n >Update Preset</span\n >\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #showHideColumns>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\" style=\"border-bottom: 1px solid #E0E0E0;\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Columns</h6>\n </div>\n <a\n (click)=\"resetColumns()\"\n href=\"javascript:void(0)\"\n class=\"text-primary text-decoration-none\"\n >Reset</a\n >\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"mx-2 position-absolute icon data-grid-svg-icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search column\"\n type=\"search\"\n [(ngModel)]=\"topShowHideColumns\"\n />\n </div>\n </div>\n <!-- Preset List -->\n <div\n class=\"list-group list-group-flush\"\n style=\"overflow: auto; scrollbar-width: thin\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 220\"\n >\n <div class=\"muted-text show-hide-table-label d-flex justify-content-between\" *ngIf=\"hasAnyVisibleColumn\">\n Show in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"hide_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"hide_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <!-- Item -->\n <ng-container\n *ngFor=\"\n let col of columns | filter : topShowHideColumns : 'header';\n trackBy: trackByField\n \"\n >\n <div\n *ngIf=\"col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- show checkbox instead of icon -->\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n *ngIf=\"!col?.query?.first_value && !col?.query?._ids?.length\"\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, false)\"\n [class.disabled]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.pe-none]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.opacity-50]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n <div\n *ngIf=\"col?.query?.first_value || col?.query?._ids?.length\"\n class=\"d-flex align-items-center\"\n style=\"opacity: 0.5\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Item End Here -->\n\n <div\n class=\"dropdown-divider\"\n *ngIf=\"hasAnyVisibleColumn && hasAnyInVisibleColumn\"\n ></div>\n\n <div\n class=\"muted-text show-hide-table-label d-flex justify-content-between\"\n *ngIf=\"hasAnyInVisibleColumn\"\n >\n Hide in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"show_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"show_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <div class=\"list-group list-group-flush\">\n <ng-container *ngFor=\"let col of columns; trackBy: trackByField\">\n <div\n *ngIf=\"!col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, true)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Item End Here -->\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterColumns let-col=\"column\">\n <div\n @slideToggle\n *ngIf=\"!isFilterOpen && activeTopButton == 'filter-columns'\"\n (click)=\"$event.stopPropagation()\"\n class=\"action_dropdown_new_design actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"py-2 px-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Filter by\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 500px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : addFilterColumnInput : 'header';\n trackBy: trackByField\n \"\n >\n <div\n (click)=\"openFilter(col)\"\n *ngIf=\"\n col.is_visible &&\n !col?.query?.first_value &&\n !col?.query?._ids?.length && col.type !== 'image'\n \"\n class=\"list-group-item border-0 px-3 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"d-flex align-items-center justify-content-between gap-1 w-100\">\n <!-- <div style=\"margin-top: -3px\"></div> -->\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n <div class=\"d-flex align-items-center justify-content-between\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Dropdown -->\n <div\n @slideToggle\n *ngIf=\"isFilterOpen && selectedColumnForFilter.type == 'dropdown'\"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 my-2 border-below py-1 pb-2 mb-3 d-flex ps-1\">\n <span\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"mb-2 px-3\">\n <div\n class=\"col-12 position-relative border rounded d-flex align-items-center flex-wrap px-2 filter-serach-inpt\"\n >\n <span\n *ngFor=\"let selected of selectedFilterOptions\"\n class=\"badge d-flex align-items-center gap-1 me-1 mb-1 top-row-filter-dropdown\"\n >\n {{ selected?.value ? selected.value : selected }}\n <span\n (click)=\"toggleSelectionInFilter(selected)\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\n \"\n class=\"me-2\"\n ></span>\n </span>\n <input\n class=\"form-control form-control-sm border-0 flex-grow-1\"\n style=\"padding: 0\"\n [placeholder]=\"selectedFilterOptions?.length ? '' : 'Filter by'\"\n type=\"search\"\n [(ngModel)]=\"searchTextForFilterDropDown\"\n (keydown.backspace)=\"handleBackspace($event)\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 600px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of selectedColumnForFilter.column_dropdown_value\n | filter : searchTextForFilterDropDown : 'value';\n let i = index\n \"\n >\n <div\n class=\"list-group-item border-0 px-2 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"currentFilterSelectedIds.has(col.id || col._id || col)\"\n (change)=\"toggleSelectionInFilter(col)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ col?.value || col?.name || col }}\n </label>\n </div>\n </div>\n </ng-container>\n </div>\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\"\n >\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\n (click)=\"$event.stopPropagation(); resetFilterChanges()\"\n >\n <span>Cancel</span>\n </button>\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\"\n >\n <span style=\"margin-top: -2px\">Save</span>\n </button>\n </div>\n </div>\n\n <!-- For Text fields and number fields-->\n\n <div\n @slideToggle\n *ngIf=\"\n isFilterOpen &&\n (selectedColumnForFilter.type == 'string' ||\n selectedColumnForFilter.type == 'number' ||\n selectedColumnForFilter.type == 'date')\n \"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 210px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 border-below py-1 pb-2 d-flex ps-1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"col-12 position-relative p-2 text-filter\">\n <div class=\"mb-2\">\n <select\n class=\"form-select form-select-sm custom-select border\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n <div class=\"mb-2\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Enter first value\"\n type=\"search\"\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n [(ngModel)]=\"firstValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n <div>\n <div class=\"d-flex my-3 d-flex flex-row\" style=\"font-size: 14px\">\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalAnd\"\n name=\"logicalOperator\"\n value=\"and\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalAnd\"\n >AND</label\n >\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalOr\"\n name=\"logicalOperator\"\n value=\"or\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalOr\">OR</label>\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalNone\"\n name=\"logicalOperator\"\n value=\"none\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalNone\"\n >None</label\n >\n </div>\n </div>\n\n <ng-container *ngIf=\"condition !== 'none' && firstValue\">\n <div class=\"mb-2 mt-3\">\n <!-- Second condition select -->\n <select\n class=\"form-select form-select-sm border\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <div class=\"mb-2\">\n <!-- Second value input -->\n <input\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n class=\"form-control form-control-sm\"\n placeholder=\"Enter second value\"\n type=\"search\"\n [(ngModel)]=\"secondValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n </ng-container>\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\">\n <button\n [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); resetTextFilterChanges()\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"(currentFilterSelectedIds?.size === 0 && !firstValue) || (condition !== 'none' && !secondValue)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\">\n <span style=\"margin-top: -2px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Edit dropdown here -->\n<ng-template let-col>\n <div class=\"drop-down-edit\"></div>\n</ng-template>\n\n<ng-template\n #fullTextTemplate\n let-row=\"row\"\n let-col=\"col\"\n let-isArray=\"isArray\"\n>\n <div\n class=\"full-text-box\"\n (dblclick)=\"$event.stopPropagation(); $event.preventDefault()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n >\n <ng-container *ngIf=\"!isEditing(row, col)\">\n <div\n *ngIf=\"!isArray\"\n class=\"full-text-content\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n >\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </div>\n <div *ngIf=\"isArray\">\n <ul>\n <ng-container\n *ngFor=\"let item of getNestedValue(row, col.field); let i = index\"\n >\n <li *ngIf=\"i !== 0\">\n <ng-container>\n {{\n item?.department_name ||\n item?.roleName ||\n item?.full_name ||\n \"-\"\n }}\n </ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isEditing(row, col)\">\n <textarea\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n #textModel=\"ngModel\"\n rows=\"4\"\n #textAreadInput\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"textAreadInput.blur()\"\n autofocus\n class=\"form-control\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n ></textarea>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultImagePlaceholder let-row=\"row\" let-col=\"col\">\n <span\n class=\"px-2 d-flex w-100 cell-content image-placeholder\"\n [title]=\"row?.full_name || row?.name || 'N/A'\"\n >\n <ng-container\n *ngIf=\"\n row?.logo ||\n row?.assetImage ||\n row?.invoice?.invoice_image ||\n row?.invoice_image;\n else placeholder\n \"\n >\n <span\n (click)=\"fullscreenImage = row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\"\n class=\"pic\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n <img\n [width]=\"rowHeight - 12\"\n [height]=\"rowHeight - 12\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [src]=\"\n row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\n \"\n alt=\"icon\"\n class=\"option-icon\"\n loading=\"lazy\"\n />\n </span>\n </ng-container>\n <!-- <div\n class=\"fullscreen-overlay\"\n *ngIf=\"fullscreenImage\"\n (click)=\"fullscreenImage = null\"\n >\n <img [src]=\"fullscreenImage\" class=\"fullscreen-img\" />\n </div> -->\n\n <ng-template #placeholder>\n <span\n [ngClass]=\"getDynamicClass(row?.full_name || row?.name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n {{ getInitials(row?.full_name) }}\n </span>\n </ng-template>\n </span>\n</ng-template>\n\n<!-- Right Click Menue -->\n<div\n [class.invisible]=\"!positionedYet\"\n class=\"context-menu p-2\"\n *ngIf=\"actionHide && actions?.length\"\n [ngStyle]=\"{ 'top.px': yPos, 'left.px': xPos }\"\n [class.show]=\"isVisible\"\n appendTo=\"body\"\n>\n <ul>\n <li\n *ngFor=\"let action of actions\"\n class=\"rounded d-flex align-items-center\"\n (click)=\"onActionClick(action)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/' + action + '.svg'\"\n class=\"data-grid-svg-icon right-click-menu-icons me-2\"\n ></span>\n <span class=\"text-capitalize fw-500\">{{ action }}</span>\n </li>\n </ul>\n</div>\n\n<!-- Details Toggle from bottom -->\n\n<ng-template #nestedTableTemplate let-row>\n <div\n class=\"nested-table table table-sm w-100 mb-0 center-nested-table w-100\"\n style=\"table-layout: fixed !important\"\n #nestedTableContainer\n >\n <thead\n #nestedHeader\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n >\n <div\n cdkDropList\n [cdkDropListData]=\"row?.detail.columns\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"dropColumn($event, row)\"\n (cdkDropListSorted)=\"onNestedColSort($event, previewNestedCols)\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n class=\"d-flex tr border-below\"\n >\n <div\n *ngFor=\"let col of row.detail.columns; let i = index\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n class=\"px-4 th\"\n [attr.field]=\"col.field\"\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n cdkDrag\n >\n <div\n class=\"d-flex h-100 justify-content-between position-relative align-items-center\"\n >\n <div class=\"text-ellipsis\" (click)=\"sortNestedCol(col, row)\">\n {{ col.header }}\n </div>\n <div class=\"d-flex gap-2\">\n <span\n *ngIf=\"currentSubSortColumn == col.field\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (col?.order_by == 'desc'\n ? 'data-grid/icons/sort-desc.svg'\n : 'data-grid/icons/sort-asc.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center ms-2 start-50\"\n >\n </span>\n <!-- <div\n class=\"three-dots p-1\"\n (click)=\"openThreeDotsMenu($event, col)\"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div> -->\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"top: -50%; z-index: 21; left: 0\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: true,\n columns: row?.detail.columns\n }\n \"\n ></ng-container>\n </div>\n <div\n class=\"resize-handle\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"\n $event.preventDefault();\n onResizeColumn($event, col);\n $event.stopPropagation()\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n <ng-template cdkDragPreview>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </thead>\n <div\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"nestedTablerowHeight\"\n class=\"viewport\"\n [style.height.px]=\"\n (row?.detail?.result?.length < 5\n ? nestedTablerowHeight * row?.detail?.result?.length + 40\n : 300) + (hasHorizontalScroll ? -12 : 1)\n \"\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <div\n class=\"cursor-pointer border-below d-flex tr\"\n *cdkVirtualFor=\"let d of row?.detail?.result; trackBy: trackById\"\n [style.height.px]=\"nestedTablerowHeight\"\n [style.width.px]=\"nestedHeader?.offsetWidth\"\n [style.minWidth.px]=\"nestedHeader?.offsetWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n (contextmenu)=\"onRightClick($event, d)\"\n >\n <div\n class=\"px-4 py-0 td\"\n *ngFor=\"let col of previewNestedCols; let j = index\"\n [style.fontSize.px]=\"nestedTablerowFontsize\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n >\n <div\n [style.height.px]=\"nestedTablerowHeight - 1\"\n [style.max-width.px]=\"col?.width\"\n class=\"d-flex align-items-center\"\n >\n <!-- {{ d[col.field] || (col.is_amount ? 0 : \"-\") }} -->\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"\n col.type === 'date'\n ? (getNestedValue(d, col.field) | date : dateFormat)\n : getNestedValue(d, col.field) || '-'\n \"\n >\n <ng-container *ngIf=\"col.type !== 'image'\">\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{\n !isNestedValueArray(d, col.field)\n ? col.type === 'date'\n ? (isDate(getNestedValue(d, col.field))\n ? (getNestedValue(d, col.field) | date: dateFormat)\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n '-'))\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n (col.is_amount ? 0: '-'))\n : (getNestedValue(d, col.field)?.[0]?.department_name ||\n getNestedValue(d, col.field)?.[0]?.roleName || getNestedValue(d, col.field)?.[0]?.full_name ||\n '-')\n }}\n </ng-container>\n <ng-container *ngIf=\"false\">\n {{ getTotalAmount(col) }}\n </ng-container>\n <ng-container *ngIf=\"col.type == 'image'\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: {\n row: d,\n col: col,\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</ng-template>\n\n<ng-template #leftRightNestedPlaceholder let-row>\n <table\n class=\"nested-table table table-sm w-100 mb-0\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n [style.height.px]=\"\n gridType == 'Assets'\n ? (nestedTableContainer?.nativeElement?.offsetHeight ?? 0) + 12\n : (taskManagementContainer?.nativeElement?.offsetHeight ?? 0)\n \"\n >\n <!-- <div class=\"thead\">\n <div\n class=\"tr d-flex border-below\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"th\" *ngFor=\"let _ of [1, 2, 3, 4, 5]\"></div>\n </div>\n </div> -->\n <!-- <div class=\"tbody\">\n <div\n class=\"tr border-below\"\n [style.height.px]=\"nestedTablerowHeight\"\n *ngFor=\"let _ of row?.detail?.result\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"td\" *ngFor=\"let __ of [1, 2, 3, 4, 5]\" class=\"py-0\">\n <span\n [style.height.px]=\"nestedTablerowHeight\"\n [style.max-width.px]=\"nestedTablerowHeight\"\n ></span>\n </div>\n </div>\n </div> -->\n </table>\n</ng-template>\n\n<ng-template #taskManagementTemplate let-taskDetails=\"taskDetails\">\n <div\n class=\"p-4\"\n #taskManagementContainer\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n [style.fontFaimly]=\"fontFaimly\"\n >\n <div class=\"d-flex justify-content-between\">\n <div class=\"col-4\">\n <div class=\"item-title\">Description</div>\n <!-- <div class=\"item-content firstDiv\">\n {{ taskDetails.description }}\n </div> -->\n <p\n [style.fontSize]=\"bodyTextFontsSize\"\n class=\"item-content firstDiv taskDescription pe-4\"\n [innerHTML]=\"getSafeComment(taskDetails?.editor_description)\"\n (click)=\"openFullImage($event)\"\n ></p>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">Attachments</div>\n <h5 *ngIf=\"taskDetails?.attachments?.length == 0\">\n No Attachments found\n </h5>\n <div\n *ngIf=\"taskDetails?.attachments?.length\"\n class=\"item-content d-flex flex-wrap\"\n style=\"gap: 10px\"\n >\n <a\n *ngFor=\"let attachement of taskDetails?.attachments; let i = index\"\n class=\"symbol-label fs-2 fw-semibold text-success cursor-pointer\"\n >\n <span\n title=\"{{ taskDetails?.attachments_name[i] || 'Attachment' }}\"\n (click)=\"downloadAttchment(attachement)\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(attachement) +\n '.svg'\n \"\n >\n </span>\n </a>\n </div>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">\n Comments ({{ taskDetails?.comments?.length }})\n </div>\n <h5 *ngIf=\"taskDetails?.comments?.length == 0\">No Comments found</h5>\n <div *ngIf=\"taskDetails?.comments?.length\" class=\"item-content\">\n <div class=\"comment\" *ngFor=\"let comment of taskDetails.comments\">\n <div class=\"d-flex align-items-center pe-3\">\n <img\n class=\"pic image-input-wrapper\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n *ngIf=\"comment?.comment_by.logo\"\n src=\"{{ comment?.comment_by.logo }}\"\n alt=\"{{ comment.comment_by.full_name }}\"\n />\n <!-- <app-default-image-placeholder *ngIf=\"!comment?.comment_by.logo\" title=\"{{ comment.comment_by.full_name }}\" [name]=\"comment.comment_by.full_name\"></app-default-image-placeholder> -->\n <span\n *ngIf=\"!comment?.comment_by.logo\"\n [ngClass]=\"getDynamicClass(comment.comment_by.full_name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n title=\"{{ comment.comment_by.full_name }}\"\n >\n {{ getInitials(comment.comment_by.full_name) }}\n </span>\n </div>\n <div>\n <div class=\"comment-author fs-14px\">\n {{ comment?.comment_by.full_name }}\n </div>\n <div\n class=\"comment-content forCommentImg\"\n [innerHTML]=\"getSafeComment(comment.comment)\"\n ></div>\n <div class=\"comment-timestamp\">\n {{ comment.comment_date | date }}\n </div>\n <div class=\"comment-timestamp\">\n Replies: ({{ comment.replies.length }})\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";:host,:host *{font-family:Inter,sans-serif!important}*{scrollbar-width:auto;scrollbar-color:rgba(31,36,40,.1019607843)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#fff}*::-webkit-scrollbar-thumb{background-color:#c4b0c9;border-radius:10px;border:3px solid #ffffff}.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #E0E0E0;border-radius:12px;position:relative}.actions_dropdown_menu{width:180px!important}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header_figma_spacing{padding-right:8px!important}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:0 16px 0 0;font-weight:700;border-bottom:1px solid #E0E0E0;white-space:nowrap;min-width:80px;font-weight:600}.header-cell .filter-applied-on-text{color:#5d9cff!important}.filter-cell{padding:4px!important;display:flex;align-items:center;gap:8px;width:100%}.filter-cell .filter-applied{background-color:#bddef9}.border-right{border-right:1px solid #E0E0E0}.merged-grid{display:grid;grid-auto-rows:40px;border-bottom:1px solid #ccc}.span-two-rows{grid-row:span 2;display:flex;justify-content:space-between;align-items:center}.group-header{display:flex;justify-content:space-between;position:relative}.group-header-content{position:sticky;left:10px;overflow:hidden;text-overflow:ellipsis}.resize-handle{width:6px;cursor:e-resize;right:0;top:0;color:#00000026;margin-right:4px}:host ::ng-deep .resize-handle svg{stroke-width:2px}.group-header .resize-handle{top:25%}.h-100{height:100%}.data-grid-body{position:relative;overflow-y:auto;overflow-x:hidden}.cell{padding:8px 8px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.data-grid-row{display:flex;width:100%;min-width:max-content;align-items:center;border-bottom:1px solid #E0E0E0}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#E0E0E0}.w-100{width:100%}.data-grid-header-wrapper{display:flex;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.data-grid-header{display:flex;position:relative;z-index:1}.left-pinned,.right-pinned{position:sticky;top:0}.right-pinned-header{position:absolute;right:0;border-left:1px solid #E0E0E0;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #E0E0E0}.center-scrollable{z-index:unset!important;overflow-x:auto;overflow-y:visible;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable::-webkit-scrollbar{display:none}.data-grid-body-wrapper{-webkit-user-select:none;user-select:none;display:flex}.center-scrollable-body{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable-body::-webkit-scrollbar{display:none}.left-pinned-body,.right-pinned-body{position:sticky;top:0;z-index:unset;background:#fff;scrollbar-width:none;-ms-overflow-style:none}.left-pinned-body::-webkit-scrollbar,.right-pinned-body::-webkit-scrollbar{display:none}.left-pinned-body{left:0}.border-end{border-right:1px solid #E0E0E0!important}.right-pinned-body{right:0;border-left:1px solid #E0E0E0}.fake-scroll-bar{height:14px;overflow:scroll;margin-bottom:10px}.text-ellipsis{overflow:hidden;text-overflow:ellipsis}.select-all-checkbox-cell{width:50px;display:flex;justify-content:center;align-items:center;height:100%}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #E0E0E0!important}.figmaIconSize.data-grid-svg-icon{width:24px!important;height:24px!important}.actions-dropdown .list-group .list-group-item{color:#1b1f22!important}.productSortingDropdownMenu{width:220px!important}.three-dots{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:6px;margin-right:4px;margin-left:2px;cursor:pointer}.three-dots:hover,.three-dots.threeDotActive{background-color:#0084ff1a;padding:5px}.rotated-180{transform:scaleY(-1)}.filter-icon-wrapper{min-height:22px;max-height:22px;min-width:22px;max-width:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;cursor:pointer;transition:background-color .3s ease}.filter-icon-wrapper:hover{background-color:#ccc}.column-menu,.filter-menu{box-shadow:0 0 16px #00000026;border-radius:4px}.column-menu{background:#fff;width:100%;width:200px;border:1px solid #ddd;box-shadow:0 0 12px #00000014;border:1px solid #E0E0E0;padding:4px 0;font-size:14px;position:fixed;border-radius:8px}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item.active-sort,.column-menu-item:hover{background-color:#0084ff1a}.pin-parent{position:relative;width:100%!important}.column-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #ddd;width:130px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;display:none;padding:4px 0;z-index:10;border-radius:4px}.pin-parent:hover .column-submenu{display:block}.filter-menu-container{position:fixed;width:210px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:12px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;z-index:1000;font-size:14px}.filter-menu-header{font-weight:600;margin-bottom:10px}.filter-dropdown-section{max-height:350px;overflow-y:auto}.dropdown-options{overflow-y:auto;scrollbar-width:thin;height:100%}.filter-text-section select,.filter-text-section input{width:100%}.filter-radio-inputs{width:14px!important;height:14px!important}.right-menu{border-left:1px solid #E0E0E0;font-size:14px}.border-start{border-left:1px solid #E0E0E0!important}.column-panel-item{font-size:.875rem;color:#333}.toggle-icon{cursor:pointer;transition:transform .2s ease}.toggle-icon.rotate{transform:rotate(90deg)}.grab-icon{cursor:grab;color:#6c757d}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}.pivot-mode{height:48px}.chevron-wrapper{width:30px;height:20px;cursor:pointer;border-radius:3px;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease;margin-right:8px}.chevron-wrapper:hover{background-color:#cac7c7}.chevron-wrapper i{font-size:14px}.column-panel-body{height:70%;overflow:auto;scrollbar-width:thin}.side-menue-text{transform:rotate(90deg);position:relative;font-weight:700;margin-top:40px}.columns-button{padding-top:20px;padding-bottom:35px;width:29px}.fake-scroll-content{height:12px}.fake-scrollbar{width:25px}.fake-scrollbar div{min-width:1px}.fake-horizintal-scrollbar div{min-height:1px}.side-filter-columns-wrapper{height:calc(100% - 25px)}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;z-index:1050}.custom-modal-overlay .moda-header{background-color:#f8f8f8}.custom-modal-content{background-color:#fff;border-radius:8px;min-width:300px;max-width:400px;box-shadow:0 5px 20px #0000004d}.overlay-scrollable{height:250px;overflow:auto}.footer-row{border-top:1px solid #E0E0E0;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:8px;overflow-x:auto;overflow-y:hidden;height:8px}.border-dashed{border:1px dashed #E0E0E0}.cdk-drag-preview{box-sizing:border-box!important;border-radius:4px!important;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f!important;background-color:#f3f4f5!important;border:1px solid #E0E0E0!important;z-index:9999!important}.data-grid-header-wrapper ::ng-deep .cdk-drag-placeholder{display:block!important;background:#fff!important;opacity:1!important}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)!important}.top-row-grouping-placeholder{display:flex;align-items:center;border-radius:12px;font-size:14px;padding-inline:6px;border:1px solid #E0E0E0}.top-row-grouping-placeholder .bi-x{cursor:pointer;color:#7a7a7a}.top-row-grouping-placeholder .bi-x:hover{color:#111}.right-pinned-body-wrapper{position:absolute;right:0}.actions-dropdown{position:absolute;right:200px;z-index:1050;background-color:#fff;border-radius:8px!important;cursor:default}.bg-fff{background-color:#fff}.actions-dropdown-setting{right:250px}.actions-dropdown.consumer_buttons{right:170px}.consumer_buttons .dropdown-menu .dropdown-item{height:32px!important}.actions-dropdown.unfilfilled_dropdown_main,.actions-dropdown.UnpaidDropdown{border:0!important}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{width:100%;display:flex!important;align-items:center!important;height:32px;max-width:335px}.global-search span{margin-top:0!important;top:8px}.global-search input{padding-left:28px;border-radius:8px!important}.global-search input:focus{outline:none!important;box-shadow:none!important}.active .top-icon ::ng-deep svg path{stroke:#007cf5!important}.dropdown-menu{background-color:#fff!important;border:1px solid #E0E0E0!important;border-radius:8px!important}.custom-menu{width:250px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu.setting_dropdown_menu{width:270px}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px;color:#1b1f22!important;font-weight:400}.add-column-spacing{padding-left:16px!important}.custom-menu.preset_dropdown_main .dropdown-item{height:33px!important}.custom-menu .dropdown-item:hover{background-color:#0084ff1a;border-radius:6px}.table-layout{right:0;background:#fff;border-radius:8px!important}.actions-dropdown,.table-layout,.custom-menu,.dropdown-menu{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;background-color:#fff}.action_dropdown_new_design{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 2px 12px #00000014}.preview-box{width:40px;height:10px;border-radius:3px;background-color:transparent;transition:background-color .2s ease-in-out}.btn-check:checked+label .preview-box{background-color:var(--bs-primary)}.preview-box{width:40px;height:10px;border-radius:3px;border:2px solid transparent;transition:border-color .2s ease-in-out}#small:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#small:checked+label .preview-box{background-color:#fff!important}#medium:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#medium:checked+label .preview-box{background-color:#fff!important}#large:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#large:checked+label .preview-box{background-color:#fff!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 6px!important;width:82px;border-radius:8px!important;color:#1b1f22!important;height:60px;margin-bottom:0!important}.show-hide-table-label{position:sticky;top:0;z-index:99;background:#fff}.cursor-grap{cursor:grabbing}.pagination-container{display:flex;align-items:center;font-size:14px;color:#1b1f22}.pagination-container .page-info{padding:0 8px}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:absolute;inset:0 0 0 7px;z-index:1;font-size:14px;background:transparent}.page-size select{border:none;outline:none;box-shadow:none}.page-size .page_selection_dropdown{padding:3px 6px;border:1px solid #E0E0E0;border-radius:6px;background:#fff;font-size:13px;height:32px!important;width:73px;position:relative}.page-size .page_selection_dropdown .data-grid-svg-icon{right:4px;position:absolute}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2;border:0;color:#6a6b6d;width:32px;height:32px}.page-buttons button.active{font-weight:400;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#1b1f22;width:32px;height:32px}.page-buttons button:disabled{opacity:.5;cursor:not-allowed}.page-buttons span{color:#666}.page-size .separator{padding:0 10px;border-right:1px solid #E0E0E0}.page-size .separator .actions-dropdown{position:fixed;right:200px;z-index:1050;background-color:#fff}.fs-14px{font-size:14px}.fs-12px{font-size:12px!important}.save-preset-dropdown{background:#fff;color:#111!important;right:0;font-weight:400!important;text-align:left!important;max-width:250px!important;text-wrap:auto!important;top:14px;font-size:14px!important}.add-filter-button{height:28px;cursor:pointer;border-radius:4px;color:#1b1f22!important;font-weight:400!important;font-size:14px!important}.table-layout .dropdown-item{border-radius:0!important;font-size:14px;padding-block:6px!important}.table-layout .dropdown-item:hover{background-color:transparent!important}.filter-serach-inpt{max-height:230px!important;overflow:auto;scrollbar-width:thin;padding-top:4px;background-color:#f7f7f7;border-color:#dedede;border-radius:8px}.filter-serach-inpt .badge{color:#007cf5!important;background-color:#e6f2ff!important;border-radius:8px!important;padding:8px!important;font-weight:500!important;font-size:12px!important;height:24px!important}.filter-serach-inpt .badge ::ng-deep svg{cursor:pointer}.filter-serach-inpt .badge ::ng-deep svg:hover path{stroke:#040081!important}.filter-serach-inpt input{background-color:#f7f7f7;padding:0;height:26px;margin-top:-5px}.text-filter select{border:0}.text-filter select option{font-size:14px;font-weight:500}.text-filter select:focus{border:0}.text-filter input:focus,.text-filter select:focus{box-shadow:none!important}.active-filters{background-color:#1f24281a;white-space:nowrap;background:#f7f7f7;padding-inline:8px;height:28px;font-size:14px;font-weight:500;border-radius:8px;box-shadow:none;color:#1b1f22!important}.active-filters .header-tag{white-space:nowrap;font-size:14px;font-weight:400;color:#1b1f22;background:#ebebeb}.filter-tags .active{background-color:#e6f2ff}.filter-tags .active .header-tag{color:#007cf5!important}.table-cell{cursor:pointer;width:100%}.table-cell input:focus{outline:0!important;border:0!important;width:100%!important;box-shadow:none!important}.active-for-editing{outline:2.5px solid #007cf5!important;border-radius:4px;border:0!important;width:100%!important}.active-cell{outline:none!important;box-shadow:inset 0 0 0 1.5px #007cf5}span[inlineSVG]{width:16px;height:16px;display:inline-block}.cell .dropdown-menu{min-width:unset!important}.cell .dropdown-menu .item{transition:background-color .3s ease;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.cell .dropdown-menu .item:hover{background-color:#f0f8ff}.cell .cell-editin-dropdown{scrollbar-width:thin!important;-webkit-user-select:none;user-select:none}.fw-semibold{font-weight:500!important}:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg,:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg path{stroke:#000!important}:host ::ng-deep .ascendingAppliedIcon svg{stroke:#006fd6}.fs-7{font-size:12px!important}.fs-8{font-size:10px!important}.all-filters-reset-button:hover{opacity:.7}.full-text-box{background:#fff;position:relative;display:flex;align-items:center;justify-content:center;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026}.full-text-content{border-radius:8px;max-height:70vh;overflow:auto;white-space:pre-wrap}.pic{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}.pic-comb2{background-color:#fbe7bf;color:#fd7f31}.pic-comb1{background-color:#d9ecbf;color:#65b500}.pic-comb4{background-color:#fdd3d7;color:#f64e60}.w-40px{width:40px}.h-40px{height:40px}.pic{border-radius:50%;overflow:hidden}.image-placeholder .pic{font-size:14px;font-weight:600;letter-spacing:.5px}.header-cell{font-weight:600}.header-cell,.cell{box-sizing:border-box}.transparent-border-right{border-right:1px solid transparent!important}.resizing-highlight{position:relative}.resizing-highlight:before{content:\"\";position:absolute;top:-1px;right:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right{position:relative}.resizing-highlight-right:before{content:\"\";position:absolute;top:-1px;left:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right:first-child{width:1px}.editable-header{border-bottom:1px dashed #666}.muted-text{color:#727272!important}.context-menu{position:fixed;display:none;background:#fff;border:1px solid #dcdcdc;box-shadow:#0000003d 0 3px 8px;z-index:1000;width:150px;border-radius:8px;font-weight:600}.context-menu.show{display:block}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px;cursor:pointer;color:#99a1b7}.context-menu li ::ng-deep svg{width:16px;height:16px;display:inline-block;color:#727272}.context-menu li ::ng-deep svg path{stroke:#727272}.context-menu li:hover{background-color:#f0f0f5!important}.invisible{visibility:hidden!important}.fw-500{font-weight:500!important}.taskbar{position:fixed;display:flex;justify-content:center;z-index:1000}.taskbar .action-btn{transition:opacity text-decoration .3s ease}.taskbar .action-btn:hover{text-decoration:underline;opacity:.8}.taskbar .delete{color:#ea0000}.selected-count,.action-btn,.dropdown-content a{font-weight:500;font-size:14px}.selected-rows-action-bar{background-color:#1a1a1a;color:#fff;padding:4px 24px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 -4px 12px #00000026}.selected-rows-action-bar .btn:active,.selected-rows-action-bar .btn:focus{outline:0!important;border:0!important;border-color:transparent!important}.selected-rows-action-bar .action-btn{color:#fff!important}.cell .dropdown-menu,.cell .form-select,.cell input{color:#000!important}.cell input::placeholder{color:#727272!important}.cell .badge{border-radius:4px!important;height:24px;align-items:center;width:-moz-fit-content;width:fit-content}.cell .badge-danger{color:#ea5353!important;border:1px solid #ea5353!important;background-color:#ff00000d!important}.cell .badge-success{background-color:#84ca8130!important;border:1.5px solid rgb(70,227,114)!important;color:#46e372!important}.cell .badge-warning{background-color:#fff3dc!important;color:orange!important;border:1px solid #ffa000!important}.cell .badge-info{color:#00bad1;background-color:#e8fbfd;border:1px solid #00bad1}.cell .badge-secondary{color:#6c757d;background-color:#f1f3f5;border:1px solid #6c757d}.header-tag ::ng-deep svg path{stroke:#727272!important}.cross-secondary:hover ::ng-deep svg path{stroke:#000!important}.disable-sorting{pointer-events:none;opacity:.5}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{background-color:transparent!important}input.is-invalid:focus{border:2.5px solid red!important;outline:none}.table-cell input.is-invalid:focus{border:2.5px solid red!important;outline-color:red!important;outline:none!important;box-shadow:none!important}.active-for-editing:has(input.is-invalid:focus){outline:none!important;box-shadow:none!important;border:0!important}.selected-cell,.row-selected{background-color:#c2e0fe}.first-row-selected{border-top:2px solid #2196f3!important}.last-row-selected{border-bottom:2px solid #2196f3!important}.left-selection-border{border-left:2px solid #2196f3!important}.s-no{font-size:14px;font-weight:500}.top-border{border-top:2px solid #2196f3!important}.bottom-border{border-bottom:2px solid #2196f3!important}.left-border{border-left:2px solid #2196f3!important}.border-left{border-left:1px solid #E0E0E0}.right-border{border-right:2px solid #2196f3!important}.top-left-corner{border-top-left-radius:4px}.top-right-corner{border-top-right-radius:4px}.bottom-left-corner{border-bottom-left-radius:4px}.bottom-right-corner{border-bottom-right-radius:4px}.flash-bg{animation:flashAnim 1000s ease}@keyframes flashAnim{0%{background-color:#48a2fc}50%{background-color:#c2e0fe}to{background-color:#c2e0fe}}.cut-flash-bg{animation:cut-flash .8s ease}@keyframes cut-flash{0%{background-color:#f006}50%{background-color:#f00c}to{background-color:#c2e0fe}}.accordion-details .center-section .table .tbody .tr:hover .td{background-color:#f0f8ff!important}.editing-dropdown-search-input input:focus{border:1px solid #86b7fe!important}.nested-table .thead{position:sticky;top:0}.dropdown-wrapper{position:relative;display:inline-block}.btn-icon{background:transparent;border:0;padding:.25rem .5rem;cursor:pointer}.custom-dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;list-style:none;margin:0;padding:.25rem 0;background:#fff!important;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 18px #00000014;border-radius:.35rem;z-index:1200}.custom-dropdown-menu .dropdown-item{display:block;width:100%;padding:.5rem 1rem;text-align:left;background:transparent;border:none}.custom-dropdown-menu .dropdown-item:hover{background:#00000008}.confirm-block{padding:0}.center-nested-table .tr:hover .td{background-color:#f0f8ff}.table ::ng-deep .cdk-drag-placeholder{background-color:#fff!important}.assets-pic{border-radius:8px!important}.fullscreen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}.fullscreen-img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 15px #00000080}.position-sticky{z-index:2}.viewport{display:block!important;overflow:visible!important}.nested-table ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:0!important}.nested-table ::ng-deep .cdk-virtual-scroll-viewport{overflow-x:hidden!important}.disabled-search-input{background-color:#f5f5f5;cursor:pointer!important}.right-click-menu-icons ::ng-deep svg path{stroke-width:2!important}.loader{animation:rotate 1s infinite;height:50px;width:50px}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#fff;box-shadow:30px 0 #ff3d00;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#ff3d00;box-shadow:30px 0 #fff}@keyframes rotate{0%{transform:rotate(0) scale(.8)}50%{transform:rotate(360deg) scale(1.2)}to{transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #ff3d00}50%{box-shadow:0 0 #ff3d00;margin-bottom:0;transform:translate(15px,15px)}to{box-shadow:30px 0 #ff3d00;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #fff}50%{box-shadow:0 0 #fff;margin-top:-20px;transform:translate(15px,15px)}to{box-shadow:30px 0 #fff;margin-top:0}}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{opacity:.7!important}.action-button{background-color:#6f61cf!important;color:#fff!important;border-radius:6px!important;font-weight:500!important;margin-top:-4px}.action-button:hover{background-color:#6a5fb3!important}.action-buttons-row .button{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;border-radius:6px;height:34px;padding:0 10px;white-space:nowrap;transition:max-width .4s ease,background-color .3s ease;max-width:40px;background-color:transparent;border:1px solid #6F61CF}.action-buttons-row .button .label-hidden{opacity:0;margin-left:8px;transition:opacity .3s ease;pointer-events:none;display:none}.action-buttons-row .button:hover{max-width:200px;background-color:#6f61cf}.action-buttons-row .button:hover .label-hidden{opacity:1;pointer-events:auto;margin-left:8px!important;display:block}.action-buttons-row ::ng-deep .button .svg-icon svg path{stroke:#6f61cf;transition:fill .3s ease,stroke .3s ease}.action-buttons-row ::ng-deep .button:hover .svg-icon svg path{stroke:#fff!important}::ng-deep .nav-tabs .nav-link{border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important}::ng-deep .nav-tabs .nav-link:hover,::ng-deep .nav-tabs .nav-link:focus{border:none!important;border-bottom:2px solid transparent!important;outline:none!important;background:transparent!important}::ng-deep .nav-tabs .nav-link.active{border:none!important;border-bottom:2px solid var(--bs-primary)!important;background:transparent!important;color:var(--bs-primary)!important}.open-top{top:-150%!important}.muted{color:#7a7a7a!important}.item-title{font-size:1.2em;font-weight:700;margin-bottom:10px}.item-image{width:100%;border-radius:10px}.comment{display:flex;align-items:center;margin-bottom:10px}.comment-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px}.comment-author{font-weight:700}.comment-content{font-size:.9em;line-height:1.4}.comment-timestamp{font-size:.8em;color:#888;margin-left:auto}.des_low{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:242px;display:block;text-transform:capitalize!important}.firstDiv{word-break:break-word;overflow-wrap:break-word;white-space:normal}.container{display:flex;flex-wrap:wrap;margin:20px;gap:20px;background-color:#fff;padding:20px;border-radius:10px}.item{width:calc(33.33% - 20px);background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px #0000001a}.forCommentImg{width:70px;border-radius:16px;margin:8px 0;cursor:pointer}.image-modal img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 4px 10px #00000080}.full-image-modal{position:fixed;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.full-image-modal .full-image{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 10px #fff3}.item-content{font-size:14px;line-height:1.5;max-height:220px;overflow-y:auto}.image-modal.full-image-modal{position:fixed;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:9999;overflow:hidden;cursor:zoom-out}.image-modal.full-image-modal img{border-radius:8px;box-shadow:0 4px 20px #0006;object-fit:contain;transition:transform .3s ease}.image-modal.full-image-modal img:hover{transform:scale(1.02)}::ng-deep .custom-overlay-wrapper .custom-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999}::ng-deep .custom-overlay-wrapper .custom-modal{background:#fff;border-radius:12px;box-shadow:0 8px 25px #0003;width:360px;max-width:90%;padding:24px;text-align:center;animation:fadeInScale .25s ease}::ng-deep .custom-overlay-wrapper .custom-modal-body .modal-message{font-size:16px;margin-bottom:20px;color:#333}::ng-deep .custom-overlay-wrapper .modal-actions{display:flex;justify-content:center;gap:12px}::ng-deep .custom-overlay-wrapper .modal-actions button{min-width:90px;padding:8px 14px;border-radius:6px;border:none;font-weight:500;cursor:pointer;transition:background-color .2s ease}::ng-deep .custom-overlay-wrapper .btn-confirm{background-color:#007bff;color:#fff}::ng-deep .custom-overlay-wrapper .btn-confirm:hover{background-color:#0069d9}::ng-deep .custom-overlay-wrapper .btn-cancel{background-color:#e4e4e4;color:#333}::ng-deep .custom-overlay-wrapper .btn-cancel:hover{background-color:#d6d6d6}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.clear-btn{background:linear-gradient(135deg,#f53545,#f53545);border:none;color:#fff;font-size:13px;padding:3px 6px;border-radius:20px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #ff5f6d66;position:relative;bottom:4px}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px #ff5f6d99;background:linear-gradient(135deg,#f53545,#f53545)}.clear-btn i{font-size:16px;vertical-align:middle}.cell-editin-dropdown .deopdown-item{width:100%!important;box-shadow:none!important;border-radius:4px;cursor:pointer;padding-block:8px!important}.cell-editin-dropdown .deopdown-item:hover{background-color:#f1f1f1}.card-outer{border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:16px;padding:16px;background-color:#fff}.consumerDropdownButton{height:32px;display:flex;align-items:center}a.grid-header-icon:hover{background:#e0e0e0;width:32px;height:32px;border-radius:8px;transition:none}a.grid-header-icon{width:32px;height:32px}.action-buttons-row.active a.grid-header-icon,a.grid-header-icon.show{background-color:#e0e0e0;border-radius:8px}.data-grid-svg-icon.setting_dropdown{width:32px!important;height:32px!important}.new_design_dropdown .dropdown_main_button{color:#6a6b6d;text-decoration:none}.new_design_dropdown ul{border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 0 12px #00000014!important}.new_design_dropdown ul li{color:#1b1f22!important;height:32px}.new_design_dropdown ul li:hover{background:#0084ff1a!important}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg{height:inherit;border-radius:6px;padding:6px 10px;color:#1b1f22!important;font-size:14px;font-weight:400}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg .new_old_filter{display:inline-block;width:24px;height:24px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg label,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.newest,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.oldest{padding-left:5px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg:hover{background-color:transparent!important}.new_design_dropdown ul li .action_dropdown{padding:6px 16px}.new_design_dropdown ul li.active-filter,.active-filter{background-color:#0084ff1a}.active-filter-all{background:#ebebeb!important}.unfilfilled_dropdown_menu.actions_dropdown_menu{width:210px!important}.consumer_buttons.unfilfilled_dropdown_menu{left:0!important}.filter_dropdown_main .dropdown-item,.actions-dropdown.unfilfilled_dropdown_main .dropdown-item{padding:0 9px!important}.actions-dropdown.UnpaidDropdown{left:150px!important}.new_design_dropdown.hide_arrow .dropdown-toggle:after{display:none}.new_design_dropdown.hide_arrow ul li a label{line-height:1}.dropdown_main_button{border-radius:8px;transition:none;padding:5px 10px;color:#6a6b6d;cursor:pointer}.dropdown_main_button:hover,.dropdown_main_button.show{background:#e0e0e0}.sorting_icon_input{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.sorting_dropdown .column-menu-item{padding:0 6px!important;color:#1b1f22!important;font-size:14px!important;font-weight:400!important}.greenBgHover{background:#0084ff1a!important;border-radius:6px!important}.cancel_btn_new{font-weight:400!important;font-size:14px!important;color:#1b1f22!important;border:none;box-shadow:none;background:transparent;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center}.primary_btn_new{font-weight:500!important;font-size:14px!important;color:#fff!important;background:#0084ff;border:none;box-shadow:none;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center;border-radius:6px}.dropdown_outer{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:8px;font-size:14px}.text_common_14px{font-size:14px;font-weight:400;color:#1b1f22}.text_common_16px{font-size:16px;font-weight:500;color:#1b1f22}.page_refresh{font-size:13px;font-weight:400;color:#6a6b6d}.d-flex{display:flex!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.w-100{width:100%!important}.h-100{height:100%!important}.flex-column{flex-direction:column!important}.checkboxes_sorting_dropdown{width:200px!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i9.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i9.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i10.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CellRenderInitDirective, selector: "[cellRenderInit]", inputs: ["cellRenderInit", "rowData", "colData", "cellValue"], outputs: ["cellEvent"] }, { kind: "pipe", type: i6.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: FilterPipe, name: "filter" }], animations: [
|
|
6123
6137
|
trigger('accordionToggle', [
|
|
6124
6138
|
state('collapsed', style({ height: '0px', overflow: 'unset' })),
|
|
6125
6139
|
state('expanded', style({ height: '*', overflow: 'unset' })),
|
|
@@ -6335,7 +6349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
6335
6349
|
], { optional: true })
|
|
6336
6350
|
]),
|
|
6337
6351
|
])
|
|
6338
|
-
], template: "<div class=\"position-relative h-100 card-outer\">\n <div class=\"d-flex justify-content-between mb-3 align-items-center position-relative\">\n <div class=\"d-flex gap-2 table-right-top-actions\">\n <div class=\"nav nav-tabs\" *ngIf=\"false\">\n <div class=\"nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\n <span\n *ngFor=\"let tab of tabs; let i = index\"\n (click)=\"setActiveTab(tab)\"\n class=\"nav-link cursor-pointer\"\n [class.active]=\"activeTab == tab\"\n >\n {{ tab }}\n </span>\n </div>\n </div>\n <div class=\"new_design_dropdown hide_arrow\">\n <a href=\"JavaScript:void(0)\" (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \" [class.active-filter-all]=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button\">\n Default View\n </a>\n </div>\n <div>\n <ng-container *ngIf=\"tableFilterViewId && hasAnyDefaultView()\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" (click)=\"toggleActions('unfulfilledDropdown')\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n Unfulfilled\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div>\n <!-- <div>\n <ng-container *ngIf=\"tableFilterViewId && hasAnyDefaultView()\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown\" (click)=\"toggleActions('UnpaidDropdown')\"\n [class.active]=\"activeTopButton === 'UnpaidDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center text-decoration-none dropdown_main_button\">\n Unpaid\n </a>\n <div *ngIf=\"activeTopButton === 'UnpaidDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons UnpaidDropdown\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unpaid_dropdown_menu\">\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\">\n </span>\n </div>\n <span>Test Type</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div> -->\n <div class=\"d-flex align-items-center\">\n <ng-container *ngIf=\"tableView | filter : searchTextPresetTable : 'name' as filteredList\">\n <div *ngFor=\"let list of filteredList | slice: 0:2;let i = index;\n trackBy: trackByTable\" class=\"dropdown_main_button\" [class.active-filter-all]=\"activeIndex === list.id\" title=\"{{list.id}}\" (click)=\"selectFilter(list,list.id); openIndex = null\">\n {{list.name}}\n </div>\n </ng-container>\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" (click)=\"toggleActions('unfulfilledDropdown')\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 d-none consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex gap-1 align-items-center table-right-top-actions\">\n <div class=\"global-search position-relative\" [style.width.px]=\"350\">\n <span *ngIf=\"enableGlobalSearch\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon ms-2 mt-0 position-absolute icon\" style=\"top: 8px;\"\n ></span>\n <input #globalSearchInput\n *ngIf=\"enableGlobalSearch\"\n class=\"form-control\"\n placeholder=\"Search\"\n [(ngModel)]=\"tableSearch\"\n (keydown.enter)=\"onGlobalSearch()\"\n (input)=\"onSearchInput($event)\"\n type=\"search\"\n />\n </div>\n <!-- <ng-container *ngFor=\"let button of buttons\">\n <div\n class=\"d-flex align-items-center gap-2 action-buttons-row\"\n *ngIf=\"button?.has_permission\"\n >\n <a\n href=\"JavaScript:void(0)\"\n (click)=\"onActionButtonClick(button.name)\"\n class=\"button button-small btn border border-primary btn-active-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n >\n <span\n *ngIf=\"button.is_showIcon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/' + button.icon + '.svg'\n \"\n class=\"svg-icon svg-icon-2\"\n ></span>\n <span\n class=\"label-hidden text-white\"\n [class.ms-0]=\"button.is_showIcon\"\n >{{ button?.name }}</span\n >\n </a>\n </div>\n </ng-container> -->\n <div *ngIf=\"!showFilterRow\"\n class=\"cursor-pointer position-relative action-buttons-row\"\n (click)=\"toggleOpenFilter()\"\n [class.active]=\"showFilters\">\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\" class=\"svg-icon svg-icon-2 d-flex\"></span>\n </a>\n <span *ngIf=\"activeFilteredColumns?.length\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #0022ff;\n background-color: rgb(0, 60, 255);\n position: absolute;\n right: 8px;\n top: 6px;\n \"\n class=\"rounded-circle d-block\"\n ></span>\n </div>\n <div class=\"cursor-pointer d-none\"\n (click)=\"toggleActions('advance-filter')\"\n [class.active]=\"activeTopButton === 'advance-filter'\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/zoom-charge.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span>\n </div>\n\n <!-- filter dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('filterDropdownNew')\"\n [class.active]=\"activeTopButton === 'filterDropdownNew'\">\n <a href=\"JavaScript:void(0)\" class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'filterDropdownNew'\" class=\"actions-dropdown mt-1 consumer_buttons filter_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu\">\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productName\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productName\">\n Product Name\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"createdDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"createdDate\">\n Created Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"updatedDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"updatedDate\">\n Updated Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productType\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productType\">\n Product Type\n </label>\n </span>\n </a>\n <hr class=\"my-2\" style=\"border: 1px solid #E0E0E0;\">\n <div class=\"d-flex\" (click)=\"activeFilter('newest')\" [class.active-filter]=\"activeFilterType === 'newest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowupIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"mt-1 newest ps-2\">Oldest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'newest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\"\n ></span>\n </span>\n </a>\n </div>\n <div class=\"d-flex\" (click)=\"activeFilter('oldest')\" [class.active-filter]=\"activeFilterType === 'oldest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowdownIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"oldest ps-2\">Newest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'oldest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\">\n </span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n <!-- settings dropdown -->\n <div class=\"cursor-pointer action-buttons-row position-relative\"\n (click)=\"toggleActions('setting')\"\n [class.active]=\"\n activeTopButton === 'setting' ||\n activeTopButton === 'table-layout' ||\n activeTopButton === 'table-presets' ||\n activeTopButton === 'show-hide-columns'\">\n <!-- <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span> -->\n\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'setting'\"\n class=\"actions-dropdown mt-1 actions-dropdown-setting\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu setting_dropdown_menu\">\n <!-- Table Layout -->\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggleActions('table-layout')\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/layoutIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown\"\n ></span>\n Table Layout</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n <!-- Table Presets -->\n <a (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center\"\n ></span>\n Table Presets</span\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n\n <!-- Columns -->\n <a *ngIf=\"!showSideMenu\" (click)=\"$event.stopPropagation(); toggleActions('show-hide-columns')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eyeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown me-2\"\n ></span>\n Columns</span>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"muted-text\">{{ columnsCount }}</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </div>\n </a>\n\n <a (click)=\"autosizeAllColumns()\" class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resizeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown me-2\"></span>\n <span>Autosize all columns</span>\n </span>\n <!-- <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div> -->\n </a>\n\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/multicellNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown me-2\"></span>\n <span>Multi-cell tooltip mode</span>\n </span>\n <!-- <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div> -->\n </a>\n\n <div class=\"dropdown-divider\"></div>\n\n <!-- Filter -->\n <!-- <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"toggleOpenFilter(); activeTopButton = '';\"\n *ngIf=\"!showFilterRow\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Filter\n </a> -->\n\n <!-- Download -->\n <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('csv')\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n CSV Export\n </a>\n <a *ngIf=\"enableExport\"\n class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('xlsx')\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Excel Export\n </a>\n <!-- Font Family & Font Size -->\n <div class=\"px-2 pb-2 pt-2\">\n <div class=\"d-flex gap-2\">\n <!-- <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"fontFaimly\"\n (change)=\"onFontChange()\"\n >\n <option *ngFor=\"let font of fontFamilies\" [value]=\"font\">\n {{ font }}\n </option>\n </select> -->\n\n <!-- Font Size -->\n <!-- <select\n class=\"form-select form-select-sm\"\n (change)=\"onFontChange()\"\n [(ngModel)]=\"bodyTextFontsSize\"\n >\n <option *ngFor=\"let size of fontSizes\" [value]=\"size\">\n {{ size }}\n </option>\n </select> -->\n </div>\n </div>\n </div>\n </div>\n\n <!-- Table Layout -->\n\n <ng-container *ngIf=\"activeTopButton === 'table-layout'\">\n <div\n *ngTemplateOutlet=\"tableLayout\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'table-presets'\">\n <div\n *ngTemplateOutlet=\"tablePreset\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'show-hide-columns'\">\n <div\n *ngTemplateOutlet=\"showHideColumns\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n </div>\n <!-- action dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('actionsDropdown')\"\n [class.active]=\"activeTopButton === 'actionsDropdown'\" *ngIf=\"buttons.length > 1\">\n <button type=\"button\" class=\"primary_btn_new common_btn consumerDropdownButton px-2\">\n Actions\n </button>\n <div *ngIf=\"activeTopButton === 'actionsDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu\">\n <a class=\"dropdown-item py-0 px-3 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <ng-container *ngFor=\"let button of buttons\">\n <ng-container *ngIf=\"button?.has_permission\">\n <span>{{ button?.name }}</span>\n </ng-container>\n </ng-container>\n </span>\n </a>\n </div>\n </div>\n </div>\n <!-- show single button -->\n <button class=\"btn btn-primary py-1 text_common_14px text-white\" type=\"button\" *ngIf=\"buttons.length == 1\">{{ buttons[0]?.name }}</button>\n\n <div class=\"action-buttons-row\" *ngIf=\"showFullScreenButton\">\n <a\n *ngIf=\"!isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Minimise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/expend.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n <a\n *ngIf=\"isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Maximise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/minimize.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n </div>\n <div>\n <!-- Example single danger button -->\n\n <!-- <button\n type=\"button\"\n class=\"btn btn-primary btn-sm d-flex gap-2 action-button\"\n (click)=\"toggleActions('actions')\"\n >\n Action\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/Vector.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <div\n *ngIf=\"activeTopButton === 'actions'\"\n class=\"actions-dropdown mt-1\"\n >\n <div class=\"dropdown-menu show\">\n <a class=\"dropdown-item\" href=\"#\">Action</a>\n <a class=\"dropdown-item\" href=\"#\">Another action</a>\n <a class=\"dropdown-item\" href=\"#\">Something else here</a>\n <div class=\"dropdown-divider\"></div>\n <a class=\"dropdown-item\" href=\"#\">Separated link</a>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showFilters && !showFilterRow\"\n class=\"top-filter-row border-top py-2 d-flex justify-content-between align-items-center\"\n [style.height.px]=\"topFilterRowHeight\"\n >\n <!-- LEFT SIDE (Filter tags + Filter button) -->\n <div class=\"d-flex gap-2 align-items-center\">\n <ng-container>\n <div\n *ngFor=\"let col of activeFilteredColumns; trackBy: trackByField\"\n class=\"filter-tags\"\n >\n <div\n (click)=\"\n isActiveFilterOpen = true;\n activeTopButton = 'filter-columns';\n openFilter(col)\n \"\n class=\"d-flex justify-content-center align-items-center muted-text add-filter-button active-filters\"\n style=\"white-space: nowrap\"\n [class.active]=\"\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen &&\n activeTopButton == 'filter-columns'\n \"\n >\n <span class=\"header-tag mt-0 d-flex align-items-center left-side-pinned\">\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n {{ col.header }}: {{col.query.first_value || col.query?._ids[0]}}\n <span\n (click)=\"\n $event.stopPropagation(); removeColumnFilterFromColumn(col)\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterCrossNew.svg'\n \"\n class=\"data-grid-svg-icon cross-secondary ms-2\"\n ></span>\n </span>\n </div>\n\n <ng-container\n *ngIf=\"\n activeTopButton === 'filter-columns' &&\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen\n \"\n >\n <div\n *ngTemplateOutlet=\"filterColumns; context: { column: col }\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Filter Button -->\n <div class=\"add-filter-button-menu\">\n <div\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"d-flex justify-content-center align-items-center muted-text add-filter-button button-filter\"\n style=\"width: 70px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\n class=\"me-2 data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n Filter\n </div>\n\n <ng-container\n *ngIf=\"activeTopButton === 'filter-columns' && !isActiveFilterOpen\"\n >\n <div\n *ngTemplateOutlet=\"filterColumns\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT SIDE (Update + Reset) -->\n <div class=\"d-flex gap-3 align-items-center\">\n <div\n (click)=\"savePreset()\"\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!checkFilterChangesEffect()\"\n >\n Update View\n </div>\n\n <div\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!tableFilterViewId && activeFilteredColumns?.length\"\n (click)=\"clearAllFilters()\">\n Clear filters\n </div>\n </div>\n </div>\n\n <div\n [style.height]=\"\n showFilters ? 'calc(100% - ' + (topFilterRowHeight + footerRowHeight) + 'px)' : 'calc(100% - ' + footerRowHeight + 'px)'\n \"\n cdkDropListGroup\n class=\"data-grid-table-wrapper overflow-hidden\"\n #dataGridContainer\n [style.fontFamily]=\"fontFaimly\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n id=\"data-grid-main-container\"\n >\n <div\n *ngIf=\"showRowsGrouping\"\n [style.height.px]=\"headerRowHeight\"\n [cdkDropListData]=\"columns\"\n [style.backgroundColor]=\"\n topGroupedBadgesBackgroundColor || headerBackgroundColor\n \"\n cdkDropList\n (cdkDropListEntered)=\"enterToTopRowGrouping($event)\"\n (cdkDropListExited)=\"exitedFromTheTopRow($event)\"\n (cdkDropListDropped)=\"onDropTopGroup($event)\"\n [cdkDropListEnterPredicate]=\"canEnterToRowsGrouping\"\n id=\"rows-grouping-top-container\"\n class=\"border-below d-flex px-4 align-items-center\"\n >\n <div\n class=\"d-flex gap-2 align-items-center\"\n [style.color]=\"headerTextColor\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <div *ngIf=\"!draggingInGroupArea && !groupedColumns?.length\">\n Drag here to set row groups\n </div>\n <div\n cdkDropListOrientation=\"horizontal\"\n cdkDropList\n (cdkDropListDropped)=\"onGroupReorder($event)\"\n class=\"d-flex\"\n >\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'x'\"\n *ngFor=\"\n let child of groupedColumns;\n let i = index;\n trackBy: trackByField\n \"\n class=\"d-flex align-items-center\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n groupedColumns.length > 1 && i != groupedColumns.length - 1\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"d-flex overflow-hidden\"\n [style.height]=\"\n 'calc(100% - ' +\n (showRowsGrouping\n ? headerRowHeight + footerRowHeight\n : footerRowHeight) +\n 'px)'\n \"\n >\n <div\n class=\"h-100\"\n [style.width]=\"\n !showSideMenu\n ? '100%'\n : sideMenuVisible\n ? 'calc(100% - 280px)'\n : 'calc(100% - 30px)'\n \"\n >\n <div class=\"h-100 transition position-relative w-100\">\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- Data Grid Header starts here -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- [style.backgroundColor]=\"headerBackgroundColor\" -->\n <div\n class=\"data-grid-header-wrapper w-100\"\n [style.color]=\"headerTextColor\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.fontSize.px]=\"headerTextFontsSize\"\n [class.border-below]=\"!hasAnyVisibleColumn\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Left Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header left-pinned\"\n #leftPinnedHeader\n [class.border-right]=\"hasLeftPinnedColumns\">\n <div *ngIf=\"showSerialNumber\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n class=\"select-all-checkbox-cell border-below\"\n [style.width.px]=\"55\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n S.No\n </div>\n <div *ngIf=\"showCheckboxes\"\n class=\"select-all-checkbox-cell border-below\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [indeterminate]=\"isIndeterminateState(dataSet)\"\n [checked]=\"isAllSelected(dataSet)\"\n (change)=\"toggleSelectAll(dataSet)\"\n />\n </div>\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"d-flex\"\n cdkDropList\n id=\"left-pinned-header\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"leftPinnedColumns\"\n (cdkDropListEntered)=\"onDropListEnter($event, 'left')\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewLeftPinnedColumns')\n \"\n (cdkDropListDropped)=\"onDropGroup()\"\n style=\"min-width: 1px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of leftPinnedColumns;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewLeftPinnedColumns'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: ''\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngIf=\"col?.children?.length; else singleCol\"\n >\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Center Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header center-scrollable\"\n #centerPinnedHeader\n (scroll)=\"onCenterBodyScroll($event)\"\n id=\"center-pinned-header\"\n cdkDropList\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n [cdkDropListData]=\"centerColumns\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListSortingDisabled]=\"\n isDisableColumnGrouping && draggingInGroupArea\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'center')\"\n (cdkDropListSorted)=\"onSortGroup($event, 'previewCenterColumns')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n [style.maxWidth]=\"\n 'calc(100% - ' +\n (rightPinnedHeader.offsetWidth + leftPinnedHeader.offsetWidth) +\n 'px)'\n \"\n >\n <div\n *ngIf=\"groupedColumns?.length\"\n style=\"min-width: 200px\"\n class=\"h-100 align-items-center\"\n #columnsGroupedBox\n id=\"groupBoxHeaderDiv\"\n >\n <div\n class=\"d-flex w-100 justify-content-between align-items-center border-below\"\n [style.height.px]=\"\n showFilterRow ? headerRowHeight * 2 : headerRowHeight\n \"\n >\n <div class=\"ps-3\">Group</div>\n <div class=\"d-flex\">\n <div\n class=\"three-dots cursor-pointer\"\n (click)=\"\n openThreeDotsMenu($event, 'group');\n isThreeDotsFilterOpen = false\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroupBox($event)\n \"\n class=\"resize-handle\"\n style=\"margin-right: -2px\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n\n <div\n [style.height.px]=\"headerRowHeight\"\n class=\"border-below\"\n ></div>\n </div>\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"gridType === 'Assets' || gridType === 'Tasks'\"\n >\n </span>\n <div\n class=\"dragable-header\"\n (cdkDragStarted)=\"\n checkColumnGroupingStatus(col);\n dragStartOnGroup(col);\n onDragStarted(col)\n \"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of centerColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewCenterColumns'\n }\n \"\n >\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (draggingInGroupArea\n ? 'data-grid/icons/justify.svg'\n : 'data-grid/icons/arrows-move.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n <span\n *ngIf=\"isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'centerColumns'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && !isOutsideContainer\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container *ngIf=\"child?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container *ngIf=\"col?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Right Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n cdkDropList\n id=\"right-pinned-header\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n cdkDropListOrientation=\"horizontal\"\n class=\"data-grid-header right-pinned\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewRightPinnedColumns')\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'right')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n #rightPinnedHeader\n class=\"right-pinned-header d-flex\"\n style=\"min-width: 0.2px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of rightPinnedColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n pinnedRight: true,\n index: i,\n section: 'right'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'right'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <!-- Data Grid Body starts here -->\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <div\n class=\"h-100 d-flex justify-content-center align-items-center\"\n *ngIf=\"!dataSet?.length && !loading && !dataSetLoading\">\n <!-- <div\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/record-not-found.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></div> -->\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/no-data-image.svg'\"\n class=\"data-grid-svg-icon mb-3 d-flex justify-content-center align-items-center\">\n </span>\n <p class=\"text_common_16px mb-0\">No data available</p>\n <p class=\"page_refresh mb-0\">Try adjusting filters or refresh the page</p>\n </div>\n </div>\n\n <div\n class=\"position-absolute w-100 h-100 d-flex justify-content-center align-items-center loading-overlay\"\n *ngIf=\"loading || dataSetLoading\"\n style=\"\n z-index: 999;\n backdrop-filter: blur(1px);\n \"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div class=\"spinner-border text-primary\" role=\"status\">\n <!-- <span class=\"loader\"></span> -->\n <!-- <span class=\"visually-hidden\">Loading...</span> -->\n <!-- </div> -->\n </div>\n </div>\n\n <div\n class=\"data-grid-body-wrapper position-relative d-flex\"\n [style.height]=\"bodyWrapperHeight\"\n style=\"overflow-y: auto; overflow-x: hidden\"\n #mainScroll\n (scroll)=\"onMainScroll($event)\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n >\n <!-- LEFT PINNED -->\n <div\n [style.height.px]=\"\n !groupedColumns.length ? originalDataSet.length * rowHeight : 0\n \"\n ></div>\n <!-- [class.transparent-border-right]=\"!hasLeftPinnedColumns\" -->\n <div [class.h-100]=\"originalDataSet.length < 8\">\n <div\n class=\"data-grid-body left-pinned-body w-100\"\n style=\"overflow-y: hidden\"\n [class.border-right]=\"hasLeftPinnedColumns\"\n [class.transparent-border-right]=\"!hasLeftPinnedColumns\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"leftPinnedBackgroundColor\"\n [class.h-100]=\"originalDataSet.length < 8\"\n *ngIf=\"!loading && !dataSetLoading\"\n [@rowDynamic]=\"rowAnimation\"\n\n \n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewLeftPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n isLeft: true,\n section: 'left',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewLeftPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'left',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- CENTER -->\n <div\n class=\"h-100\"\n [style.width.px]=\"centerPinnedHeader.clientWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div\n class=\"data-grid-body center-scrollable\"\n [class.h-100]=\"originalDataSet.length < 8\"\n style=\"overflow-y: hidden; overflow-x: auto\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n #centerScrollableBody\n (scroll)=\"onCenterBodyScroll($event)\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n \n >\n <div [@rowDynamic]=\"rowAnimation\" *ngIf=\"!loading && !dataSetLoading\">\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewCenterColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'center',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewCenterColumns,\n isEven: false,\n isOdd: false,\n section: 'center',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT PINNED -->\n <div\n class=\"right-pinned-body-wrapper\"\n *ngIf=\"true\"\n [class.h-100]=\"originalDataSet.length < 8\"\n [style.maxWidth.px]=\"\n isScrollbarVisible\n ? rightPinnedHeader.offsetWidth - 15\n : rightPinnedHeader.offsetWidth\n \"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n [@rowDynamic]=\"rowAnimation\"\n >\n <div\n class=\"data-grid-body right-pinned-body w-100 h-100\"\n style=\"overflow-y: hidden\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.boxShadow]=\"rightPinnedBoxshadow\"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n *ngIf=\"!loading && !dataSetLoading && hasRightPinnedColumns\"\n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewRightPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'right',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewRightPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'right',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <div\n style=\"top: auto; left: auto\"\n (click)=\"\n $event.stopPropagation();\n fullscreenImage = null;\n cdr.detectChanges()\n \"\n [style.width.px]=\"dataGridContainer.offsetWidth\"\n [style.height.px]=\"\n dataGridContainer.offsetHeight - (footerRowHeight + 100)\n \"\n class=\"image-modal full-image-modal\"\n *ngIf=\"fullscreenImage\"\n >\n <img\n (click)=\"$event.stopPropagation()\"\n [src]=\"fullscreenImage\"\n alt=\"Fullscreen Image\"\n />\n </div>\n <div\n *ngIf=\"selectedRows.size > 0 && showTaskbar\"\n class=\"taskbar w-100\"\n [style.bottom.px]=\"85\"\n >\n <div class=\"selected-rows-action-bar\" [@slideUp]>\n <span class=\"selected-count\">\n {{ selectedRows.size }} selected of\n {{\n paginationConfig.totalResults ||\n config?.paginationParams?.totalItems\n }}\n Total\n </span>\n <div class=\"action-buttons d-flex align-items-center\">\n <ng-container\n *ngFor=\"let action of taskbarActions; let i = index\"\n >\n <ng-container *ngIf=\"action?.has_permission\">\n <span\n class=\"action-btn verified btn {{ action }}\"\n (click)=\"onVerifyClick(action?.actionName)\"\n >{{ action?.actionName }}</span\n >\n <span\n *ngIf=\"\n taskbarActions.length > 1 &&\n i !== taskbarActions.length - 1 &&\n taskbarActions[i + 1]?.has_permission\n \"\n class=\"\"\n >|</span\n >\n </ng-container>\n </ng-container>\n <button (click)=\"clearSelectionState(tableType);selectedRows.clear();\" class=\"clear-btn ms-2 mt-2\">\n <i class=\"bi bi-x-circle\"></i> Clear Selection\n </button>\n </div>\n </div>\n </div>\n </div>\n <!-- Vertical Fake scroll Bar -->\n <!-- <div\n (scroll)=\"onMainFakeScroll($event)\"\n class=\"fake-scrollbar fake-scrollbar-vertical d-none\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n [style.top.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n #fakeScroll\n [style.height]=\"bodyWrapperHeight\"\n style=\"\n overflow-y: auto;\n overflow-x: hidden;\n width: 17px;\n position: absolute;\n right: 0;\n background-color: f1f2f3;\n z-index: 10;\n \"\n >\n <div [style.height.px]=\"rowHeight * dataSetLength\"></div>\n </div> -->\n </div>\n\n <!-- Horizintal Fake Scrollbars -->\n <div\n class=\"d-flex justify-content-between\"\n *ngIf=\"hasScroll\"\n >\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"leftPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n (scroll)=\"onCenterBodyScroll($event)\"\n class=\"fake-horizintal-scrollbar\"\n #horizintalFakeScroll\n [style.width.px]=\"centerPinnedHeader.offsetWidth\"\n >\n <div [style.width.px]=\"centerPinnedHeader.scrollWidth - 10\"></div>\n </div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n </div>\n </div>\n\n <!-- Side Menu Implemented Here -->\n <div\n *ngIf=\"showSideMenu\"\n [style.width.px]=\"sideMenuVisible ? 280 : 30\"\n class=\"right-menu h-100\"\n [style.backgroundColor]=\"sidemenuBackgroundColor\"\n >\n <div class=\"h-100 d-flex flex-row-reverse\">\n <div\n style=\"width: 30px\"\n class=\"d-flex flex-column align-items-center cursor-pointer\"\n [class.border-start]=\"sideMenuVisible\"\n >\n <div\n (click)=\"toggleSideMenu('cols')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'cols' && sideMenuVisible\n \"\n [class.border-below]=\"sideMenuVisible\"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Columns</div>\n </div>\n\n <div\n (click)=\"toggleSideMenu('filtrs')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'filtrs' && sideMenuVisible\n \"\n [class.border-below]=\"\n sideMenuVisible && currentOpenedSideMenue == 'filtrs'\n \"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Filter</div>\n </div>\n </div>\n <div\n class=\"h-100\"\n *ngIf=\"sideMenuVisible\"\n [ngStyle]=\"{ width: sideMenuVisible ? '250px' : '' }\"\n >\n <div class=\"h-100\">\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'cols' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"columnPannel\"></ng-container>\n <!-- Column Items -->\n <div class=\"column-panel-body px-3\">\n <ng-container\n *ngFor=\"let col of columns; trackBy: trackByField\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n <hr />\n\n <div class=\"side-menu-row-groups\" style=\"height: 30%\">\n <ng-container\n *ngTemplateOutlet=\"sideMenuRowGroups\"\n ></ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'filtrs' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"sideFilters\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n [style.height.px]=\"footerRowHeight\"\n class=\"border-top\"\n [style.backgroundColor]=\"footerRowBackgroundColor\"\n >\n <!-- Rows: <span class=\"fw-500 ms-1\">{{ dataSet.length }}</span> -->\n\n <div class=\"pagination-container\"\n [style.height.px]=\"footerRowHeight\"\n [style.padding.px]=\"footerPadding\">\n <div class=\"page-size\">\n <select\n [(ngModel)]=\"paginationConfig.limit\"\n (change)=\"onPageSizeChange()\"\n >\n <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n {{ size }}\n </option>\n </select>\n <span class=\"separator\"> per page </span>\n </div>\n\n <div class=\"page-info\">\n \n {{ (paginationConfig.page - 1) * paginationConfig.limit + 1 }}-{{\n paginationConfig.page * paginationConfig.limit <\n paginationConfig.totalResults\n ? paginationConfig.page * paginationConfig.limit\n : paginationConfig.totalResults\n }}\n of\n {{ paginationConfig.totalResults }}\n results\n </div>\n\n <div class=\"page-buttons\">\n <button\n (click)=\"goToPage(paginationConfig.page - 1)\"\n [disabled]=\"paginationConfig.page === 1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-left.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n\n <ng-container *ngFor=\"let page of visiblePages\">\n <button\n *ngIf=\"page !== '...'\"\n (click)=\"goToPage(page)\"\n [class.active]=\"page === paginationConfig.page\"\n >\n {{ page }}\n </button>\n <span *ngIf=\"page === '...'\">...</span>\n </ng-container>\n\n <button\n (click)=\"goToPage(paginationConfig.page + 1)\"\n [disabled]=\"paginationConfig.page === paginationConfig.totalResults\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- Header Cell Template -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n\n<ng-template\n #headerCell\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"section\"\n let-calledFromNestedPlaceholder=\"calledFromNestedPlaceholder\"\n>\n <div>\n <!-- Group Header -->\n <ng-container *ngIf=\"col.children?.length > 0; else flatHeader\">\n <div cdkDroplistGroup class=\"group-column-wrapper\">\n <!-- Parent Header -->\n <div\n *ngIf=\"shouldTheGroupHeaderShow(col)\"\n class=\"header-cell group-header\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n [style.gridColumn]=\"'span ' + col.children.length\"\n [style.fontWeight]=\"headerFontWeight\"\n [class.flex-row-reverse]=\"pinnedRight\"\n [class.justify-content-end]=\"pinnedRight\"\n style=\"grid-row: 1\"\n >\n <div\n class=\"group-header-content\"\n [title]=\"col.header\"\n [class.ms-2]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(col.children)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroup($event, col, pinnedRight)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n\n <!-- Child Headers and Filters -->\n\n <div\n class=\"d-flex\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"col.children\"\n (cdkDropListSorted)=\"onChildDroplistSorted($event, sections)\"\n (cdkDropListDropped)=\"onChildDroplistDroped($event)\"\n [cdkDropListSortingDisabled]=\"false\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n >\n <div\n cdkDrag\n [cdkDragData]=\"child\"\n *ngFor=\"let child of col.children; let i = index\"\n >\n <!-- Child Header -->\n <ng-container *ngIf=\"child.is_visible && !child['isRowGrouped']\">\n <div\n cdkDragHandle\n class=\"header-cell one-row-header-cells cursor-pointer\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 2\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(child)\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header-test1\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100\"\n [class.editable-header]=\"child?.is_editable\"\n (click)=\"\n openThreeDotsMenu($event, child);\n openFilteronThreeDotsClick(child)\n \"\n >\n {{ child.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\"\n class=\"d-flex align-items-center\"\n *ngIf=\"child.pinned\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n class=\"three-dots p-1 zaid-test\"\n (click)=\"\n openThreeDotsMenu($event, child);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === child\"\n style=\"top: -50%; z-index: 21\"\n [style.left.px]=\"\n -(!child?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 0\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: child,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(child)\"\n (mousedown)=\"\n $event.stopPropagation();\n onResizeColumn($event, child)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"child.filterValue\"\n (ngModelChange)=\"onFilterChange(child)\"\n (paste)=\"onFilterChange(child); applyDropdownFilter()\"\n [readonly]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n [class.disabled-search-input]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n (click)=\"\n $event.stopPropagation();\n openFilterFromDisabledSearchedInput(child)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(child)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(child)\"\n [class.pe-none]=\"child?.type == 'image'\"\n ><span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(child)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell?.field == child?.field\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"\n child?.pinned ? 0 : -centerPinnedHeader.scrollLeft\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: child }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div\n *ngIf=\"\n !draggingInGroupArea ||\n (child.is_groupable && draggingInGroupArea)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div *ngIf=\"draggingInGroupArea && !child.is_groupable\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ban.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\" class=\"position-relative\">\n <div\n *ngTemplateOutlet=\"\n childHeaderPlaceholder;\n context: {\n $implicit: child,\n index: i,\n sections: sections,\n calledFromNestedPlaceholder: true,\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && child?.is_groupable\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron: false,\n pinnedRight: pinnedRight,\n sections: sections,\n index: i\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Flat Header || Single Header Cell-->\n <ng-template #flatHeader>\n <div\n class=\"group-column-wrapper\"\n *ngIf=\"col.is_visible && !col['isRowGrouped']\"\n >\n <!-- Full-height Header Cell (spans 2 rows visually) -->\n <div\n class=\"header-cell one-row-header-cells\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [class.border-right]=\"showVerticalBorder\"\n [style.min-height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\n \"\n [style.height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\n \"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 1 / span 2\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between w-100 align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header_figma_spacing\"\n [title]=\"col.header\"\n >\n <div\n class=\"text-ellipsis h-100 cursor-pointer\"\n [class.editable-header]=\"col?.is_editable\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(col)\"\n (click)=\"\n openThreeDotsMenu($event, col);\n openFilteronThreeDotsClick(col)\n \"\n >\n {{ col.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\"\n class=\"d-flex align-items-center three-dots\"\n *ngIf=\"col?.pinned\">\n <span (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex justify-content-center align-items-center pin_blue_icon\"\n ></span>\n </div>\n <!-- <div\n [class.me-2]=\"col.order_by\"\n class=\"d-flex align-items-center\"\n *ngIf=\"sortingConfig?.field == col.field\">\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortDesc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\"\n ></span>\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortAsc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\"\n ></span>\n </div> -->\n <div class=\"three-dots p-1 me-0\" [class.threeDotActive]=\"activeCol === col && clickedOnSortIcon\"\n (click)=\"openThreeDotsMenu($event, col, true);\"\n style=\"cursor: pointer\">\n <div *ngIf=\"sortingConfig?.field === col.field\" \n class=\"d-flex align-items-center\">\n \n <!-- Ascending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon ascendingAppliedIcon flex justify-content-center align-items-center cursor-pointer\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\">\n </span>\n\n <!-- Descending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center cursor-pointer rotated-180\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\">\n </span>\n </div>\n <span *ngIf=\"sortingConfig?.field !== col.field\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortIconGray.svg'\"\n class=\"data-grid-svg-icon figmaIconSize d-flex justify-content-center align-items-center\"\n (click)=\"openThreeDotsMenu($event, col, true)\">\n </span>\n </div>\n <div class=\"three-dots p-1 zaid-test1\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\" *ngIf=\"!col?.pinned\"\n (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown dropdown d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"z-index: 21\"\n [style.left.px]=\"\n -(!col?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 25\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n [class.w-100]=\"col.pinned == 'right'\"\n (dblclick)=\"autosizeColumn(col)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeColumn($event, col)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n (ngModelChange)=\"onFilterChange(col)\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n (paste)=\"onPasteInFilterRowSearch($event, col)\"\n (click)=\"\n $event.stopPropagation(); openFilterFromDisabledSearchedInput(col)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(col)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(col)\"\n [class.pe-none]=\"col?.type == 'image'\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(col)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"col?.pinned ? 0 : -centerPinnedHeader.scrollLeft\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- Body Cell Template -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n\n<ng-template\n #rowCell\n let-row\n let-columns=\"columns\"\n let-isEven=\"isEven\"\n let-isOdd=\"isOdd\"\n let-isLeftSection=\"isLeft\"\n let-section=\"section\"\n let-rowIndex=\"rowIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <!-- Check if row is a group -->\n <ng-container\n *ngTemplateOutlet=\"groupRowTemplate; context: { $implicit: row, depth: 0 }\"\n ></ng-container>\n <ng-template #groupRowTemplate let-row let-depth=\"depth\">\n <ng-container *ngIf=\"row.isGroup; else regularRow\">\n <!-- Group Header -->\n <div\n class=\"group-header-row d-flex align-items-center\"\n [style.height.px]=\"rowHeight\"\n [class.border-below]=\"section !== 'center'\"\n [style.width]=\"\n section === 'center'\n ? (centerScrollableBody?.scrollWidth ?? 0) + 'px'\n : '100%'\n \"\n >\n <div\n *ngIf=\"section == 'left'\"\n class=\"h-100 d-flex\"\n [style.width.px]=\"leftPinnedHeader.offsetWidth - 1\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n >\n <div\n *ngIf=\"showSerialNumber\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center h-100 border-right justify-content-end pe-2 s-no\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [style.width.px]=\"55\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) || \"\" }}\n </div>\n <div\n *ngIf=\"showCheckboxes\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center justify-content-center h-100 border-right\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.color]=\"checkboxesColor\"\n >\n <input\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"getGroupCheckedState(row) === true\"\n [indeterminate]=\"getGroupCheckedState(row) === undefined\"\n (change)=\"selectGroupRow($event, row)\"\n />\n\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'center'\"\n [style.width.px]=\"centerPinnedHeader.scrollWidth\"\n [style.minWidth.px]=\"centerPinnedHeader.scrollWidth\"\n class=\"d-flex align-items-center ps-2 h-100 border-below\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n [style.paddingLeft.px]=\"depth > 0 ? depth * 30 : 0\"\n >\n <span class=\"me-2 filter-icon-wrapper\" (click)=\"toggleExpand(row)\">\n <span\n class=\"data-grid-svg-icon align-items-center d-flex\"\n [inlineSVG]=\"\n row.isExpand\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <strong (click)=\"toggleExpand(row)\" class=\"cursor-pointer\">\n {{ row.groupValue }} ({{ countLeafRows(row) }})\n </strong>\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'right'\"\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n ></div>\n </div>\n\n <!-- Recursive Children -->\n <div class=\"group-children\" *ngIf=\"row.isExpand\" [@slideToggle]>\n <ng-container\n *ngFor=\"let child of row.children; let i = index; trackBy: trackById\"\n >\n <ng-container *ngIf=\"child.isGroup; else dataRow\">\n <!-- Recursive call for nested group -->\n <ng-container\n *ngTemplateOutlet=\"\n groupRowTemplate;\n context: { $implicit: child, depth: depth + 1 }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #dataRow>\n <!-- Regular data row -->\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: child,\n columns: columns,\n isEven: i % 2 === 0,\n isOdd: i % 2 !== 0,\n isLeft: isLeftSection,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n\n <!-- Regular row (not a group) -->\n <ng-template #regularRow>\n <div\n class=\"d-flex\"\n [style.height.px]=\"rowHeight\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n [class.selected-cell]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <span\n (click)=\"toggleDetailRowExpand(row)\"\n *ngIf=\"row?.detail?.result?.length || gridType === 'Tasks'\"\n class=\"data-grid-svg-icon filter-icon-wrapper\"\n [inlineSVG]=\"\n isDetailsExpanded(row)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <div\n [style.min-width.px]=\"\n section == 'center' && groupedColumns?.length ? groupBoxPadding : 0\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row h-100\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n ></div>\n <div\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n >\n <div\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below justify-content-end pe-2 s-no\"\n [style.width.px]=\"55\"\n *ngIf=\"isLeftSection && showSerialNumber\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) }}\n </div>\n <div\n [style.backgroundColor]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n ? selectedRowsBackgroundColor\n : checkboxesBackgroundColor\n \"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below left_checkbox_ailgnment\"\n *ngIf=\"isLeftSection && showCheckboxes\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"isRowSelected(row)\"\n (change)=\"toggleRowSelection(row)\"\n />\n </div>\n\n <!-- Render all columns -->\n <ng-container\n *ngFor=\"\n let col of columns;\n trackBy: trackByField;\n let colIndex = index\n \"\n >\n <ng-container *ngIf=\"col.children?.length > 0; else flatColumn\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n trackBy: trackByField;\n let subColIndex = index\n \"\n >\n <ng-container *ngIf=\"child?.is_visible && !child?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: child,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: subColIndex,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #flatColumn>\n <ng-container *ngIf=\"col?.is_visible && !col?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: col,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: null,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n </div>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'left' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'center' && isDetailsExpanded(row)\"\n class=\"accordion-details center-section\"\n style=\"\n max-height: 350px;\n overflow-y: hidden;\n overflow-x: auto;\n scrollbar-width: thin;\n \"\n #nestedTable\n [style.width]=\"\n hasRightPinnedColumns\n ? '100%'\n : hasVerticalScroll\n ? 'calc(100% - 12px)'\n : '100%'\n \"\n >\n <ng-container *ngIf=\"gridType == 'Assets'\">\n <ng-container\n *ngTemplateOutlet=\"nestedTableTemplate; context: { $implicit: row }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"gridType == 'Tasks'\">\n <ng-container\n *ngTemplateOutlet=\"\n taskManagementTemplate;\n context: { taskDetails: row }\n \"\n ></ng-container>\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'right' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- Actual Cell is Here -->\n<ng-template\n #cellTemplate\n let-col=\"col\"\n let-row=\"row\"\n let-section=\"section\"\n let-subColIndex=\"subColIndex\"\n let-rowIndex=\"rowIndex\"\n let-colIndex=\"colIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <div\n #cellContainer\n (click)=\"\n editingKey = ''; setActiveCell(row, col); collapseAllExpandedCells()\n \"\n [style.fontWeight]=\"bodyFontWeight\"\n [class.border-right]=\"showVerticalBorder\"\n class=\"cell overflow-visible position-relative data-grid-cell\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.fontSize.px]=\"bodyTextFontsSize\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n [class.active-cell]=\"\n isActiveCell(row, col) && !isEditing(row, col) && selectedKeys.size == 1\n \"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, false, cellContainer)\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row?.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row?.__virtualIndex\"\n tabindex=\"-1\"\n (keydown.enter)=\"$event.preventDefault(); enableEdit(row, col)\"\n (mousedown)=\"\n startSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseenter)=\"\n extendSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"\n isSelected(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n section\n )\n \"\n [class.top-border]=\"\n isTopBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-border]=\"\n isBottomBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.left-border]=\"\n isLeftBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.right-border]=\"\n isRightBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-left-corner]=\"\n isTopLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-right-corner]=\"\n isTopRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-left-corner]=\"\n isBottomLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-right-corner]=\"\n isBottomRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n >\n <!-- (mousedown)=\"startSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseenter)=\"extendSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"isSelected(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field)\" -->\n <div\n class=\"table-cell\"\n [class.active-for-editing]=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n getNestedValue(row, col.field)?.length <= 50)\n \"\n >\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n (getNestedValue(row, col.field)?.length <= 50 &&\n !expandedCells.size));\n else viewMode\n \"\n >\n <ng-container [ngSwitch]=\"col.type\">\n <!-- Text Input -->\n <input\n [style.height.px]=\"rowHeight - 10\"\n *ngSwitchCase=\"'input'\"\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Number Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'number'\"\n #numberInput=\"ngModel\"\n #numberRef\n (keypress)=\"allowOnlyNumbers($event)\"\n type=\"number\"\n required\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n (keydown.enter)=\"numberRef.blur()\"\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': numberInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Date Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'date'\"\n type=\"date\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n #dateInput=\"ngModel\"\n [ngClass]=\"{\n 'is-invalid': dateInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Dropdown -->\n <!-- ng-select like dropdown -->\n <div\n *ngSwitchCase=\"'dropdown'\"\n class=\"dropdown w-100\"\n (blur)=\"disableEdit(row, col)\"\n >\n <!-- Trigger -->\n <button\n class=\"form-select form-select-sm text-start w-100 text-ellipsis\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-expanded=\"false\"\n [style.minHeight.px]=\"rowHeight - 10\"\n data-bs-display=\"static\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <ng-container>\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </ng-container>\n <ng-template #placeholder> Select options... </ng-template>\n </button>\n\n <!-- Menu -->\n <div\n class=\"dropdown-menu w-100 p-0 cell-editing-dropdown-menu rounded-3\"\n [class.show]=\"isEditing(row, col)\"\n >\n <!-- Search -->\n <div class=\"px-2 py-1 editing-dropdown-search-input\">\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"editinDropdownSearch\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </div>\n\n <!-- Options -->\n <!-- <div\n class=\"cell-editin-dropdown\"\n style=\"max-height: 200px; overflow: auto\"\n >\n <div\n (click)=\"\n setNestedValue(row, col, option, true); editingKey = null\n \"\n class=\"px-2 py-1 d-flex align-items-center deopdown-item\"\n *ngFor=\"\n let option of col.column_dropdown_value\n | filter : editinDropdownSearch: 'value'\n \"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + option.value || option\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport \n itemSize=\"35\" \n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"px-2 py-1 d-flex align-items-center dropdown-item\"\n *cdkVirtualFor=\"\n let option of col.column_dropdown_value \n | filter : editinDropdownSearch : 'value'\n \"\n (click)=\"setNestedValue(row, col, option, true); editingKey = null\"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + (option.value || option)\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n </div>\n </div>\n\n <input\n *ngSwitchCase=\"'email'\"\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #emailModel=\"ngModel\"\n #emailInput\n type=\"email\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$\"\n (blur)=\"disableEdit(row, col, emailModel)\"\n (keydown.enter)=\"\n emailModel.control.markAsTouched(); emailInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': emailModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <!-- Default fallback -->\n <input\n *ngSwitchDefault\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #textModel=\"ngModel\"\n #textInput\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"\n textModel.control.markAsTouched(); textInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </ng-container>\n </div>\n\n <!-- Display mode -->\n <ng-template #viewMode>\n <div\n class=\"d-flex justify-content-between align-items-center overflow-hidden\"\n [ngClass]=\"getCellClasses(col, getNestedValue(row, col.field))\"\n >\n <!-- Field icon (for Tasks grid) -->\n <ng-container\n *ngIf=\"gridType === 'Tasks' && iconMap[col.field] && !isTotalRow\"\n >\n <span\n class=\"cursor-pointer me-2\"\n (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n [inlineSVG]=\"iconMap[col.field](row, col)\"\n ></span>\n </ng-container>\n\n <!-- \u2705 Custom cell renderer support -->\n <ng-container *ngIf=\"col.cellRenderer; else defaultCell\">\n <ng-container\n [cellRenderInit]=\"col.cellRenderer\"\n [rowData]=\"row\"\n [colData]=\"col\"\n [cellValue]=\"getNestedValue(row, col?.field)\"\n (cellEvent)=\"onCellEvent($event)\"\n >\n </ng-container>\n </ng-container>\n\n <!-- \uD83E\uDDFE Default text-based cell rendering -->\n <ng-template #defaultCell>\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"getCellTitle(row, col)\"\n >\n <!-- Normal cell -->\n <ng-container\n *ngIf=\"\n col.type !== 'image' &&\n col.field != 'image' &&\n col.field != 'invoice.invoice_image' &&\n !isTotalRow\n \"\n >\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{getCellTitle(row, col)}}\n </ng-container>\n\n <!-- Total row -->\n <ng-container *ngIf=\"isTotalRow\">\n {{ getTotalAmount(col) }}\n </ng-container>\n\n <!-- Invoice Image -->\n <ng-container *ngIf=\"col.field == 'invoice.invoice_image'\">\n <div style=\"display: flex; align-items: center; zoom: 0.7\">\n <span\n title=\"{{ getNestedValue(row, col.field) || 'Attachment' }}\"\n (click)=\"downloadAttchment(getNestedValue(row, col.field))\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(getNestedValue(row, col.field)) +\n '.svg'\n \"\n ></span>\n </div>\n </ng-container>\n\n <!-- Image cell -->\n <ng-container *ngIf=\"col.type == 'image' && !isTotalRow\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: { row: row, col: col }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <span\n *ngIf=\"\n (!col?.cellRenderer && showCellDetailsBox &&\n getNestedValue(row, col.field)?.length > 50 && col.type !== 'image') ||\n (isNestedValueArray(row, col.field) &&\n getNestedValue(row, col.field)?.length > 1)\n \"\n class=\"toggle-icon data-grid-svg-icon ms-2 cursor-pointer\"\n [inlineSVG]=\"\n isExpanded(row, col)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"\n $event.stopPropagation();\n toggleExpandOfLongCellText(row, col, columns, true)\n \"\n (dblclick)=\"$event.preventDefault(); $event.stopPropagation()\"\n ></span>\n </ng-template>\n <!-- Expand / Collapse icon -->\n </div>\n\n <!-- Expanded text -->\n <div\n class=\"position-absolute w-100 expanded-box\"\n *ngIf=\"isExpanded(row, col)\"\n [style.zIndex]=\"getZIndex(row, col)\"\n style=\"top: 100%; left: 0\"\n [attr.id]=\"(row.id || row._id) + '-' + (col.id || col._id)\"\n [class.invisible]=\"!showDetailsBox\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n fullTextTemplate;\n context: {\n row: row,\n col: col,\n isArray: isNestedValueArray(row, col.field)\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n</ng-template>\n\n<!-- Headers Action List On clicking three dots -->\n\n<ng-template\n #columnMenu\n let-col=\"col\"\n let-isNestedTable=\"isNestedTable\"\n let-columns=\"columns\"\n let-section=\"section\"\n>\n <div\n class=\"column-menu three-dots-col-menu\"\n [class.visually-hidden]=\"isMenueHidden\"\n *ngIf=\"activeCol && !isThreeDotsFilterOpen\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n [style.color]=\"headerTextColor\"\n >\n <!-- Sort Ascending -->\n <ng-container *ngIf=\"clickedOnSortIcon\">\n <div class=\"sorting_dropdown\" [class.disable-sorting]=\"!col.is_sortable\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span> -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showAscending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'desc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\"\n (click)=\"sortAsc(activeCol);\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Ascending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <!-- Sort Descending -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showDescending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'asc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\"\n (click)=\"sortDesc(activeCol);\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon1.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Descending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"\n sortingConfig?.field === col.field &&\n (sortingConfig?.order_by === 'asc' ||\n sortingConfig?.order_by === 'desc')\n \"\n class=\"column-menu-item\"\n (click)=\"resetSort(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resetSortIconNew.svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Reset Sort\n </div>\n </div>\n </ng-container>\n <!-- <div class=\"py-2 border-below three-dots-filter\">\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showFilter\"\n class=\"column-menu-item three-dots-filter\"\n (click)=\"openFilteronThreeDotsClick(col)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Filter\n </div>\n </div> -->\n\n <ng-container *ngIf=\"!clickedOnSortIcon\">\n <div class=\"sorting_dropdown\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span> -->\n \n <!-- *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"col?.pinned == 'left'\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'left',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinLeftIconNew.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Left\n <span *ngIf=\"col?.pinned == 'left'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\n \" -->\n <div [class.active-sort]=\"col?.pinned == 'right'\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'right',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinRightIconNew.svg'\"\n class=\"data-grid-svg-icon data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Right\n <span *ngIf=\"col?.pinned == 'right'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"col?.pinned\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n null,\n isNestedTable,\n columns\n )\n \"\n >\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown d-flex align-items-center justify-content-center\"\n ></span\n >Unpin\n </div>\n </div>\n </ng-container>\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeThisColumn\"\n class=\"column-menu-item\"\n (click)=\"autosizeColumn(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-expand-vertical.svg'\n \"\n class=\"me-2\"\n ></span>\n Autosize This Column\n </div> -->\n\n <!-- Autosize All Columns -->\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeAllColumns\"\n class=\"column-menu-item\"\n (click)=\"autosizeAllColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-angle-expand.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Autosize All Columns\n </div> -->\n\n <!-- Group By -->\n <div\n *ngIf=\"showRowsGrouping\"\n class=\"column-menu-item\"\n (click)=\"groupBy(activeCol)\"\n [class.disable-sorting]=\"!col.is_groupable\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/diagram-3.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Group by {{ col.header }}\n </div>\n\n <!-- Choose Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showChoseColumns\"\n class=\"column-menu-item\"\n (click)=\"chooseColumns()\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Choose Columns\n </div>\n\n <!-- Reset Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showResetColumns\"\n class=\"column-menu-item\"\n (click)=\"resetColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Reset Columns\n </div>\n </div>\n <div\n @slideToggle\n *ngIf=\"isThreeDotsFilterOpen\"\n class=\"three-dots-col-menu position-relative\"\n [style.right.px]=\"section == 'right' ? null : col.width - 45\"\n [class.visually-hidden]=\"isMenueHidden\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n</ng-template>\n\n<!-- Filter Menue -->\n<ng-template #filterMenu let-col=\"col\">\n <div\n class=\"filter-menu-container filter-menu dropdown_outer\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n >\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"filter-dropdown-section p-1\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n\n <div class=\"form-check mb-1 mt-2 ps-4 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"isAllSideFilterOptionsSelected(col)\"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- <div class=\"dropdown-options ps-1\">\n <div\n class=\"form-check mb-1\"\n *ngFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById;\n let i = index\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"filter-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option?.id ?? option?._id ?? option\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n\n <label\n class=\"form-check-label fw-semibold\"\n [for]=\"option?.id ?? option?._id ?? option\"\n >\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"firstValue\"\n #filterMenueTextchInput\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n\n <div class=\"form-group mb-3 d-flex flex-row\">\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <div @slideToggle *ngIf=\"firstValue && condition != 'none'\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"secondValue\"\n />\n </div>\n </div>\n </ng-template>\n\n <!-- Actions -->\n <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"primary_btn_new common_btn flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"applyDropdownFilter()\"\n >\n Apply\n </div>\n <div\n class=\"cancel_btn_new common_btn d-flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Side Menue -->\n\n<!-- Column Pannel / Pivot Mode / Searching -->\n\n<ng-template #columnPannel>\n <div class=\"column-panel-header\">\n <!-- Pivot Toggle -->\n <div\n class=\"form-check form-switch d-flex align-items-center mb-2 pivot-mode px-5 ms-2 d-none\"\n >\n <input\n class=\"form-check-input me-2\"\n type=\"checkbox\"\n id=\"pivotToggle\"\n [(ngModel)]=\"pivotMode\"\n />\n <label class=\"form-check-label\" for=\"pivotToggle\">Pivot Mode</label>\n </div>\n\n <!-- Select All & Search -->\n <div class=\"d-flex align-items-center mb-2 px-3 mt-3\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n\n <!-- Separator -->\n <hr class=\"my-2\" />\n </div>\n</ng-template>\n\n<!-- Right Columns Menue -->\n\n<!-- Column Panel Item Template -->\n<ng-template #columnPanelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div class=\"column-group d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expanded\"\n (click)=\"col.expanded = !col.expanded\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [id]=\"'group_' + col.header\"\n [checked]=\"isColumnVisible(col)\"\n (change)=\"toggleGroupVisibility(col)\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'group_' + col.header\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n <div *ngIf=\"col.expanded\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"me-2\" style=\"width: 1.5rem\"></span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [(ngModel)]=\"col.is_visible\"\n [id]=\"'col_' + col.field\"\n (change)=\"onSideMenuColumnsVisibilityChange()\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'col_' + col.field\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Columns Side Filter -->\n<ng-template #sideFilters>\n <div class=\"py-3 px-2 pe-3 h-100\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n filterAccordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : filterAccordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllFilterAccordions()\"\n ></span>\n </span>\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n <div\n class=\"overflow-auto side-filter-columns-wrapper\"\n style=\"height: calc(100% - 70px); scrollbar-width: thin\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : columnSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterPannelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div\n class=\"column-group d-flex align-items-center mb-2\"\n *ngIf=\"col.type !== 'image'\"\n >\n <!-- Chevron toggle -->\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n ></span>\n </span>\n\n <!-- Group label toggle -->\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"fw-bold text-truncate\"\n >{{ col.header }}\n <span\n class=\"text-primary ms-1\"\n *ngIf=\"col?.query?._ids?.length || col?.query?._first_value\"\n >*</span\n >\n </span>\n </label>\n </div>\n\n <!-- Children columns -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\" *ngIf=\"col.type !== 'image'\">\n <span\n class=\"me-2 filter-icon-wrapper me-2\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n ></span>\n </span>\n\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"text-truncate fw-bold\">{{ col.header }}</span>\n </label>\n </div>\n\n <!-- Show filter when expanded -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4 pe-3\">\n <ng-container\n *ngTemplateOutlet=\"sideNestedFilter; context: { col: col }\"\n ></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Side Nested Filters -->\n<ng-template #sideNestedFilter let-col=\"col\">\n <div class=\"\">\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"p-1\">\n <!-- Search -->\n <input\n type=\"text\"\n class=\"form-control form-control-sm mb-2\"\n placeholder=\"Search...\"\n [(ngModel)]=\"sideNestedFilterSearch\"\n />\n\n <!-- Select All -->\n <div class=\"form-check mb-1 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"\n col.query?._ids?.length == col?.column_dropdown_value?.length\n \"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- Options -->\n <!-- <div class=\"dropdown-options\">\n <div\n class=\"form-check mb-1 ms-1\"\n *ngFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n\n <!-- Actions -->\n <!-- <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\"\n style=\"height: 22px;\"\n (click)=\"applySideFilter(col)\"\n >\n Apply\n </div>\n <div\n class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" \n style=\"height: 22px;\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div> -->\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col.query.first_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"col!.query!.first_value\"\n />\n\n <div\n class=\"form-group mb-3 d-flex flex-row muted\"\n style=\"font-size: 14px\"\n >\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n />\n <label\n class=\"nnonem-check-label mb-0 mt-1\"\n for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <ng-container\n *ngIf=\"col?.query?.first_value && col?.query?.condition !== 'none'\"\n >\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col!.query.second_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"col!.query.second_value\"\n />\n </ng-container>\n <!-- <div class=\"d-flex gap-2\">\n <div class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">apply</div>\n <div class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">reset</div>\n\n </div> -->\n </div>\n </ng-template>\n <div\n class=\"d-flex justify-content-center gap-2 border-top\"\n style=\"height: 38px\">\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); removeSideFilter(col)\">\n <span>Clear</span>\n </button>\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applySideFilter(col)\"\n [class.disabled]=\"(col?.query.condition !== 'none' && !col?.query?.second_value)\"\n [class.pe-none]=\"(col!?.query.condition !== 'none' && !col?.query?.second_value)\"\n >\n <span style=\"margin-top: -1px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Centr Overlay for showing the chose columns -->\n\n<div *ngIf=\"showColumnPanel\" class=\"custom-modal-overlay\">\n <div\n class=\"custom-modal-content\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"modalColumnPannel\"></ng-container>\n </div>\n</div>\n\n<!-- The existing ng-template you provided -->\n<ng-template #modalColumnPannel>\n <div class=\"column-panel-header\">\n <div\n class=\"d-flex justify-content-between align-items-center px-2 ps-3 rounded-top-2 moda-header\"\n [style.height.px]=\"48\"\n >\n Choose Columns\n <span class=\"filter-icon-wrapper\" (click)=\"closeModalColumnPanel()\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n </div>\n <hr class=\"my-0\" />\n <div>\n <div class=\"d-flex align-items-center px-2 pe-3\" [style.height.px]=\"48\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"choseColumnsSearch\"\n />\n </div>\n\n <hr class=\"mt-0 mb-1\" />\n <div class=\"px-2 overlay-scrollable\">\n <ng-container\n *ngFor=\"\n let col of columns | filter : choseColumnsSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #sideMenuRowGroups>\n <div class=\"d-flex flex-column h-100 d-none\">\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Row Groups</span>\n </div>\n <div class=\"h-50\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here to set row Groups\n </div>\n </div>\n </div>\n\n <hr class=\"mt-4\" />\n\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Values</span>\n </div>\n <div class=\"h-50 d-flex\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here aggregate\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- Drag Preview Template -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<ng-template #dragPreview let-col>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n</ng-template>\n\n<!-- Drag Placeholder Template -->\n<ng-template\n #dragPlaceholder\n let-col\n let-i=\"index\"\n let-section=\"section\"\n let-draggingInGroupArea=\"draggingInGroupArea\"\n>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: { $implicit: col, index: i, section: section }\n \"\n ></div>\n </div>\n <div *ngIf=\"draggingInGroupArea\">New Placeholder</div>\n</ng-template>\n\n<!-- Top Group Row Placeholder -->\n<ng-template #topGroupingRowPlaceholder let-col let-showChevron=\"showChevron\">\n <div class=\"d-flex gap-2\">\n <div\n class=\"d-flex gap-2 top-row-grouping-placeholder\"\n [style.backgroundColor]=\"topGroupedBadgesBackgroundColor\"\n >\n <span\n cdkDragHandle\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>{{ col.header }}</span>\n <span\n (click)=\"ungroupColumn(col)\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"cursor-pointer data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n <div *ngIf=\"showChevron\" style=\"opacity: 0.6; font-size: 14px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n</ng-template>\n\n<ng-template\n #childHeaderPlaceholder\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"sections\"\n>\n <div\n class=\"header-cell one-row-header-cells\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n >\n <div class=\"d-flex justify-content-between h-100 align-items-center w-100\">\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div class=\"three-dots p-1\" style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <div class=\"resize-handle resize-test\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"activeFilterCell = col; activeCol = null\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 10; left: 0\"\n ></div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #tableLayout>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 320px\"\n >\n <div class=\"d-flex align-items-center mb-3\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Layout</h6>\n </div>\n <hr class=\"my-2\" />\n <div class=\"w-100 mb-3 d-flex\" role=\"group\">\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"small\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'small')\"\n [checked]=\"selectedTableLayout == 'small'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"small\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'small' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 8px\"></div>\n Small\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"medium\"\n autocomplete=\"off\"\n [checked]=\"selectedTableLayout == 'medium'\"\n (change)=\"changeTableLayout($event, 'medium')\"\n />\n <label\n class=\"border mx-3 d-flex flex-column align-items-center layout-button\"\n for=\"medium\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'medium' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 12px\"></div>\n Medium\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"large\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'large')\"\n [checked]=\"selectedTableLayout == 'large'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"large\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'large' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 16px\"></div>\n Large\n </label>\n </div>\n\n <hr class=\"my-2\" />\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text_common_14px\">Show separators</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"separators\"\n [(ngModel)]=\"showVerticalBorder\"\n (change)=\"onFontChange()\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text_common_14px\">Row shading</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"rowShadingEnabled\"\n (change)=\"toggleRowShading()\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <!-- <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Side Menu</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showSideMenu\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Filter Row</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showFilterRow\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #tablePreset>\n <div\n *ngIf=\"activeSubButton !== 'save-preset'\"\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Presets</h6>\n </div>\n <!-- Save Preset Button with Dropdown -->\n <div>\n <a\n class=\"text-decoration-none text-primary\"\n type=\"button\"\n id=\"savePresetDropdown\"\n (click)=\"$event.stopPropagation(); toggleSubActions('save-preset')\"\n >\n {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\n </a>\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchTextPresetTable\"\n type=\"search\"/>\n </div>\n </div>\n\n <!-- Preset List -->\n <ng-container\n *ngIf=\"\n tableView | filter : searchTextPresetTable : 'name' as filteredList\n \"\n >\n <!-- If filteredList exists and none is default -> show fallback -->\n <div\n class=\" pb-5 overflow-auto\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 250\"\n >\n <div\n class=\"cursor-pointer\"\n (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \"\n >\n <div class=\"fw-semibold\">Default View</div>\n </div>\n <div class=\"d-flex justify-content-between\">\n <small class=\"text-dark\">Created by system</small>\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\"\n class=\"me-2\"\n ></span>\n <div\n class=\"dropdown d-flex justify-content-end\"\n *ngIf=\"tableFilterViewId\"\n ></div>\n </div>\n \n <!-- The list: render each table from filteredList -->\n <div\n class=\"list-group list-group-flush\"\n *ngFor=\"\n let table of filteredList;\n let i = index;\n trackBy: trackByTable\n \"\n >\n <!-- Item -->\n <div\n (click)=\"\n $event.stopPropagation(); openIndex = null; activeTopButton = ''\n \"\n class=\"list-group-item px-0 d-flex justify-content-between align-items-center\"\n >\n <div (click)=\"selectFilter(table); openIndex = null\">\n <div class=\"fw-semibold\" style=\"cursor: pointer\">\n {{ table?.name }}\n <!-- {{table?.is_temp}} -->\n <span\n *ngIf=\"\n (table?.is_temp && !temp_state.id) ||\n temp_state.id == table.id\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n <span\n *ngIf=\"table?.is_default\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n </div>\n <small class=\"text-dark\" *ngIf=\"table?.config?.filterNames\" [title]=\"table?.config?.filterNames\">\n {{\n table?.config?.filterNames?.length > 25\n ? (table?.config?.filterNames | slice:0:25) + '...'\n : table?.config?.filterNames\n }}\n ({{ table?.config?.totalCount }})\n </small>\n <small class=\"text-dark\" *ngIf=\"!table?.config?.filterNames\">{{ table?.createdAt | date : \"MMM d, y\" }}</small>\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span\n *ngIf=\"table?.is_default\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n\n <div class=\"dropdown\" *ngIf=\"!table?.is_default\">\n <div\n class=\"dropdown-wrapper\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"btn-icon muted-text\"\n (click)=\"toggleMenu(i, $event)\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"openIndex === i\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/horizontal-dots.svg'\n \"\n class=\"me-2\"\n ></span>\n </button>\n\n <!-- menu -->\n <ul\n *ngIf=\"openIndex === i\"\n class=\"custom-dropdown-menu position-fixed top-auto\"\n role=\"menu\"\n [style.right.px]=\"'auto'\"\n [style.left.px]=\"dataGridContainer.offsetWidth - 100\"\n style=\"top: unset; right: unset\"\n >\n <li role=\"none\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item\"\n (click)=\"\n actionPreset(table, 'setPreset'); temp_state.id = ''\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/star.svg'\n \"\n class=\"me-2\"\n ></span>\n Set as default\n </button>\n </li>\n\n <li role=\"none\" *ngIf=\"!table.confirmDelete\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item text-danger\"\n (click)=\"table.confirmDelete = true\"\n >\n <span\n style=\"margin-top: -4px\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/trash-red.svg'\n \"\n class=\"me-2\"\n ></span>\n Delete\n </button>\n </li>\n\n <li\n role=\"none\"\n *ngIf=\"table.confirmDelete\"\n class=\"confirm-block\"\n >\n <div class=\"px-3 py-2 text-center\">\n <div class=\"mb-2 text_common_16px_gray\">\n Are you sure you want to delete this view<b>?</b><br/> This action can\u2019t be undone.\n </div>\n <div class=\"d-flex gap-2\">\n <button\n class=\"cancel_btn_new common_btn\"\n (click)=\"table.confirmDelete = false\">\n Cancel\n </button>\n <button class=\"delete_btn_new common_btn\"\n (click)=\"actionPreset(table, 'deletePreset')\">\n Delete\n </button>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n <!-- Item End Here -->\n </div>\n </div>\n </ng-container>\n </div>\n\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"activeSubButton == 'save-preset'\"\n class=\"dropdown-menu p-3 badge mt-4 save-preset-dropdown mt-1\"\n aria-labelledby=\"savePresetDropdown\"\n style=\"min-width: 250px\"\n >\n <div class=\"text_common_16px mb-2\">\n {{ isTablePresetNotChanged ? \"Create New Preset\" : \"Update Preset\" }}\n </div>\n <!-- <div class=\"fs-14px mb-2\" style=\"line-height: 20px\">\n This will save the current table adjustments as a preset.\n </div> -->\n <!-- Input -->\n <div class=\"my-3\">\n <label for=\"presetName\" class=\"form-label fs-12px fw-bold\">Name</label>\n <div class=\"col-12 global-search position-relative\">\n <input\n #presetNameCtrl=\"ngModel\"\n required\n [(ngModel)]=\"presetName\"\n [ngClass]=\"{\n 'is-invalid':\n presetNameCtrl.invalid &&\n (presetNameCtrl.dirty || presetNameCtrl.touched)\n }\"\n class=\"form-control form-control-sm ps-2\"\n placeholder=\"Enter preset name\"\n type=\"text\"\n />\n </div>\n </div>\n\n <!-- Checkbox -->\n <div class=\"form-check mb-2\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"presetFilter\"\n type=\"checkbox\"\n id=\"saveFilters\"\n />\n <label class=\"form-check-label mt-1\" for=\"saveFilters\">\n Save active filters\n </label>\n </div>\n\n <!-- Save Button -->\n <div class=\"d-flex justify-content-end gap-2\" style=\"height: 32px\">\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center\"\n (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n style=\"margin-top: -2px\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"closeDropdown.preset.loading\"\n (click)=\"savePreset(presetNameCtrl)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center\"\n >\n <span style=\"margin-top: -2px\" *ngIf=\"isTablePresetNotChanged\">\n <ng-container *ngIf=\"!closeDropdown.preset.loading\"\n >Create</ng-container\n >\n <ng-container *ngIf=\"closeDropdown.preset.loading\"\n ><span class=\"spinner-border spinner-border-sm\"></span\n ></ng-container>\n </span>\n <span style=\"white-space: nowrap\" *ngIf=\"!isTablePresetNotChanged\"\n >Update Preset</span\n >\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #showHideColumns>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\" style=\"border-bottom: 1px solid #E0E0E0;\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Columns</h6>\n </div>\n <a\n (click)=\"resetColumns()\"\n href=\"javascript:void(0)\"\n class=\"text-primary text-decoration-none\"\n >Reset</a\n >\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"mx-2 position-absolute icon data-grid-svg-icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search column\"\n type=\"search\"\n [(ngModel)]=\"topShowHideColumns\"\n />\n </div>\n </div>\n <!-- Preset List -->\n <div\n class=\"list-group list-group-flush\"\n style=\"overflow: auto; scrollbar-width: thin\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 220\"\n >\n <div class=\"muted-text show-hide-table-label d-flex justify-content-between\" *ngIf=\"hasAnyVisibleColumn\">\n Show in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"hide_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"hide_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <!-- Item -->\n <ng-container\n *ngFor=\"\n let col of columns | filter : topShowHideColumns : 'header';\n trackBy: trackByField\n \"\n >\n <div\n *ngIf=\"col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- show checkbox instead of icon -->\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n *ngIf=\"!col?.query?.first_value && !col?.query?._ids?.length\"\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, false)\"\n [class.disabled]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.pe-none]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.opacity-50]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n <div\n *ngIf=\"col?.query?.first_value || col?.query?._ids?.length\"\n class=\"d-flex align-items-center\"\n style=\"opacity: 0.5\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Item End Here -->\n\n <div\n class=\"dropdown-divider\"\n *ngIf=\"hasAnyVisibleColumn && hasAnyInVisibleColumn\"\n ></div>\n\n <div\n class=\"muted-text show-hide-table-label d-flex justify-content-between\"\n *ngIf=\"hasAnyInVisibleColumn\"\n >\n Hide in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"show_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"show_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <div class=\"list-group list-group-flush\">\n <ng-container *ngFor=\"let col of columns; trackBy: trackByField\">\n <div\n *ngIf=\"!col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, true)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Item End Here -->\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterColumns let-col=\"column\">\n <div\n @slideToggle\n *ngIf=\"!isFilterOpen && activeTopButton == 'filter-columns'\"\n (click)=\"$event.stopPropagation()\"\n class=\"action_dropdown_new_design actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"py-2 px-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Filter by\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 500px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : addFilterColumnInput : 'header';\n trackBy: trackByField\n \"\n >\n <div\n (click)=\"openFilter(col)\"\n *ngIf=\"\n col.is_visible &&\n !col?.query?.first_value &&\n !col?.query?._ids?.length && col.type !== 'image'\n \"\n class=\"list-group-item border-0 px-3 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"d-flex align-items-center justify-content-between gap-1 w-100\">\n <!-- <div style=\"margin-top: -3px\"></div> -->\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n <div class=\"d-flex align-items-center justify-content-between\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Dropdown -->\n <div\n @slideToggle\n *ngIf=\"isFilterOpen && selectedColumnForFilter.type == 'dropdown'\"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 my-2 border-below py-1 pb-2 mb-3 d-flex ps-1\">\n <span\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"mb-2 px-3\">\n <div\n class=\"col-12 position-relative border rounded d-flex align-items-center flex-wrap px-2 filter-serach-inpt\"\n >\n <span\n *ngFor=\"let selected of selectedFilterOptions\"\n class=\"badge d-flex align-items-center gap-1 me-1 mb-1 top-row-filter-dropdown\"\n >\n {{ selected?.value ? selected.value : selected }}\n <span\n (click)=\"toggleSelectionInFilter(selected)\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\n \"\n class=\"me-2\"\n ></span>\n </span>\n <input\n class=\"form-control form-control-sm border-0 flex-grow-1\"\n style=\"padding: 0\"\n [placeholder]=\"selectedFilterOptions?.length ? '' : 'Filter by'\"\n type=\"search\"\n [(ngModel)]=\"searchTextForFilterDropDown\"\n (keydown.backspace)=\"handleBackspace($event)\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 600px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of selectedColumnForFilter.column_dropdown_value\n | filter : searchTextForFilterDropDown : 'value';\n let i = index\n \"\n >\n <div\n class=\"list-group-item border-0 px-2 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"currentFilterSelectedIds.has(col.id || col._id || col)\"\n (change)=\"toggleSelectionInFilter(col)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ col?.value || col?.name || col }}\n </label>\n </div>\n </div>\n </ng-container>\n </div>\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\"\n >\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\n (click)=\"$event.stopPropagation(); resetFilterChanges()\"\n >\n <span>Cancel</span>\n </button>\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\"\n >\n <span style=\"margin-top: -2px\">Save</span>\n </button>\n </div>\n </div>\n\n <!-- For Text fields and number fields-->\n\n <div\n @slideToggle\n *ngIf=\"\n isFilterOpen &&\n (selectedColumnForFilter.type == 'string' ||\n selectedColumnForFilter.type == 'number' ||\n selectedColumnForFilter.type == 'date')\n \"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 210px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 border-below py-1 pb-2 d-flex ps-1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"col-12 position-relative p-2 text-filter\">\n <div class=\"mb-2\">\n <select\n class=\"form-select form-select-sm custom-select border\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n <div class=\"mb-2\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Enter first value\"\n type=\"search\"\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n [(ngModel)]=\"firstValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n <div>\n <div class=\"d-flex my-3 d-flex flex-row\" style=\"font-size: 14px\">\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalAnd\"\n name=\"logicalOperator\"\n value=\"and\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalAnd\"\n >AND</label\n >\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalOr\"\n name=\"logicalOperator\"\n value=\"or\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalOr\">OR</label>\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalNone\"\n name=\"logicalOperator\"\n value=\"none\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalNone\"\n >None</label\n >\n </div>\n </div>\n\n <ng-container *ngIf=\"condition !== 'none' && firstValue\">\n <div class=\"mb-2 mt-3\">\n <!-- Second condition select -->\n <select\n class=\"form-select form-select-sm border\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <div class=\"mb-2\">\n <!-- Second value input -->\n <input\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n class=\"form-control form-control-sm\"\n placeholder=\"Enter second value\"\n type=\"search\"\n [(ngModel)]=\"secondValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n </ng-container>\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\">\n <button\n [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); resetTextFilterChanges()\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"(currentFilterSelectedIds?.size === 0 && !firstValue) || (condition !== 'none' && !secondValue)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\">\n <span style=\"margin-top: -2px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Edit dropdown here -->\n<ng-template let-col>\n <div class=\"drop-down-edit\"></div>\n</ng-template>\n\n<ng-template\n #fullTextTemplate\n let-row=\"row\"\n let-col=\"col\"\n let-isArray=\"isArray\"\n>\n <div\n class=\"full-text-box\"\n (dblclick)=\"$event.stopPropagation(); $event.preventDefault()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n >\n <ng-container *ngIf=\"!isEditing(row, col)\">\n <div\n *ngIf=\"!isArray\"\n class=\"full-text-content\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n >\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </div>\n <div *ngIf=\"isArray\">\n <ul>\n <ng-container\n *ngFor=\"let item of getNestedValue(row, col.field); let i = index\"\n >\n <li *ngIf=\"i !== 0\">\n <ng-container>\n {{\n item?.department_name ||\n item?.roleName ||\n item?.full_name ||\n \"-\"\n }}\n </ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isEditing(row, col)\">\n <textarea\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n #textModel=\"ngModel\"\n rows=\"4\"\n #textAreadInput\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"textAreadInput.blur()\"\n autofocus\n class=\"form-control\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n ></textarea>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultImagePlaceholder let-row=\"row\" let-col=\"col\">\n <span\n class=\"px-2 d-flex w-100 cell-content image-placeholder\"\n [title]=\"row?.full_name || row?.name || 'N/A'\"\n >\n <ng-container\n *ngIf=\"\n row?.logo ||\n row?.assetImage ||\n row?.invoice?.invoice_image ||\n row?.invoice_image;\n else placeholder\n \"\n >\n <span\n (click)=\"fullscreenImage = row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\"\n class=\"pic\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n <img\n [width]=\"rowHeight - 12\"\n [height]=\"rowHeight - 12\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [src]=\"\n row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\n \"\n alt=\"icon\"\n class=\"option-icon\"\n loading=\"lazy\"\n />\n </span>\n </ng-container>\n <!-- <div\n class=\"fullscreen-overlay\"\n *ngIf=\"fullscreenImage\"\n (click)=\"fullscreenImage = null\"\n >\n <img [src]=\"fullscreenImage\" class=\"fullscreen-img\" />\n </div> -->\n\n <ng-template #placeholder>\n <span\n [ngClass]=\"getDynamicClass(row?.full_name || row?.name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n {{ getInitials(row?.full_name) }}\n </span>\n </ng-template>\n </span>\n</ng-template>\n\n<!-- Right Click Menue -->\n<div\n [class.invisible]=\"!positionedYet\"\n class=\"context-menu p-2\"\n *ngIf=\"actionHide && actions?.length\"\n [ngStyle]=\"{ 'top.px': yPos, 'left.px': xPos }\"\n [class.show]=\"isVisible\"\n appendTo=\"body\"\n>\n <ul>\n <li\n *ngFor=\"let action of actions\"\n class=\"rounded d-flex align-items-center\"\n (click)=\"onActionClick(action)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/' + action + '.svg'\"\n class=\"data-grid-svg-icon right-click-menu-icons me-2\"\n ></span>\n <span class=\"text-capitalize fw-500\">{{ action }}</span>\n </li>\n </ul>\n</div>\n\n<!-- Details Toggle from bottom -->\n\n<ng-template #nestedTableTemplate let-row>\n <div\n class=\"nested-table table table-sm w-100 mb-0 center-nested-table w-100\"\n style=\"table-layout: fixed !important\"\n #nestedTableContainer\n >\n <thead\n #nestedHeader\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n >\n <div\n cdkDropList\n [cdkDropListData]=\"row?.detail.columns\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"dropColumn($event, row)\"\n (cdkDropListSorted)=\"onNestedColSort($event, previewNestedCols)\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n class=\"d-flex tr border-below\"\n >\n <div\n *ngFor=\"let col of row.detail.columns; let i = index\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n class=\"px-4 th\"\n [attr.field]=\"col.field\"\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n cdkDrag\n >\n <div\n class=\"d-flex h-100 justify-content-between position-relative align-items-center\"\n >\n <div class=\"text-ellipsis\" (click)=\"sortNestedCol(col, row)\">\n {{ col.header }}\n </div>\n <div class=\"d-flex gap-2\">\n <span\n *ngIf=\"currentSubSortColumn == col.field\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (col?.order_by == 'desc'\n ? 'data-grid/icons/sort-desc.svg'\n : 'data-grid/icons/sort-asc.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center ms-2 start-50\"\n >\n </span>\n <!-- <div\n class=\"three-dots p-1\"\n (click)=\"openThreeDotsMenu($event, col)\"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div> -->\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"top: -50%; z-index: 21; left: 0\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: true,\n columns: row?.detail.columns\n }\n \"\n ></ng-container>\n </div>\n <div\n class=\"resize-handle\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"\n $event.preventDefault();\n onResizeColumn($event, col);\n $event.stopPropagation()\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n <ng-template cdkDragPreview>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </thead>\n <div\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"nestedTablerowHeight\"\n class=\"viewport\"\n [style.height.px]=\"\n (row?.detail?.result?.length < 5\n ? nestedTablerowHeight * row?.detail?.result?.length + 40\n : 300) + (hasHorizontalScroll ? -12 : 1)\n \"\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <div\n class=\"cursor-pointer border-below d-flex tr\"\n *cdkVirtualFor=\"let d of row?.detail?.result; trackBy: trackById\"\n [style.height.px]=\"nestedTablerowHeight\"\n [style.width.px]=\"nestedHeader?.offsetWidth\"\n [style.minWidth.px]=\"nestedHeader?.offsetWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n (contextmenu)=\"onRightClick($event, d)\"\n >\n <div\n class=\"px-4 py-0 td\"\n *ngFor=\"let col of previewNestedCols; let j = index\"\n [style.fontSize.px]=\"nestedTablerowFontsize\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n >\n <div\n [style.height.px]=\"nestedTablerowHeight - 1\"\n [style.max-width.px]=\"col?.width\"\n class=\"d-flex align-items-center\"\n >\n <!-- {{ d[col.field] || (col.is_amount ? 0 : \"-\") }} -->\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"\n col.type === 'date'\n ? (getNestedValue(d, col.field) | date : dateFormat)\n : getNestedValue(d, col.field) || '-'\n \"\n >\n <ng-container *ngIf=\"col.type !== 'image'\">\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{\n !isNestedValueArray(d, col.field)\n ? col.type === 'date'\n ? (isDate(getNestedValue(d, col.field))\n ? (getNestedValue(d, col.field) | date: dateFormat)\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n '-'))\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n (col.is_amount ? 0: '-'))\n : (getNestedValue(d, col.field)?.[0]?.department_name ||\n getNestedValue(d, col.field)?.[0]?.roleName || getNestedValue(d, col.field)?.[0]?.full_name ||\n '-')\n }}\n </ng-container>\n <ng-container *ngIf=\"false\">\n {{ getTotalAmount(col) }}\n </ng-container>\n <ng-container *ngIf=\"col.type == 'image'\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: {\n row: d,\n col: col,\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</ng-template>\n\n<ng-template #leftRightNestedPlaceholder let-row>\n <table\n class=\"nested-table table table-sm w-100 mb-0\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n [style.height.px]=\"\n gridType == 'Assets'\n ? (nestedTableContainer?.nativeElement?.offsetHeight ?? 0) + 12\n : (taskManagementContainer?.nativeElement?.offsetHeight ?? 0)\n \"\n >\n <!-- <div class=\"thead\">\n <div\n class=\"tr d-flex border-below\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"th\" *ngFor=\"let _ of [1, 2, 3, 4, 5]\"></div>\n </div>\n </div> -->\n <!-- <div class=\"tbody\">\n <div\n class=\"tr border-below\"\n [style.height.px]=\"nestedTablerowHeight\"\n *ngFor=\"let _ of row?.detail?.result\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"td\" *ngFor=\"let __ of [1, 2, 3, 4, 5]\" class=\"py-0\">\n <span\n [style.height.px]=\"nestedTablerowHeight\"\n [style.max-width.px]=\"nestedTablerowHeight\"\n ></span>\n </div>\n </div>\n </div> -->\n </table>\n</ng-template>\n\n<ng-template #taskManagementTemplate let-taskDetails=\"taskDetails\">\n <div\n class=\"p-4\"\n #taskManagementContainer\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n [style.fontFaimly]=\"fontFaimly\"\n >\n <div class=\"d-flex justify-content-between\">\n <div class=\"col-4\">\n <div class=\"item-title\">Description</div>\n <!-- <div class=\"item-content firstDiv\">\n {{ taskDetails.description }}\n </div> -->\n <p\n [style.fontSize]=\"bodyTextFontsSize\"\n class=\"item-content firstDiv taskDescription pe-4\"\n [innerHTML]=\"getSafeComment(taskDetails?.editor_description)\"\n (click)=\"openFullImage($event)\"\n ></p>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">Attachments</div>\n <h5 *ngIf=\"taskDetails?.attachments?.length == 0\">\n No Attachments found\n </h5>\n <div\n *ngIf=\"taskDetails?.attachments?.length\"\n class=\"item-content d-flex flex-wrap\"\n style=\"gap: 10px\"\n >\n <a\n *ngFor=\"let attachement of taskDetails?.attachments; let i = index\"\n class=\"symbol-label fs-2 fw-semibold text-success cursor-pointer\"\n >\n <span\n title=\"{{ taskDetails?.attachments_name[i] || 'Attachment' }}\"\n (click)=\"downloadAttchment(attachement)\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(attachement) +\n '.svg'\n \"\n >\n </span>\n </a>\n </div>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">\n Comments ({{ taskDetails?.comments?.length }})\n </div>\n <h5 *ngIf=\"taskDetails?.comments?.length == 0\">No Comments found</h5>\n <div *ngIf=\"taskDetails?.comments?.length\" class=\"item-content\">\n <div class=\"comment\" *ngFor=\"let comment of taskDetails.comments\">\n <div class=\"d-flex align-items-center pe-3\">\n <img\n class=\"pic image-input-wrapper\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n *ngIf=\"comment?.comment_by.logo\"\n src=\"{{ comment?.comment_by.logo }}\"\n alt=\"{{ comment.comment_by.full_name }}\"\n />\n <!-- <app-default-image-placeholder *ngIf=\"!comment?.comment_by.logo\" title=\"{{ comment.comment_by.full_name }}\" [name]=\"comment.comment_by.full_name\"></app-default-image-placeholder> -->\n <span\n *ngIf=\"!comment?.comment_by.logo\"\n [ngClass]=\"getDynamicClass(comment.comment_by.full_name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n title=\"{{ comment.comment_by.full_name }}\"\n >\n {{ getInitials(comment.comment_by.full_name) }}\n </span>\n </div>\n <div>\n <div class=\"comment-author fs-14px\">\n {{ comment?.comment_by.full_name }}\n </div>\n <div\n class=\"comment-content forCommentImg\"\n [innerHTML]=\"getSafeComment(comment.comment)\"\n ></div>\n <div class=\"comment-timestamp\">\n {{ comment.comment_date | date }}\n </div>\n <div class=\"comment-timestamp\">\n Replies: ({{ comment.replies.length }})\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";:host,:host *{font-family:Inter,sans-serif!important}*{scrollbar-width:auto;scrollbar-color:rgba(31,36,40,.1019607843)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#fff}*::-webkit-scrollbar-thumb{background-color:#c4b0c9;border-radius:10px;border:3px solid #ffffff}.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #E0E0E0;border-radius:12px;position:relative}.actions_dropdown_menu{width:180px!important}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header_figma_spacing{padding-right:8px!important}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:0 16px 0 0;font-weight:700;border-bottom:1px solid #E0E0E0;white-space:nowrap;min-width:80px;font-weight:600}.header-cell .filter-applied-on-text{color:#5d9cff!important}.filter-cell{padding:4px!important;display:flex;align-items:center;gap:8px;width:100%}.filter-cell .filter-applied{background-color:#bddef9}.border-right{border-right:1px solid #E0E0E0}.merged-grid{display:grid;grid-auto-rows:40px;border-bottom:1px solid #ccc}.span-two-rows{grid-row:span 2;display:flex;justify-content:space-between;align-items:center}.group-header{display:flex;justify-content:space-between;position:relative}.group-header-content{position:sticky;left:10px;overflow:hidden;text-overflow:ellipsis}.resize-handle{width:6px;cursor:e-resize;right:0;top:0;color:#00000026;margin-right:4px}:host ::ng-deep .resize-handle svg{stroke-width:2px}.group-header .resize-handle{top:25%}.h-100{height:100%}.data-grid-body{position:relative;overflow-y:auto;overflow-x:hidden}.cell{padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.data-grid-row{display:flex;width:100%;min-width:max-content;align-items:center;border-bottom:1px solid #E0E0E0}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#E0E0E0}.w-100{width:100%}.data-grid-header-wrapper{display:flex;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.data-grid-header{display:flex;position:relative;z-index:1}.left-pinned,.right-pinned{position:sticky;top:0}.right-pinned-header{position:absolute;right:0;border-left:1px solid #E0E0E0;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #E0E0E0}.center-scrollable{z-index:unset!important;overflow-x:auto;overflow-y:visible;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable::-webkit-scrollbar{display:none}.data-grid-body-wrapper{-webkit-user-select:none;user-select:none;display:flex}.center-scrollable-body{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable-body::-webkit-scrollbar{display:none}.left-pinned-body,.right-pinned-body{position:sticky;top:0;z-index:unset;background:#fff;scrollbar-width:none;-ms-overflow-style:none}.left-pinned-body::-webkit-scrollbar,.right-pinned-body::-webkit-scrollbar{display:none}.left-pinned-body{left:0}.border-end{border-right:1px solid #E0E0E0!important}.right-pinned-body{right:0;border-left:1px solid #E0E0E0}.fake-scroll-bar{height:14px;overflow:scroll;margin-bottom:10px}.text-ellipsis{overflow:hidden;text-overflow:ellipsis}.select-all-checkbox-cell{width:50px;display:flex;justify-content:center;align-items:center;height:100%}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #E0E0E0!important}.figmaIconSize.data-grid-svg-icon{width:24px!important;height:24px!important}.actions-dropdown .list-group .list-group-item{color:#1b1f22!important}.productSortingDropdownMenu{width:220px!important}.three-dots{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:6px;margin-right:4px;margin-left:2px;cursor:pointer}.three-dots:hover,.three-dots.threeDotActive{background-color:#0084ff1a;padding:5px}.rotated-180{transform:scaleY(-1)}.filter-icon-wrapper{min-height:22px;max-height:22px;min-width:22px;max-width:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;cursor:pointer;transition:background-color .3s ease}.filter-icon-wrapper:hover{background-color:#ccc}.column-menu,.filter-menu{box-shadow:0 0 16px #00000026;border-radius:4px}.column-menu{background:#fff;width:100%;width:200px;border:1px solid #ddd;box-shadow:0 0 12px #00000014;border:1px solid #E0E0E0;padding:4px 0;font-size:14px;position:fixed;border-radius:8px}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item.active-sort,.column-menu-item:hover{background-color:#0084ff1a}.pin-parent{position:relative;width:100%!important}.column-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #ddd;width:130px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;display:none;padding:4px 0;z-index:10;border-radius:4px}.pin-parent:hover .column-submenu{display:block}.filter-menu-container{position:fixed;width:210px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:12px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;z-index:1000;font-size:14px}.filter-menu-header{font-weight:600;margin-bottom:10px}.filter-dropdown-section{max-height:350px;overflow-y:auto}.dropdown-options{overflow-y:auto;scrollbar-width:thin;height:100%}.filter-text-section select,.filter-text-section input{width:100%}.filter-radio-inputs{width:14px!important;height:14px!important}.right-menu{border-left:1px solid #E0E0E0;font-size:14px}.border-start{border-left:1px solid #E0E0E0!important}.column-panel-item{font-size:.875rem;color:#333}.toggle-icon{cursor:pointer;transition:transform .2s ease}.toggle-icon.rotate{transform:rotate(90deg)}.grab-icon{cursor:grab;color:#6c757d}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}.pivot-mode{height:48px}.chevron-wrapper{width:30px;height:20px;cursor:pointer;border-radius:3px;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease;margin-right:8px}.chevron-wrapper:hover{background-color:#cac7c7}.chevron-wrapper i{font-size:14px}.column-panel-body{height:70%;overflow:auto;scrollbar-width:thin}.side-menue-text{transform:rotate(90deg);position:relative;font-weight:700;margin-top:40px}.columns-button{padding-top:20px;padding-bottom:35px;width:29px}.fake-scroll-content{height:12px}.fake-scrollbar{width:25px}.fake-scrollbar div{min-width:1px}.fake-horizintal-scrollbar div{min-height:1px}.side-filter-columns-wrapper{height:calc(100% - 25px)}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;z-index:1050}.custom-modal-overlay .moda-header{background-color:#f8f8f8}.custom-modal-content{background-color:#fff;border-radius:8px;min-width:300px;max-width:400px;box-shadow:0 5px 20px #0000004d}.overlay-scrollable{height:250px;overflow:auto}.footer-row{border-top:1px solid #E0E0E0;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:8px;overflow-x:auto;overflow-y:hidden;height:8px}.border-dashed{border:1px dashed #E0E0E0}.cdk-drag-preview{box-sizing:border-box!important;border-radius:4px!important;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f!important;background-color:#f3f4f5!important;border:1px solid #E0E0E0!important;z-index:9999!important}.data-grid-header-wrapper ::ng-deep .cdk-drag-placeholder{display:block!important;background:#fff!important;opacity:1!important}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)!important}.top-row-grouping-placeholder{display:flex;align-items:center;border-radius:12px;font-size:14px;padding-inline:6px;border:1px solid #E0E0E0}.top-row-grouping-placeholder .bi-x{cursor:pointer;color:#7a7a7a}.top-row-grouping-placeholder .bi-x:hover{color:#111}.right-pinned-body-wrapper{position:absolute;right:0}.actions-dropdown{position:absolute;right:200px;z-index:1050;background-color:#fff;border-radius:8px!important;cursor:default}.bg-fff{background-color:#fff}.actions-dropdown-setting{right:250px}.actions-dropdown.consumer_buttons{right:170px}.unfilfilled_dropdown_main{left:48px}.consumer_buttons .dropdown-menu .dropdown-item{height:32px!important}.actions-dropdown.unfilfilled_dropdown_main,.actions-dropdown.UnpaidDropdown{border:0!important}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{width:100%;display:flex!important;align-items:center!important;height:32px;max-width:335px}.global-search span{margin-top:0!important;top:8px}.global-search input{padding-left:28px;border-radius:8px!important}.global-search input:focus{outline:none!important;box-shadow:none!important}.active .top-icon ::ng-deep svg path{stroke:#007cf5!important}.dropdown-menu{background-color:#fff!important;border:1px solid #E0E0E0!important;border-radius:8px!important}.custom-menu{width:250px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu.setting_dropdown_menu{width:270px}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px;color:#1b1f22!important;font-weight:400}.custom-menu .dropdown-item:hover{background-color:#0084ff1a;border-radius:6px}.table-layout{right:0;background:#fff;border-radius:8px!important}.actions-dropdown,.table-layout,.custom-menu,.dropdown-menu{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;background-color:#fff}.action_dropdown_new_design{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 2px 12px #00000014}.preview-box{width:40px;height:10px;border-radius:3px;background-color:transparent;transition:background-color .2s ease-in-out}.btn-check:checked+label .preview-box{background-color:var(--bs-primary)}.preview-box{width:40px;height:10px;border-radius:3px;border:2px solid transparent;transition:border-color .2s ease-in-out}#small:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#small:checked+label .preview-box{background-color:#fff!important}#medium:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#medium:checked+label .preview-box{background-color:#fff!important}#large:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#large:checked+label .preview-box{background-color:#fff!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 6px!important;width:82px;border-radius:8px!important;color:#1b1f22!important;height:60px;margin-bottom:0!important}.show-hide-table-label{position:sticky;top:0;z-index:99;background:#fff}.cursor-grap{cursor:grabbing}.pagination-container{display:flex;align-items:center;gap:12px;font-size:14px;color:#1b1f22}.page-size select{padding:3px 6px;border:1px solid #E0E0E0;border-radius:6px;background:#fff;font-size:13px}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{padding:7px 11px;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2;border:0;color:#6a6b6d}.page-buttons button.active{font-weight:400;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#1b1f22}.page-buttons button:disabled{opacity:.5;cursor:not-allowed}.page-buttons span{padding:0 6px;color:#666}.page-size .separator{padding:0 8px;border-right:1px solid #E0E0E0}.page-size .separator .actions-dropdown{position:fixed;right:200px;z-index:1050;background-color:#fff}.fs-14px{font-size:14px}.fs-12px{font-size:12px!important}.save-preset-dropdown{background:#fff;color:#111!important;right:0;font-weight:400!important;text-align:left!important;max-width:250px!important;text-wrap:auto!important;top:14px;font-size:14px!important}.add-filter-button{height:28px;cursor:pointer;border-radius:4px}.table-layout .dropdown-item{border-radius:0!important;font-size:14px;padding-block:6px!important}.table-layout .dropdown-item:hover{background-color:transparent!important}.filter-serach-inpt{max-height:230px!important;overflow:auto;scrollbar-width:thin;padding-top:4px;background-color:#f7f7f7;border-color:#dedede;border-radius:8px}.filter-serach-inpt .badge{color:#007cf5!important;background-color:#e6f2ff!important;border-radius:8px!important;padding:8px!important;font-weight:500!important;font-size:12px!important;height:24px!important}.filter-serach-inpt .badge ::ng-deep svg{cursor:pointer}.filter-serach-inpt .badge ::ng-deep svg:hover path{stroke:#040081!important}.filter-serach-inpt input{background-color:#f7f7f7;padding:0;height:26px;margin-top:-5px}.text-filter select{border:0}.text-filter select option{font-size:14px;font-weight:500}.text-filter select:focus{border:0}.text-filter input:focus,.text-filter select:focus{box-shadow:none!important}.active-filters{background-color:#f7f7f7;white-space:nowrap;background:#f7f7f7;padding-inline:8px;height:28px;font-size:14px;font-weight:500;border-radius:8px;box-shadow:none}.active-filters .header-tag{white-space:nowrap;font-size:14px;font-weight:400;color:#1b1f22;background:#ebebeb}.filter-tags .active{background-color:#e6f2ff}.filter-tags .active .header-tag{color:#007cf5!important}.table-cell{cursor:pointer;width:100%}.table-cell input:focus{outline:0!important;border:0!important;width:100%!important;box-shadow:none!important}.active-for-editing{outline:2.5px solid #007cf5!important;border-radius:4px;border:0!important;width:100%!important}.active-cell{outline:none!important;box-shadow:inset 0 0 0 1.5px #007cf5}span[inlineSVG]{width:16px;height:16px;display:inline-block}.cell .dropdown-menu{min-width:unset!important}.cell .dropdown-menu .item{transition:background-color .3s ease;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.cell .dropdown-menu .item:hover{background-color:#f0f8ff}.cell .cell-editin-dropdown{scrollbar-width:thin!important;-webkit-user-select:none;user-select:none}.fw-semibold{font-weight:500!important}:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg,:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg path{stroke:#000!important}:host ::ng-deep .ascendingAppliedIcon svg{stroke:#006fd6}.fs-7{font-size:12px!important}.fs-8{font-size:10px!important}.all-filters-reset-button:hover{opacity:.7}.full-text-box{background:#fff;position:relative;display:flex;align-items:center;justify-content:center;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026}.full-text-content{border-radius:8px;max-height:70vh;overflow:auto;white-space:pre-wrap}.pic{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}.pic-comb2{background-color:#fbe7bf;color:#fd7f31}.pic-comb1{background-color:#d9ecbf;color:#65b500}.pic-comb4{background-color:#fdd3d7;color:#f64e60}.w-40px{width:40px}.h-40px{height:40px}.pic{border-radius:50%;overflow:hidden}.image-placeholder .pic{font-size:14px;font-weight:600;letter-spacing:.5px}.header-cell{font-weight:600}.header-cell,.cell{box-sizing:border-box}.transparent-border-right{border-right:1px solid transparent!important}.resizing-highlight{position:relative}.resizing-highlight:before{content:\"\";position:absolute;top:-1px;right:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right{position:relative}.resizing-highlight-right:before{content:\"\";position:absolute;top:-1px;left:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right:first-child{width:1px}.editable-header{border-bottom:1px dashed #666}.muted-text{color:#727272!important}.context-menu{position:fixed;display:none;background:#fff;border:1px solid #dcdcdc;box-shadow:#0000003d 0 3px 8px;z-index:1000;width:150px;border-radius:8px;font-weight:600}.context-menu.show{display:block}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px;cursor:pointer;color:#99a1b7}.context-menu li ::ng-deep svg{width:16px;height:16px;display:inline-block;color:#727272}.context-menu li ::ng-deep svg path{stroke:#727272}.context-menu li:hover{background-color:#f0f0f5!important}.invisible{visibility:hidden!important}.fw-500{font-weight:500!important}.taskbar{position:fixed;display:flex;justify-content:center;z-index:1000}.taskbar .action-btn{transition:opacity text-decoration .3s ease}.taskbar .action-btn:hover{text-decoration:underline;opacity:.8}.taskbar .delete{color:#ea0000}.selected-count,.action-btn,.dropdown-content a{font-weight:500;font-size:14px}.selected-rows-action-bar{background-color:#1a1a1a;color:#fff;padding:4px 24px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 -4px 12px #00000026}.selected-rows-action-bar .btn:active,.selected-rows-action-bar .btn:focus{outline:0!important;border:0!important;border-color:transparent!important}.selected-rows-action-bar .action-btn{color:#fff!important}.cell .dropdown-menu,.cell .form-select,.cell input{color:#000!important}.cell input::placeholder{color:#727272!important}.cell .badge{border-radius:4px!important;height:24px;align-items:center;width:-moz-fit-content;width:fit-content}.cell .badge-danger{color:#ea5353!important;border:1px solid #ea5353!important;background-color:#ff00000d!important}.cell .badge-success{background-color:#84ca8130!important;border:1.5px solid rgb(70,227,114)!important;color:#46e372!important}.cell .badge-warning{background-color:#fff3dc!important;color:orange!important;border:1px solid #ffa000!important}.cell .badge-info{color:#00bad1;background-color:#e8fbfd;border:1px solid #00bad1}.cell .badge-secondary{color:#6c757d;background-color:#f1f3f5;border:1px solid #6c757d}.header-tag ::ng-deep svg path{stroke:#727272!important}.cross-secondary:hover ::ng-deep svg path{stroke:#000!important}.disable-sorting{pointer-events:none;opacity:.5}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{background-color:transparent!important}input.is-invalid:focus{border:2.5px solid red!important;outline:none}.table-cell input.is-invalid:focus{border:2.5px solid red!important;outline-color:red!important;outline:none!important;box-shadow:none!important}.active-for-editing:has(input.is-invalid:focus){outline:none!important;box-shadow:none!important;border:0!important}.selected-cell,.row-selected{background-color:#c2e0fe}.first-row-selected{border-top:2px solid #2196f3!important}.last-row-selected{border-bottom:2px solid #2196f3!important}.left-selection-border{border-left:2px solid #2196f3!important}.s-no{font-size:14px;font-weight:500}.top-border{border-top:2px solid #2196f3!important}.bottom-border{border-bottom:2px solid #2196f3!important}.left-border{border-left:2px solid #2196f3!important}.border-left{border-left:1px solid #E0E0E0}.right-border{border-right:2px solid #2196f3!important}.top-left-corner{border-top-left-radius:4px}.top-right-corner{border-top-right-radius:4px}.bottom-left-corner{border-bottom-left-radius:4px}.bottom-right-corner{border-bottom-right-radius:4px}.flash-bg{animation:flashAnim 1000s ease}@keyframes flashAnim{0%{background-color:#48a2fc}50%{background-color:#c2e0fe}to{background-color:#c2e0fe}}.cut-flash-bg{animation:cut-flash .8s ease}@keyframes cut-flash{0%{background-color:#f006}50%{background-color:#f00c}to{background-color:#c2e0fe}}.accordion-details .center-section .table .tbody .tr:hover .td{background-color:#f0f8ff!important}.editing-dropdown-search-input input:focus{border:1px solid #86b7fe!important}.nested-table .thead{position:sticky;top:0}.dropdown-wrapper{position:relative;display:inline-block}.btn-icon{background:transparent;border:0;padding:.25rem .5rem;cursor:pointer}.custom-dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;list-style:none;margin:0;padding:.25rem 0;background:#fff!important;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 18px #00000014;border-radius:.35rem;z-index:1200}.custom-dropdown-menu .dropdown-item{display:block;width:100%;padding:.5rem 1rem;text-align:left;background:transparent;border:none}.custom-dropdown-menu .dropdown-item:hover{background:#00000008}.confirm-block{padding:0}.center-nested-table .tr:hover .td{background-color:#f0f8ff}.table ::ng-deep .cdk-drag-placeholder{background-color:#fff!important}.assets-pic{border-radius:8px!important}.fullscreen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}.fullscreen-img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 15px #00000080}.position-sticky{z-index:2}.viewport{display:block!important;overflow:visible!important}.nested-table ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:0!important}.nested-table ::ng-deep .cdk-virtual-scroll-viewport{overflow-x:hidden!important}.disabled-search-input{background-color:#f5f5f5;cursor:pointer!important}.right-click-menu-icons ::ng-deep svg path{stroke-width:2!important}.loader{animation:rotate 1s infinite;height:50px;width:50px}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#fff;box-shadow:30px 0 #ff3d00;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#ff3d00;box-shadow:30px 0 #fff}@keyframes rotate{0%{transform:rotate(0) scale(.8)}50%{transform:rotate(360deg) scale(1.2)}to{transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #ff3d00}50%{box-shadow:0 0 #ff3d00;margin-bottom:0;transform:translate(15px,15px)}to{box-shadow:30px 0 #ff3d00;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #fff}50%{box-shadow:0 0 #fff;margin-top:-20px;transform:translate(15px,15px)}to{box-shadow:30px 0 #fff;margin-top:0}}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{opacity:.7!important}.action-button{background-color:#6f61cf!important;color:#fff!important;border-radius:6px!important;font-weight:500!important;margin-top:-4px}.action-button:hover{background-color:#6a5fb3!important}.action-buttons-row .button{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;border-radius:6px;height:34px;padding:0 10px;white-space:nowrap;transition:max-width .4s ease,background-color .3s ease;max-width:40px;background-color:transparent;border:1px solid #6F61CF}.action-buttons-row .button .label-hidden{opacity:0;margin-left:8px;transition:opacity .3s ease;pointer-events:none;display:none}.action-buttons-row .button:hover{max-width:200px;background-color:#6f61cf}.action-buttons-row .button:hover .label-hidden{opacity:1;pointer-events:auto;margin-left:8px!important;display:block}.action-buttons-row ::ng-deep .button .svg-icon svg path{stroke:#6f61cf;transition:fill .3s ease,stroke .3s ease}.action-buttons-row ::ng-deep .button:hover .svg-icon svg path{stroke:#fff!important}::ng-deep .nav-tabs .nav-link{border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important}::ng-deep .nav-tabs .nav-link:hover,::ng-deep .nav-tabs .nav-link:focus{border:none!important;border-bottom:2px solid transparent!important;outline:none!important;background:transparent!important}::ng-deep .nav-tabs .nav-link.active{border:none!important;border-bottom:2px solid var(--bs-primary)!important;background:transparent!important;color:var(--bs-primary)!important}.open-top{top:-150%!important}.muted{color:#7a7a7a!important}.item-title{font-size:1.2em;font-weight:700;margin-bottom:10px}.item-image{width:100%;border-radius:10px}.comment{display:flex;align-items:center;margin-bottom:10px}.comment-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px}.comment-author{font-weight:700}.comment-content{font-size:.9em;line-height:1.4}.comment-timestamp{font-size:.8em;color:#888;margin-left:auto}.des_low{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:242px;display:block;text-transform:capitalize!important}.firstDiv{word-break:break-word;overflow-wrap:break-word;white-space:normal}.container{display:flex;flex-wrap:wrap;margin:20px;gap:20px;background-color:#fff;padding:20px;border-radius:10px}.item{width:calc(33.33% - 20px);background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px #0000001a}.forCommentImg{width:70px;border-radius:16px;margin:8px 0;cursor:pointer}.image-modal img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 4px 10px #00000080}.full-image-modal{position:fixed;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.full-image-modal .full-image{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 10px #fff3}.item-content{font-size:14px;line-height:1.5;max-height:220px;overflow-y:auto}.image-modal.full-image-modal{position:fixed;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:9999;overflow:hidden;cursor:zoom-out}.image-modal.full-image-modal img{border-radius:8px;box-shadow:0 4px 20px #0006;object-fit:contain;transition:transform .3s ease}.image-modal.full-image-modal img:hover{transform:scale(1.02)}::ng-deep .custom-overlay-wrapper .custom-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999}::ng-deep .custom-overlay-wrapper .custom-modal{background:#fff;border-radius:12px;box-shadow:0 8px 25px #0003;width:360px;max-width:90%;padding:24px;text-align:center;animation:fadeInScale .25s ease}::ng-deep .custom-overlay-wrapper .custom-modal-body .modal-message{font-size:16px;margin-bottom:20px;color:#333}::ng-deep .custom-overlay-wrapper .modal-actions{display:flex;justify-content:center;gap:12px}::ng-deep .custom-overlay-wrapper .modal-actions button{min-width:90px;padding:8px 14px;border-radius:6px;border:none;font-weight:500;cursor:pointer;transition:background-color .2s ease}::ng-deep .custom-overlay-wrapper .btn-confirm{background-color:#007bff;color:#fff}::ng-deep .custom-overlay-wrapper .btn-confirm:hover{background-color:#0069d9}::ng-deep .custom-overlay-wrapper .btn-cancel{background-color:#e4e4e4;color:#333}::ng-deep .custom-overlay-wrapper .btn-cancel:hover{background-color:#d6d6d6}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.clear-btn{background:linear-gradient(135deg,#f53545,#f53545);border:none;color:#fff;font-size:13px;padding:3px 6px;border-radius:20px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #ff5f6d66;position:relative;bottom:4px}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px #ff5f6d99;background:linear-gradient(135deg,#f53545,#f53545)}.clear-btn i{font-size:16px;vertical-align:middle}.cell-editin-dropdown .deopdown-item{width:100%!important;box-shadow:none!important;border-radius:4px;cursor:pointer;padding-block:8px!important}.cell-editin-dropdown .deopdown-item:hover{background-color:#f1f1f1}.card-outer{border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:16px;padding:16px;background-color:#fff}.consumerDropdownButton{height:32px;display:flex;align-items:center}a.grid-header-icon:hover{background:#e0e0e0;width:32px;height:32px;border-radius:8px;transition:none}a.grid-header-icon{width:32px;height:32px}.action-buttons-row.active a.grid-header-icon,a.grid-header-icon.show{background-color:#e0e0e0;border-radius:8px}.data-grid-svg-icon.setting_dropdown{width:32px!important;height:32px!important}.new_design_dropdown .dropdown_main_button{color:#6a6b6d;text-decoration:none}.new_design_dropdown ul{border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 0 12px #00000014!important}.new_design_dropdown ul li{color:#1b1f22!important;height:32px}.new_design_dropdown ul li:hover{background:#0084ff1a!important}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg{height:inherit;border-radius:6px;padding:6px 10px;color:#1b1f22!important;font-size:14px;font-weight:400}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg .new_old_filter{display:inline-block;width:24px;height:24px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg label,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.newest,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.oldest{padding-left:5px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg:hover{background-color:transparent!important}.new_design_dropdown ul li .action_dropdown{padding:6px 16px}.new_design_dropdown ul li.active-filter,.active-filter{background-color:#0084ff1a}.active-filter-all{background:#ebebeb!important}.unfilfilled_dropdown_menu.actions_dropdown_menu{width:210px!important}.filter_dropdown_main .dropdown-item,.actions-dropdown.unfilfilled_dropdown_main .dropdown-item{padding:0 9px!important}.actions-dropdown.UnpaidDropdown{left:150px!important}.new_design_dropdown.hide_arrow .dropdown-toggle:after{display:none}.new_design_dropdown.hide_arrow ul li a label{line-height:1}.dropdown_main_button{border-radius:8px;transition:none;padding:5px 10px;color:#6a6b6d;cursor:pointer}.dropdown_main_button:hover,.dropdown_main_button.show{background:#e0e0e0}.sorting_icon_input{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.sorting_dropdown .column-menu-item{padding:0 6px!important;color:#1b1f22!important;font-size:14px!important;font-weight:400!important}.greenBgHover{background:#0084ff1a!important;border-radius:6px!important}.cancel_btn_new{font-weight:400!important;font-size:14px!important;color:#1b1f22!important;border:none;box-shadow:none;background:transparent;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center}.primary_btn_new{font-weight:500!important;font-size:14px!important;color:#fff!important;background:#0084ff;border:none;box-shadow:none;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center;border-radius:6px}.dropdown_outer{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:8px;font-size:14px}.text_common_14px{font-size:14px;font-weight:400;color:#1b1f22}.text_common_16px{font-size:16px;font-weight:500;color:#1b1f22}.page_refresh{font-size:13px;font-weight:400;color:#6a6b6d}\n"] }]
|
|
6352
|
+
], template: "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\">\n\n<div class=\"position-relative h-100 card-outer\">\n <div class=\"d-flex justify-content-between mb-3 align-items-center position-relative\">\n <div class=\"d-flex gap-1 table-right-top-actions\">\n <div class=\"nav nav-tabs\" *ngIf=\"false\">\n <div class=\"nav nav-tabs\" id=\"nav-tab\" role=\"tablist\">\n <span\n *ngFor=\"let tab of tabs; let i = index\"\n (click)=\"setActiveTab(tab)\"\n class=\"nav-link cursor-pointer\"\n [class.active]=\"activeTab == tab\"\n >\n {{ tab }}\n </span>\n </div>\n </div>\n <div class=\"new_design_dropdown hide_arrow\">\n <a href=\"JavaScript:void(0)\" (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \" [class.active-filter-all]=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button\">\n Default View\n </a>\n </div>\n <div>\n <!-- *ngIf=\"tableFilterViewId && hasAnyDefaultView()\" -->\n <ng-container >\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" (click)=\"toggleActions('unfulfilledDropdown')\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n Unfulfilled\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div>\n <!-- <div>\n <ng-container *ngIf=\"tableFilterViewId && hasAnyDefaultView()\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown\" (click)=\"toggleActions('UnpaidDropdown')\"\n [class.active]=\"activeTopButton === 'UnpaidDropdown'\">\n <a href=\"JavaScript:void(0)\"\n class=\"d-flex align-items-center justify-content-center text-decoration-none dropdown_main_button\">\n Unpaid\n </a>\n <div *ngIf=\"activeTopButton === 'UnpaidDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons UnpaidDropdown\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unpaid_dropdown_menu\">\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\">\n </span>\n </div>\n <span>Test Type</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n \n </div> -->\n <div class=\"d-flex align-items-center table-right-top-actions\">\n <ng-container *ngIf=\"tableView | filter : searchTextPresetTable : 'name' as filteredList\">\n <div *ngFor=\"let list of filteredList | slice: 0:2;let i = index;\n trackBy: trackByTable\" class=\"dropdown_main_button position-relative d-flex align-items-center\" [class.active-filter-all]=\"activeIndex === list.id\" title=\"{{list.id}}\" (click)=\"selectFilter(list,list.id); openIndex = null\">\n {{list.name}}\n\n <!-- Show dropdown icon when this filter is active -->\n <ng-container *ngIf=\"activeIndex === list.id\">\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown ms-1\" \n [class.active]=\"activeTopButton === ('dropdown_' + list.id)\">\n <a href=\"JavaScript:void(0)\" \n (click)=\"$event.stopPropagation(); toggleActions('dropdown_' + list.id)\"\n class=\"d-flex align-items-baseline dropdown_icon_button text-decoration-none\" style=\"height: 16px;\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </a>\n \n <!-- Dropdown menu for this specific filter -->\n <div *ngIf=\"activeTopButton === ('dropdown_' + list.id)\" \n class=\"actions-dropdown mt-1 consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute; z-index: 1000;\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"cursor-pointer action-buttons-row new_design_dropdown d-none\" [class.active]=\"activeTopButton === 'unfulfilledDropdown'\">\n <a href=\"JavaScript:void(0)\" (click)=\"toggleActions('unfulfilledDropdown')\"\n class=\"d-flex align-items-center justify-content-center dropdown_main_button text-decoration-none\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'unfulfilledDropdown'\" class=\"actions-dropdown mt-1 d-none consumer_buttons unfilfilled_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu unfilfilled_dropdown_menu\">\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Reset</span>\n </span>\n </a> -->\n <!-- <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/updatePresetIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Update and Re-save</span>\n </span>\n </a>\n <hr class=\"mt-1\"> -->\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/infoIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span> Rename</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/duplicateIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span>Duplicate</span>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/trashIconNew.svg'\"\n class=\"svg-icon svg-icon-2\"\n ></span>\n </div>\n <span class=\"text-danger\">Delete</span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex gap-1 align-items-center table-right-top-actions\">\n <div class=\"global-search position-relative\" [style.width.px]=\"350\">\n <span *ngIf=\"enableGlobalSearch\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon ms-2 mt-0 position-absolute icon\" style=\"top: 8px;\"\n ></span>\n <input #globalSearchInput\n *ngIf=\"enableGlobalSearch\"\n class=\"form-control\"\n placeholder=\"Search\"\n [(ngModel)]=\"tableSearch\"\n (keydown.enter)=\"onGlobalSearch()\"\n (input)=\"onSearchInput($event)\"\n type=\"search\"\n />\n </div>\n <!-- <ng-container *ngFor=\"let button of buttons\">\n <div\n class=\"d-flex align-items-center gap-2 action-buttons-row\"\n *ngIf=\"button?.has_permission\"\n >\n <a\n href=\"JavaScript:void(0)\"\n (click)=\"onActionButtonClick(button.name)\"\n class=\"button button-small btn border border-primary btn-active-primary me-2 p-0 d-flex align-items-center justify-content-center px-3\"\n >\n <span\n *ngIf=\"button.is_showIcon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/' + button.icon + '.svg'\n \"\n class=\"svg-icon svg-icon-2\"\n ></span>\n <span\n class=\"label-hidden text-white\"\n [class.ms-0]=\"button.is_showIcon\"\n >{{ button?.name }}</span\n >\n </a>\n </div>\n </ng-container> -->\n <div *ngIf=\"!showFilterRow\"\n class=\"cursor-pointer position-relative action-buttons-row\"\n (click)=\"toggleOpenFilter()\"\n [class.active]=\"showFilters\">\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\" class=\"svg-icon svg-icon-2 d-flex\"></span>\n </a>\n <span *ngIf=\"activeFilteredColumns?.length\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #0022ff;\n background-color: rgb(0, 60, 255);\n position: absolute;\n right: 8px;\n top: 6px;\n \"\n class=\"rounded-circle d-block\"\n ></span>\n </div>\n <div class=\"cursor-pointer d-none\"\n (click)=\"toggleActions('advance-filter')\"\n [class.active]=\"activeTopButton === 'advance-filter'\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/zoom-charge.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span>\n </div>\n\n <!-- filter dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('filterDropdownNew')\"\n [class.active]=\"activeTopButton === 'filterDropdownNew'\">\n <a href=\"JavaScript:void(0)\" class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'filterDropdownNew'\" class=\"actions-dropdown mt-1 consumer_buttons filter_dropdown_main\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu checkboxes_sorting_dropdown\">\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productName\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productName\">\n Product Name\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"createdDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"createdDate\">\n Created Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"updatedDate\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"updatedDate\">\n Updated Date\n </label>\n </span>\n </a>\n <a class=\"dropdown-item d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"$event.stopPropagation();\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <div class=\"sorting_icon_input\">\n <input class=\"form-check-input mt-0\" type=\"radio\" name=\"exampleRadios\" id=\"productType\" value=\"option1\" checked>\n </div>\n <label class=\"form-check-label mb-0 mt-1 ps-2\" for=\"productType\">\n Product Type\n </label>\n </span>\n </a>\n <hr class=\"my-2\" style=\"border: 1px solid #E0E0E0;\">\n <div class=\"d-flex\" (click)=\"activeFilter('newest')\" [class.active-filter]=\"activeFilterType === 'newest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowupIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"mt-1 newest ps-2\">Oldest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'newest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\"\n ></span>\n </span>\n </a>\n </div>\n <div class=\"d-flex\" (click)=\"activeFilter('oldest')\" [class.active-filter]=\"activeFilterType === 'oldest'\">\n <a class=\"dropdown-item hover_dropdown_bg d-flex align-items-center justify-content-between\" href=\"javascript:void(0)\">\n <span class=\"d-flex align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrowdownIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center new_old_filter\"\n ></span>\n <span class=\"oldest ps-2\">Newest First</span>\n </span>\n <span class=\"d-flex align-items-center\" *ngIf=\"activeFilterType === 'oldest'\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\">\n </span>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n <!-- settings dropdown -->\n <div class=\"cursor-pointer action-buttons-row preset_dropdown_main position-relative\"\n (click)=\"toggleActions('setting')\"\n [class.active]=\"\n activeTopButton === 'setting' ||\n activeTopButton === 'table-layout' ||\n activeTopButton === 'table-presets' ||\n activeTopButton === 'show-hide-columns'\">\n <!-- <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settings-2.svg'\"\n class=\"data-grid-svg-icon top-icon me-2\"\n ></span> -->\n\n <a href=\"JavaScript:void(0)\"\n class=\"p-0 d-flex align-items-center justify-content-center grid-header-icon\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/settingIconNew.svg'\"\n class=\"svg-icon svg-icon-2 d-flex\"\n ></span>\n </a>\n <div *ngIf=\"activeTopButton === 'setting'\"\n class=\"actions-dropdown mt-1 actions-dropdown-setting\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu setting_dropdown_menu\">\n <!-- Table Layout -->\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"$event.stopPropagation(); toggleActions('table-layout')\">\n <span class=\"d-flex justify-content-between align-items-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/layoutIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown\"\n ></span>\n Table Layout</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n <!-- Table Presets -->\n <a (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/list-details.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center\"\n ></span>\n Table Presets</span\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </a>\n\n <!-- Columns -->\n <a *ngIf=\"!showSideMenu\" (click)=\"$event.stopPropagation(); toggleActions('show-hide-columns')\"\n class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eyeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown\"\n ></span>\n Columns</span>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"muted-text\">{{ columnsCount }}</span>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n class=\"data-grid-svg-icon d-flex align-items-center justify-content-center\"\n ></span>\n </div>\n </a>\n\n <a (click)=\"autosizeAllColumns()\" class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/resizeIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown\"></span>\n <span>Autosize all columns</span>\n </span>\n <!-- <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div> -->\n </a>\n\n <a class=\"dropdown-item py-0 px-2 d-flex justify-content-between align-items-center cursor-pointer\">\n <span class=\"d-flex align-items-center justify-content-center\"><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/multicellNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown\"></span>\n <span>Multi-cell tooltip mode</span>\n </span>\n <div class=\"d-flex align-items-center gap-2\">\n <div class=\"form-check form-switch mb-0 mt-1\">\n <input class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\">\n <label class=\"form-check-label\" for=\"flexSwitchCheckChecked\"></label>\n </div>\n </div>\n </a>\n\n <div class=\"dropdown-divider\"></div>\n\n <!-- Filter -->\n <!-- <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"toggleOpenFilter(); activeTopButton = '';\"\n *ngIf=\"!showFilterRow\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Filter\n </a> -->\n\n <!-- Download -->\n <a class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('csv')\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n CSV Export\n </a>\n <a *ngIf=\"enableExport\"\n class=\"dropdown-item py-0 px-2 d-flex align-items-center cursor-pointer\"\n (click)=\"downloadCsv('xlsx')\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/exportIconNew.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex align-items-center justify-content-center cursor-pointer\"\n ></span>\n Excel Export\n </a>\n <!-- Font Family & Font Size -->\n <!-- <div class=\"px-2 pb-2 pt-2\">\n <div class=\"d-flex gap-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"fontFaimly\"\n (change)=\"onFontChange()\"\n >\n <option *ngFor=\"let font of fontFamilies\" [value]=\"font\">\n {{ font }}\n </option>\n </select>\n\n <select\n class=\"form-select form-select-sm\"\n (change)=\"onFontChange()\"\n [(ngModel)]=\"bodyTextFontsSize\"\n >\n <option *ngFor=\"let size of fontSizes\" [value]=\"size\">\n {{ size }}\n </option>\n </select>\n </div>\n </div> -->\n </div>\n </div>\n\n <!-- Table Layout -->\n\n <ng-container *ngIf=\"activeTopButton === 'table-layout'\">\n <div\n *ngTemplateOutlet=\"tableLayout\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'table-presets'\">\n <div\n *ngTemplateOutlet=\"tablePreset\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n\n <!-- Table Presets -->\n <ng-container *ngIf=\"activeTopButton === 'show-hide-columns'\">\n <div\n *ngTemplateOutlet=\"showHideColumns\"\n class=\"actions-dropdown mt-1\"\n style=\"position: absolute\"\n ></div>\n </ng-container>\n </div>\n <!-- action dropdown new -->\n <div class=\"cursor-pointer action-buttons-row position-relative\" (click)=\"toggleActions('actionsDropdown')\"\n [class.active]=\"activeTopButton === 'actionsDropdown'\" *ngIf=\"buttons.length > 1\">\n <button type=\"button\" class=\"primary_btn_new common_btn d-flex align-items-center justify-content-between consumerDropdownButton px-2\">\n <span class=\"me-1\">Actions</span>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-down-white.svg'\"\n class=\"svg-icon svg-icon-2 d-flex align-items-center\"\n ></span>\n </button>\n <div *ngIf=\"activeTopButton === 'actionsDropdown'\" class=\"actions-dropdown mt-1 consumer_buttons\"\n style=\"position: absolute\">\n <div class=\"dropdown-menu show shadow custom-menu actions_dropdown_menu\">\n <ng-container *ngFor=\"let button of buttons\">\n <a class=\"dropdown-item py-0 px-3 d-flex justify-content-between align-items-center cursor-pointer \"\n (click)=\"onActionButtonClick(button.name)\">\n <span class=\"d-flex justify-content-between align-items-center\">\n \n <ng-container *ngIf=\"button?.has_permission\">\n <span>{{ button?.name }}</span>\n </ng-container>\n </span>\n </a>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- show single button -->\n <button class=\"btn btn-primary py-1 text_common_14px text-white\" type=\"button\" (click)=\"onActionButtonClick(buttons[0].name)\" *ngIf=\"buttons.length == 1\">{{ buttons[0]?.name }}</button>\n\n <div class=\"action-buttons-row\" *ngIf=\"showFullScreenButton\">\n <a\n *ngIf=\"!isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Minimise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/expend.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n <a\n *ngIf=\"isFullScreen\"\n class=\"button button-small btn btn-active-primary border border-primary expend d-flex justify-content-center align-items-center\"\n (click)=\"toggleFullscreen()\"\n data-bs-toggle=\"tooltip\"\n data-bs-placement=\"top\"\n title=\"Maximise\"\n [ngClass]=\"{ minArrow: !isFullScreen, maxArrow: isFullScreen }\"\n style=\"transition: color 0.2s\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/minimize.svg'\"\n class=\"svg-icon svg-icon-2 mb-1\"\n ></span>\n </a>\n </div>\n <div>\n <!-- Example single danger button -->\n\n <!-- <button\n type=\"button\"\n class=\"btn btn-primary btn-sm d-flex gap-2 action-button\"\n (click)=\"toggleActions('actions')\"\n >\n Action\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/Vector.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <div\n *ngIf=\"activeTopButton === 'actions'\"\n class=\"actions-dropdown mt-1\"\n >\n <div class=\"dropdown-menu show\">\n <a class=\"dropdown-item\" href=\"#\">Action</a>\n <a class=\"dropdown-item\" href=\"#\">Another action</a>\n <a class=\"dropdown-item\" href=\"#\">Something else here</a>\n <div class=\"dropdown-divider\"></div>\n <a class=\"dropdown-item\" href=\"#\">Separated link</a>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showFilters && !showFilterRow\"\n class=\"top-filter-row border-top py-2 d-flex justify-content-between align-items-center\"\n [style.height.px]=\"topFilterRowHeight\"\n >\n <!-- LEFT SIDE (Filter tags + Filter button) -->\n <div class=\"d-flex gap-2 align-items-center\">\n <ng-container>\n <div\n *ngFor=\"let col of activeFilteredColumns; trackBy: trackByField\"\n class=\"filter-tags\"\n >\n <div\n (click)=\"\n isActiveFilterOpen = true;\n activeTopButton = 'filter-columns';\n openFilter(col)\n \"\n class=\"d-flex justify-content-center align-items-center add-filter-button active-filters\"\n style=\"white-space: nowrap\"\n [class.active]=\"\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen &&\n activeTopButton == 'filter-columns'\n \"\n >\n <span class=\"header-tag mt-0 d-flex align-items-center left-side-pinned\">\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pin.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n {{ col.header }}: {{col.query.first_value || col.query?._ids[0]}}\n <span\n (click)=\"\n $event.stopPropagation(); removeColumnFilterFromColumn(col)\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filterCrossNew.svg'\n \"\n class=\"data-grid-svg-icon cross-secondary ms-2\"\n ></span>\n </span>\n </div>\n\n <ng-container\n *ngIf=\"\n activeTopButton === 'filter-columns' &&\n col?.field == selectedColumnForFilter?.field &&\n isActiveFilterOpen\n \"\n >\n <div\n *ngTemplateOutlet=\"filterColumns; context: { column: col }\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Filter Button -->\n <div class=\"add-filter-button-menu\">\n <div\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"d-flex justify-content-center align-items-center muted-text add-filter-button button-filter\"\n style=\"width: 70px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/plus.svg'\"\n class=\"me-2 data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n Filter\n </div>\n\n <ng-container\n *ngIf=\"activeTopButton === 'filter-columns' && !isActiveFilterOpen\"\n >\n <div\n *ngTemplateOutlet=\"filterColumns\"\n class=\"actions-dropdown mt-1\"\n ></div>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT SIDE (Update + Reset) -->\n <div class=\"d-flex gap-3 align-items-center\">\n <div\n (click)=\"savePreset()\"\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!checkFilterChangesEffect()\"\n >\n Update View\n </div>\n\n <div\n class=\"text-primary cursor-pointer all-filters-reset-button\"\n *ngIf=\"!tableFilterViewId && activeFilteredColumns?.length\"\n (click)=\"clearAllFilters()\">\n Clear filters\n </div>\n </div>\n </div>\n\n <div\n [style.height]=\"\n showFilters ? 'calc(100% - ' + (topFilterRowHeight + footerRowHeight) + 'px)' : 'calc(100% - ' + footerRowHeight + 'px)'\n \"\n cdkDropListGroup\n class=\"data-grid-table-wrapper overflow-hidden\"\n #dataGridContainer\n [style.fontFamily]=\"fontFaimly\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n id=\"data-grid-main-container\"\n >\n <div\n *ngIf=\"showRowsGrouping\"\n [style.height.px]=\"headerRowHeight\"\n [cdkDropListData]=\"columns\"\n [style.backgroundColor]=\"\n topGroupedBadgesBackgroundColor || headerBackgroundColor\n \"\n cdkDropList\n (cdkDropListEntered)=\"enterToTopRowGrouping($event)\"\n (cdkDropListExited)=\"exitedFromTheTopRow($event)\"\n (cdkDropListDropped)=\"onDropTopGroup($event)\"\n [cdkDropListEnterPredicate]=\"canEnterToRowsGrouping\"\n id=\"rows-grouping-top-container\"\n class=\"border-below d-flex px-4 align-items-center\"\n >\n <div\n class=\"d-flex gap-2 align-items-center\"\n [style.color]=\"headerTextColor\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <div *ngIf=\"!draggingInGroupArea && !groupedColumns?.length\">\n Drag here to set row groups\n </div>\n <div\n cdkDropListOrientation=\"horizontal\"\n cdkDropList\n (cdkDropListDropped)=\"onGroupReorder($event)\"\n class=\"d-flex\"\n >\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'x'\"\n *ngFor=\"\n let child of groupedColumns;\n let i = index;\n trackBy: trackByField\n \"\n class=\"d-flex align-items-center\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n groupedColumns.length > 1 && i != groupedColumns.length - 1\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"d-flex overflow-hidden\"\n [style.height]=\"\n 'calc(100% - ' +\n (showRowsGrouping\n ? headerRowHeight + footerRowHeight\n : footerRowHeight) +\n 'px)'\n \"\n >\n <div\n class=\"h-100\"\n [style.width]=\"\n !showSideMenu\n ? '100%'\n : sideMenuVisible\n ? 'calc(100% - 280px)'\n : 'calc(100% - 30px)'\n \"\n >\n <div class=\"h-100 transition position-relative w-100\">\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- Data Grid Header starts here -->\n <!-- ##################################################################################################################################################################################### -->\n <!-- ##################################################################################################################################################################################### -->\n\n <!-- [style.fontSize.px]=\"headerTextFontsSize\" -->\n <div\n class=\"data-grid-header-wrapper w-100\"\n [style.color]=\"headerTextColor\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.fontSize.px]=\"13\"\n [class.border-below]=\"!hasAnyVisibleColumn\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Left Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header left-pinned\"\n #leftPinnedHeader\n [class.border-right]=\"hasLeftPinnedColumns\">\n <div *ngIf=\"showSerialNumber\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n class=\"select-all-checkbox-cell border-below\"\n [style.width.px]=\"55\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n S.No\n </div>\n <div *ngIf=\"showCheckboxes\"\n class=\"select-all-checkbox-cell border-below\"\n [style.height.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [indeterminate]=\"isIndeterminateState(dataSet)\"\n [checked]=\"isAllSelected(dataSet)\"\n (change)=\"toggleSelectAll(dataSet)\"\n />\n </div>\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"d-flex\"\n cdkDropList\n id=\"left-pinned-header\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"leftPinnedColumns\"\n (cdkDropListEntered)=\"onDropListEnter($event, 'left')\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewLeftPinnedColumns')\n \"\n (cdkDropListDropped)=\"onDropGroup()\"\n style=\"min-width: 1px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of leftPinnedColumns;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewLeftPinnedColumns'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: ''\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngIf=\"col?.children?.length; else singleCol\"\n >\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Center Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n class=\"data-grid-header center-scrollable\"\n #centerPinnedHeader\n (scroll)=\"onCenterBodyScroll($event)\"\n id=\"center-pinned-header\"\n cdkDropList\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n [cdkDropListData]=\"centerColumns\"\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListSortingDisabled]=\"\n isDisableColumnGrouping && draggingInGroupArea\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'center')\"\n (cdkDropListSorted)=\"onSortGroup($event, 'previewCenterColumns')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n [style.maxWidth]=\"\n 'calc(100% - ' +\n (rightPinnedHeader.offsetWidth + leftPinnedHeader.offsetWidth) +\n 'px)'\n \"\n >\n <div\n *ngIf=\"groupedColumns?.length\"\n style=\"min-width: 200px\"\n class=\"h-100 align-items-center\"\n #columnsGroupedBox\n id=\"groupBoxHeaderDiv\"\n >\n <div\n class=\"d-flex w-100 justify-content-between align-items-center border-below\"\n [style.height.px]=\"\n showFilterRow ? headerRowHeight * 2 : headerRowHeight\n \"\n >\n <div class=\"ps-3\">Group</div>\n <div class=\"d-flex\">\n <div\n class=\"three-dots cursor-pointer\"\n (click)=\"\n openThreeDotsMenu($event, 'group');\n isThreeDotsFilterOpen = false\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroupBox($event)\n \"\n class=\"resize-handle\"\n style=\"margin-right: -2px\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n\n <div\n [style.height.px]=\"headerRowHeight\"\n class=\"border-below\"\n ></div>\n </div>\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"gridType === 'Assets' || gridType === 'Tasks'\"\n >\n </span>\n <div\n class=\"dragable-header\"\n (cdkDragStarted)=\"\n checkColumnGroupingStatus(col);\n dragStartOnGroup(col);\n onDragStarted(col)\n \"\n (cdkDragMoved)=\"onDragMoved($event)\"\n (cdkDragEnded)=\"onDragEnded()\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of centerColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'previewCenterColumns'\n }\n \"\n >\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (draggingInGroupArea\n ? 'data-grid/icons/justify.svg'\n : 'data-grid/icons/arrows-move.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n <span\n *ngIf=\"isOutsideContainer\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/eye-cross.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n >\n </span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'centerColumns'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && !isOutsideContainer\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container *ngIf=\"child?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container *ngIf=\"col?.is_groupable\">\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <!-- Data Grid Right Pinned Header starts here -->\n <!-- ********************************************************************************* -->\n <!-- ********************************************************************************* -->\n <div\n [style.backgroundColor]=\"headerBackgroundColor\"\n cdkDropList\n id=\"right-pinned-header\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n cdkDropListOrientation=\"horizontal\"\n class=\"data-grid-header right-pinned\"\n (cdkDropListSorted)=\"\n onSortGroup($event, 'previewRightPinnedColumns')\n \"\n (cdkDropListEntered)=\"onDropListEnter($event, 'right')\"\n (cdkDropListDropped)=\"onDropGroup()\"\n #rightPinnedHeader\n class=\"right-pinned-header d-flex\"\n style=\"min-width: 0.2px\"\n >\n <div\n class=\"dragable-header\"\n cdkDrag\n [cdkDragData]=\"col\"\n *ngFor=\"\n let col of rightPinnedColumns;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n pinnedRight: true,\n index: i,\n section: 'right'\n }\n \"\n ></ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n *ngIf=\"!draggingInGroupArea\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: {\n $implicit: col,\n index: i,\n section: 'right'\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container *ngIf=\"col?.children?.length; else singleCol\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron:\n col.children.length > 1 &&\n i != col.children.length - 1\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #singleCol>\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: col,\n showChevron: col?.children?.length > 1\n }\n \"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <!-- Data Grid Body starts here -->\n <!--########################################################################################################################################################################################################################### -->\n <!--########################################################################################################################################################################################################################### -->\n <div\n class=\"h-100 d-flex justify-content-center align-items-center\"\n *ngIf=\"!dataSet?.length && !loading && !dataSetLoading\">\n <!-- <div\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/record-not-found.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></div> -->\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/no-data-image.svg'\"\n class=\"data-grid-svg-icon mb-3 d-flex justify-content-center align-items-center\">\n </span>\n <p class=\"text_common_16px mb-0\">No data available</p>\n <p class=\"page_refresh mb-0\">Try adjusting filters or refresh the page</p>\n </div>\n </div>\n\n <div\n class=\"position-absolute w-100 h-100 d-flex justify-content-center align-items-center loading-overlay\"\n *ngIf=\"loading || dataSetLoading\"\n style=\"\n z-index: 999;\n backdrop-filter: blur(1px);\n \"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div class=\"spinner-border text-primary\" role=\"status\">\n <!-- <span class=\"loader\"></span> -->\n <!-- <span class=\"visually-hidden\">Loading...</span> -->\n <!-- </div> -->\n </div>\n </div>\n\n <div\n class=\"data-grid-body-wrapper position-relative d-flex\"\n [style.height]=\"bodyWrapperHeight\"\n style=\"overflow-y: auto; overflow-x: hidden\"\n #mainScroll\n (scroll)=\"onMainScroll($event)\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n >\n <!-- LEFT PINNED -->\n <div\n [style.height.px]=\"\n !groupedColumns.length ? originalDataSet.length * rowHeight : 0\n \"\n ></div>\n <!-- [class.transparent-border-right]=\"!hasLeftPinnedColumns\" -->\n <div [class.h-100]=\"originalDataSet.length < 8\">\n <div\n class=\"data-grid-body left-pinned-body w-100\"\n style=\"overflow-y: hidden\"\n [class.border-right]=\"hasLeftPinnedColumns\"\n [class.transparent-border-right]=\"!hasLeftPinnedColumns\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"leftPinnedBackgroundColor\"\n [class.h-100]=\"originalDataSet.length < 8\"\n *ngIf=\"!loading && !dataSetLoading\"\n [@rowDynamic]=\"rowAnimation\"\n\n \n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewLeftPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n isLeft: true,\n section: 'left',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewLeftPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'left',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- CENTER -->\n <div\n class=\"h-100\"\n [style.width.px]=\"centerPinnedHeader.clientWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n >\n <div\n class=\"data-grid-body center-scrollable\"\n [class.h-100]=\"originalDataSet.length < 8\"\n style=\"overflow-y: hidden; overflow-x: auto\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n #centerScrollableBody\n (scroll)=\"onCenterBodyScroll($event)\"\n [style.boxShadow]=\"leftPinnedBoxshadow\"\n \n >\n <div [@rowDynamic]=\"rowAnimation\" *ngIf=\"!loading && !dataSetLoading\">\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewCenterColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'center',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewCenterColumns,\n isEven: false,\n isOdd: false,\n section: 'center',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- RIGHT PINNED -->\n <div\n class=\"right-pinned-body-wrapper\"\n *ngIf=\"true\"\n [class.h-100]=\"originalDataSet.length < 8\"\n [style.maxWidth.px]=\"\n isScrollbarVisible\n ? rightPinnedHeader.offsetWidth - 15\n : rightPinnedHeader.offsetWidth\n \"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n [@rowDynamic]=\"rowAnimation\"\n >\n <div\n class=\"data-grid-body right-pinned-body w-100 h-100\"\n style=\"overflow-y: hidden\"\n [style.transform]=\"'translateY(' + translateY + 'px)'\"\n [style.boxShadow]=\"rightPinnedBoxshadow\"\n [style.backgroundColor]=\"rightPinnedBackgroundColor\"\n *ngIf=\"!loading && !dataSetLoading && hasRightPinnedColumns\"\n >\n <ng-container\n *ngFor=\"\n let row of visibleRows;\n let i = index;\n trackBy: trackById\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: row,\n columns: previewRightPinnedColumns,\n isEven: (startIndex + i) % 2 === 0,\n isOdd: (startIndex + i) % 2 !== 0,\n section: 'right',\n isTotalRow: false\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"showTotalAmountRow && originalDataSet?.length\">\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: { __virtualIndex: 0 },\n columns: previewRightPinnedColumns,\n isEven: false,\n isOdd: false,\n section: 'right',\n isTotalRow: true\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n\n <div\n style=\"top: auto; left: auto\"\n (click)=\"\n $event.stopPropagation();\n fullscreenImage = null;\n cdr.detectChanges()\n \"\n [style.width.px]=\"dataGridContainer.offsetWidth\"\n [style.height.px]=\"\n dataGridContainer.offsetHeight - (footerRowHeight + 100)\n \"\n class=\"image-modal full-image-modal\"\n *ngIf=\"fullscreenImage\"\n >\n <img\n (click)=\"$event.stopPropagation()\"\n [src]=\"fullscreenImage\"\n alt=\"Fullscreen Image\"\n />\n </div>\n <div\n *ngIf=\"selectedRows.size > 0 && showTaskbar\"\n class=\"taskbar w-100\"\n [style.bottom.px]=\"85\"\n >\n <div class=\"selected-rows-action-bar\" [@slideUp]>\n <span class=\"selected-count\">\n {{ selectedRows.size }} selected of\n {{\n paginationConfig.totalResults ||\n config?.paginationParams?.totalItems\n }}\n Total\n </span>\n <div class=\"action-buttons d-flex align-items-center\">\n <ng-container\n *ngFor=\"let action of taskbarActions; let i = index\"\n >\n <ng-container *ngIf=\"action?.has_permission\">\n <span\n class=\"action-btn verified btn {{ action }}\"\n (click)=\"onVerifyClick(action?.actionName)\"\n >{{ action?.actionName }}</span\n >\n <span\n *ngIf=\"\n taskbarActions.length > 1 &&\n i !== taskbarActions.length - 1 &&\n taskbarActions[i + 1]?.has_permission\n \"\n class=\"\"\n >|</span\n >\n </ng-container>\n </ng-container>\n <button (click)=\"clearSelectionState(tableType);selectedRows.clear();\" class=\"clear-btn ms-2 mt-2\">\n <i class=\"bi bi-x-circle\"></i> Clear Selection\n </button>\n </div>\n </div>\n </div>\n </div>\n <!-- Vertical Fake scroll Bar -->\n <!-- <div\n (scroll)=\"onMainFakeScroll($event)\"\n class=\"fake-scrollbar fake-scrollbar-vertical d-none\"\n [style.scrollbarWidth]=\"verticalScrollbarWidth\"\n [style.top.px]=\"\n showColumnsGrouping && showFilterRow\n ? headerRowHeight * 3\n : showColumnsGrouping || showFilterRow\n ? headerRowHeight * 2\n : headerRowHeight\n \"\n #fakeScroll\n [style.height]=\"bodyWrapperHeight\"\n style=\"\n overflow-y: auto;\n overflow-x: hidden;\n width: 17px;\n position: absolute;\n right: 0;\n background-color: f1f2f3;\n z-index: 10;\n \"\n >\n <div [style.height.px]=\"rowHeight * dataSetLength\"></div>\n </div> -->\n </div>\n\n <!-- Horizintal Fake Scrollbars -->\n <div\n class=\"d-flex justify-content-between\"\n *ngIf=\"hasScroll\"\n >\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"leftPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n (scroll)=\"onCenterBodyScroll($event)\"\n class=\"fake-horizintal-scrollbar\"\n #horizintalFakeScroll\n [style.width.px]=\"centerPinnedHeader.offsetWidth\"\n >\n <div [style.width.px]=\"centerPinnedHeader.scrollWidth - 10\"></div>\n </div>\n <div\n [style.scrollbarWidth]=\"horizintalScrollbarWidth\"\n class=\"fake-horizintal-scrollbar\"\n #fakeScroll\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n style=\"overflow-x: scroll\"\n ></div>\n </div>\n </div>\n\n <!-- Side Menu Implemented Here -->\n <div\n *ngIf=\"showSideMenu\"\n [style.width.px]=\"sideMenuVisible ? 280 : 30\"\n class=\"right-menu h-100\"\n [style.backgroundColor]=\"sidemenuBackgroundColor\"\n >\n <div class=\"h-100 d-flex flex-row-reverse\">\n <div\n style=\"width: 30px\"\n class=\"d-flex flex-column align-items-center cursor-pointer\"\n [class.border-start]=\"sideMenuVisible\"\n >\n <div\n (click)=\"toggleSideMenu('cols')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'cols' && sideMenuVisible\n \"\n [class.border-below]=\"sideMenuVisible\"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Columns</div>\n </div>\n\n <div\n (click)=\"toggleSideMenu('filtrs')\"\n [class.bg-fff]=\"\n currentOpenedSideMenue == 'filtrs' && sideMenuVisible\n \"\n [class.border-below]=\"\n sideMenuVisible && currentOpenedSideMenue == 'filtrs'\n \"\n class=\"columns-button d-flex flex-column align-items-center\"\n >\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div class=\"side-menue-text\">Filter</div>\n </div>\n </div>\n <div\n class=\"h-100\"\n *ngIf=\"sideMenuVisible\"\n [ngStyle]=\"{ width: sideMenuVisible ? '250px' : '' }\"\n >\n <div class=\"h-100\">\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'cols' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"columnPannel\"></ng-container>\n <!-- Column Items -->\n <div class=\"column-panel-body px-3\">\n <ng-container\n *ngFor=\"let col of columns; trackBy: trackByField\"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n <hr />\n\n <div class=\"side-menu-row-groups\" style=\"height: 30%\">\n <ng-container\n *ngTemplateOutlet=\"sideMenuRowGroups\"\n ></ng-container>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"currentOpenedSideMenue == 'filtrs' && sideMenuVisible\"\n >\n <ng-container *ngTemplateOutlet=\"sideFilters\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n [style.height.px]=\"footerRowHeight\"\n class=\"border-top d-flex align-items-center w-100\"\n [style.backgroundColor]=\"footerRowBackgroundColor\"\n >\n <!-- Rows: <span class=\"fw-500 ms-1\">{{ dataSet.length }}</span> -->\n\n <div class=\"pagination-container w-100 ps-3\"\n [style.height.px]=\"footerRowHeight\"\n [style.padding.px]=\"footerPadding\">\n <div class=\"page-size d-flex align-items-center\">\n <div class=\"d-flex align-items-center justify-content-between page_selection_dropdown\">\n <select\n [(ngModel)]=\"paginationConfig.limit\"\n (change)=\"onPageSizeChange()\">\n <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">\n {{ size }}\n </option>\n </select>\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-downIconNew.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\">\n </span>\n </div>\n <span class=\"separator\"> per page </span>\n </div>\n\n <div class=\"page-info\">\n \n {{ (paginationConfig.page - 1) * paginationConfig.limit + 1 }}-{{\n paginationConfig.page * paginationConfig.limit <\n paginationConfig.totalResults\n ? paginationConfig.page * paginationConfig.limit\n : paginationConfig.totalResults\n }}\n of\n {{ paginationConfig.totalResults }}\n results\n </div>\n\n <div class=\"page-buttons\">\n <button\n (click)=\"goToPage(paginationConfig.page - 1)\"\n [disabled]=\"paginationConfig.page === 1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-left.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n\n <ng-container *ngFor=\"let page of visiblePages\">\n <button\n *ngIf=\"page !== '...'\"\n (click)=\"goToPage(page)\"\n [class.active]=\"page === paginationConfig.page\"\n >\n {{ page }}\n </button>\n <span *ngIf=\"page === '...'\">...</span>\n </ng-container>\n\n <button\n (click)=\"goToPage(paginationConfig.page + 1)\"\n [disabled]=\"paginationConfig.page === paginationConfig.totalResults\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"d-flex justify-content-center align-items-center\"\n ></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- Header Cell Template -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n<!-- ------------------------------------------------------------------------------------------------------------------------ -->\n\n<ng-template\n #headerCell\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"section\"\n let-calledFromNestedPlaceholder=\"calledFromNestedPlaceholder\"\n>\n <div>\n <!-- Group Header -->\n <ng-container *ngIf=\"col.children?.length > 0; else flatHeader\">\n <div cdkDroplistGroup class=\"group-column-wrapper\">\n <!-- Parent Header -->\n <div\n *ngIf=\"shouldTheGroupHeaderShow(col)\"\n class=\"header-cell group-header\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n [style.gridColumn]=\"'span ' + col.children.length\"\n [style.fontWeight]=\"headerFontWeight\"\n [class.flex-row-reverse]=\"pinnedRight\"\n [class.justify-content-end]=\"pinnedRight\"\n style=\"grid-row: 1\"\n >\n <div\n class=\"group-header-content\"\n [title]=\"col.header\"\n [class.ms-2]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(col.children)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeGroup($event, col, pinnedRight)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n\n <!-- Child Headers and Filters -->\n\n <div\n class=\"d-flex\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"col.children\"\n (cdkDropListSorted)=\"onChildDroplistSorted($event, sections)\"\n (cdkDropListDropped)=\"onChildDroplistDroped($event)\"\n [cdkDropListSortingDisabled]=\"false\"\n [cdkDropListConnectedTo]=\"\n showRowsGrouping ? ['rows-grouping-top-container'] : []\n \"\n >\n <div\n cdkDrag\n [cdkDragData]=\"child\"\n *ngFor=\"let child of col.children; let i = index\"\n >\n <!-- Child Header -->\n <ng-container *ngIf=\"child.is_visible && !child['isRowGrouped']\">\n <div\n cdkDragHandle\n class=\"header-cell one-row-header-cells cursor-pointer\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 2\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(child)\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header-test1\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100\"\n [class.editable-header]=\"child?.is_editable\"\n (click)=\"\n openThreeDotsMenu($event, child);\n openFilteronThreeDotsClick(child)\n \"\n >\n {{ child.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\"\n class=\"d-flex align-items-center\"\n *ngIf=\"child.pinned\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div\n class=\"three-dots p-1 zaid-test\"\n (click)=\"\n openThreeDotsMenu($event, child);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === child\"\n style=\"top: -50%; z-index: 21\"\n [style.left.px]=\"\n -(!child?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 0\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: child,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n (dblclick)=\"autosizeColumn(child)\"\n (mousedown)=\"\n $event.stopPropagation();\n onResizeColumn($event, child)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"child.field\"\n [style.width.px]=\"child.width\"\n [style.min-width.px]=\"child.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"child.filterValue\"\n (ngModelChange)=\"onFilterChange(child)\"\n (paste)=\"onFilterChange(child); applyDropdownFilter()\"\n [readonly]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n [class.disabled-search-input]=\"\n child?.type == 'dropdown' || child?.type == 'image'\n \"\n (click)=\"\n $event.stopPropagation();\n openFilterFromDisabledSearchedInput(child)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(child)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(child)\"\n [class.pe-none]=\"child?.type == 'image'\"\n ><span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(child)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell?.field == child?.field\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"\n child?.pinned ? 0 : -centerPinnedHeader.scrollLeft\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: child }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template cdkDragPreview\n ><div class=\"p-2 border d-flex gap-2\">\n <div\n *ngIf=\"\n !draggingInGroupArea ||\n (child.is_groupable && draggingInGroupArea)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div *ngIf=\"draggingInGroupArea && !child.is_groupable\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/ban.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ child.header }}</div>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <div *ngIf=\"!draggingInGroupArea\" class=\"position-relative\">\n <div\n *ngTemplateOutlet=\"\n childHeaderPlaceholder;\n context: {\n $implicit: child,\n index: i,\n sections: sections,\n calledFromNestedPlaceholder: true,\n }\n \"\n ></div>\n </div>\n <div\n *ngIf=\"draggingInGroupArea && child?.is_groupable\"\n class=\"d-flex gap-2 ms-2\"\n style=\"opacity: 0.6\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n topGroupingRowPlaceholder;\n context: {\n $implicit: child,\n showChevron: false,\n pinnedRight: pinnedRight,\n sections: sections,\n index: i\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Flat Header || Single Header Cell-->\n <ng-template #flatHeader>\n <div\n class=\"group-column-wrapper\"\n *ngIf=\"col.is_visible && !col['isRowGrouped']\"\n >\n <!-- Full-height Header Cell (spans 2 rows visually) -->\n <div\n class=\"header-cell one-row-header-cells\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [class.add-column-spacing]=\"showVerticalBorder\"\n [class.border-right]=\"showVerticalBorder\"\n [style.min-height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\"\n [style.height.px]=\"\n showColumnsGrouping ? headerRowHeight * 2 : headerRowHeight\n \"\n [style.fontWeight]=\"headerFontWeight\"\n style=\"grid-row: 1 / span 2\"\n >\n <div\n class=\"d-flex justify-content-between h-100 align-items-center w-100\"\n >\n <div\n class=\"d-flex justify-content-between w-100 align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center w-100 header_figma_spacing\"\n [title]=\"col.header\"\n >\n <div\n class=\"text-ellipsis h-100 cursor-pointer\"\n [class.editable-header]=\"col?.is_editable\"\n [class.filter-applied-on-text]=\"isFilterAppliedOnColumn(col)\"\n (click)=\"\n openThreeDotsMenu($event, col);\n openFilteronThreeDotsClick(col)\n \"\n >\n {{ col.header }}\n </div>\n </div>\n\n <div\n class=\"position-relative d-flex align-items-center\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n [class.me-2]=\"pinnedRight\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\"\n class=\"d-flex align-items-center three-dots\"\n *ngIf=\"col?.pinned\">\n <span (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin-blue.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown d-flex justify-content-center align-items-center pin_blue_icon\"\n ></span>\n </div>\n <!-- <div\n [class.me-2]=\"col.order_by\"\n class=\"d-flex align-items-center\"\n *ngIf=\"sortingConfig?.field == col.field\">\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortDesc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\"\n ></span>\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/selectedAscIcon.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center mt-1 cursor-pointer\"\n (click)=\"sortAsc(col)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\"\n ></span>\n </div> -->\n <div class=\"three-dots p-1 me-0\" [class.threeDotActive]=\"activeCol === col && clickedOnSortIcon\"\n (click)=\"openThreeDotsMenu($event, col, true);\"\n style=\"cursor: pointer\">\n <div *ngIf=\"sortingConfig?.field === col.field\" \n class=\"d-flex align-items-center\">\n \n <!-- Ascending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'asc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon ascendingAppliedIcon flex justify-content-center align-items-center cursor-pointer\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'asc'\">\n </span>\n\n <!-- Descending Sort Icon -->\n <span\n *ngIf=\"sortingConfig?.order_by == 'desc'\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sort-ascending-green.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center cursor-pointer rotated-180\"\n (click)=\"openThreeDotsMenu($event, col, true)\"\n [class.active]=\"sortingConfig?.order_by === 'desc'\">\n </span>\n </div>\n <span *ngIf=\"sortingConfig?.field !== col.field\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/sortIconGray.svg'\"\n class=\"data-grid-svg-icon figmaIconSize d-flex justify-content-center align-items-center\"\n (click)=\"openThreeDotsMenu($event, col, true)\">\n </span>\n </div>\n <div class=\"three-dots p-1 zaid-test1\" [class.threeDotActive]=\"activeCol === col && !clickedOnSortIcon\" *ngIf=\"!col?.pinned\"\n (click)=\"\n openThreeDotsMenu($event, col, false);\n isThreeDotsFilterOpen = false\n \"\n style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon setting_dropdown dropdown d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"z-index: 21\"\n [style.left.px]=\"\n -(!col?.pinned ? centerPinnedHeader.scrollLeft : 0)\n \"\n [style.top.px]=\"\n isThreeDotsFilterOpen\n ? showFilterRow || showColumnsGrouping\n ? headerRowHeight * 2 - 10\n : headerRowHeight - 10\n : 25\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: false,\n section: sections\n }\n \"\n ></ng-container>\n </div>\n\n <div\n class=\"resize-handle\"\n [class.w-100]=\"col.pinned == 'right'\"\n (dblclick)=\"autosizeColumn(col)\"\n (mousedown)=\"\n $event.stopPropagation(); onResizeColumn($event, col)\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filter Cell -->\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n (ngModelChange)=\"onFilterChange(col)\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n (paste)=\"onPasteInFilterRowSearch($event, col)\"\n (click)=\"\n $event.stopPropagation(); openFilterFromDisabledSearchedInput(col)\n \"\n (keydown.enter)=\"applyDropdownFilter()\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"$event.stopPropagation(); openFilter(col)\"\n [class.filter-applied]=\"isFilterAppliedOnColumn(col)\"\n [class.pe-none]=\"col?.type == 'image'\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span\n *ngIf=\"isFilterAppliedOnColumn(col)\"\n style=\"\n width: 7px;\n height: 7px;\n box-shadow: 0px 0px 3px #7486ff;\n background-color: rgb(0 163 233);\n position: absolute;\n right: 4px;\n top: 12px;\n \"\n class=\"rounded-circle d-block\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute filter-row-filter-wrapper\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 99\"\n [style.left.px]=\"col?.pinned ? 0 : -centerPinnedHeader.scrollLeft\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n</ng-template>\n\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- Body Cell Template -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n<!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->\n\n<ng-template\n #rowCell\n let-row\n let-columns=\"columns\"\n let-isEven=\"isEven\"\n let-isOdd=\"isOdd\"\n let-isLeftSection=\"isLeft\"\n let-section=\"section\"\n let-rowIndex=\"rowIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <!-- Check if row is a group -->\n <ng-container\n *ngTemplateOutlet=\"groupRowTemplate; context: { $implicit: row, depth: 0 }\"\n ></ng-container>\n <ng-template #groupRowTemplate let-row let-depth=\"depth\">\n <ng-container *ngIf=\"row.isGroup; else regularRow\">\n <!-- Group Header -->\n <div\n class=\"group-header-row d-flex align-items-center\"\n [style.height.px]=\"rowHeight\"\n [class.border-below]=\"section !== 'center'\"\n [style.width]=\"\n section === 'center'\n ? (centerScrollableBody?.scrollWidth ?? 0) + 'px'\n : '100%'\n \"\n >\n <div\n *ngIf=\"section == 'left'\"\n class=\"h-100 d-flex\"\n [style.width.px]=\"leftPinnedHeader.offsetWidth - 1\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n >\n <div\n *ngIf=\"showSerialNumber\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center h-100 border-right justify-content-end pe-2 s-no\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [style.width.px]=\"55\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) || \"\" }}\n </div>\n <div\n *ngIf=\"showCheckboxes\"\n style=\"width: 50px\"\n class=\"d-flex align-items-center justify-content-center h-100 border-right\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.color]=\"checkboxesColor\"\n >\n <input\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"getGroupCheckedState(row) === true\"\n [indeterminate]=\"getGroupCheckedState(row) === undefined\"\n (change)=\"selectGroupRow($event, row)\"\n />\n\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'center'\"\n [style.width.px]=\"centerPinnedHeader.scrollWidth\"\n [style.minWidth.px]=\"centerPinnedHeader.scrollWidth\"\n class=\"d-flex align-items-center ps-2 h-100 border-below\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <div\n class=\"d-flex align-items-center justify-content-between\"\n [style.paddingLeft.px]=\"depth > 0 ? depth * 30 : 0\"\n >\n <span class=\"me-2 filter-icon-wrapper\" (click)=\"toggleExpand(row)\">\n <span\n class=\"data-grid-svg-icon align-items-center d-flex\"\n [inlineSVG]=\"\n row.isExpand\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <strong (click)=\"toggleExpand(row)\" class=\"cursor-pointer\">\n {{ row.groupValue }} ({{ countLeafRows(row) }})\n </strong>\n </div>\n </div>\n\n <div\n *ngIf=\"section == 'right'\"\n [style.width.px]=\"rightPinnedHeader.offsetWidth\"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n ></div>\n </div>\n\n <!-- Recursive Children -->\n <div class=\"group-children\" *ngIf=\"row.isExpand\" [@slideToggle]>\n <ng-container\n *ngFor=\"let child of row.children; let i = index; trackBy: trackById\"\n >\n <ng-container *ngIf=\"child.isGroup; else dataRow\">\n <!-- Recursive call for nested group -->\n <ng-container\n *ngTemplateOutlet=\"\n groupRowTemplate;\n context: { $implicit: child, depth: depth + 1 }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #dataRow>\n <!-- Regular data row -->\n <ng-container\n *ngTemplateOutlet=\"\n rowCell;\n context: {\n $implicit: child,\n columns: columns,\n isEven: i % 2 === 0,\n isOdd: i % 2 !== 0,\n isLeft: isLeftSection,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n\n <!-- Regular row (not a group) -->\n <ng-template #regularRow>\n <div\n class=\"d-flex\"\n [style.height.px]=\"rowHeight\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <span\n class=\"d-flex align-items-center justify-content-center cursor-pointer border-below\"\n style=\"min-width: 30px; height: 100%\"\n *ngIf=\"section == 'center' && (gridType === 'Assets' || gridType === 'Tasks')\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n [class.selected-cell]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n >\n <span\n (click)=\"toggleDetailRowExpand(row)\"\n *ngIf=\"row?.detail?.result?.length || gridType === 'Tasks'\"\n class=\"data-grid-svg-icon filter-icon-wrapper\"\n [inlineSVG]=\"\n isDetailsExpanded(row)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n ></span>\n </span>\n <div\n [style.min-width.px]=\"\n section == 'center' && groupedColumns?.length ? groupBoxPadding : 0\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row h-100\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n ></div>\n <div\n (contextmenu)=\"onRightClick($event, row)\"\n [style.height.px]=\"rowHeight\"\n class=\"data-grid-row\"\n [class.even-row]=\"isEven\"\n [class.odd-row]=\"isOdd\"\n [class.hovered-row]=\"hoveredRowId === (row._id || row.id)\"\n (mouseenter)=\"onRowHover(row)\"\n (mouseleave)=\"onRowLeave()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(row, isEven, section)\n }\"\n >\n <div\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below justify-content-end pe-2 s-no\"\n [style.width.px]=\"55\"\n *ngIf=\"isLeftSection && showSerialNumber\"\n [style.cursor]=\"\n 'url(' +\n singleSpaAssetsPath +\n 'data-grid/icons/arrow-right.svg), auto'\n \"\n (mousedown)=\"onRowMouseDown(row.__virtualIndex, $event)\"\n (mouseover)=\"onRowMouseOver(row.__virtualIndex, $event)\"\n [style.color]=\"checkboxesColor\"\n >\n {{ getStartIndex() + (row.__virtualIndex - 1) }}\n </div>\n <div\n [style.backgroundColor]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n ? selectedRowsBackgroundColor\n : checkboxesBackgroundColor\n \"\n [ngStyle]=\"{\n 'background-color': rowSelectedIndexes.has(row.__virtualIndex)\n ? null\n : getBackgroundColor(row, isEven, section)\n }\"\n class=\"select-all-checkbox-cell border-below left_checkbox_ailgnment\"\n *ngIf=\"isLeftSection && showCheckboxes\"\n [class.left-selection-border]=\"\n rowSelectedIndexes.has(row.__virtualIndex)\n \"\n [class.first-row-selected]=\"firstSelectedRow === row.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row.__virtualIndex\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n >\n <input class=\"serialNoCheckbox\"\n *ngIf=\"hasAnyVisibleColumn\"\n style=\"width: 16px; height: 16px\"\n type=\"checkbox\"\n [checked]=\"isRowSelected(row)\"\n (change)=\"toggleRowSelection(row)\"\n />\n </div>\n\n <!-- Render all columns -->\n <ng-container\n *ngFor=\"\n let col of columns;\n trackBy: trackByField;\n let colIndex = index\n \"\n >\n <ng-container *ngIf=\"col.children?.length > 0; else flatColumn\">\n <ng-container\n *ngFor=\"\n let child of col.children;\n trackBy: trackByField;\n let subColIndex = index\n \"\n >\n <ng-container *ngIf=\"child?.is_visible && !child?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: child,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: subColIndex,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #flatColumn>\n <ng-container *ngIf=\"col?.is_visible && !col?.isRowGrouped\">\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate;\n context: {\n col: col,\n row: row,\n rowIndex: rowIndex,\n colIndex: colIndex,\n subColIndex: null,\n section: section,\n isTotalRow: isTotalRow\n }\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n </div>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'left' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'center' && isDetailsExpanded(row)\"\n class=\"accordion-details center-section\"\n style=\"\n max-height: 350px;\n overflow-y: hidden;\n overflow-x: auto;\n scrollbar-width: thin;\n \"\n #nestedTable\n [style.width]=\"\n hasRightPinnedColumns\n ? '100%'\n : hasVerticalScroll\n ? 'calc(100% - 12px)'\n : '100%'\n \"\n >\n <ng-container *ngIf=\"gridType == 'Assets'\">\n <ng-container\n *ngTemplateOutlet=\"nestedTableTemplate; context: { $implicit: row }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"gridType == 'Tasks'\">\n <ng-container\n *ngTemplateOutlet=\"\n taskManagementTemplate;\n context: { taskDetails: row }\n \"\n ></ng-container>\n </ng-container>\n </div>\n\n <div\n [@slideToggle]\n *ngIf=\"section === 'right' && isDetailsExpanded(row)\"\n class=\"accordion-details\"\n style=\"max-height: 350px; overflow: hidden\"\n [style.maxHeight.px]=\"hasHorizontalScroll ? 339 : 341\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n leftRightNestedPlaceholder;\n context: { $implicit: row }\n \"\n >\n </ng-container>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- Actual Cell is Here -->\n<ng-template\n #cellTemplate\n let-col=\"col\"\n let-row=\"row\"\n let-section=\"section\"\n let-subColIndex=\"subColIndex\"\n let-rowIndex=\"rowIndex\"\n let-colIndex=\"colIndex\"\n let-isTotalRow=\"isTotalRow\"\n>\n <div\n #cellContainer\n (click)=\"\n editingKey = ''; setActiveCell(row, col); collapseAllExpandedCells()\n \"\n [style.fontWeight]=\"bodyFontWeight\"\n [class.border-right]=\"showVerticalBorder\"\n class=\"cell overflow-visible position-relative data-grid-cell\"\n [class.add-column-spacing]=\"showVerticalBorder\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.fontSize.px]=\"bodyTextFontsSize\"\n [style.color]=\"bodyTextColor\"\n [style.minHeight.px]=\"rowHeight\"\n [style.maxHeight.px]=\"rowHeight\"\n [class.active-cell]=\"\n isActiveCell(row, col) && !isEditing(row, col) && selectedKeys.size == 1\n \"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, false, cellContainer)\n \"\n [class.row-selected]=\"rowSelectedIndexes.has(row.__virtualIndex)\"\n [class.first-row-selected]=\"firstSelectedRow === row?.__virtualIndex\"\n [class.last-row-selected]=\"lastSelectedRow === row?.__virtualIndex\"\n tabindex=\"-1\"\n (keydown.enter)=\"$event.preventDefault(); enableEdit(row, col)\"\n (mousedown)=\"\n startSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseenter)=\"\n extendSelection(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n $event,\n section\n )\n \"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"\n isSelected(\n row.__virtualIndex,\n colIndex,\n subColIndex ?? 0,\n col.field,\n section\n )\n \"\n [class.top-border]=\"\n isTopBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-border]=\"\n isBottomBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.left-border]=\"\n isLeftBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.right-border]=\"\n isRightBorder(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-left-corner]=\"\n isTopLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.top-right-corner]=\"\n isTopRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-left-corner]=\"\n isBottomLeftCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n [class.bottom-right-corner]=\"\n isBottomRightCorner(row.__virtualIndex, colIndex, subColIndex, section)\n \"\n >\n <!-- (mousedown)=\"startSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseenter)=\"extendSelection(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field, $event)\"\n (mouseup)=\"endSelection()\"\n [class.selected-cell]=\"isSelected(row.__virtualIndex, colIndex, subColIndex ?? 0, col.field)\" -->\n <div\n class=\"table-cell\"\n [class.active-for-editing]=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n getNestedValue(row, col.field)?.length <= 50)\n \"\n >\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"\n isEditing(row, col) &&\n (getNestedValue(row, col.field)?.length === undefined ||\n (getNestedValue(row, col.field)?.length <= 50 &&\n !expandedCells.size));\n else viewMode\n \"\n >\n <ng-container [ngSwitch]=\"col.type\">\n <!-- Text Input -->\n <input\n [style.height.px]=\"rowHeight - 10\"\n *ngSwitchCase=\"'input'\"\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Number Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'number'\"\n #numberInput=\"ngModel\"\n #numberRef\n (keypress)=\"allowOnlyNumbers($event)\"\n type=\"number\"\n required\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n (keydown.enter)=\"numberRef.blur()\"\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': numberInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Date Input -->\n <input\n [style.height.px]=\"rowHeight - 8\"\n *ngSwitchCase=\"'date'\"\n type=\"date\"\n [(ngModel)]=\"row[col.field]\"\n (blur)=\"disableEdit(row, col)\"\n autofocus\n class=\"form-control form-control-sm\"\n #dateInput=\"ngModel\"\n [ngClass]=\"{\n 'is-invalid': dateInput.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n\n <!-- Dropdown -->\n <!-- ng-select like dropdown -->\n <div\n *ngSwitchCase=\"'dropdown'\"\n class=\"dropdown w-100\"\n (blur)=\"disableEdit(row, col)\"\n >\n <!-- Trigger -->\n <button\n class=\"form-select form-select-sm text-start w-100 text-ellipsis\"\n type=\"button\"\n data-bs-toggle=\"dropdown\"\n aria-expanded=\"false\"\n [style.minHeight.px]=\"rowHeight - 10\"\n data-bs-display=\"static\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <ng-container>\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </ng-container>\n <ng-template #placeholder> Select options... </ng-template>\n </button>\n\n <!-- Menu -->\n <div\n class=\"dropdown-menu w-100 p-0 cell-editing-dropdown-menu rounded-3\"\n [class.show]=\"isEditing(row, col)\"\n >\n <!-- Search -->\n <div class=\"px-2 py-1 editing-dropdown-search-input\">\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"editinDropdownSearch\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </div>\n\n <!-- Options -->\n <!-- <div\n class=\"cell-editin-dropdown\"\n style=\"max-height: 200px; overflow: auto\"\n >\n <div\n (click)=\"\n setNestedValue(row, col, option, true); editingKey = null\n \"\n class=\"px-2 py-1 d-flex align-items-center deopdown-item\"\n *ngFor=\"\n let option of col.column_dropdown_value\n | filter : editinDropdownSearch: 'value'\n \"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + option.value || option\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport \n itemSize=\"35\" \n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"px-2 py-1 d-flex align-items-center dropdown-item\"\n *cdkVirtualFor=\"\n let option of col.column_dropdown_value \n | filter : editinDropdownSearch : 'value'\n \"\n (click)=\"setNestedValue(row, col, option, true); editingKey = null\"\n >\n <label\n class=\"form-check-label d-flex align-items-center mb-0 cursor-pointer\"\n [for]=\"col.field + '-' + (option.value || option)\"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n </div>\n </div>\n\n <input\n *ngSwitchCase=\"'email'\"\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #emailModel=\"ngModel\"\n #emailInput\n type=\"email\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$\"\n (blur)=\"disableEdit(row, col, emailModel)\"\n (keydown.enter)=\"\n emailModel.control.markAsTouched(); emailInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': emailModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n <!-- Default fallback -->\n <input\n *ngSwitchDefault\n [style.height.px]=\"rowHeight - 10\"\n [style.maxHeight.px]=\"rowHeight - 10\"\n #textModel=\"ngModel\"\n #textInput\n type=\"text\"\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"\n textModel.control.markAsTouched(); textInput.blur()\n \"\n autofocus\n class=\"form-control form-control-sm\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n />\n </ng-container>\n </div>\n\n <!-- Display mode -->\n <ng-template #viewMode>\n <div\n class=\"d-flex justify-content-between align-items-center overflow-hidden\"\n [ngClass]=\"getCellClasses(col, getNestedValue(row, col.field))\"\n >\n <!-- Field icon (for Tasks grid) -->\n <ng-container\n *ngIf=\"gridType === 'Tasks' && iconMap[col.field] && !isTotalRow\"\n >\n <span\n class=\"cursor-pointer me-2\"\n (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n [inlineSVG]=\"iconMap[col.field](row, col)\"\n ></span>\n </ng-container>\n\n <!-- \u2705 Custom cell renderer support -->\n <ng-container *ngIf=\"col.cellRenderer; else defaultCell\">\n <ng-container\n [cellRenderInit]=\"col.cellRenderer\"\n [rowData]=\"row\"\n [colData]=\"col\"\n [cellValue]=\"getNestedValue(row, col?.field)\"\n (cellEvent)=\"onCellEvent($event)\"\n >\n </ng-container>\n </ng-container>\n\n <!-- \uD83E\uDDFE Default text-based cell rendering -->\n <ng-template #defaultCell>\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"getCellTitle(row, col)\"\n >\n <!-- Normal cell -->\n <ng-container\n *ngIf=\"\n col.type !== 'image' &&\n col.field != 'image' &&\n col.field != 'invoice.invoice_image' &&\n !isTotalRow\n \"\n >\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{getCellTitle(row, col)}}\n </ng-container>\n\n <!-- Total row -->\n <ng-container *ngIf=\"isTotalRow\">\n {{ getTotalAmount(col) }}\n </ng-container>\n\n <!-- Invoice Image -->\n <ng-container *ngIf=\"col.field == 'invoice.invoice_image'\">\n <div style=\"display: flex; align-items: center; zoom: 0.7\">\n <span\n title=\"{{ getNestedValue(row, col.field) || 'Attachment' }}\"\n (click)=\"downloadAttchment(getNestedValue(row, col.field))\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(getNestedValue(row, col.field)) +\n '.svg'\n \"\n ></span>\n </div>\n </ng-container>\n\n <!-- Image cell -->\n <ng-container *ngIf=\"col.type == 'image' && !isTotalRow\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: { row: row, col: col }\n \"\n ></ng-container>\n </ng-container>\n </div>\n <span\n *ngIf=\"\n (!col?.cellRenderer && showCellDetailsBox &&\n getNestedValue(row, col.field)?.length > 50 && col.type !== 'image') ||\n (isNestedValueArray(row, col.field) &&\n getNestedValue(row, col.field)?.length > 1)\n \"\n class=\"toggle-icon data-grid-svg-icon ms-2 cursor-pointer\"\n [inlineSVG]=\"\n isExpanded(row, col)\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"\n $event.stopPropagation();\n toggleExpandOfLongCellText(row, col, columns, true)\n \"\n (dblclick)=\"$event.preventDefault(); $event.stopPropagation()\"\n ></span>\n </ng-template>\n <!-- Expand / Collapse icon -->\n </div>\n\n <!-- Expanded text -->\n <div\n class=\"position-absolute w-100 expanded-box\"\n *ngIf=\"isExpanded(row, col)\"\n [style.zIndex]=\"getZIndex(row, col)\"\n style=\"top: 100%; left: 0\"\n [attr.id]=\"(row.id || row._id) + '-' + (col.id || col._id)\"\n [class.invisible]=\"!showDetailsBox\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n fullTextTemplate;\n context: {\n row: row,\n col: col,\n isArray: isNestedValueArray(row, col.field)\n }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n</ng-template>\n\n<!-- Headers Action List On clicking three dots -->\n\n<ng-template\n #columnMenu\n let-col=\"col\"\n let-isNestedTable=\"isNestedTable\"\n let-columns=\"columns\"\n let-section=\"section\"\n>\n <div\n class=\"column-menu three-dots-col-menu\"\n [class.visually-hidden]=\"isMenueHidden\"\n *ngIf=\"activeCol && !isThreeDotsFilterOpen\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n [style.color]=\"headerTextColor\"\n >\n <!-- Sort Ascending -->\n <ng-container *ngIf=\"clickedOnSortIcon\">\n <div class=\"sorting_dropdown\" [class.disable-sorting]=\"!col.is_sortable\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Sort</span> -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showAscending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'desc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\"\n (click)=\"sortAsc(activeCol);\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Ascending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'asc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <!-- Sort Descending -->\n \n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showDescending &&\n (sortingConfig?.field != col.field ||\n sortingConfig?.order_by == 'asc')\n \" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\"\n (click)=\"sortDesc(activeCol);\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/headerSortingIcon1.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Sort Descending\n <span *ngIf=\"sortingConfig?.field === col.field && sortingConfig?.order_by === 'desc'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"\n sortingConfig?.field === col.field &&\n (sortingConfig?.order_by === 'asc' ||\n sortingConfig?.order_by === 'desc')\n \"\n class=\"column-menu-item\"\n (click)=\"resetSort(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resetSortIconNew.svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n Reset Sort\n </div>\n </div>\n </ng-container>\n <!-- <div class=\"py-2 border-below three-dots-filter\">\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showFilter\"\n class=\"column-menu-item three-dots-filter\"\n (click)=\"openFilteronThreeDotsClick(col)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Filter\n </div>\n </div> -->\n\n <ng-container *ngIf=\"!clickedOnSortIcon\">\n <div class=\"sorting_dropdown\">\n <!-- <span class=\"muted-text fs-7\" style=\"margin-left: 12px\">Pin</span> -->\n \n <!-- *ngIf=\"columnThreedotsMunuConfig?.showPinleft && col?.pinned !== 'left'\" -->\n <div\n class=\"column-menu-item\" [class.active-sort]=\"col?.pinned == 'left'\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'left',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinLeftIconNew.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Left\n <span *ngIf=\"col?.pinned == 'left'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n <!-- *ngIf=\"\n columnThreedotsMunuConfig?.showPinright && col?.pinned !== 'right'\n \" -->\n <div [class.active-sort]=\"col?.pinned == 'right'\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n 'right',\n isNestedTable,\n columns\n )\n \"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/pinRightIconNew.svg'\"\n class=\"data-grid-svg-icon data-grid-svg-icon me-2 setting_dropdown\"\n ></span\n >Pin Right\n <span *ngIf=\"col?.pinned == 'right'\" [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/tickBlueIconNew.svg'\"\n class=\"data-grid-svg-icon setting_dropdown no-stroke\" style=\"margin-left: auto;\"\n ></span>\n </div>\n\n <div\n *ngIf=\"col?.pinned\"\n class=\"column-menu-item\"\n (click)=\"\n $event.stopPropagation();\n updateColumnPinInSourceByField(\n activeCol,\n null,\n isNestedTable,\n columns\n )\n \"\n >\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/layout-three-columns.svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown d-flex align-items-center justify-content-center\"\n ></span\n >Unpin\n </div>\n </div>\n </ng-container>\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeThisColumn\"\n class=\"column-menu-item\"\n (click)=\"autosizeColumn(activeCol)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-expand-vertical.svg'\n \"\n class=\"me-2\"\n ></span>\n Autosize This Column\n </div> -->\n\n <!-- Autosize All Columns -->\n <!-- <div\n *ngIf=\"columnThreedotsMunuConfig?.showAutosizeAllColumns\"\n class=\"column-menu-item\"\n (click)=\"autosizeAllColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-angle-expand.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Autosize All Columns\n </div> -->\n\n <!-- Group By -->\n <div\n *ngIf=\"showRowsGrouping\"\n class=\"column-menu-item\"\n (click)=\"groupBy(activeCol)\"\n [class.disable-sorting]=\"!col.is_groupable\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/diagram-3.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Group by {{ col.header }}\n </div>\n\n <!-- Choose Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showChoseColumns\"\n class=\"column-menu-item\"\n (click)=\"chooseColumns()\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/ui-checks-grid.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n Choose Columns\n </div>\n\n <!-- Reset Columns -->\n <div\n *ngIf=\"columnThreedotsMunuConfig?.showResetColumns\"\n class=\"column-menu-item\"\n (click)=\"resetColumns()\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrow-counterclockwise.svg'\n \"\n class=\"data-grid-svg-icon me-2\"\n ></span\n >Reset Columns\n </div>\n </div>\n <div\n @slideToggle\n *ngIf=\"isThreeDotsFilterOpen\"\n class=\"three-dots-col-menu position-relative\"\n [style.right.px]=\"section == 'right' ? null : col.width - 45\"\n [class.visually-hidden]=\"isMenueHidden\"\n >\n <ng-container\n *ngTemplateOutlet=\"filterMenu; context: { col: col }\"\n ></ng-container>\n </div>\n</ng-template>\n\n<!-- Filter Menue -->\n<ng-template #filterMenu let-col=\"col\">\n <div\n class=\"filter-menu-container filter-menu dropdown_outer\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n >\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"filter-dropdown-section p-1\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n\n <div class=\"form-check mb-1 mt-2 ps-4 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"isAllSideFilterOptionsSelected(col)\"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- <div class=\"dropdown-options ps-1\">\n <div\n class=\"form-check mb-1\"\n *ngFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById;\n let i = index\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"filter-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of selectedColumnForFilter?.column_dropdown_value\n | filter : addFilterColumnInput : 'value';\n trackBy: trackById\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option?.id ?? option?._id ?? option\"\n [checked]=\"\n currentFilterSelectedIds.has(option?.id ?? option?._id ?? option)\n \"\n (change)=\"toggleSelectionInFilter(option)\"\n />\n\n <label\n class=\"form-check-label fw-semibold\"\n [for]=\"option?.id ?? option?._id ?? option\"\n >\n {{ option?.value ?? option?.name ?? option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"firstValue\"\n #filterMenueTextchInput\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n\n <div class=\"form-group mb-3 d-flex flex-row\">\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1 gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n (change)=\"cdr.detectChanges()\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <div @slideToggle *ngIf=\"firstValue && condition != 'none'\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm custom-select\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'string' ? 'text' : col.type\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"secondValue\"\n />\n </div>\n </div>\n </ng-template>\n\n <!-- Actions -->\n <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"primary_btn_new common_btn flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"applyDropdownFilter()\"\n >\n Apply\n </div>\n <div\n class=\"cancel_btn_new common_btn d-flex justify-content-center align-items-center w-100\"\n style=\"height: 30px\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Side Menue -->\n\n<!-- Column Pannel / Pivot Mode / Searching -->\n\n<ng-template #columnPannel>\n <div class=\"column-panel-header\">\n <!-- Pivot Toggle -->\n <div\n class=\"form-check form-switch d-flex align-items-center mb-2 pivot-mode px-5 ms-2 d-none\"\n >\n <input\n class=\"form-check-input me-2\"\n type=\"checkbox\"\n id=\"pivotToggle\"\n [(ngModel)]=\"pivotMode\"\n />\n <label class=\"form-check-label\" for=\"pivotToggle\">Pivot Mode</label>\n </div>\n\n <!-- Select All & Search -->\n <div class=\"d-flex align-items-center mb-2 px-3 mt-3\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n\n <!-- Separator -->\n <hr class=\"my-2\" />\n </div>\n</ng-template>\n\n<!-- Right Columns Menue -->\n\n<!-- Column Panel Item Template -->\n<ng-template #columnPanelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div class=\"column-group d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expanded\"\n (click)=\"col.expanded = !col.expanded\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [id]=\"'group_' + col.header\"\n [checked]=\"isColumnVisible(col)\"\n (change)=\"toggleGroupVisibility(col)\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'group_' + col.header\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n <div *ngIf=\"col.expanded\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"me-2\" style=\"width: 1.5rem\"></span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [(ngModel)]=\"col.is_visible\"\n [id]=\"'col_' + col.field\"\n (change)=\"onSideMenuColumnsVisibilityChange()\"\n />\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center me-2\"\n ></span>\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n [for]=\"'col_' + col.field\"\n style=\"cursor: pointer\"\n >\n <span class=\"text-truncate\">{{ col.header }}</span>\n </label>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Columns Side Filter -->\n<ng-template #sideFilters>\n <div class=\"py-3 px-2 pe-3 h-100\">\n <div class=\"d-flex align-items-center mb-2\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n filterAccordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : filterAccordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllFilterAccordions()\"\n ></span>\n </span>\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"columnSearch\"\n />\n </div>\n <div\n class=\"overflow-auto side-filter-columns-wrapper\"\n style=\"height: calc(100% - 70px); scrollbar-width: thin\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : columnSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterPannelItem let-col=\"col\">\n <!-- Group Column -->\n <ng-container *ngIf=\"col.children?.length\">\n <div\n class=\"column-group d-flex align-items-center mb-2\"\n *ngIf=\"col.type !== 'image'\"\n >\n <!-- Chevron toggle -->\n <span class=\"filter-icon-wrapper me-2\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n ></span>\n </span>\n\n <!-- Group label toggle -->\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"fw-bold text-truncate\"\n >{{ col.header }}\n <span\n class=\"text-primary ms-1\"\n *ngIf=\"col?.query?._ids?.length || col?.query?._first_value\"\n >*</span\n >\n </span>\n </label>\n </div>\n\n <!-- Children columns -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4\">\n <ng-container *ngFor=\"let child of col.children; trackBy: trackByField\">\n <ng-container\n *ngTemplateOutlet=\"filterPannelItem; context: { col: child }\"\n ></ng-container>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Leaf Column -->\n <ng-container *ngIf=\"!col.children?.length\">\n <div class=\"d-flex align-items-center mb-2\" *ngIf=\"col.type !== 'image'\">\n <span\n class=\"me-2 filter-icon-wrapper me-2\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n [class.rotate]=\"col.expandedFilter\"\n ></span>\n </span>\n\n <label\n class=\"d-flex align-items-center mb-0 w-100\"\n style=\"cursor: pointer\"\n (click)=\"col.expandedFilter = !col.expandedFilter\"\n >\n <span class=\"text-truncate fw-bold\">{{ col.header }}</span>\n </label>\n </div>\n\n <!-- Show filter when expanded -->\n <div *ngIf=\"col.expandedFilter\" class=\"ps-4 pe-3\">\n <ng-container\n *ngTemplateOutlet=\"sideNestedFilter; context: { col: col }\"\n ></ng-container>\n </div>\n </ng-container>\n</ng-template>\n\n<!-- Side Nested Filters -->\n<ng-template #sideNestedFilter let-col=\"col\">\n <div class=\"\">\n <!-- Dropdown Type -->\n <ng-container *ngIf=\"col.type === 'dropdown'; else textFilter\">\n <div class=\"p-1\">\n <!-- Search -->\n <input\n type=\"text\"\n class=\"form-control form-control-sm mb-2\"\n placeholder=\"Search...\"\n [(ngModel)]=\"sideNestedFilterSearch\"\n />\n\n <!-- Select All -->\n <div class=\"form-check mb-1 ms-1\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [checked]=\"\n col.query?._ids?.length == col?.column_dropdown_value?.length\n \"\n (change)=\"toggleSelectAllSideFilters(col, $event)\"\n id=\"selectAll_{{ col.field }}\"\n />\n <label class=\"form-check-label\" for=\"selectAll_{{ col.field }}\">\n Select All\n </label>\n </div>\n\n <!-- Options -->\n <!-- <div class=\"dropdown-options\">\n <div\n class=\"form-check mb-1 ms-1\"\n *ngFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </div> -->\n <cdk-virtual-scroll-viewport\n itemSize=\"32\"\n class=\"dropdown-viewport\"\n style=\"height: 120px\"\n >\n <div\n class=\"form-check mb-1 ms-1\"\n *cdkVirtualFor=\"\n let option of col?.column_dropdown_value\n | filter : sideNestedFilterSearch : 'value'\n \"\n >\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [value]=\"option\"\n [checked]=\"\n col.query?._ids?.includes(option?._id || option?.id || option)\n \"\n (change)=\"onOptionToggle(col, option)\"\n id=\"option_{{ col.field }}_{{\n option?.id || option?._id || option\n }}\"\n />\n\n <label\n class=\"form-check-label\"\n [for]=\"\n 'option_' +\n col.field +\n '_' +\n (option?.id || option?._id || option)\n \"\n >\n {{ option.value || option }}\n </label>\n </div>\n </cdk-virtual-scroll-viewport>\n\n\n <!-- Actions -->\n <!-- <div class=\"d-flex gap-2 mt-2\">\n <div\n class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\"\n style=\"height: 22px;\"\n (click)=\"applySideFilter(col)\"\n >\n Apply\n </div>\n <div\n class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" \n style=\"height: 22px;\"\n (click)=\"resetSideFilter(col)\"\n >\n Reset\n </div>\n </div> -->\n </div>\n </ng-container>\n\n <!-- Text Filter Section -->\n <ng-template #textFilter>\n <div class=\"filter-text-section\">\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col.query.first_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Value\"\n [(ngModel)]=\"col!.query!.first_value\"\n />\n\n <div\n class=\"form-group mb-3 d-flex flex-row muted\"\n style=\"font-size: 14px\"\n >\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"and\"\n id=\"and_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"and_{{ col.field }}\"\n >AND</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"or\"\n id=\"or_{{ col.field }}\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"or_{{ col.field }}\"\n >OR</label\n >\n </div>\n <div\n class=\"form-check form-check-inline m-0 col-4 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input filter-radio-inputs\"\n type=\"radio\"\n name=\"condition\"\n [(ngModel)]=\"col!.query.condition\"\n value=\"none\"\n id=\"none_{{ col.field }}\"\n />\n <label\n class=\"nnonem-check-label mb-0 mt-1\"\n for=\"none_{{ col.field }}\"\n >None</label\n >\n </div>\n </div>\n <ng-container\n *ngIf=\"col?.query?.first_value && col?.query?.condition !== 'none'\"\n >\n <div class=\"form-group mb-2\">\n <select\n class=\"form-select form-select-sm\"\n [(ngModel)]=\"col!.query.second_condition\"\n >\n <ng-container *ngIf=\"col.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"col.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <input\n [type]=\"col.type == 'date' ? 'date' : 'text'\"\n class=\"form-control form-control-sm mb-3\"\n placeholder=\"Second Value\"\n [(ngModel)]=\"col!.query.second_value\"\n />\n </ng-container>\n <!-- <div class=\"d-flex gap-2\">\n <div class=\"btn btn-sm btn-primary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">apply</div>\n <div class=\"btn btn-sm btn-secondary d-flex justify-content-center align-items-center\" style=\"height: 22px;\" (click)=\"applyDropdownFilter()\">reset</div>\n\n </div> -->\n </div>\n </ng-template>\n <div\n class=\"d-flex justify-content-center gap-2 border-top\"\n style=\"height: 38px\">\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-outline-secondary btn-light border w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); removeSideFilter(col)\">\n <span>Clear</span>\n </button>\n <button\n type=\"button\"\n style=\"max-height: 30px\"\n class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applySideFilter(col)\"\n [class.disabled]=\"(col?.query.condition !== 'none' && !col?.query?.second_value)\"\n [class.pe-none]=\"(col!?.query.condition !== 'none' && !col?.query?.second_value)\"\n >\n <span style=\"margin-top: -1px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Centr Overlay for showing the chose columns -->\n\n<div *ngIf=\"showColumnPanel\" class=\"custom-modal-overlay\">\n <div\n class=\"custom-modal-content\"\n [style.backgroundColor]=\"dropdownsBackgroundColor\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"modalColumnPannel\"></ng-container>\n </div>\n</div>\n\n<!-- The existing ng-template you provided -->\n<ng-template #modalColumnPannel>\n <div class=\"column-panel-header\">\n <div\n class=\"d-flex justify-content-between align-items-center px-2 ps-3 rounded-top-2 moda-header\"\n [style.height.px]=\"48\"\n >\n Choose Columns\n <span class=\"filter-icon-wrapper\" (click)=\"closeModalColumnPanel()\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n </div>\n <hr class=\"my-0\" />\n <div>\n <div class=\"d-flex align-items-center px-2 pe-3\" [style.height.px]=\"48\">\n <span class=\"filter-icon-wrapper me-2\" *ngIf=\"showColumnsGrouping\">\n <span\n class=\"toggle-icon data-grid-svg-icon\"\n [inlineSVG]=\"\n accordionState === 'all'\n ? singleSpaAssetsPath + 'data-grid/icons/chevron-down.svg'\n : accordionState === 'some'\n ? singleSpaAssetsPath + 'data-grid/icons/dash.svg'\n : singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\n \"\n (click)=\"toggleAllAccordions()\"\n ></span>\n </span>\n <input\n type=\"checkbox\"\n class=\"form-check-input me-2\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"choseColumnsSearch\"\n />\n </div>\n\n <hr class=\"mt-0 mb-1\" />\n <div class=\"px-2 overlay-scrollable\">\n <ng-container\n *ngFor=\"\n let col of columns | filter : choseColumnsSearch : 'header';\n trackBy: trackByField\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"columnPanelItem; context: { col: col }\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #sideMenuRowGroups>\n <div class=\"d-flex flex-column h-100 d-none\">\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Row Groups</span>\n </div>\n <div class=\"h-50\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here to set row Groups\n </div>\n </div>\n </div>\n\n <hr class=\"mt-4\" />\n\n <div class=\"px-3 h-100\">\n <div class=\"d-flex gap-3 mb-4\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/justify.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>Values</span>\n </div>\n <div class=\"h-50 d-flex\">\n <div\n class=\"px-3 py-2 border-dashed h-100 d-flex justify-content-center align-items-center\"\n style=\"font-size: 14px\"\n >\n Drag here aggregate\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<!-- Drag Preview Template -->\n<!-- *************************************************** -->\n<!-- *************************************************** -->\n<ng-template #dragPreview let-col>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n</ng-template>\n\n<!-- Drag Placeholder Template -->\n<ng-template\n #dragPlaceholder\n let-col\n let-i=\"index\"\n let-section=\"section\"\n let-draggingInGroupArea=\"draggingInGroupArea\"\n>\n <div *ngIf=\"!draggingInGroupArea\">\n <div\n *ngTemplateOutlet=\"\n headerCell;\n context: { $implicit: col, index: i, section: section }\n \"\n ></div>\n </div>\n <div *ngIf=\"draggingInGroupArea\">New Placeholder</div>\n</ng-template>\n\n<!-- Top Group Row Placeholder -->\n<ng-template #topGroupingRowPlaceholder let-col let-showChevron=\"showChevron\">\n <div class=\"d-flex gap-2\">\n <div\n class=\"d-flex gap-2 top-row-grouping-placeholder\"\n [style.backgroundColor]=\"topGroupedBadgesBackgroundColor\"\n >\n <span\n cdkDragHandle\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/grid-3x2-gap.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n <span>{{ col.header }}</span>\n <span\n (click)=\"ungroupColumn(col)\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/x.svg'\"\n class=\"cursor-pointer data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n <div *ngIf=\"showChevron\" style=\"opacity: 0.6; font-size: 14px\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n</ng-template>\n\n<ng-template\n #childHeaderPlaceholder\n let-col\n let-pinnedRight=\"pinnedRight\"\n let-i=\"index\"\n let-sections=\"sections\"\n>\n <div\n class=\"header-cell one-row-header-cells\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [style.fontWeight]=\"headerFontWeight\"\n >\n <div class=\"d-flex justify-content-between h-100 align-items-center w-100\">\n <div\n class=\"d-flex justify-content-between align-items-center w-100\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div\n class=\"text-ellipsis h-100 d-flex align-items-center\"\n [title]=\"col.header\"\n [class.w-100]=\"pinnedRight\"\n >\n {{ col.header }}\n </div>\n\n <div\n class=\"position-relative d-flex\"\n [class.flex-row-reverse]=\"pinnedRight\"\n >\n <div class=\"three-dots p-1\" style=\"cursor: pointer\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n\n <div class=\"resize-handle resize-test\">\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"showFilterRow\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n class=\"header-cell filter-cell\"\n [class.border-right]=\"showVerticalBorder\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n [class.border-right]=\"showVerticalBorder\"\n style=\"grid-row: 3\"\n >\n <div\n class=\"header-cell filter-cell\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n [style.width.px]=\"col.width\"\n [style.min-width.px]=\"col.width\"\n [style.height.px]=\"headerRowHeight\"\n [style.min-height.px]=\"headerRowHeight\"\n [style.max-height.px]=\"headerRowHeight\"\n >\n <input\n type=\"text\"\n class=\"form-control form-control-sm\"\n placeholder=\"Filter\"\n [(ngModel)]=\"col.filterValue\"\n [readonly]=\"col?.type == 'dropdown' || col?.type == 'image'\"\n [class.disabled-search-input]=\"\n col?.type == 'dropdown' || col?.type == 'image'\n \"\n />\n <span\n class=\"filter-icon-wrapper\"\n (click)=\"activeFilterCell = col; activeCol = null\"\n ><span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/filter-2.svg'\"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span\n ></span>\n\n <div\n class=\"position-absolute\"\n *ngIf=\"activeFilterCell === col\"\n style=\"top: 100%; right: 0; z-index: 10; left: 0\"\n ></div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #tableLayout>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 320px\"\n >\n <div class=\"d-flex align-items-center mb-3\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Layout</h6>\n </div>\n <hr class=\"my-2\" />\n <div class=\"w-100 mb-3 d-flex\" role=\"group\">\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"small\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'small')\"\n [checked]=\"selectedTableLayout == 'small'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"small\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'small' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 8px\"></div>\n Small\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"medium\"\n autocomplete=\"off\"\n [checked]=\"selectedTableLayout == 'medium'\"\n (change)=\"changeTableLayout($event, 'medium')\"\n />\n <label\n class=\"border mx-3 d-flex flex-column align-items-center layout-button\"\n for=\"medium\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'medium' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 12px\"></div>\n Medium\n </label>\n\n <input\n type=\"radio\"\n class=\"btn-check layout-button-check\"\n name=\"layoutSize\"\n id=\"large\"\n autocomplete=\"off\"\n (change)=\"changeTableLayout($event, 'large')\"\n [checked]=\"selectedTableLayout == 'large'\"\n />\n <label\n class=\"border d-flex flex-column align-items-center layout-button\"\n for=\"large\"\n [ngStyle]=\"{\n color: selectedTableLayout == 'large' ? '#000' : '#727272'\n }\"\n >\n <div class=\"preview-box border mb-1\" style=\"height: 16px\"></div>\n Large\n </label>\n </div>\n\n <hr class=\"my-2\" />\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text_common_14px\">Show separators</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"separators\"\n [(ngModel)]=\"showVerticalBorder\"\n (change)=\"onFontChange()\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text_common_14px\">Row shading</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"rowShadingEnabled\"\n (change)=\"toggleRowShading()\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <!-- <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Side Menu</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showSideMenu\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span>Show Filter Row</span>\n <div class=\"form-check form-switch m-0\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"showFilterRow\"\n type=\"checkbox\"\n id=\"rowShading\"\n />\n </div>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #tablePreset>\n <div\n *ngIf=\"activeSubButton !== 'save-preset'\"\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Table Presets</h6>\n </div>\n <!-- Save Preset Button with Dropdown -->\n <div>\n <a\n class=\"text-decoration-none text-primary\"\n type=\"button\"\n id=\"savePresetDropdown\"\n (click)=\"$event.stopPropagation(); toggleSubActions('save-preset')\"\n >\n {{ isTablePresetNotChanged ? \"Save preset\" : \"Update Preset\" }}\n </a>\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchTextPresetTable\"\n type=\"search\"/>\n </div>\n </div>\n\n <!-- Preset List -->\n <ng-container\n *ngIf=\"\n tableView | filter : searchTextPresetTable : 'name' as filteredList\n \"\n >\n <!-- If filteredList exists and none is default -> show fallback -->\n <div\n class=\" pb-5 overflow-auto\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 250\"\n >\n <div\n class=\"cursor-pointer\"\n (click)=\"\n clearAllFilters();\n openIndex = null;\n temp_state.id = '';\n activeTopButton = '';\n curretaTablePresetForUpdate = null;\n activeIndex = null;\n \"\n >\n <div class=\"fw-semibold\">Default View</div>\n </div>\n <div class=\"d-flex justify-content-between\">\n <small class=\"text-dark\">Created by system</small>\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n <span\n *ngIf=\"!tableFilterViewId && !hasAnyDefaultView()\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\"\n class=\"me-2\"\n ></span>\n <div\n class=\"dropdown d-flex justify-content-end\"\n *ngIf=\"tableFilterViewId\"\n ></div>\n </div>\n \n <!-- The list: render each table from filteredList -->\n <div\n class=\"list-group list-group-flush\"\n *ngFor=\"\n let table of filteredList;\n let i = index;\n trackBy: trackByTable\n \"\n >\n <!-- Item -->\n <div\n (click)=\"\n $event.stopPropagation(); openIndex = null; activeTopButton = ''\n \"\n class=\"list-group-item px-0 d-flex justify-content-between align-items-center\"\n >\n <div (click)=\"selectFilter(table); openIndex = null\">\n <div class=\"fw-semibold\" style=\"cursor: pointer\">\n {{ table?.name }}\n <!-- {{table?.is_temp}} -->\n <span\n *ngIf=\"\n (table?.is_temp && !temp_state.id) ||\n temp_state.id == table.id\n \"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n <span\n *ngIf=\"table?.is_default\"\n class=\"badge bg-light text-primary ms-2\"\n >Default</span\n >\n </div>\n <small class=\"text-dark\" *ngIf=\"table?.config?.filterNames\" [title]=\"table?.config?.filterNames\">\n {{\n table?.config?.filterNames?.length > 25\n ? (table?.config?.filterNames | slice:0:25) + '...'\n : table?.config?.filterNames\n }}\n ({{ table?.config?.totalCount }})\n </small>\n <small class=\"text-dark\" *ngIf=\"!table?.config?.filterNames\">{{ table?.createdAt | date : \"MMM d, y\" }}</small>\n </div>\n\n <div class=\"d-flex align-items-center\">\n <span\n *ngIf=\"table?.is_default\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/check-blue.svg'\n \"\n class=\"me-2\"\n ></span>\n\n <div class=\"dropdown\" *ngIf=\"!table?.is_default\">\n <div\n class=\"dropdown-wrapper\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"btn-icon muted-text\"\n (click)=\"toggleMenu(i, $event)\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"openIndex === i\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/horizontal-dots.svg'\n \"\n class=\"me-2\"\n ></span>\n </button>\n\n <!-- menu -->\n <ul\n *ngIf=\"openIndex === i\"\n class=\"custom-dropdown-menu position-fixed top-auto\"\n role=\"menu\"\n [style.right.px]=\"'auto'\"\n [style.left.px]=\"dataGridContainer.offsetWidth - 100\"\n style=\"top: unset; right: unset\"\n >\n <li role=\"none\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item\"\n (click)=\"\n actionPreset(table, 'setPreset'); temp_state.id = ''\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/star.svg'\n \"\n class=\"me-2\"\n ></span>\n Set as default\n </button>\n </li>\n\n <li role=\"none\" *ngIf=\"!table.confirmDelete\">\n <button\n role=\"menuitem\"\n class=\"dropdown-item text-danger\"\n (click)=\"table.confirmDelete = true\"\n >\n <span\n style=\"margin-top: -4px\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/trash-red.svg'\n \"\n class=\"me-2\"\n ></span>\n Delete\n </button>\n </li>\n\n <li\n role=\"none\"\n *ngIf=\"table.confirmDelete\"\n class=\"confirm-block\"\n >\n <div class=\"px-3 py-2 text-center\">\n <div class=\"mb-2 text_common_16px_gray\">\n Are you sure you want to delete this view<b>?</b><br/> This action can\u2019t be undone.\n </div>\n <div class=\"d-flex gap-2\">\n <button\n class=\"cancel_btn_new common_btn\"\n (click)=\"table.confirmDelete = false\">\n Cancel\n </button>\n <button class=\"delete_btn_new common_btn\"\n (click)=\"actionPreset(table, 'deletePreset')\">\n Delete\n </button>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n <!-- Item End Here -->\n </div>\n </div>\n </ng-container>\n </div>\n\n <div\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"activeSubButton == 'save-preset'\"\n class=\"dropdown-menu p-3 badge mt-4 save-preset-dropdown mt-1\"\n aria-labelledby=\"savePresetDropdown\"\n style=\"min-width: 250px\"\n >\n <div class=\"text_common_16px mb-2\">\n {{ isTablePresetNotChanged ? \"Create New Preset\" : \"Update Preset\" }}\n </div>\n <!-- <div class=\"fs-14px mb-2\" style=\"line-height: 20px\">\n This will save the current table adjustments as a preset.\n </div> -->\n <!-- Input -->\n <div class=\"my-3\">\n <label for=\"presetName\" class=\"form-label fs-12px fw-bold\">Name</label>\n <div class=\"col-12 global-search position-relative\">\n <input\n #presetNameCtrl=\"ngModel\"\n required\n [(ngModel)]=\"presetName\"\n [ngClass]=\"{\n 'is-invalid':\n presetNameCtrl.invalid &&\n (presetNameCtrl.dirty || presetNameCtrl.touched)\n }\"\n class=\"form-control form-control-sm ps-2\"\n placeholder=\"Enter preset name\"\n type=\"text\"\n />\n </div>\n </div>\n\n <!-- Checkbox -->\n <div class=\"form-check mb-2\">\n <input\n class=\"form-check-input\"\n [(ngModel)]=\"presetFilter\"\n type=\"checkbox\"\n id=\"saveFilters\"\n />\n <label class=\"form-check-label mt-1\" for=\"saveFilters\">\n Save active filters\n </label>\n </div>\n\n <!-- Save Button -->\n <div class=\"d-flex justify-content-end gap-2\" style=\"height: 32px\">\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center\"\n (click)=\"$event.stopPropagation(); toggleActions('table-presets')\"\n style=\"margin-top: -2px\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"closeDropdown.preset.loading\"\n (click)=\"savePreset(presetNameCtrl)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center\"\n >\n <span style=\"margin-top: -2px\" *ngIf=\"isTablePresetNotChanged\">\n <ng-container *ngIf=\"!closeDropdown.preset.loading\"\n >Create</ng-container\n >\n <ng-container *ngIf=\"closeDropdown.preset.loading\"\n ><span class=\"spinner-border spinner-border-sm\"></span\n ></ng-container>\n </span>\n <span style=\"white-space: nowrap\" *ngIf=\"!isTablePresetNotChanged\"\n >Update Preset</span\n >\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #showHideColumns>\n <div\n (click)=\"$event.stopPropagation()\"\n class=\"p-3 action_dropdown_new_design actions-dropdown mt-1 dropdown-menu show shadow custom-menu table-layout\"\n style=\"width: 280px\"\n >\n <!-- Header -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\" style=\"border-bottom: 1px solid #E0E0E0;\">\n <div class=\"d-flex align-items-center\">\n <button\n class=\"btn btn-link p-0\"\n style=\"margin-left: -10px\"\n (click)=\"toggleActions('setting')\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon\"\n ></span>\n </button>\n <h6 class=\"mb-0 ms-2 text_common_14px\">Columns</h6>\n </div>\n <a\n (click)=\"resetColumns()\"\n href=\"javascript:void(0)\"\n class=\"text-primary text-decoration-none\"\n >Reset</a\n >\n </div>\n\n <!-- Search -->\n <div class=\"mb-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"mx-2 position-absolute icon data-grid-svg-icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Search column\"\n type=\"search\"\n [(ngModel)]=\"topShowHideColumns\"\n />\n </div>\n </div>\n <!-- Preset List -->\n <div\n class=\"list-group list-group-flush\"\n style=\"overflow: auto; scrollbar-width: thin\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight - 220\"\n >\n <div class=\"muted-text show-hide-table-label d-flex justify-content-between\" *ngIf=\"hasAnyVisibleColumn\">\n Show in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"hide_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"hide_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <!-- Item -->\n <ng-container\n *ngFor=\"\n let col of columns | filter : topShowHideColumns : 'header';\n trackBy: trackByField\n \"\n >\n <div\n *ngIf=\"col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- show checkbox instead of icon -->\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"cursor-grap data-grid-svg-icon\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n *ngIf=\"!col?.query?.first_value && !col?.query?._ids?.length\"\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, false)\"\n [class.disabled]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.pe-none]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n [class.opacity-50]=\"visibleColumns().length <= 2 || col?.is_always_visible\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n <div\n *ngIf=\"col?.query?.first_value || col?.query?._ids?.length\"\n class=\"d-flex align-items-center\"\n style=\"opacity: 0.5\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/eye.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Item End Here -->\n\n <div\n class=\"dropdown-divider\"\n *ngIf=\"hasAnyVisibleColumn && hasAnyInVisibleColumn\"\n ></div>\n\n <div\n class=\"muted-text show-hide-table-label d-flex justify-content-between\"\n *ngIf=\"hasAnyInVisibleColumn\"\n >\n Hide in table\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n id=\"show_all\"\n [checked]=\"allColumnsSelected()\"\n (change)=\"toggleAllColumnsVisibility()\"\n />\n <label class=\"form-check-label fw-semibold\" for=\"show_all\">\n Show/Hide All \n </label>\n </div>\n </div>\n <div class=\"list-group list-group-flush\">\n <ng-container *ngFor=\"let col of columns; trackBy: trackByField\">\n <div\n *ngIf=\"!col.is_visible\"\n class=\"list-group-item border-0 px-0 d-flex justify-content-between align-items-center\"\n >\n <div class=\"d-flex gap-1\">\n <div class=\"me-1\">\n <input type=\"checkbox\" [(ngModel)]=\"col.is_visible\" [checked]=\"col.is_visible\">\n <!-- <span\n *ngIf=\"!col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/grip-vertical.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span> -->\n <span\n *ngIf=\"col?.pinned\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/pin.svg'\n \"\n class=\"data-grid-svg-icon cursor-grap\"\n (mousedown)=\"$event.preventDefault()\"\n ></span>\n </div>\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n </div>\n <div\n class=\"d-flex align-items-center cursor-pointer\"\n (click)=\"toggleColumnVisibility(col, true)\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/columnIconNew(2).svg'\n \"\n class=\"data-grid-svg-icon me-2 setting_dropdown\"\n ></span>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Item End Here -->\n </div>\n </div>\n</ng-template>\n\n<ng-template #filterColumns let-col=\"column\">\n <div\n @slideToggle\n *ngIf=\"!isFilterOpen && activeTopButton == 'filter-columns'\"\n (click)=\"$event.stopPropagation()\"\n class=\"action_dropdown_new_design actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"py-2 px-3\">\n <div class=\"col-12 global-search position-relative\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/search.svg'\"\n class=\"data-grid-svg-icon mx-2 position-absolute icon\"\n ></span>\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Filter by\"\n type=\"search\"\n [(ngModel)]=\"addFilterColumnInput\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 500px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of columns | filter : addFilterColumnInput : 'header';\n trackBy: trackByField\n \"\n >\n <div\n (click)=\"openFilter(col)\"\n *ngIf=\"\n col.is_visible &&\n !col?.query?.first_value &&\n !col?.query?._ids?.length && col.type !== 'image'\n \"\n class=\"list-group-item border-0 px-3 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"d-flex align-items-center justify-content-between gap-1 w-100\">\n <!-- <div style=\"margin-top: -3px\"></div> -->\n <div class=\"fw-semibold\">\n {{ col.header }}\n </div>\n <div class=\"d-flex align-items-center justify-content-between\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/chevron-right.svg'\"\n class=\"data-grid-svg-icon me-2\"\n ></span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Dropdown -->\n <div\n @slideToggle\n *ngIf=\"isFilterOpen && selectedColumnForFilter.type == 'dropdown'\"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 280px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 my-2 border-below py-1 pb-2 mb-3 d-flex ps-1\">\n <span\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"mb-2 px-3\">\n <div\n class=\"col-12 position-relative border rounded d-flex align-items-center flex-wrap px-2 filter-serach-inpt\"\n >\n <span\n *ngFor=\"let selected of selectedFilterOptions\"\n class=\"badge d-flex align-items-center gap-1 me-1 mb-1 top-row-filter-dropdown\"\n >\n {{ selected?.value ? selected.value : selected }}\n <span\n (click)=\"toggleSelectionInFilter(selected)\"\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/cross-primary.svg'\n \"\n class=\"me-2\"\n ></span>\n </span>\n <input\n class=\"form-control form-control-sm border-0 flex-grow-1\"\n style=\"padding: 0\"\n [placeholder]=\"selectedFilterOptions?.length ? '' : 'Filter by'\"\n type=\"search\"\n [(ngModel)]=\"searchTextForFilterDropDown\"\n (keydown.backspace)=\"handleBackspace($event)\"\n />\n </div>\n </div>\n <div\n class=\"list-group list-group-flush\"\n style=\"max-height: calc(100vh - 600px); overflow: auto\"\n >\n <ng-container\n *ngFor=\"\n let col of selectedColumnForFilter.column_dropdown_value\n | filter : searchTextForFilterDropDown : 'value';\n let i = index\n \"\n >\n <div\n class=\"list-group-item border-0 px-2 d-flex justify-content-between align-items-center dropdown-item cursor-pointer\"\n >\n <div class=\"form-check\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"i\"\n [checked]=\"currentFilterSelectedIds.has(col.id || col._id || col)\"\n (change)=\"toggleSelectionInFilter(col)\"\n />\n <label class=\"form-check-label fw-semibold\" [for]=\"i\">\n {{ col?.value || col?.name || col }}\n </label>\n </div>\n </div>\n </ng-container>\n </div>\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\"\n >\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1 btn-light\"\n (click)=\"$event.stopPropagation(); resetFilterChanges()\"\n >\n <span>Cancel</span>\n </button>\n <button\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\"\n >\n <span style=\"margin-top: -2px\">Save</span>\n </button>\n </div>\n </div>\n\n <!-- For Text fields and number fields-->\n\n <div\n @slideToggle\n *ngIf=\"\n isFilterOpen &&\n (selectedColumnForFilter.type == 'string' ||\n selectedColumnForFilter.type == 'number' ||\n selectedColumnForFilter.type == 'date')\n \"\n (click)=\"$event.stopPropagation()\"\n class=\"shadow actions-dropdown mt-1 show shadow custom-menu table-layout filter-columns pb-2\"\n style=\"width: 210px; right: unset; max-width: 230px\"\n [style.backgroundColor]=\"checkboxesBackgroundColor\"\n >\n <div class=\"px-3 border-below py-1 pb-2 d-flex ps-1\">\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/arrow-left.svg'\"\n (click)=\"toggleActions('filter-columns'); isActiveFilterOpen = false\"\n class=\"data-grid-svg-icon me-2 cursor-pointer\"\n ></span\n ><b>{{ selectedColumnForFilter?.header }}</b>\n </div>\n <div class=\"col-12 position-relative p-2 text-filter\">\n <div class=\"mb-2\">\n <select\n class=\"form-select form-select-sm custom-select border\"\n [(ngModel)]=\"firstCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n <div class=\"mb-2\">\n <input\n class=\"form-control form-control-sm\"\n placeholder=\"Enter first value\"\n type=\"search\"\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n [(ngModel)]=\"firstValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n <div>\n <div class=\"d-flex my-3 d-flex flex-row\" style=\"font-size: 14px\">\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalAnd\"\n name=\"logicalOperator\"\n value=\"and\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalAnd\"\n >AND</label\n >\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalOr\"\n name=\"logicalOperator\"\n value=\"or\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalOr\">OR</label>\n </div>\n\n <div\n class=\"form-check form-check-inline col-4 m-0 d-flex align-items-center gap-1\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n id=\"logicalNone\"\n name=\"logicalOperator\"\n value=\"none\"\n [(ngModel)]=\"condition\"\n />\n <label class=\"form-check-label mb-0 mt-1\" for=\"logicalNone\"\n >None</label\n >\n </div>\n </div>\n\n <ng-container *ngIf=\"condition !== 'none' && firstValue\">\n <div class=\"mb-2 mt-3\">\n <!-- Second condition select -->\n <select\n class=\"form-select form-select-sm border\"\n [(ngModel)]=\"secondCondition\"\n >\n <ng-container *ngIf=\"selectedColumnForFilter.type !== 'date'\">\n <option value=\"contain\">Contains</option>\n <option value=\"does_not_contain\">Does Not Contain</option>\n <option value=\"equal\">Equals</option>\n <option value=\"before\">Starts With</option>\n <option value=\"after\">Ends With</option>\n </ng-container>\n\n <ng-container *ngIf=\"selectedColumnForFilter.type == 'date'\">\n <option value=\"equal\">Equals To</option>\n <option value=\"not_equal\">Not Equal</option>\n <option value=\"after\">After</option>\n <option value=\"before\">Before</option>\n </ng-container>\n </select>\n </div>\n\n <div class=\"mb-2\">\n <!-- Second value input -->\n <input\n [type]=\"\n selectedColumnForFilter.type == 'string'\n ? 'text'\n : selectedColumnForFilter.type\n \"\n class=\"form-control form-control-sm\"\n placeholder=\"Enter second value\"\n type=\"search\"\n [(ngModel)]=\"secondValue\"\n (keydown.enter)=\"applyDropdownFilter()\"\n />\n </div>\n </ng-container>\n </div>\n </div>\n\n <div\n class=\"d-flex justify-content-center gap-2 px-2 border-top\"\n style=\"height: 38px\">\n <button\n [disabled]=\"!currentFilterSelectedIds?.size && !firstValue\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"cancel_btn_new common_btn w-100 d-flex align-items-center justify-content-center mt-1\"\n (click)=\"$event.stopPropagation(); resetTextFilterChanges()\">\n <span>Cancel</span>\n </button>\n <button\n [disabled]=\"(currentFilterSelectedIds?.size === 0 && !firstValue) || (condition !== 'none' && !secondValue)\"\n type=\"button\"\n style=\"height: 32px\"\n class=\"primary_btn_new common_btn d-flex align-items-center justify-content-center mt-1\"\n (click)=\"applyDropdownFilter()\">\n <span style=\"margin-top: -2px\">Apply</span>\n </button>\n </div>\n </div>\n</ng-template>\n\n<!-- Edit dropdown here -->\n<ng-template let-col>\n <div class=\"drop-down-edit\"></div>\n</ng-template>\n\n<ng-template\n #fullTextTemplate\n let-row=\"row\"\n let-col=\"col\"\n let-isArray=\"isArray\"\n>\n <div\n class=\"full-text-box\"\n (dblclick)=\"$event.stopPropagation(); $event.preventDefault()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n >\n <ng-container *ngIf=\"!isEditing(row, col)\">\n <div\n *ngIf=\"!isArray\"\n class=\"full-text-content\"\n [style.maxHeight.px]=\"dataGridContainer.offsetHeight / 2\"\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n >\n {{\n getNestedValue(row, col.field)?.value ||\n getNestedValue(row, col.field)?.name ||\n getNestedValue(row, col.field)\n }}\n </div>\n <div *ngIf=\"isArray\">\n <ul>\n <ng-container\n *ngFor=\"let item of getNestedValue(row, col.field); let i = index\"\n >\n <li *ngIf=\"i !== 0\">\n <ng-container>\n {{\n item?.department_name ||\n item?.roleName ||\n item?.full_name ||\n \"-\"\n }}\n </ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isEditing(row, col)\">\n <textarea\n (dblclick)=\"\n $event.stopPropagation();\n $event.preventDefault();\n enableEdit(row, col, true)\n \"\n #textModel=\"ngModel\"\n rows=\"4\"\n #textAreadInput\n [(ngModel)]=\"row[col.field]\"\n name=\"{{ col.field }}\"\n required\n (blur)=\"disableEdit(row, col, textModel)\"\n (keydown.enter)=\"textAreadInput.blur()\"\n autofocus\n class=\"form-control\"\n [ngClass]=\"{\n 'is-invalid': textModel.invalid\n }\"\n (mousedown)=\"$event.stopPropagation()\"\n ></textarea>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultImagePlaceholder let-row=\"row\" let-col=\"col\">\n <span\n class=\"px-2 d-flex w-100 cell-content image-placeholder\"\n [title]=\"row?.full_name || row?.name || 'N/A'\"\n >\n <ng-container\n *ngIf=\"\n row?.logo ||\n row?.assetImage ||\n row?.invoice?.invoice_image ||\n row?.invoice_image;\n else placeholder\n \"\n >\n <span\n (click)=\"fullscreenImage = row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\"\n class=\"pic\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n <img\n [width]=\"rowHeight - 12\"\n [height]=\"rowHeight - 12\"\n [style.width.px]=\"rowHeight - 10\"\n [style.height.px]=\"rowHeight - 10\"\n [src]=\"\n row?.profile_pictures?.[4]?.path ||\n row?.logo ||\n row?.assetImage ||\n row?.invoice_image\n \"\n alt=\"icon\"\n class=\"option-icon\"\n loading=\"lazy\"\n />\n </span>\n </ng-container>\n <!-- <div\n class=\"fullscreen-overlay\"\n *ngIf=\"fullscreenImage\"\n (click)=\"fullscreenImage = null\"\n >\n <img [src]=\"fullscreenImage\" class=\"fullscreen-img\" />\n </div> -->\n\n <ng-template #placeholder>\n <span\n [ngClass]=\"getDynamicClass(row?.full_name || row?.name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n [class.assets-pic]=\"gridType == 'Assets'\"\n >\n {{ getInitials(row?.full_name) }}\n </span>\n </ng-template>\n </span>\n</ng-template>\n\n<!-- Right Click Menue -->\n<div\n [class.invisible]=\"!positionedYet\"\n class=\"context-menu p-2\"\n *ngIf=\"actionHide && actions?.length\"\n [ngStyle]=\"{ 'top.px': yPos, 'left.px': xPos }\"\n [class.show]=\"isVisible\"\n appendTo=\"body\"\n>\n <ul>\n <li\n *ngFor=\"let action of actions\"\n class=\"rounded d-flex align-items-center\"\n (click)=\"onActionClick(action)\"\n >\n <span\n [inlineSVG]=\"singleSpaAssetsPath + 'data-grid/icons/' + action + '.svg'\"\n class=\"data-grid-svg-icon right-click-menu-icons me-2\"\n ></span>\n <span class=\"text-capitalize fw-500\">{{ action }}</span>\n </li>\n </ul>\n</div>\n\n<!-- Details Toggle from bottom -->\n\n<ng-template #nestedTableTemplate let-row>\n <div\n class=\"nested-table table table-sm w-100 mb-0 center-nested-table w-100\"\n style=\"table-layout: fixed !important\"\n #nestedTableContainer\n >\n <thead\n #nestedHeader\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n >\n <div\n cdkDropList\n [cdkDropListData]=\"row?.detail.columns\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"dropColumn($event, row)\"\n (cdkDropListSorted)=\"onNestedColSort($event, previewNestedCols)\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n class=\"d-flex tr border-below\"\n >\n <div\n *ngFor=\"let col of row.detail.columns; let i = index\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n class=\"px-4 th\"\n [attr.field]=\"col.field\"\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n cdkDrag\n >\n <div\n class=\"d-flex h-100 justify-content-between position-relative align-items-center\"\n >\n <div class=\"text-ellipsis\" (click)=\"sortNestedCol(col, row)\">\n {{ col.header }}\n </div>\n <div class=\"d-flex gap-2\">\n <span\n *ngIf=\"currentSubSortColumn == col.field\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n (col?.order_by == 'desc'\n ? 'data-grid/icons/sort-desc.svg'\n : 'data-grid/icons/sort-asc.svg')\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center ms-2 start-50\"\n >\n </span>\n <!-- <div\n class=\"three-dots p-1\"\n (click)=\"openThreeDotsMenu($event, col)\"\n style=\"cursor: pointer\"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/icons/three-dots-vertical.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div> -->\n\n <!-- Only show menu if this column is active -->\n <div\n class=\"position-absolute\"\n *ngIf=\"activeCol === col\"\n style=\"top: -50%; z-index: 21; left: 0\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnMenu;\n context: {\n col: col,\n isNestedTable: true,\n columns: row?.detail.columns\n }\n \"\n ></ng-container>\n </div>\n <div\n class=\"resize-handle\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"\n $event.preventDefault();\n onResizeColumn($event, col);\n $event.stopPropagation()\n \"\n >\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/resize-handle1.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n </div>\n </div>\n <ng-template cdkDragPreview>\n <div class=\"p-2 border d-flex gap-2\">\n <div>\n <span\n [inlineSVG]=\"\n singleSpaAssetsPath + 'data-grid/icons/arrows-move.svg'\n \"\n class=\"data-grid-svg-icon d-flex justify-content-center align-items-center\"\n ></span>\n </div>\n <div>{{ col.header }}</div>\n </div>\n </ng-template>\n </div>\n </div>\n </thead>\n <div\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"nestedTablerowHeight\"\n class=\"viewport\"\n [style.height.px]=\"\n (row?.detail?.result?.length < 5\n ? nestedTablerowHeight * row?.detail?.result?.length + 40\n : 300) + (hasHorizontalScroll ? -12 : 1)\n \"\n [style.width.px]=\"nestedHeader.offsetWidth - 10\"\n [style.minWidth.px]=\"nestedHeader.offsetWidth - 10\"\n >\n <div\n class=\"cursor-pointer border-below d-flex tr\"\n *cdkVirtualFor=\"let d of row?.detail?.result; trackBy: trackById\"\n [style.height.px]=\"nestedTablerowHeight\"\n [style.width.px]=\"nestedHeader?.offsetWidth\"\n [style.minWidth.px]=\"nestedHeader?.offsetWidth\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n (contextmenu)=\"onRightClick($event, d)\"\n >\n <div\n class=\"px-4 py-0 td\"\n *ngFor=\"let col of previewNestedCols; let j = index\"\n [style.fontSize.px]=\"nestedTablerowFontsize\"\n [attr.field]=\"col.field\"\n [style.width.px]=\"col?.width || 250\"\n [style.minWidth.px]=\"col?.width || 250\"\n [style.maxWidth.px]=\"col?.width || 250\"\n >\n <div\n [style.height.px]=\"nestedTablerowHeight - 1\"\n [style.max-width.px]=\"col?.width\"\n class=\"d-flex align-items-center\"\n >\n <!-- {{ d[col.field] || (col.is_amount ? 0 : \"-\") }} -->\n <div\n #cellText\n class=\"text-ellipsis flex-grow-1\"\n [title]=\"\n col.type === 'date'\n ? (getNestedValue(d, col.field) | date : dateFormat)\n : getNestedValue(d, col.field) || '-'\n \"\n >\n <ng-container *ngIf=\"col.type !== 'image'\">\n <ng-container *ngIf=\"col.is_amount\">{{\n currencySymbol\n }}</ng-container>\n {{\n !isNestedValueArray(d, col.field)\n ? col.type === 'date'\n ? (isDate(getNestedValue(d, col.field))\n ? (getNestedValue(d, col.field) | date: dateFormat)\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n '-'))\n : (getNestedValue(d, col.field)?.value ||\n getNestedValue(d, col.field)?.name ||\n getNestedValue(d, col.field) ||\n (col.is_amount ? 0: '-'))\n : (getNestedValue(d, col.field)?.[0]?.department_name ||\n getNestedValue(d, col.field)?.[0]?.roleName || getNestedValue(d, col.field)?.[0]?.full_name ||\n '-')\n }}\n </ng-container>\n <ng-container *ngIf=\"false\">\n {{ getTotalAmount(col) }}\n </ng-container>\n <ng-container *ngIf=\"col.type == 'image'\">\n <ng-container\n *ngTemplateOutlet=\"\n defaultImagePlaceholder;\n context: {\n row: d,\n col: col,\n }\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</ng-template>\n\n<ng-template #leftRightNestedPlaceholder let-row>\n <table\n class=\"nested-table table table-sm w-100 mb-0\"\n [style.backgroundColor]=\"bodyBackgroundColor\"\n [style.height.px]=\"\n gridType == 'Assets'\n ? (nestedTableContainer?.nativeElement?.offsetHeight ?? 0) + 12\n : (taskManagementContainer?.nativeElement?.offsetHeight ?? 0)\n \"\n >\n <!-- <div class=\"thead\">\n <div\n class=\"tr d-flex border-below\"\n [style.height.px]=\"nestedTableHeaderRowHeight\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"th\" *ngFor=\"let _ of [1, 2, 3, 4, 5]\"></div>\n </div>\n </div> -->\n <!-- <div class=\"tbody\">\n <div\n class=\"tr border-below\"\n [style.height.px]=\"nestedTablerowHeight\"\n *ngFor=\"let _ of row?.detail?.result\"\n [style.backgroundColor]=\"headerBackgroundColor\"\n >\n <div class=\"td\" *ngFor=\"let __ of [1, 2, 3, 4, 5]\" class=\"py-0\">\n <span\n [style.height.px]=\"nestedTablerowHeight\"\n [style.max-width.px]=\"nestedTablerowHeight\"\n ></span>\n </div>\n </div>\n </div> -->\n </table>\n</ng-template>\n\n<ng-template #taskManagementTemplate let-taskDetails=\"taskDetails\">\n <div\n class=\"p-4\"\n #taskManagementContainer\n [style.backgroundColor]=\"nestedTableHeaderBackgroundColor\"\n [style.fontFaimly]=\"fontFaimly\"\n >\n <div class=\"d-flex justify-content-between\">\n <div class=\"col-4\">\n <div class=\"item-title\">Description</div>\n <!-- <div class=\"item-content firstDiv\">\n {{ taskDetails.description }}\n </div> -->\n <p\n [style.fontSize]=\"bodyTextFontsSize\"\n class=\"item-content firstDiv taskDescription pe-4\"\n [innerHTML]=\"getSafeComment(taskDetails?.editor_description)\"\n (click)=\"openFullImage($event)\"\n ></p>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">Attachments</div>\n <h5 *ngIf=\"taskDetails?.attachments?.length == 0\">\n No Attachments found\n </h5>\n <div\n *ngIf=\"taskDetails?.attachments?.length\"\n class=\"item-content d-flex flex-wrap\"\n style=\"gap: 10px\"\n >\n <a\n *ngFor=\"let attachement of taskDetails?.attachments; let i = index\"\n class=\"symbol-label fs-2 fw-semibold text-success cursor-pointer\"\n >\n <span\n title=\"{{ taskDetails?.attachments_name[i] || 'Attachment' }}\"\n (click)=\"downloadAttchment(attachement)\"\n [inlineSVG]=\"\n singleSpaAssetsPath +\n 'data-grid/document-icons/' +\n getExtention(attachement) +\n '.svg'\n \"\n >\n </span>\n </a>\n </div>\n </div>\n <div class=\"col-4\">\n <div class=\"item-title\">\n Comments ({{ taskDetails?.comments?.length }})\n </div>\n <h5 *ngIf=\"taskDetails?.comments?.length == 0\">No Comments found</h5>\n <div *ngIf=\"taskDetails?.comments?.length\" class=\"item-content\">\n <div class=\"comment\" *ngFor=\"let comment of taskDetails.comments\">\n <div class=\"d-flex align-items-center pe-3\">\n <img\n class=\"pic image-input-wrapper\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n *ngIf=\"comment?.comment_by.logo\"\n src=\"{{ comment?.comment_by.logo }}\"\n alt=\"{{ comment.comment_by.full_name }}\"\n />\n <!-- <app-default-image-placeholder *ngIf=\"!comment?.comment_by.logo\" title=\"{{ comment.comment_by.full_name }}\" [name]=\"comment.comment_by.full_name\"></app-default-image-placeholder> -->\n <span\n *ngIf=\"!comment?.comment_by.logo\"\n [ngClass]=\"getDynamicClass(comment.comment_by.full_name)\"\n class=\"pic d-flex align-items-center rounded-circle\"\n [style.width.px]=\"rowHeight - 12\"\n [style.height.px]=\"rowHeight - 12\"\n [style.fontSize.px]=\"rowHeight / 3\"\n title=\"{{ comment.comment_by.full_name }}\"\n >\n {{ getInitials(comment.comment_by.full_name) }}\n </span>\n </div>\n <div>\n <div class=\"comment-author fs-14px\">\n {{ comment?.comment_by.full_name }}\n </div>\n <div\n class=\"comment-content forCommentImg\"\n [innerHTML]=\"getSafeComment(comment.comment)\"\n ></div>\n <div class=\"comment-timestamp\">\n {{ comment.comment_date | date }}\n </div>\n <div class=\"comment-timestamp\">\n Replies: ({{ comment.replies.length }})\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@import\"bootstrap/dist/css/bootstrap.min.css\";:host,:host *{font-family:Inter,sans-serif!important}*{scrollbar-width:auto;scrollbar-color:rgba(31,36,40,.1019607843)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#fff}*::-webkit-scrollbar-thumb{background-color:#c4b0c9;border-radius:10px;border:3px solid #ffffff}.data-grid-table-wrapper{height:100%;width:100%;border:1px solid #E0E0E0;border-radius:12px;position:relative}.actions_dropdown_menu{width:180px!important}.data-grid-header{position:sticky;top:0}.data-grid-header{display:flex}.header-row{display:grid;width:100%}.header_figma_spacing{padding-right:8px!important}.header-cell{display:flex;align-items:center;position:relative;width:100%;padding:0 16px 0 0;font-weight:700;border-bottom:1px solid #E0E0E0;white-space:nowrap;min-width:80px;font-weight:600}.header-cell .filter-applied-on-text{color:#5d9cff!important}.filter-cell{padding:4px!important;display:flex;align-items:center;gap:8px;width:100%}.filter-cell .filter-applied{background-color:#bddef9}.border-right{border-right:1px solid #E0E0E0}.merged-grid{display:grid;grid-auto-rows:40px;border-bottom:1px solid #ccc}.span-two-rows{grid-row:span 2;display:flex;justify-content:space-between;align-items:center}.group-header{display:flex;justify-content:space-between;position:relative}.group-header-content{position:sticky;left:10px;overflow:hidden;text-overflow:ellipsis}.resize-handle{width:6px;cursor:e-resize;right:0;top:0;color:#00000026;margin-right:4px}:host ::ng-deep .resize-handle svg{stroke-width:2px}.group-header .resize-handle{top:25%}.h-100{height:100%}.data-grid-body{position:relative;overflow-y:auto;overflow-x:hidden}.cell{padding:8px 8px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;display:flex;align-items:center}.data-grid-row{display:flex;width:100%;min-width:max-content;align-items:center;border-bottom:1px solid #E0E0E0}.hovered-row{background-color:#ccc}.checkbox-row{border-bottom:#E0E0E0}.w-100{width:100%}.data-grid-header-wrapper{display:flex;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.data-grid-header{display:flex;position:relative;z-index:1}.left-pinned,.right-pinned{position:sticky;top:0}.right-pinned-header{position:absolute;right:0;border-left:1px solid #E0E0E0;z-index:unset}.left-pinned{left:0}.right-pinned{right:0;border-left:1px solid #E0E0E0}.center-scrollable{z-index:unset!important;overflow-x:auto;overflow-y:visible;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable::-webkit-scrollbar{display:none}.data-grid-body-wrapper{-webkit-user-select:none;user-select:none;display:flex}.center-scrollable-body{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.center-scrollable-body::-webkit-scrollbar{display:none}.left-pinned-body,.right-pinned-body{position:sticky;top:0;z-index:unset;background:#fff;scrollbar-width:none;-ms-overflow-style:none}.left-pinned-body::-webkit-scrollbar,.right-pinned-body::-webkit-scrollbar{display:none}.left-pinned-body{left:0}.border-end{border-right:1px solid #E0E0E0!important}.right-pinned-body{right:0;border-left:1px solid #E0E0E0}.fake-scroll-bar{height:14px;overflow:scroll;margin-bottom:10px}.text-ellipsis{overflow:hidden;text-overflow:ellipsis}.select-all-checkbox-cell{width:50px;display:flex;justify-content:center;align-items:center;height:100%}.select-all-checkbox-cell input{width:16px;height:14px}.border-below{border-bottom:1px solid #E0E0E0!important}.figmaIconSize.data-grid-svg-icon{width:24px!important;height:24px!important}.actions-dropdown .list-group .list-group-item{color:#1b1f22!important}.productSortingDropdownMenu{width:220px!important}.three-dots{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:6px;margin-right:4px;margin-left:2px;cursor:pointer}.three-dots:hover,.three-dots.threeDotActive{background-color:#0084ff1a;padding:5px}.rotated-180{transform:scaleY(-1)}.filter-icon-wrapper{min-height:22px;max-height:22px;min-width:22px;max-width:22px;display:flex;justify-content:center;align-items:center;border-radius:3px;cursor:pointer;transition:background-color .3s ease}.filter-icon-wrapper:hover{background-color:#ccc}.column-menu,.filter-menu{box-shadow:0 0 16px #00000026;border-radius:4px}.column-menu{background:#fff;width:100%;width:200px;border:1px solid #ddd;box-shadow:0 0 12px #00000014;border:1px solid #E0E0E0;padding:4px 0;font-size:14px;position:fixed;border-radius:8px}.column-menu-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.column-menu-item.active-sort,.column-menu-item:hover{background-color:#0084ff1a}.pin-parent{position:relative;width:100%!important}.column-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #ddd;width:130px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;display:none;padding:4px 0;z-index:10;border-radius:4px}.pin-parent:hover .column-submenu{display:block}.filter-menu-container{position:fixed;width:210px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:12px;box-shadow:0 0 16px #00000026;border:1px solid #E0E0E0;z-index:1000;font-size:14px}.filter-menu-header{font-weight:600;margin-bottom:10px}.filter-dropdown-section{max-height:350px;overflow-y:auto}.dropdown-options{overflow-y:auto;scrollbar-width:thin;height:100%}.filter-text-section select,.filter-text-section input{width:100%}.filter-radio-inputs{width:14px!important;height:14px!important}.right-menu{border-left:1px solid #E0E0E0;font-size:14px}.border-start{border-left:1px solid #E0E0E0!important}.column-panel-item{font-size:.875rem;color:#333}.toggle-icon{cursor:pointer;transition:transform .2s ease}.toggle-icon.rotate{transform:rotate(90deg)}.grab-icon{cursor:grab;color:#6c757d}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}.pivot-mode{height:48px}.chevron-wrapper{width:30px;height:20px;cursor:pointer;border-radius:3px;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease;margin-right:8px}.chevron-wrapper:hover{background-color:#cac7c7}.chevron-wrapper i{font-size:14px}.column-panel-body{height:70%;overflow:auto;scrollbar-width:thin}.side-menue-text{transform:rotate(90deg);position:relative;font-weight:700;margin-top:40px}.columns-button{padding-top:20px;padding-bottom:35px;width:29px}.fake-scroll-content{height:12px}.fake-scrollbar{width:25px}.fake-scrollbar div{min-width:1px}.fake-horizintal-scrollbar div{min-height:1px}.side-filter-columns-wrapper{height:calc(100% - 25px)}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;z-index:1050}.custom-modal-overlay .moda-header{background-color:#f8f8f8}.custom-modal-content{background-color:#fff;border-radius:8px;min-width:300px;max-width:400px;box-shadow:0 5px 20px #0000004d}.overlay-scrollable{height:250px;overflow:auto}.footer-row{border-top:1px solid #E0E0E0;padding-left:32px}.fake-horizintal-scrollbar{position:relative;bottom:8px;overflow-x:auto;overflow-y:hidden;height:8px}.border-dashed{border:1px dashed #E0E0E0}.cdk-drag-preview{box-sizing:border-box!important;border-radius:4px!important;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f!important;background-color:#f3f4f5!important;border:1px solid #E0E0E0!important;z-index:9999!important}.data-grid-header-wrapper ::ng-deep .cdk-drag-placeholder{display:block!important;background:#fff!important;opacity:1!important}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)!important}.top-row-grouping-placeholder{display:flex;align-items:center;border-radius:12px;font-size:14px;padding-inline:6px;border:1px solid #E0E0E0}.top-row-grouping-placeholder .bi-x{cursor:pointer;color:#7a7a7a}.top-row-grouping-placeholder .bi-x:hover{color:#111}.right-pinned-body-wrapper{position:absolute;right:0}.actions-dropdown{position:absolute;right:200px;z-index:1050;background-color:#fff;border-radius:8px!important;cursor:default}.bg-fff{background-color:#fff}.actions-dropdown-setting{right:250px}.actions-dropdown.consumer_buttons{right:170px}.consumer_buttons .dropdown-menu .dropdown-item{height:32px!important}.actions-dropdown.unfilfilled_dropdown_main,.actions-dropdown.UnpaidDropdown{border:0!important}.action-button{background-color:#007cf5!important;border-radius:8px!important;padding:8px 16px!important;font-size:14px;height:32px;align-items:center}.global-search{width:100%;display:flex!important;align-items:center!important;height:32px;max-width:335px}.global-search span{margin-top:0!important;top:8px}.global-search input{padding-left:28px;border-radius:8px!important}.global-search input:focus{outline:none!important;box-shadow:none!important}.active .top-icon ::ng-deep svg path{stroke:#007cf5!important}.dropdown-menu{background-color:#fff!important;border:1px solid #E0E0E0!important;border-radius:8px!important}.custom-menu{width:250px;border-radius:8px;padding:4px 0;background-color:#fff}.custom-menu.setting_dropdown_menu{width:270px}.custom-menu .dropdown-item{font-size:14px;padding:8px 14px;color:#1b1f22!important;font-weight:400}.add-column-spacing{padding-left:16px!important}.custom-menu.preset_dropdown_main .dropdown-item{height:33px!important}.custom-menu .dropdown-item:hover{background-color:#0084ff1a;border-radius:6px}.table-layout{right:0;background:#fff;border-radius:8px!important}.actions-dropdown,.table-layout,.custom-menu,.dropdown-menu{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;background-color:#fff}.action_dropdown_new_design{background:#fff;border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 2px 12px #00000014}.preview-box{width:40px;height:10px;border-radius:3px;background-color:transparent;transition:background-color .2s ease-in-out}.btn-check:checked+label .preview-box{background-color:var(--bs-primary)}.preview-box{width:40px;height:10px;border-radius:3px;border:2px solid transparent;transition:border-color .2s ease-in-out}#small:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#small:checked+label .preview-box{background-color:#fff!important}#medium:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#medium:checked+label .preview-box{background-color:#fff!important}#large:checked+label{border-color:#0084ff!important;background-color:#f5f5f5!important;color:#1b1f22!important}#large:checked+label .preview-box{background-color:#fff!important}.btn-check:checked+.btn{background-color:transparent!important;border-color:#007cf5!important}.layout-button{padding:8px 6px!important;width:82px;border-radius:8px!important;color:#1b1f22!important;height:60px;margin-bottom:0!important}.show-hide-table-label{position:sticky;top:0;z-index:99;background:#fff}.cursor-grap{cursor:grabbing}.pagination-container{display:flex;align-items:center;font-size:14px;color:#1b1f22}.pagination-container .page-info{padding:0 8px}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:absolute;inset:0 0 0 7px;z-index:1;font-size:14px;background:transparent}.page-size select{border:none;outline:none;box-shadow:none}.page-size .page_selection_dropdown{padding:3px 6px;border:1px solid #E0E0E0;border-radius:6px;background:#fff;font-size:13px;height:32px!important;width:73px;position:relative}.page-size .page_selection_dropdown .data-grid-svg-icon{right:4px;position:absolute}.page-buttons{display:flex;gap:4px;margin-left:auto;align-items:center}.page-buttons button{background:#fff;border-radius:4px;cursor:pointer;font-size:13px;line-height:1.2;border:0;color:#6a6b6d;width:32px;height:32px}.page-buttons button.active{font-weight:400;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#1b1f22;width:32px;height:32px}.page-buttons button:disabled{opacity:.5;cursor:not-allowed}.page-buttons span{color:#666}.page-size .separator{padding:0 10px;border-right:1px solid #E0E0E0}.page-size .separator .actions-dropdown{position:fixed;right:200px;z-index:1050;background-color:#fff}.fs-14px{font-size:14px}.fs-12px{font-size:12px!important}.save-preset-dropdown{background:#fff;color:#111!important;right:0;font-weight:400!important;text-align:left!important;max-width:250px!important;text-wrap:auto!important;top:14px;font-size:14px!important}.add-filter-button{height:28px;cursor:pointer;border-radius:4px;color:#1b1f22!important;font-weight:400!important;font-size:14px!important}.table-layout .dropdown-item{border-radius:0!important;font-size:14px;padding-block:6px!important}.table-layout .dropdown-item:hover{background-color:transparent!important}.filter-serach-inpt{max-height:230px!important;overflow:auto;scrollbar-width:thin;padding-top:4px;background-color:#f7f7f7;border-color:#dedede;border-radius:8px}.filter-serach-inpt .badge{color:#007cf5!important;background-color:#e6f2ff!important;border-radius:8px!important;padding:8px!important;font-weight:500!important;font-size:12px!important;height:24px!important}.filter-serach-inpt .badge ::ng-deep svg{cursor:pointer}.filter-serach-inpt .badge ::ng-deep svg:hover path{stroke:#040081!important}.filter-serach-inpt input{background-color:#f7f7f7;padding:0;height:26px;margin-top:-5px}.text-filter select{border:0}.text-filter select option{font-size:14px;font-weight:500}.text-filter select:focus{border:0}.text-filter input:focus,.text-filter select:focus{box-shadow:none!important}.active-filters{background-color:#1f24281a;white-space:nowrap;background:#f7f7f7;padding-inline:8px;height:28px;font-size:14px;font-weight:500;border-radius:8px;box-shadow:none;color:#1b1f22!important}.active-filters .header-tag{white-space:nowrap;font-size:14px;font-weight:400;color:#1b1f22;background:#ebebeb}.filter-tags .active{background-color:#e6f2ff}.filter-tags .active .header-tag{color:#007cf5!important}.table-cell{cursor:pointer;width:100%}.table-cell input:focus{outline:0!important;border:0!important;width:100%!important;box-shadow:none!important}.active-for-editing{outline:2.5px solid #007cf5!important;border-radius:4px;border:0!important;width:100%!important}.active-cell{outline:none!important;box-shadow:inset 0 0 0 1.5px #007cf5}span[inlineSVG]{width:16px;height:16px;display:inline-block}.cell .dropdown-menu{min-width:unset!important}.cell .dropdown-menu .item{transition:background-color .3s ease;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.cell .dropdown-menu .item:hover{background-color:#f0f8ff}.cell .cell-editin-dropdown{scrollbar-width:thin!important;-webkit-user-select:none;user-select:none}.fw-semibold{font-weight:500!important}:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg,:host ::ng-deep .three-dots-col-menu span:not(.no-stroke) svg path{stroke:#000!important}:host ::ng-deep .ascendingAppliedIcon svg{stroke:#006fd6}.fs-7{font-size:12px!important}.fs-8{font-size:10px!important}.all-filters-reset-button:hover{opacity:.7}.full-text-box{background:#fff;position:relative;display:flex;align-items:center;justify-content:center;z-index:1050;border:1px solid #dedede;border-radius:8px;padding:12px 14px;box-shadow:0 2px 8px #00000026}.full-text-content{border-radius:8px;max-height:70vh;overflow:auto;white-space:pre-wrap}.pic{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}.pic-comb2{background-color:#fbe7bf;color:#fd7f31}.pic-comb1{background-color:#d9ecbf;color:#65b500}.pic-comb4{background-color:#fdd3d7;color:#f64e60}.w-40px{width:40px}.h-40px{height:40px}.pic{border-radius:50%;overflow:hidden}.image-placeholder .pic{font-size:14px;font-weight:600;letter-spacing:.5px}.header-cell{font-weight:600}.header-cell,.cell{box-sizing:border-box}.transparent-border-right{border-right:1px solid transparent!important}.resizing-highlight{position:relative}.resizing-highlight:before{content:\"\";position:absolute;top:-1px;right:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right{position:relative}.resizing-highlight-right:before{content:\"\";position:absolute;top:-1px;left:-1px;width:2px;height:calc(100% + 2px);background:#7cb9f6;z-index:1000;pointer-events:none}.resizing-highlight-right:first-child{width:1px}.editable-header{border-bottom:1px dashed #666}.muted-text{color:#727272!important}.context-menu{position:fixed;display:none;background:#fff;border:1px solid #dcdcdc;box-shadow:#0000003d 0 3px 8px;z-index:1000;width:150px;border-radius:8px;font-weight:600}.context-menu.show{display:block}.context-menu ul{list-style:none;margin:0;padding:0}.context-menu li{padding:10px;cursor:pointer;color:#99a1b7}.context-menu li ::ng-deep svg{width:16px;height:16px;display:inline-block;color:#727272}.context-menu li ::ng-deep svg path{stroke:#727272}.context-menu li:hover{background-color:#f0f0f5!important}.invisible{visibility:hidden!important}.fw-500{font-weight:500!important}.taskbar{position:fixed;display:flex;justify-content:center;z-index:1000}.taskbar .action-btn{transition:opacity text-decoration .3s ease}.taskbar .action-btn:hover{text-decoration:underline;opacity:.8}.taskbar .delete{color:#ea0000}.selected-count,.action-btn,.dropdown-content a{font-weight:500;font-size:14px}.selected-rows-action-bar{background-color:#1a1a1a;color:#fff;padding:4px 24px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 -4px 12px #00000026}.selected-rows-action-bar .btn:active,.selected-rows-action-bar .btn:focus{outline:0!important;border:0!important;border-color:transparent!important}.selected-rows-action-bar .action-btn{color:#fff!important}.cell .dropdown-menu,.cell .form-select,.cell input{color:#000!important}.cell input::placeholder{color:#727272!important}.cell .badge{border-radius:4px!important;height:24px;align-items:center;width:-moz-fit-content;width:fit-content}.cell .badge-danger{color:#ea5353!important;border:1px solid #ea5353!important;background-color:#ff00000d!important}.cell .badge-success{background-color:#84ca8130!important;border:1.5px solid rgb(70,227,114)!important;color:#46e372!important}.cell .badge-warning{background-color:#fff3dc!important;color:orange!important;border:1px solid #ffa000!important}.cell .badge-info{color:#00bad1;background-color:#e8fbfd;border:1px solid #00bad1}.cell .badge-secondary{color:#6c757d;background-color:#f1f3f5;border:1px solid #6c757d}.header-tag ::ng-deep svg path{stroke:#727272!important}.cross-secondary:hover ::ng-deep svg path{stroke:#000!important}.disable-sorting{pointer-events:none;opacity:.5}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{background-color:transparent!important}input.is-invalid:focus{border:2.5px solid red!important;outline:none}.table-cell input.is-invalid:focus{border:2.5px solid red!important;outline-color:red!important;outline:none!important;box-shadow:none!important}.active-for-editing:has(input.is-invalid:focus){outline:none!important;box-shadow:none!important;border:0!important}.selected-cell,.row-selected{background-color:#c2e0fe}.first-row-selected{border-top:2px solid #2196f3!important}.last-row-selected{border-bottom:2px solid #2196f3!important}.left-selection-border{border-left:2px solid #2196f3!important}.s-no{font-size:14px;font-weight:500}.top-border{border-top:2px solid #2196f3!important}.bottom-border{border-bottom:2px solid #2196f3!important}.left-border{border-left:2px solid #2196f3!important}.border-left{border-left:1px solid #E0E0E0}.right-border{border-right:2px solid #2196f3!important}.top-left-corner{border-top-left-radius:4px}.top-right-corner{border-top-right-radius:4px}.bottom-left-corner{border-bottom-left-radius:4px}.bottom-right-corner{border-bottom-right-radius:4px}.flash-bg{animation:flashAnim 1000s ease}@keyframes flashAnim{0%{background-color:#48a2fc}50%{background-color:#c2e0fe}to{background-color:#c2e0fe}}.cut-flash-bg{animation:cut-flash .8s ease}@keyframes cut-flash{0%{background-color:#f006}50%{background-color:#f00c}to{background-color:#c2e0fe}}.accordion-details .center-section .table .tbody .tr:hover .td{background-color:#f0f8ff!important}.editing-dropdown-search-input input:focus{border:1px solid #86b7fe!important}.nested-table .thead{position:sticky;top:0}.dropdown-wrapper{position:relative;display:inline-block}.btn-icon{background:transparent;border:0;padding:.25rem .5rem;cursor:pointer}.custom-dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;list-style:none;margin:0;padding:.25rem 0;background:#fff!important;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 18px #00000014;border-radius:.35rem;z-index:1200}.custom-dropdown-menu .dropdown-item{display:block;width:100%;padding:.5rem 1rem;text-align:left;background:transparent;border:none}.custom-dropdown-menu .dropdown-item:hover{background:#00000008}.confirm-block{padding:0}.center-nested-table .tr:hover .td{background-color:#f0f8ff}.table ::ng-deep .cdk-drag-placeholder{background-color:#fff!important}.assets-pic{border-radius:8px!important}.fullscreen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}.fullscreen-img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 15px #00000080}.position-sticky{z-index:2}.viewport{display:block!important;overflow:visible!important}.nested-table ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:0!important}.nested-table ::ng-deep .cdk-virtual-scroll-viewport{overflow-x:hidden!important}.disabled-search-input{background-color:#f5f5f5;cursor:pointer!important}.right-click-menu-icons ::ng-deep svg path{stroke-width:2!important}.loader{animation:rotate 1s infinite;height:50px;width:50px}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#fff;box-shadow:30px 0 #ff3d00;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#ff3d00;box-shadow:30px 0 #fff}@keyframes rotate{0%{transform:rotate(0) scale(.8)}50%{transform:rotate(360deg) scale(1.2)}to{transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #ff3d00}50%{box-shadow:0 0 #ff3d00;margin-bottom:0;transform:translate(15px,15px)}to{box-shadow:30px 0 #ff3d00;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #fff}50%{box-shadow:0 0 #fff;margin-top:-20px;transform:translate(15px,15px)}to{box-shadow:30px 0 #fff;margin-top:0}}.rows-grouping-top-container ::ng-deep .cdk-drag-placeholder{opacity:.7!important}.action-button{background-color:#6f61cf!important;color:#fff!important;border-radius:6px!important;font-weight:500!important;margin-top:-4px}.action-button:hover{background-color:#6a5fb3!important}.action-buttons-row .button{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;border-radius:6px;height:34px;padding:0 10px;white-space:nowrap;transition:max-width .4s ease,background-color .3s ease;max-width:40px;background-color:transparent;border:1px solid #6F61CF}.action-buttons-row .button .label-hidden{opacity:0;margin-left:8px;transition:opacity .3s ease;pointer-events:none;display:none}.action-buttons-row .button:hover{max-width:200px;background-color:#6f61cf}.action-buttons-row .button:hover .label-hidden{opacity:1;pointer-events:auto;margin-left:8px!important;display:block}.action-buttons-row ::ng-deep .button .svg-icon svg path{stroke:#6f61cf;transition:fill .3s ease,stroke .3s ease}.action-buttons-row ::ng-deep .button:hover .svg-icon svg path{stroke:#fff!important}::ng-deep .nav-tabs .nav-link{border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important}::ng-deep .nav-tabs .nav-link:hover,::ng-deep .nav-tabs .nav-link:focus{border:none!important;border-bottom:2px solid transparent!important;outline:none!important;background:transparent!important}::ng-deep .nav-tabs .nav-link.active{border:none!important;border-bottom:2px solid var(--bs-primary)!important;background:transparent!important;color:var(--bs-primary)!important}.open-top{top:-150%!important}.muted{color:#7a7a7a!important}.item-title{font-size:1.2em;font-weight:700;margin-bottom:10px}.item-image{width:100%;border-radius:10px}.comment{display:flex;align-items:center;margin-bottom:10px}.comment-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px}.comment-author{font-weight:700}.comment-content{font-size:.9em;line-height:1.4}.comment-timestamp{font-size:.8em;color:#888;margin-left:auto}.des_low{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:242px;display:block;text-transform:capitalize!important}.firstDiv{word-break:break-word;overflow-wrap:break-word;white-space:normal}.container{display:flex;flex-wrap:wrap;margin:20px;gap:20px;background-color:#fff;padding:20px;border-radius:10px}.item{width:calc(33.33% - 20px);background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px #0000001a}.forCommentImg{width:70px;border-radius:16px;margin:8px 0;cursor:pointer}.image-modal img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 4px 10px #00000080}.full-image-modal{position:fixed;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.full-image-modal .full-image{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 0 10px #fff3}.item-content{font-size:14px;line-height:1.5;max-height:220px;overflow-y:auto}.image-modal.full-image-modal{position:fixed;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:9999;overflow:hidden;cursor:zoom-out}.image-modal.full-image-modal img{border-radius:8px;box-shadow:0 4px 20px #0006;object-fit:contain;transition:transform .3s ease}.image-modal.full-image-modal img:hover{transform:scale(1.02)}::ng-deep .custom-overlay-wrapper .custom-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999}::ng-deep .custom-overlay-wrapper .custom-modal{background:#fff;border-radius:12px;box-shadow:0 8px 25px #0003;width:360px;max-width:90%;padding:24px;text-align:center;animation:fadeInScale .25s ease}::ng-deep .custom-overlay-wrapper .custom-modal-body .modal-message{font-size:16px;margin-bottom:20px;color:#333}::ng-deep .custom-overlay-wrapper .modal-actions{display:flex;justify-content:center;gap:12px}::ng-deep .custom-overlay-wrapper .modal-actions button{min-width:90px;padding:8px 14px;border-radius:6px;border:none;font-weight:500;cursor:pointer;transition:background-color .2s ease}::ng-deep .custom-overlay-wrapper .btn-confirm{background-color:#007bff;color:#fff}::ng-deep .custom-overlay-wrapper .btn-confirm:hover{background-color:#0069d9}::ng-deep .custom-overlay-wrapper .btn-cancel{background-color:#e4e4e4;color:#333}::ng-deep .custom-overlay-wrapper .btn-cancel:hover{background-color:#d6d6d6}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.clear-btn{background:linear-gradient(135deg,#f53545,#f53545);border:none;color:#fff;font-size:13px;padding:3px 6px;border-radius:20px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #ff5f6d66;position:relative;bottom:4px}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px #ff5f6d99;background:linear-gradient(135deg,#f53545,#f53545)}.clear-btn i{font-size:16px;vertical-align:middle}.cell-editin-dropdown .deopdown-item{width:100%!important;box-shadow:none!important;border-radius:4px;cursor:pointer;padding-block:8px!important}.cell-editin-dropdown .deopdown-item:hover{background-color:#f1f1f1}.card-outer{border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:16px;padding:16px;background-color:#fff}.consumerDropdownButton{height:32px;display:flex;align-items:center}a.grid-header-icon:hover{background:#e0e0e0;width:32px;height:32px;border-radius:8px;transition:none}a.grid-header-icon{width:32px;height:32px}.action-buttons-row.active a.grid-header-icon,a.grid-header-icon.show{background-color:#e0e0e0;border-radius:8px}.data-grid-svg-icon.setting_dropdown{width:32px!important;height:32px!important}.new_design_dropdown .dropdown_main_button{color:#6a6b6d;text-decoration:none}.new_design_dropdown ul{border-radius:8px!important;border:1px solid #E0E0E0!important;box-shadow:0 0 12px #00000014!important}.new_design_dropdown ul li{color:#1b1f22!important;height:32px}.new_design_dropdown ul li:hover{background:#0084ff1a!important}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg{height:inherit;border-radius:6px;padding:6px 10px;color:#1b1f22!important;font-size:14px;font-weight:400}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg .new_old_filter{display:inline-block;width:24px;height:24px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg label,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.newest,.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg span.oldest{padding-left:5px}.new_design_dropdown ul li a.dropdown-item.hover_dropdown_bg:hover{background-color:transparent!important}.new_design_dropdown ul li .action_dropdown{padding:6px 16px}.new_design_dropdown ul li.active-filter,.active-filter{background-color:#0084ff1a}.active-filter-all{background:#ebebeb!important}.unfilfilled_dropdown_menu.actions_dropdown_menu{width:210px!important}.consumer_buttons.unfilfilled_dropdown_menu{left:0!important}.filter_dropdown_main .dropdown-item,.actions-dropdown.unfilfilled_dropdown_main .dropdown-item{padding:0 9px!important}.actions-dropdown.UnpaidDropdown{left:150px!important}.new_design_dropdown.hide_arrow .dropdown-toggle:after{display:none}.new_design_dropdown.hide_arrow ul li a label{line-height:1}.dropdown_main_button{border-radius:8px;transition:none;padding:5px 10px;color:#6a6b6d;cursor:pointer}.dropdown_main_button:hover,.dropdown_main_button.show{background:#e0e0e0}.sorting_icon_input{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.sorting_dropdown .column-menu-item{padding:0 6px!important;color:#1b1f22!important;font-size:14px!important;font-weight:400!important}.greenBgHover{background:#0084ff1a!important;border-radius:6px!important}.cancel_btn_new{font-weight:400!important;font-size:14px!important;color:#1b1f22!important;border:none;box-shadow:none;background:transparent;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center}.primary_btn_new{font-weight:500!important;font-size:14px!important;color:#fff!important;background:#0084ff;border:none;box-shadow:none;height:32px;padding:3px 14px;display:flex;align-items:center;justify-content:center;border-radius:6px}.dropdown_outer{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:8px;font-size:14px}.text_common_14px{font-size:14px;font-weight:400;color:#1b1f22}.text_common_16px{font-size:16px;font-weight:500;color:#1b1f22}.page_refresh{font-size:13px;font-weight:400;color:#6a6b6d}.d-flex{display:flex!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.w-100{width:100%!important}.h-100{height:100%!important}.flex-column{flex-direction:column!important}.checkboxes_sorting_dropdown{width:200px!important}\n"] }]
|
|
6339
6353
|
}], ctorParameters: function () { return [{ type: SplitColumnsService }, { type: i0.ChangeDetectorRef }, { type: CommonService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: CopyServiceService }, { type: i0.Renderer2 }, { type: i4.DomSanitizer }, { type: ExportService }, { type: i6.DatePipe }, { type: FormatCurrencyPipe }]; }, propDecorators: { rowAnimation: [{
|
|
6340
6354
|
type: Input
|
|
6341
6355
|
}], paginationConfig: [{
|
|
@@ -6500,6 +6514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
6500
6514
|
type: Input
|
|
6501
6515
|
}], resetAllFilters: [{
|
|
6502
6516
|
type: Input
|
|
6517
|
+
}], pageSizeOptions: [{
|
|
6518
|
+
type: Input
|
|
6503
6519
|
}], columnThreedotsMunuConfig: [{
|
|
6504
6520
|
type: Input
|
|
6505
6521
|
}], cellHosts: [{
|
|
@@ -6585,8 +6601,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
6585
6601
|
}], centerScrollableBody: [{
|
|
6586
6602
|
type: ViewChild,
|
|
6587
6603
|
args: ['centerScrollableBody']
|
|
6588
|
-
}], pageSizeOptions: [{
|
|
6589
|
-
type: Input
|
|
6590
6604
|
}], filterMenueSearchInput: [{
|
|
6591
6605
|
type: ViewChild,
|
|
6592
6606
|
args: ['filterMenueSearchInput']
|